안녕하세요. Codinglee입니다.
이전 시간까지 챗지피티를 활용해서 계산기 웹 프로그래밍 을 완료했습니다.
물론, 많이 부족한 계산기였죠? 완성은 각자의 몫으로 남겨뒀습니다.
아무 것도 몰라도 챗지피티가 코드를 만들어주고 VSC에 파일을 만들고 코드를 붙여넣기만해도
웹 프로그램이 뚝딱 만들어졌죠?
만들어진 프로그램을 netlify에 업로드하니 누구나 접속가능하게 배포도 쉬웠고요…
시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2.챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3.챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4.챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
이렇게 챗지피티를 활용해서 쉽게 만들 수 있는 것은 사실이지만,
당연히 프로그래밍에 대해 좀 더 알고, 코드를 읽고 이해할 수 있으면
훨씬 더 좋은 프로그램, 더 복잡한 프로그램을 혼자의 힘으로 만들 수 있을 거라 생각합니다.
따라서 이번 포스트부터는 웹 프로그래밍 의 기본부터 알아보려 합니다.
프로그래밍과 관련된 용어, 코드의 원리, 프로그래밍 구조, 함수 등등
프로그래밍과 관련된 용어, 웹의 원리, 브라우저의 원리 정도 이해하시면 좋겠습니다.
왕초보도 이해할 수 있도록 쉽게 챗지피티와 함께 과정을 준비해 보았습니다.
웹 프로그래밍의 첫 시간은 HTML, CSS, JAVASCRIPT란 무엇인가? 입니다.
어디서 많이 본 영어죠? 우리가 VSC에서 폴더 안에 만들었던 파일의 확장자입니다.
파일의 확장자는 왜 이렇게 써야만 하는지…
이 파일들이 어떤 역할을 하는지 한번 챗지피티와 함께 알아보겠습니다.
1. HTML
– HTML은 뭐야?
처음으로 HTML이 무엇인지에 대해 알아보겠습니다.
이것 역시 챗지피티에 물어보겠습니다.
안녕, 넌 이제부터 나에게 웹 프로그래밍 에 대해 알려줘야해.
난 컴퓨터를 잘 몰라.
그래서 유치원생이나 초등학생도 이해할 정도로 쉽게 설명해주면 좋겠어. 알겠지?
HTML이 뭐야?
<ChatGPT-4o 답변>
안녕! 웹 프로그래밍에 대해 아주 쉽게 설명해줄게.
HTML은 웹사이트를 만드는 데 꼭 필요한 언어야. "HTML"은 "HyperText Markup Language"의 줄임말인데, 쉽게 말하면 웹페이지의 뼈대를 만드는 언어야.
마치 우리가 집을 지을 때 벽, 창문, 문을 만들잖아? HTML은 그런 것처럼 웹사이트에 제목, 글자, 사진, 버튼 같은 걸 배치해줘. 예를 들어, 웹사이트에서 "안녕하세요!"라고 글자가 나오게 하고 싶다면, HTML을 써서 그 글자를 넣는 거야.
웹페이지가 우리 눈에 보이도록 어떤 구조로 나타낼지를 정해주는 역할을 하지.
이해됐어? :)와우. 정말 쉽게 설명해주네요.
HTML은 GPT가 설명한 대로 HyperText Markup Language의 대문자 글자를 따서 만들어졌습니다.
이름에서도 알 수 있듯이, HTML은 프로그래밍 언어가 아닙니다.
화면에 보여지는 요소들을 배치하는 언어입니다.
마치 우리가 한글프로그램에서 문서를 작성할 때 처럼 글을 넣을지, 표를 넣을지, 그림을 넣을지 결정할 때 사용합니다. 요즘 많이 사용하시는 노션과 같은 메모 서비스도 Markup Language라 부릅니다.
– 하이퍼 텍스트란? (HyperText)
그러면 HyperText는 무엇일까요? Hyper Link라는 말은 들어보셨나요?
파워포인트에서 문서를 만들고, 다른 페이지로 보내거나, 인터넷 창을 열고 싶을 때 하이퍼링크를 사용합니다.
파워포인트 메뉴에서 하이퍼링크가 보이시나요?
우리가 인터넷을 사용할 때 텍스트를 클릭하면 다른 페이지로 이동하는 게 있죠?
그게 바로 하이퍼 텍스트입니다.
인터넷이 처음 발명되고 사용 될 때로 거슬러 올라가보면 첫 시작이 문서와 문서, 컴퓨터와 컴퓨터를 연결해주는 것이었습니다. 따라서 문서와 문서를 클릭만으로 연결시키기 위해서 등장한 언어가 하이퍼텍스트를 가진 마크업언어라는 것이죠. 즉 HTML입니다.
웹이 처음 개발되고부터 지금까지 쭈욱 계속 사용되고 있는 언어입니다.
짧게 정리하면
HTML은 문서와 문서를 연결해주는 기능을 가지고 웹페이지에 필요한 요소를 배치할 수 있는 언어입니다.
2. CSS는 뭐야?
그렇다면 다음으로 CSS는 뭔지 챗지피티에게 물어보겠습니다.
다음으로 CSS에 대해 알려줘.
<ChatGPT-4o 답변>
좋아, 이번엔 CSS에 대해 알려줄게!
CSS는 Cascading Style Sheets의 줄임말이야. 쉽게 말하면, HTML로 만든 웹페이지를 예쁘게 꾸며주는 도구라고 생각하면 돼.
예를 들어, HTML로 글자를 만들었는데 그 글자가 너무 작아서 크게 보이게 하고 싶어. 또는 배경색을 바꿔서 더 멋지게 만들고 싶을 때, CSS가 필요한 거야.
마치 그림을 그린 후에 색칠을 하거나, 옷을 입혀서 더 멋지게 보이게 하는 것처럼, CSS는 웹페이지에 색깔, 크기, 위치 같은 스타일을 입혀줘.
간단하게 말하면:
HTML은 뼈대
CSS는 꾸미기
이렇게 생각하면 돼! :)
이해됐지?역시 CSS도 쉽게 설명해주고 있습니다.
CSS(Cascading Style Sheets)는 이름에서도 알 수 있지만 스타일을 꾸며주는 도구입니다.
간단하게는 글자 색, 글자크기, 정렬 방식을 정할 수도 있고 요소를 화면에 어떻게 배치할지도 정합니다.
온라인 쇼핑을 하다보면 구매버튼이 따라다니는 경우가 있죠?
아니면 아무리 스크롤을 내려도 따라다니는 요소가 있죠? 이런 것을 CSS로 만들 수 있습니다.
챗지피티의 마지막 문구 HTML은 뼈대, CSS는 꾸미기라는 말이 정확하네요.
참고로 CSS와 연관된 Sass와 SCSS라는 것도 있습니다.
초보라면 몰라도 됩니다. 하지만 궁금하신 분들은 챗지피티에 한 번 물어보세요^^
3. JAVASCRIPT는 뭐야?
마지막으로 JavaScript입니다. 드디어 프로그래밍 언어가 등장했습니다.
이것 역시 챗지피티에게 물어보겠습니다.
마지막으로 javascript에 대해 알려줘.
<ChatGPT-4o 답변>
좋아, 이제 JavaScript에 대해 쉽게 설명해줄게!
JavaScript는 웹페이지를 움직이게 만드는 마법 같은 언어야. HTML이 뼈대이고, CSS가 그 뼈대를 꾸며준다면, JavaScript는 웹페이지가 살아서 움직일 수 있게 해줘.
예를 들어, 버튼을 클릭했을 때 색이 변하거나, 어떤 글자가 사라졌다가 다시 나타나게 하고 싶을 때, JavaScript가 필요한 거야.
마치 장난감 로봇이 있는데, 버튼을 누르면 팔이 움직이거나 소리가 나는 것처럼, JavaScript는 웹사이트에 재미있는 동작을 넣어줘.
쉽게 정리하면:
HTML은 뼈대
CSS는 꾸미기
JavaScript는 움직이기
이렇게 생각하면 돼! 이제 웹사이트가 움직이고 상호작용할 수 있게 만드는 걸 알았으니, 무슨 일이든 가능하겠지? :)javascript는 위에서도 말했듯 프로그래밍 언어입니다.
프로그래밍 언어가 가져야하는 구조를 가지고 있습니다.
기본적인 구조는 순차, 선택, 반복 구조입니다.
세상의 모든 프로그램은 위 세 가지 구조로 모두 만들어졌습니다. 아주 단순하죠?
구조에 대해서는 다음에 알아보기로 하죠.
javascript의 역할은 동작하게 만드는 것입니다.
만약, javascript가 없다면 웹 페이지가 정적일 것입니다.
요소가 예쁘게 배치되어 있고 변하지 않죠.
javascript가 추가된다면 우리가 만든 계산기처럼 버튼을 눌렀을 때 소리가 난다던지,
버튼을 눌렀을 때 숫자가 창에 표시된다던지 동적으로 조작할 수 있게 됩니다.
이걸 GPT는 움직이기로 표현했네요.
이제 HTML, CSS, Javascript가 무엇인지 알겠나요?
더 궁금한 내용은 챗지피티와 대화하면서 알아가면 좋겠습니다.
그래도 답이 안나온다면 댓글 부탁드립니다. 다시 설명드리도록 하겠습니다.
이번 포스팅에서는 웹 프로그래밍의 가장 기본인 HTML, CSS, JAVASCRIPT에 대해 알아보았습니다.
다음 포스트에서는 웹브라우저에 대해서, 사이트 주소에 대해서, 네트워크에 대해서 알아보겠습니다.
앞으로도 왕초보도 이해할 수 있게 쉽게 설명해보겠습니다.
감사합니다. 지금까지 Codinglee였습니다.
2024.10.08.(화) 평창리 집에서 씀.
