이번 시간에는 HTML에서 가장 많이 사용되는 태그들을 살펴볼 것입니다. 저 빈도수 보세요.
title
우리가 만든 웹페이지와 다른 웹페이지의 제목을 비교해보겠습니다.
어쩐지 좀 부끄럽네요. 옆에 위키피디아는 서비스 이름이 나오는데 우리는 파일명입니다. 우리의 웹페이지도 내용에 어울리는 제목을 갖게 해주고 싶어지지 않나요? 직접 해보시죠.
추천검색어 : html title tag
제목을 표현하는 태그는 title입니다. (변경사항)
우리도 당당하게 제목을 가지게 되었습니다. title 태그는 검색엔진이 가장 중요하게 생각하는 정보이기 때문에 타이틀 태그를 사용하지 않으면 불이익이 많습니다.
meta
경우에 따라서는 영어가 아닌 문자(한국어, 일본어)가 아래처럼 깨질 때가 있습니다.
파일을 저장할 때 인코딩(Encoding)을 UTF-8로 했던 것 기억나시죠? 그것과 관련된 문제입니다. UTF-8이 무엇인지 몰라도 됩니다. 하지만, 웹페이지를 UTF-8 방식으로 저장했다면, 웹브라우저로 열 때도 UTF-8로 열어야 한다는 것은 이해할 수 있겠죠? 저장된 방식과 여는 방식이 일치하지 않으면 글씨가 깨지는 현상이 나타납니다.
웹브라우저에게 웹페이지를 UTF-8 방식으로 열라고 명령을 해봅시다. (변경사항)
head 와 body
지금까지 우리가 작업한 코드는 두개의 부분으로 나눌 수 있습니다.
1
<title>WEB - html</title> <meta charset="utf-8">
2
<h1>WEB</h1> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <h2>HTML</h2> HTML is <strong>Hypertext <u>Markup</u> Language</strong>.
1과 2는 어떤 차이가 있을까요?
2는 본문입니다. 1은 본문을 설명합니다. HTML을 만든 사람은 본문과 본문을 설명하는 부분을 서로 다른 태그 아래에 두어서 정리정돈 하기로 했습니다. head와 body 태그가 그것입니다. (변경사항)
이제 마지막으로 head와 body 태그를 html 태그로 감싸면 됩니다. 그리고 이 웹페이지가 html이라는 것을 표기하기 위해서 <!doctype html>을 최상단에 표기합니다. (변경사항)
여기까지 입니다. 우리는 이제 웹페이지의 구조를 세우는 방법을 알았습니다. 또 가장 사용빈도가 높은 태그 5개를 배웠습니다.
