생활코딩의 HTML & Internet 수업의 목표는 3가지로 이루어져 있다.
- 기본적인 수준의 웹사이트를 HTML으로 만들어보면서 HTML 익히기.
- 자신이 만든 웹사이트를 서버를 이용하여 웹에다 올리고, 인터넷의 동작원리 익히기.
- 초보 개발자로서 가져야 할 기본적인 자세 익히기.
사실 세번째 목표가 이 수업에서 가장 중요하긴 하지만 나는 여기서 지식적인 측면을 다룰 예정이다. 다시 말하면 첫번째, 두번째에 해당하는 부분에 대해서 나름대로 정리한 글을 쓸 것이다. 전문가가 아니기 때문에, 내가 쓴 글이 오류가 있을 수도 있지만, 최대한 오류가 나지 않도록 신경을 썼다. 그와 동시에 나처럼 웹프로그래밍 분야에 갓 입문을 한 사람들의 이해를 돕기 위해서 쉬운 말을 쓰려고 노력했다. 글에 대한 피드백 혹은 내가 추가적으로 알면 좋을 정보에 대해서 언급을 해주면 너무 고마울 것 같다.
목차
1. 웹페이지를 제작할 때 필요한 도구 2가지: HTML편집기 & 웹 브라우저가 필요한 이유.
2. HTML은 사실 프로그래밍 언어가 아니다: 프로그래밍 언어 VS 마크업 언어
1. 웹페이지를 제작할 때 필요한 도구 2가지: HTML 편집기 & 웹 브라우저가 필요한 이유.
우린 이렇게 생긴 웹페이지를 하나 만들 것이다. 우리가 흔히 볼 수 있는 웹페이지에 비해선 정말 간단해 보이지만, 간단해 보이는 만큼 기본적이다. 그만큼 핵심적이고 중요한 내용을 다룰 수 밖에 없다. 일단 웹페이지를 디자인하기 위해서는 어떻게 해야 할까? 도구가 뭘까? 이게 문제다. 웹페이지를 디자인하기 위해서는? 기본적으로 HTML 편집기(생활코딩에선 ATOM을 사용)와 웹 브라우저가(Chrome, Internet Explorer 등을 사용) 필요하다. 근데 왜?
생각을 해보자 우리는 HTML(HyperText Markup Language)이라는 언어로 웹페이지를 제작해야 한다. HTML은 영어를 활용해서 만든 어떤 새로운 언어이다. 근데 사실 기계는 이 말을 알아듣지 못한다. 기계는 기계만의 언어로만 소통한다. 그리고 그걸 토대로 우리에게 웹페이지 화면을 제공한다. 여기서 궁금한 점이 하나 생긴다.
우리가 만들 문서를 한번 살펴보자. 난 대충 말을 작성했을 뿐인데, 어떻게 얘가 알아서 알아듣고 인터넷 브라우저창에 글들이 딱 뜨게 될까? 그렇다. 우리가 쓰는 HTML언어를 번역해주는 역할을 해주는 무엇이 필요한 것이다. 그것이 바로 웹 브라우저이다. 웹 브라우저는 여러 기능을 갖고 있다. 그 기능 중 하나는 내부적으로 HTML로 된 파일을 읽고 분석 및 해석해내는 기능이다. 이러한 기능을 통해 인터넷 브라우저는 최종적으로 컴퓨터의 자원을 조금 활용해서 모니터에 딱 웹페이지를 띄운다.
+만약 HTML파일이 웹브라우저에 나타나는 과정을 좀 더 전문적으로, 구체적으로 알고 싶다면 다음의 링크를 참고하면 된다. 프로그래밍을 처음 접하는 사람이 이해하기에는 많이 힘들어 보지만 한 번 이해만 한다면 많은 도움이 될 것 같다.
영문: How browsers work? https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
한글: 브라우저는 어떻게 작동하는가? https://d2.naver.com/helloworld/59361 (네이버D2에서 위의 글을 번역한 것이다.)
이러한 이유로 인해 우리는 웹사이트를 제작하기 위해서는 HTML 편집기(Atom)를, 제작한 사이트를 모니터에 띄우기 위해서는 웹브라우저(Chrome, Internet Explorer등)를 사용해야한다. 이제 왜 필요한지를 알았으니 강의에 따라 ATOM을 다운받고 실행해보자.
강의에서 나온 것처럼 Atom을 이용하여 html파일을 만들고 아무 말이나 하나 작성한 다음 저장하자. 나같은 경우는 아주 유명한 문구인 Hello World를 작성하고 저장했다. 그 다음에 웹브라우저를 이용하여 파일을 열자. 그럼 다음과 같이 나타날 것이다.
HTML 코딩 실습 환경 준비(생활코딩): https://opentutorials.org/course/3084/18448 참고
2. HTML은 사실 프로그래밍 언어가 아니다: 프로그래밍 언어 VS 마크업 언어
HTML의 기본 문법은 아주 간단한다. ‘태그’에 대해서 알면 된다. 이 부분에서 HTML의 가장 중요한 특징이 나타난다. 사실 HTML은 프로그래밍 언어가 아니다. HyperText Markup Language라는 말에서 나타나듯이 태그를 사용하는 마크업 언어이다. 아니 이게 뭔 소리야. 이런 말이 저절로 나올 것이다.
프로그래밍 언어 ? 마크업 언어?
프로그래밍한다 그러면 무엇을 떠올리는가? 대개 프로그래밍 언어로 코딩을 하고 어떤 기계를 제어하는 모습을 떠올리게 된다. 프로그래밍 언어는 기계의 동작제어를 하는데 목적이 있다. 즉 기계한테 이런 경우엔 이렇게 해라! 조건문도 만들수 있어야하고 데이터는 이런 식으로 만져라! 명령할 수 있어야 한다.
하지만 HTML은 애초에 이런 목적으로 만들어진 것이 아니다. 어떤 텍스트(문서)의 구조를 쉽고 정확히 나타내기 위해 만든 언어이다.다시 말하면 어느 부분은 주석이고, 어느 부분은 문단이고, 어느 부분은 내용이야~ 이런 것들을 나타내기 위해서 만든 것이다. 이런 방법을 통해서 어떤 문서의 가독성을 기가 막히게 향상시킬 수 있다. 마킹을 목적으로 하는 언어가 바로 마크업 언어이다.
HTML이 프로그래밍 언어가 아닌 이유(영문): https://ischool.syr.edu/why-html-is-not-a-programming-language/
3. HTML문법의 전부(?): 태그(Tag)
그리고 그 마킹을 하기 위해 사용하는 것이 태그이다. HTML에서는 꺽쇠(<>) 안에 알파벳을 넣음으로써 태그를 사용한다. 이 태그는 사실 HTML문법의 전부라 봐도 무방하다. 태그는 약 150개 정도가 있고 용도에 따라서 이 태그들을 다양하게 사용하면 된다. 하지만 공통적으로 많이 사용되는 것들이 존재한다. 이에 대해서는 외우고 익힐 필요가 있다. 그럼 이제 태그를 사용하여 코딩을 해보자. ATOM을 이용하여 HTML파일을 하나 만들고, 코드를 다 작성했으면 저장하고 파일을 열어보자.
생활코딩에서 활용한 태그들을 정리하면 다음과 같다.
- <strong> 내용 </strong>: strong, 강조 표시
- <u> 내용 </u>: underline, 밑줄
- <h1~h6> 내용 </h1~/h6>: heading, 제목. 숫자가 커질 수록 글자 크기가 작아진다.
기본 문법-태그(생활코딩): https://opentutorials.org/course/3084/18392 참고
여기서 관찰할 것이 있다.
- <strong><u>태그에 놓인 내용들은 줄 바꿈 없이 내용이 써지는 반면, <h1~h6>태그에 놓인 내용들은 위 아래를 한칸 씩 줄 바꿈 하는 것을 알 수있다.
- 또한 <h1></h1>내부에 사용된 <strong></strong>태그는 쓰나 안쓰나 같은 결과가 나온다. 이미 <h1>태그에는 강조 표시가 적용된 것임을 알 수 있다.
근데 여기서 줄바꿈은 어떻게 할 수 있을까? 에디터에서의 줄바꿈은 html파일에 적용이 안된다. 그럼 이제 생각이 들 것이다. "아마 줄바꿈을 담당하는 태그가 있지 않을까?"하고.
- <br>: breakline, 한 줄 띄우기
- <p> 내용 </p>: paragraph, 문단표시. 문단 양 끝을 한 줄씩 띄운다는 점에서 무조건 한 줄을 강제로 띄우는 <br>과 다르다.
- 줄 바꿈(생활코딩): https://opentutorials.org/course/3084/18403 참고
4. 속성이 들어간 태그
- <img src=”이미지파일의 위치” width=”원하는 너비의 %”>: img는 image, src는 source, width는 말그대로 width를 의미한다. 이미지를 소스에서 불러와 표시한다.
img태그는 꺽쇠 안에 추가적으로 무언가를 더 쓰는 것을 알 수 있다. img 글자 오른쪽에 작성된 것들과 같은 것을 속성이라고 부른다. 속성이란 것을 왜 쓸까? 이는 너무나도 당연한 이유에서 비롯된다. <img>만 딱 써서는 무엇을 불러오라는 것인지 웹 브라우저가 알 수가 없다. 브라우저한테 “이미지! 이미지! 이미지!” 미친듯이 외쳐대봤자 당연히 브라우저입장에서는 “음...어쩌라구요...”라는 대답밖에 할 수가 없다. 추가적인 정보가 더 필요한 것이다.
즉 속성이란 것은 태그 만으로는 뭘 하라는 건지 정보가 부족할 때 브라우저에 추가적으로 제공해주는 정보이다. 이미지 같은 경우는 필수적으로 이미지의 위치가 필요하다. 이를 담당하는 것이 src=” ”이다. 만약 크기를 수정해서 불러오길 바란다면 width=” ”를 추가적으로 작성해주면 된다.
*자신이 사용할 img 파일은 html파일이 놓인 폴더에 놓도록 하자.
최후의 문법 속성과 img(생활코딩): https://opentutorials.org/course/3084/18407 참고
5. 부모태그와 자식태그
계층을 반드시 나타내야 하는 태그도 있다. 대표적으로 <li>, <ul>&<ol> 태그가 이에 해당한다.
- <li> 내용 </li>: list, 리스트 부분을 나타내는 표시다. 아래 두 개 태그의 자식 태그이다.
- <ol> 내용 </ol>: ordered list, 순차적 리스트이다. 리스트 앞에 번호가 매겨지게 된다. <li>의 부모태그이다.
- <ul> 내용 </ul>: unordered list, 비순차적 리스트이다. 리스트 앞에 굵은 점이 찍힌다. <li>의 부모태그이다.
계층을 나타내? 부모태그와 자식태그? 그림과 같이 상위 계층에 있는 태그를 부모태그 하위 계층에 있는 태그를 자식태그라고 부른다. 자식태그를 사용하기 위해서 반드시 부모태그가 사용되어야 한다. 이는 전 세계 모든 이들이 HTML을 사용할 때 지켜야하는 규칙이다. 그 이유는 웹 브라우저가 HTML파일을 읽을 때 부모태그부터 문서를 읽어 내기 때문이다. 부모태그 없이 자식태그만 사용한다면 자식태그의 내용들을 제대로 인식하지 못한다. (이유를 정확히 알기 위해서는 브라우저에 HTML파일이 브라우저에 나타나는 과정을 설명한 처음의 링크를 살펴봐야한다.)
부모 자식과 목록(생활코딩): https://opentutorials.org/course/3084/18408 참고
6. 거의 모든 HTML파일의 기본구조.
또한 <!doctype html> <html> <head> <body> <title>등도 반드시 위의 약속에 따라 사용하게 되어있다. 사실상 거의 모든 HTML파일은 이 태그들을 포함하고 있다. 이것의 의미에 대해 그림과 함께 알아보자.
- <!doctype html>: document type html, 이 HTML문서가 HTML5버전으로 만들어졌다는 것을 표시한다. 브라우저가 이 태그를 인식하면 HTML 버전의 기준에 맞춰서 HTML파일을 해석한다.
- <html> 내용 </html>: 이 내용이 html 코드라는 것을 표시한다.
- <head> 내용 </head>: 이 내용이 소스코드에서 서두에 해당함을 표시한다. 여기 들어가는 내용에는 웹페이지에 뜨지 않는다. 따라서 문서 자체를 설명하는 내용이 들어간다. 데이터 자체를 설명하는 데이터. 이를 유식한 말로 메타데이터라고 말한다. 이러한 메타데이터들이 들어간다. 생활코딩에서 다루는 메타데이터는 2종류가 있다.
- <body> 내용 </body>: 이 내용이 소스코드에서 본문에 해당함을 표시한다. 이 부분에 들어가는 내용은 웹페이지 상에 뜨게 된다.
문서의 구조와 슈퍼스타들(생활코딩): https://opentutorials.org/course/3084/18409 참고
7. HTML 태그의 제왕: <a>
이쯤에서 마지막으로 가장 중요한 태그를 하나 소개한다. 바로 <a>태그이다. <a> 태그가 뭐길래 HTML에서 중요할까? HTML이라는 말뜻에서 찾아보자
아까 HTML이 HyperText Markup Language의 줄임말이라고 몇 번 언급했다. 아까 Markup Language에 대해서는 설명했지만, Hypertext는 언급하지 않았다. 하이퍼텍스트까지 설명한다면 HTML이라는 언어의 핵심을 완벽하게 이해하게 된다.
하이퍼 텍스트란 말의 어원을 보자. Hyper(~을 넘어,~을 초월하는)+text(글)이란 뜻이다. 하이퍼텍스트는 문서와 문서 넘나드는 글이다. 즉 문서와 문서를 연결하는 연결고리가 되는 텍스트란 뜻이다. HTML언어는 이러한 하이퍼텍스트를 자유자재로 이용하기 위해 고안된 언어이다.
하이퍼텍스트(위키피디아): https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%ED%85%8D%EC%8A%A4%ED%8A%B8
그럼 <a>라는 태그와 이것이 무슨 상관인가? <a>태그는 하이퍼텍스트를 만들 때 사용하는 태그이다. 위에서 사용한 소스코드를 조금 바꿔서 structure of html을 hypertext라고 바꾸었다. 그리고 양 끝에 <a></a>태그를 씌우고 하이퍼텍스트에 대한 설명이 있는 위키피디아 주소를 href 속성으로 설정했다.
<a href=”웹페이지의 주소”> 내용 </a>: a는 anchor(배의 닻), href는 hypertext reference(하이퍼텍스트 참조)를 의미한다. 보다시피 <a>태그는 href라는 속성이 반드시 필요하다. 이제 이 태그를 이용하여 하이퍼텍스트를 만들어보자.
HTML 태그의 제왕: https://opentutorials.org/course/3084/18409 참고
여기까지 오느라 고생이 많았다. 적지 않은 것을 배웠다. 무려 HTML의 문법과 중요한 태그에 대해서 학습을 완료한 것이다! 다음엔 우리가 배운 것을 좀 더 구체적으로 활용해보자. 아직 우린 목표로 했던 웹사이트를 만들지 못했다. 다음 글에서는 과연 내 자신이 얼마나 달라졌는지를 알 수 있을 것이다.
*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.
*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.
'생활코딩 학습일기(Web 기초)' 카테고리의 다른 글
| 6) 입문자가 알아야 할 CSS의 기본 특징 (0) | 2022.08.12 |
|---|---|
| 5) 웹페이지 탐방하기 (0) | 2022.08.11 |
| 4) 웹의 구조와 웹사이트 올리기 (0) | 2022.08.11 |
| 3) 기본적인 웹사이트 만들기 (0) | 2022.08.11 |
| 1) Intro (0) | 2022.08.09 |
