[밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류

티스토리 뷰

Programming Lecture/밑바닥부터 홈페이지 만들기

[밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류

Unikys 2013. 11. 1. 21:08

* 홈페이지를 밑바닥부터 만들 때 가장 먼저 해야할 것은 기본 틀을 만들어두는 것이다. 이제 거의 모든 브라우져들이 HTML5를 지원해주므로 HTML5에서 사용하고 있는 기본 템플릿을 살펴보자.

- 이전글

2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편

* Zen-coding의 HTML5 템플릿

: 웹 개발을 하는데 잘 쓰면 유용한 개발 플러그인 중에 Zen-coding이라는 플러그인이 있다. 이 플러그인이 어떤 플러그인인가 하면 코딩을 단축키의 연속으로 하듯이 간단한 문자열로 소스코드를 바로바로 생성할 수 있는 플러그인이다. 이러한 Zen-coding에서 HTML5용 템플릿을 생성하면 아래와 같은 템플릿이 나오게 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
</body>
</html>

: 나중에 기회가 되면 이 플러그인에 대해서 별도로 다루기로 하고, 우선 이 템플릿의 틀을 기본으로 삼고 자신의 홈페이지에 맞는 설정을 하면 될 것이다. 먼저 각각의 줄이 의미하는 바를 하나씩 따져보도록 하자.

* DOCTYPE 태그

<!DOCTYPE html>

: 가장 위에 나오는 이 태그는 현재 문서가 어떠한 문서인지 선언하는 태그이다. DOCument TYPE 의 약자로 이해하면 바로 쉽게 이해될 것이다. 여기서 문서 타입은 바로 뒤에 나온 "html"로 현재 문서는 HTML5를 기반으로 작성하겠다는 것이다. 이 DOCTYPE 태그의 뒤에 들어갈 수 있는 종류는 아래와 같으므로, 자신이 사용하고자하는 웹페이지의 종류를 고려해서 사용하면 된다. 잘 모르겠다 하면, html만 써도 기본적인 태그들은 다 하위호환해주므로 문제 없을 것이다.

HTML 버전	<!DOCTYPE 선언>	설명
HTML5	<!DOCTYPE html>	HTML5
HTML 4.01 Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	font 등 deprecated 태그 호환 가능, frameset 사용 불가
HTML 4.01 Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	frameset 태그도 호환
XHTML 1.0 Strict	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Deprecated 태그 사용 불가, XML 작성 규격을 따름
XHTML 1.0 Transitional	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	frameset 사용 불가, XML 작성 규격을 따름
XHTML 1.0 Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	frameset 사용 가능, XML 작성 규격을 따름
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	1.0 Strict에 모듈 추가 가능

: 이 DOCTYPE 태그를 사용 안 한다면, IE에서는 Quirk 모드로 들어가게 되는데, 이 모드에서는 원래와는 다른 랜더링 방식을 사용하니 예상하고 있는 모양과는 다른 모양이 나오게 될 것이다. 따라서, 원하는 모양대로 웹페이지를 보여주고 싶다면, 이 DOCTYPE을 명확하게 본인이 사용하고 있는 HTML 버전에 맞게 설정해야할 것이다.

* HTML 태그

: html 태그는 DOCTYPE 바로 아래에 오게 되며, HTML5에서는 lang이라는 attribute를 사용하고 있는 것을 확인할 수 있다. 이 속성은 필수는 아니지만, 현재 페이지가 어떠한 언어로 되어있는지 명시해주는 것이므로 브라우져에서 어떠한 언어로 해당 웹페이지가 구성되어있는지 알려준다. 해당하는 언어의 코드는 ko는 한국어로, 다른 나라의 언어로 하고자한다면, ISO 639-1에 나와있는 언어 목록을 참고하면 된다.

http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

: 그리고 ko-kr이나 en-us 처럼 언어의 뒤에 -를 붙이고 어느 나라 코드를 입력해도 된다. 해당 html 안의 lang 속성은 웹접근성에서 체크리스트 중 하나이기도 하므로, 반드시 작성하는 것을 습관 들이도록 하자.

<html lang="ko">
</html>

* HEAD 태그

: head 태그는 말머리 태그로 생각하면 되며, 하위 태그를 사용해서 현재 웹페이지에 대한 메타정보나 제목 등을 설정할 수 있다. 아래가 템플릿으로 생성된 태그들이다.

<head>
    <meta charset="utf-8"/>
    <title></title>
</head>

: 여기서 meta 태그의 charset 속성을 설정함으로써 현재 웹페이지를 브라우져에서 어떠한 인코딩으로 읽어야하는지 결정할 수 있다. 일단 utf-8로 설정했는데, 하나의 인코딩 방법을 결정하게 되면 향후 모든 웹서버, DB, 소스 파일까지 인코딩을 통일해서 작성해야지 이유 모를 오류나 캐릭터 깨짐을 경험하지 않을 것이므로 모든 환경설정을 고려해서 설정하도록 하자. 그 다음은 title 태그로 title 태그 안에 현재 웹페이지에서 보여주고 싶은 제목을 설정하면, 브라우져에서나 즐겨찾기 등을 할 때 해당 제목이 보여지게 된다. 향후 개발을 하다가 사용하게 될 자바스크립트의 script 태그나 css의 link 태그들을 head에 추가해서 사용하면 된다.

* BODY 태그

: body 태그는 향후 주로 개발을 하게 될 태그로 웹페이지의 컨텐츠가 이 부분에 들어가게 된다. 처음에만 한번 만들고나면 다시 볼일이 많이는 없을 것이다.

<body>
</body>

* 템플릿을 기반으로 기본 틀 만들기

: 이렇게 간단하게 템플릿을 살펴봤는데, 이 템플릿을 기반으로 몇가지 필요한 태그들을 추가하여 기본 페이지를 만들어보자. 해당 페이지는 향후 php를 사용하게 될 것이므로 index.php로 저장을 하고 제목과 현재 페이지에 대하여 요약하고 있는 meta 태그들을 몇가지 추가했다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="utf-8"/>
    <meta name="description" content="The Overflowing church website's main page" />
    <meta name="author" content="unikys@gmail.com" />
    <title>The Overflowing Church</title>
</head>
<body>
    This site is under construction!
</body>
</html>

: 개발중이므로 간단하게 개발중이라는 문구를 띄워놨고, meta 태그로 추가한 것이 2가지가 있는데 하나씩 살펴보면,

<meta name="description" content="The Overflowing church website's main page"/>

: 이 태그는 현재 웹페이지에 대하여 요약하고 있는 태그로, name="description"이라는 속성을 추가하고, content=""에다가 현재 페이지에 대하여 설명을 달아주면 이 정보를 검색엔진들이 가져다가 사용하게 된다.

<meta name="author" content="unikys@gmail.com" />

: 다음은 name="author"로 설정 되어있는 meta 태그로 현재 페이지의 작성자를 적어주면 된다. 어딘가 웹개발을 도와줄 때 나의 이름을 슬그머니 남기고 싶다면 이 태그를 적극적으로 활용하면 된다. 전면에는 내 이름이 없지만, 소스에 나의 이름을 남겨놓는게 조금은 더 보람과 책임감을 느낄 수 있게 될 것이다. 그런데 굳이 꼭 설정할 필요도 없으니 건너가도 된다.

: 이렇게 일단 밑바탕 템플릿을 만들었다면 디자이너한테 빨리 디자인을 달라고 독촉을 하여 디자인을 얻어내서 작업을 시작하면 될 것이다.

* 다음에는 웹사이트의 아이콘을 설정하는 방법을 간단하게 알아보고, 그 다음에 nav 태그와 css를 이용해서 기본적인 메뉴를 미리 만들어두는 것을 해보자.

[밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 끝.

- 다음편

2014/01/13 - [밑바닥부터 홈페이지 만들기] 최종 목표 예고 - toc21.com

2014/01/15 - [밑바닥부터 홈페이지 만들기] nav, ul, li 태그 HTML과 CSS로 가로형 메뉴 만들기

2014/01/22 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 드롭다운 메뉴 만들기

2014/01/27 - [밑바닥부터 홈페이지 만들기] 마우스 오버 이미지 배너 만들기(CSS, 자바스크립트 등)

2016/06/17 - [밑바닥부터 홈페이지 만들기] HTML과 CSS로 가로 드롭다운 메뉴 만들기

2016/06/?? - HTML과 자바스크립트로 드롭다운 메뉴 만들기

2016/07/?? - 간단한 반응형웹과 모바일용 웹 만들기