티스토리 뷰
웹알못을 위한 HTML 기초와 <head>, <body> 태그
HTML 무엇인가
HTML, CSS를 모르던 시절에 겪었던 어려움이 생각난다. 구글 애널리틱스와 페이스북 픽셀 코드를 웹사이트에 삽입하라는데 정말 혼란스러웠다. <head>와 </head> 태그 사이에 넣으면 된다고 참 쉽다던 글들이 어렴픗이 떠오른다. 이런 쉬운 설명에도 잘 모르겠으면 담당 부서 또는 담당자에게 코드를 건네라고 이메일 전달 기능도 있었지만 내게는 해당되지 않았다. <head> 태그 내에 코드를 삽입하고서도 이것이 정말 제대로 한 것인지 혼란의 연속이었다.
혹시나 나와 같은 어려움을 겪는 사람에게 이 글이 도움이 되었으면 좋겠다. 디테일 말고 큰그림 위주로 설명하겠다.
우리가 보는 웹사이트, 웹페이지는 HTML(HyperText Markup Language) 코드로 만들어진다. HTML은 웹 페이지를 만드는 언어다. 인터넷을 하기 위해서 아무생각 없이 키던 인터넷 익스플로러, 크롬은 웹 브라우저다. 웹 브라우저의 역할은 HTML로 만들어진 문서를 해석하여 우리에게 보여주는 것이다. 예를 들어 보겠다. 영어를 전혀 모르는 철수가 있다. I, YOU, APPLE 조차도 모른다. "Hello World"라는 영어가 있다. 철수는 무슨 뜻인지 모른다. 번역기를 돌렸더니 "세상아 안녕?!"이라고 번역되었다. 철수는 이제 의미를 안다. 이 예시에서 영어는 HTML이고 번역기는 웹 브라우저다. 철수는 HTML을 모르는 우리를 의미한다.
HTML 파일은 확장자명이 '.html'이다. html 파일은 기본적으로 아래와 같은 구조를 가진다. 구조를 크게 4가지로 구분할 수 있다.
<!DOCTYPE html>, <html>, <head>, <body> 무엇인가
구조 첫번째, <!DOCTYPE html>은 HTML 문서 버전을 선언하는 내용이다. 웹 브라우저에게 나는 어떤 버전의 HTML로 작성되었는지 알려주는 것이다. 영어에 비유하자면 영국식 영어인지 미국식 영어인지 알려주는 뭐 그런 셈이다. HTML은 계속 발전해오면서 여러 버전을 거쳤다. 최신 버전은 HTML5이다. 그래서 HTML 관련 책들을 보면 HTML5라고 말하는 것이다. HTML5 이전 버전에서는 <!DOCTYPE html>이라고 선언하지 않는다. 매우 복잡하게 선언했다. 예전에 만든 웹페이지의 HTML을 보면 있을테니 참고만 해두자.
엄격모드(strict mode)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
호환모드(transitional mode)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
프레임세트 모드(frameset mode)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
구조 두번째, <html> ~ </html>은 html 코드 영역을 알려주는 것이다. HTML은 태그라는 것을 사용하는데 항상 시작표시와 끝 표시가 있다. 시작과 끝 모두 동일한 단어를 사용하는데 끝 부분에만 '/'를 추가한다. <html>태그는 <head>와 <body>를 감싸고 있다.
구조 세번째, <head> ~ </head>는 웹브라우저에게 여러 부가적인 내용을 알려주는 영역이다. 설문지에 빗대어 보겠다. 설문지를 작성하기 전에 이름, 나이, 연락처, 주소 등을 쓴다고 해보자. 그럼 이름, 나이, 연락처, 주소를 적는 영역이 <head>에 해당하고 질문과 답변 있는 영역이 <body>에 해당한다. 설문 조사하는 사람 입장에서는 설문 응답 내용이 본 내용이고 관심이 가는 부분이다. 설문 응답 내용을 보다가 이런 답변을 남김 사람은 대체 누구야? 라는 물음이 생길 때 이름, 나이, 연락처 등을 확인하 수 있다. (본 내용과 부가적이 내용이란 걸 구분하기 위해 이런 비유를 썼지만 아주 환상적이고 명쾌한 비유는 아니다.)
구조 네번째, <body> ~ </body>는 웹페이지 내용이다. 본 내용이 담겨있다. 우리가 보는 웹 페이지 모습은 <body> 내에 적힌 내용을 웹 브라우저가 해석하여 표현해주고 있는 것이다.
HTML 문서에는 HTML 뿐만 아니라 CSS, JavaScript가 사용된다. 구글 애널리틱스 코드나 페이스북 픽셀 코드는 자바스크립트(JavaScript) 코드이다. 앞서 설명했듯이 부가적인 내용이나 기능은 <head>에 작성한다. 자바스크립트는 <body> 영역 내에도 작성 가능하지만 깔끔하게 정리, 정돈하는 차원에서 <head>에 작성하는 편이다. (부가적인 건 <head>로 본 내용은 <body>로 같은 컨셉) 구글 애널리틱스나 페이스북 픽셀 코드를 </head> 바로 앞에 삽입하라고 설명 해주는 이유다.
HTML, CSS, JavaScript에 대해 간략히 부연설명 하자면... HTML은 내용이다. CSS는 화장이다. JavaScript는 움직이게 해준다. 흰 바탕에 검은색 글씨만 있는 문서를 떠올려보자. HTML로 작성된 문서라고 생각하면 된다. 빨간색, 파란색, 형광펜으로 밑줄 긋고 중요하다고 색 칠한 것을 떠올려보자. CSS를 이용하여 꾸민거다. 글자에 손을 가져다 댔더니 글씨들이 움직이면서 배치가 바뀌는 모습을 떠올려보자. 자바스크립트로 움직일 수 있게 한 것이다.
'웹개발 > HTML5' 카테고리의 다른 글
| 이미지에 링크 여러개 걸기 - <map>, <area> 태그, usemap 속성 (1) | 2017.04.17 |
|---|