들어가기에 앞서
안녕하세요! 저는 2020년부터 웹에 대한 공부를 시작한 대학원생입니다. 웹을 공부하기 시작했을 당시에는 직접 웹사이트도 만들어보고, 해커톤도 나가는 등의 활동들을 했었지만 대학원 입시를 준비하면서 웹에 대한 관심이 시들시들해졌습니다. 올해 대학원에 들어오고 나서 전공 공부에 대한 연장선 겸 웹에 대한 공부를 이어나가고자 깃헙 블로그를 개설하게 되었는데 우연치 않게 조코딩님의 5주 완성 웹개발 1주차 영상을 보게 되었습니다. 평소 조코딩님 영상을 자주 시청하여 인공지능 동물상 테스트 영상을 보고 Dog classifier라는 웹 서비스를 만들어봤을 정도로 애청자입니다. 이번 기회에 조코딩님의 강의 영상 인용을 통해 웹 개발에 대한 복습과 더불어 처음 웹 개발을 접하시는 분들에게 강의를 보며 참고할 수 있는 자료를 포스트로 만들어 포스팅해보려고 합니다. 많이 부족하지만 좋게 봐주시면 감사하겠습니다:)
조코딩님 영상의 지금 코딩하기 좋은 시대인 이유, 코딩 분야 소개, 개발 환경 세팅은 본 포스팅에서 다루지 않았으니 언급된 부분은 영상을 통해서 학습해 주시면 감사하겠습니다:)
코딩이란?
Code(명령어) + ing
코딩이란 쉽게 말해 컴퓨터에게 내릴 명령어를 작성하는 행위를 말합니다.
프로그래밍 언어, 알고리즘이란?
하지만 컴퓨터는 사람이 쓰는 언어를 해석하지 못합니다. 예를 들어 우리가 한국어로 컴퓨터야~ 내 일 좀 대신해줘라는 명령어를 작성하여 컴퓨터에게 명령을 내렸다면 컴퓨터는 이 명령을 알아듣지 못합니다. 컴퓨터는 오직 0과 1로 이루어진 이진수만 이해할 수 있습니다. 그렇기 때문에 우리는 컴퓨터야~ 내 일 좀 대신해줘라는 명령어를 0과 1로 이루어진 이진수로 변환해서 컴퓨터에게 명령을 내려야 합니다.
그림 속 한국어는 프로그래밍 언어를 뜻하고, 번역기는 컴파일러를 뜻합니다. 다시 말해, 코딩은 프로그래밍 언어로 컴퓨터에게 내릴 명령어를 작성하는 행위이고, 컴파일러를 통해 프로그래밍 언어로 작성된 코드를 컴퓨터가 이해할 수 있는 기계어로 번역할 수 있습니다.
프로그래밍 언어는 고급 언어와 저급 언어로 나눌 수 있습니다.
그림 출처: 네이버 블로그
상대적으로 사람이 쓰는 언어에 비슷할수록 고급 언어로 분류할 수 있고, 기계어에 비슷할수록 저급 언어로 분류할 수 있습니다.
또한, 이렇게 우리가 컴퓨터야~ 내 일 좀 대신해줘라는 명령을 프로그래밍 언어로 작성했어도 또 하나의 문제가 발생합니다. 컴퓨터가 우리가 내린 명령을 수행하기 위해서는 논리적 명령, 즉 알고리즘이 필요합니다. 우리는 언제까지 할건지, 어떤 일을 해야되는지, 어떻게 해야되는지 등 컴퓨터에게 좀 더 구체적이고 논리적인 명령을 내려야 합니다.
다음 링크의 영상은 샌드위치 코딩이라는 영상으로 샌드위치를 만드는 과정을 구체적이고 논리적으로 아이들한테 설명해 보도록 하는 영상입니다. 우리는 이처럼 구체적이고 논리적인 알고리즘을 통해 컴퓨터에게 명령을 내릴 수 있습니다.
HTML
HTML은 Hyper Text Markup Language의 줄임말로 태그를 이용하여 웹 페이지의 뼈대를 만들어주는 마크업 언어입니다.
1
<태그이름>내용</태그이름>
HTML에서 태그는 담은 내용이 웹 페이지에서 어떠한 역할을 할지 지정해 줍니다. 다음은 주로 쓰이는 몇 가지 태그들을 소개해드리겠습니다.
본문 제목, 내용 태그
1
2
3
4
5
6
7
<h1>제목1입니다.</h1>
<h2>제목2입니다.</h2>
<h3>제목3입니다.</h3>
<h4>제목4입니다.</h4>
<h5>제목5입니다.</h5>
<h6>제목6입니다.</h6>
<p>본문입니다.</p>
제목1입니다.
제목2입니다.
제목3입니다.
제목4입니다.
제목5입니다.
제목6입니다.
본문입니다.
이처럼 h1~6, p 태그들은 본문의 제목, 내용을 지정해 줍니다.
이미지 태그
1
<img alt="낮잠자는 거위" src="https://user-images.githubusercontent.com/64826387/180761565-8aa04f19-711d-43b6-843c-e1abe4b4a919.jpg">
다음은 img 태그입니다. img 태그는 앞서 소개한 태그들과는 달리 닫는 태그 없이 여는 태그만 있는 빈 태그, 즉 empty tag입니다.
또한, 앞서 소개한 태그들과는 다른 차이점이 하나 더 있습니다. 바로 alt, src 등의 속성이 추가되었다는 점입니다. HTML에서는 여는 태그에 속성을 추가하여 태그의 기능을 수정 혹은 추가할 수 있습니다.
1
<태그이름 속성="값">내용</태그이름>
img 태그에서 alt 속성은 이미지를 불러오지 못했을때 대체 텍스트를 지정해 줍니다. src 속성은 이미지의 경로를 지정해 줍니다. 본문의 거위 사진은 제가 사진을 직접 찍어 깃헙에 업로드 후 해당 이미지의 웹 페이지 url을 src 속성으로 지정해줬습니다. 이처럼 img 태그의 src 속성은 이미지의 웹 페이지 url로 지정하거나 웹 사이트에 배포할 파일로 이미지를 직접 업로드하여 경로를 입력하는 방식으로 지정해줄 수 있습니다.
입력창 태그
1
2
<input placeholder="값을 입력해주세요."/>
<input type="button" value="제출"/>
다음은 input 태그입니다. input 태그의 placeholder 속성은 해당 입력창에 들어갈 내용의 힌트를 지정해 줍니다. type 속성은 해당 입력창의 타입을 지정해 줍니다. value 속성은 해당 입력창의 값을 지정해 줍니다.
링크 태그
1
<a href="https://www.youtube.com/c/%EC%A1%B0%EC%BD%94%EB%94%A9JoCoding">조코딩 JoCoding 유튜브 채널</a>
다음은 a 태그입니다. a 태그의 href 속성은 웹 페이지의 url을 입력하여 태그 안의 내용을 href 웹 페이지의 하이퍼 링크로 지정해 줍니다.
주석
또한 HTML에서는 주석을 통해 웹 페이지에는 드러나지 않지만 개발자들이 해당 코드에 대한 설명을 적어놓거나 코드를 보는 사람들에게 하고 싶은 말을 적어놓을 수 있습니다.
1
2
3
4
5
<!-- 제목1 -->
<h1>사람을 화나게 하는 두 가지 방법</h1>
<!-- 본문 -->
<p>첫째는 말을 하다가 마는 것이고,</p>
<!-- 이 내용은 퍼가지 말아주세요! -->
사람을 화나게 하는 두 가지 방법
첫째는 말을 하다가 마는 것이고,
다음과 같이 주석 안의 내용은 웹 페이지에 표시되지 않습니다.
이 외에도 다양한 태그들이 HTML에 존재하는데 다른 태그들이 궁금하신 분들은 다음의 블로그를 참고해주시기 바랍니다.
Deploy (웹 사이트 배포)
그러면 여태까지 배운 내용들을 활용하여 웹 페이지를 만들어 실제 url을 가진 웹 사이트로 배포해보겠습니다. 배포에는 Netlify를 사용하였고, 템플릿은 Free CSS를 사용하였습니다. 실습에는 다음과 같은 템플릿을 사용하였습니다.
위 이미지를 클릭하시면 해당 템플릿을 다운받을 수 있는 사이트로 이동합니다.
Netlify를 통해 웹 사이트를 배포하는 방법은 다음과 같습니다.
- Netlify 사이트에 로그인을 합니다.
- 상단의 메뉴 중 Sites에 들어갑니다.
- 드랍박스에
index.html이 포함된 폴더 (위의 템플릿으로 진행하셨을 경우public_html폴더)를 드래그 앤 드랍해줍니다. - 웹 사이트 배포가 완료되었다면 Site settings-Change site name을 통해 도메인을 커스터마이징할 수 있습니다.
- 웹 사이트 수정을 원하시는 경우, 배포한 홈페이지 메뉴의 Deploys에 들어가 드랍박스에 내용이 수정된 폴더를 드래그 앤 드랍해줍니다.
실제 배포한 웹 사이트. 위 이미지를 클릭하시면 해당 웹 사이트로 이동합니다.
마치며
제가 배포한 웹 사이트의 경우 실습에 사용된 템플릿이 커스터마이징할 수 있는 부분이 너무 많아 웹 사이트의 header 부분만 커스터마이징 해봤습니다. 본문의 태그들을 이해하셨다면 여러분들도 제가 한 것 이상으로 커스터마이징하실 수 있습니다🔥🚀 긴 글 읽어주셔서 정말 감사합니다:)