�ݺ�ߣ

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. DOCTYPE

1.1 HTML 4.01 DOCTYPE

1.2 XHTML 1.0 DOCTYPE

1.3 Strict와 Transitional(loosed)의 차이점

1.4 XHTML 1.1 DOCTYPE

1.5 HTML 5 DOCTYPE

2. 용어 살펴보기

3. HTML 문서의 기본 구조


DOCTYPE
HTML 문서는 의미를 살린 마크업(Markup)과 유효한 코드를 사용해야 합니다.

유효한 코드를 사용하지 않으면, 브라우저는 자체적인 방법으로 코드를 해석하
여 가끔은 개발자가 원하지 않은 결과를 보여주기도 합니다.

웹 페이지를 올바로 처리하기 위해서는 어떤 DTD(Document Type Definition, 문
서 유형 정의)를 사용해야 하는지 브라우저가 알 수 있어야만, HTML 문서의 유
효성 검사가 가능합니다.

유효성 검사를 하게 되면 개발하고 있는 웹 페이지에 원하는 모습으로 제대로 표
현되는지, 아니면 어떤 문제가 있어 웹 문서가 제대로 표현이 안 되고 있는지 알
수 있기 때문에, 유효성 검사는 아주 중요하다고 할 수 있습니다.


DOCTYPE
웹사이트의 유효성 검사의 여러 가지 방법
가장 간단한 방법은 http://validator.w3.org에 현재 개발하고 있는 웹사이트의 주
소를 입력하면 바로 유효성 검사를 할 수 있습니다.

1. 웹사이트 주소 입력

2. 클릭

http://validator.w3.org 실제 웹 사이트의 주소를 입력해 보세요.!


DOCTYPE
최신 버전의 IE9에는 유효성 검사 도구가 이전 버전과 달리 자체적으로 포함되
어 있어, 개발하고 있는 페이지의 유효성 검사를 편리하게 할 수 있습니다.

1.도구 메뉴 클릭

2.클릭

실제 웹 사이트의 주소를
입력해 테스트 해 보세요.

IE9에 포함되어 있는 유효성 검사 도구


DOCTYPE
브라우저는 DOCTYPE 선언을 확인하고 브라우저 모드를 결정합니다. 브라우저
모드에는 표준 호환모드와 비 표준 호환모드가 있는데, 표준 호환 모드는 기술명
세서 (HTML 문서의 스펙을 정의해놓은 곳)에 따라서 표시해주며, 비 표준 호환
모드는 좀 더 느슨하게 하위 브라우저와의 호환을 고려해 화면에 표시합니다.

웹 표준에서 DOCTYPE이 중요한 이유는, 개발자가 유효하다고 생각해서 만든
CSS를 적용했어도 DOCTYPE을 잘못 선택하여 비 표준 호환모드로 동작하게
되어 개발자의 의도와는 전혀 다른 결과가 나올 수 있기 때문입니다.

웹 표준에서 웹 페이지를 제대로 표현하기 위해서는 올바른 문서 형태를 정의해
줘야 한다. 올바른 문서 형식을 선언해 주는 것은 다양한 웹 브라우저에 따른 렌
더링 차이를 최소화할 수 있기 때문에 매우 중요하다고 할 수 있습니다.

참고로 렌더링은 브라우저에서 HTML 코드를 인식하고 화면상에 결과를 보여주
는 것을 말합니다.


DOCTYPE
다음에 소개하는 DOCTYPE 들은 각각의 기능에 따른 DOCTYPE을 정의해 준다.
따라서 먼저 어떤 형태의 문서를 만들지 정하면, 반드시 해당되는 DOCTYPE을
HTML 문서 맨 첫 줄에 기술해 줘야만 제대로 된 HTML 문서로서 동작하게 됩니
다.

현재 이용되는 웹사이트에서 가장 많이 사용되고 있는 HTML 버전은 크게 두 가
지이다. 바로 HTML4.01과 XHTML1.0 버전입니다.

최신 버전인 HTML5를 문서형식으로 사용하는 웹사이트는 현재 많진 않지만, 점
차 증가하는 추세입니다.

이제 HTML4.01과 XHTML1.0, 그리고 HTML5의 문서 형식에 따른 DOCTYPE
을 살펴보도록 하겠습니다.


DOCTYPE
HTML4.01 DOCTYPE
HTML4.01의 표준 문서 양식은 다음과 같이 3가지 형태의 DOCTYPE으로 구성되어 있습니다.

1. 이전 버전으로 제작된 HTML 문서와의 호환성을 위해서는 아래와 같이 DOCTYPE을 정의한
다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

2. 정확한 표준 모드로 사용하기 위해서는 W3C에서 다음과 같은 DOCTYPE을 사용할 것을 권하
고 있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">

3. 현재는 많이 사용하진 않지만, 보통 매뉴얼을 만들거나 웹사이트 관리자 페이지에서 많이 보
이는 프레임 셋을 이용한 웹사이트를 만들 때는 다음과 같은DOCTYPE을 사용한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/frameset.dtd">


DOCTYPE
위의 유형들을 보면 “loose.dtd”, “strict.dtd”, “frameset.dtd”라는 용어가 이렇게 3
개의 DOCTYPE의 유형을 결정합니다.
loose.dtd는 HTML 문서 구조에서 이전 버전에서 만들어진 웹사이트를 고려해서
사이트를 유지 보수할 때, 현재 버전의 HTML과 비교해서 생략해도 되는 태그가
있으면 생략해도 브라우저가 문서를 실행하는데 전혀 문제가 없다는 것을 의미
한다. 즉 과거에 만들어진 모든 문서를 엄격한 규격에 맞춰 다시 제작하려면 엄
청난 시간과 노력이 필요하기 때문에 loosed.dtd가 존재합니다.

하지만 웹에 대한 모든 규격과 정의를 해주는 기관인 W3C에서는 새롭게 만드는
웹사이트는 strict.dtd를 사용할 것을 권하고 있습니다.

이와 같이 브라우저들은 문서의 첫 부분에 어떤 DOCTYPE을 정의해주었느냐에
따라 웹 페이지를 정확하게 또는 부정확하게 표시해줍니다.

DOCTYPE을 표시해주지 않을 경우, 웹 페이지가 제대로 동작하지 않을 수도 있
습니다.


DOCTYPE
XHTML1.0 DOCTYPE
XHTML1.0도 마찬가지로 HTML4.01과 동일하게 3개의 DOCTYPE으로 나눌 수 있다.

1. 이전 버전의 HTML 문서 형식으로 만들어진 사이트와의 호환성을 위해서는 다음과 같이
DOCTYPE을 정의해 준다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. 정확한 표준 모드로 사용하기 위해서는 다음과 같은 DOCTYPE을 사용한다.

www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. 프레임 셋을 이용한 웹사이트를 만들 때는 다음과 같은 DOCTYPE을 사용합니다. 프레임 셋
의 문서 구조는 Transitional과 동일하게 취급된다.

www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

여기서 xhtml1-transitional.dtd라고 표기되어 있는 부분은 HTML4.01에서의 loose.dtd와 동일한
의미다.


DOCTYPE
Strict와 Transitional(loosed)의 차이점

위에 열거한 문서 양식을 보면 대표적으로 Strict와 Transitional로 구분됩니다. 차
이점을 다음과 같이 이해하면 편리합니다.

웹 표준을 이용한 웹사이트는 구조와 표현을 분리한다고 했습니다. HTML4.01
또는 XHTML1.0 이전의 HTML 문서는 HTML 태그만을 사용해 모든 구조와 표현
을 해줬기 때문에 표현을 위한 태그가 많았습니다. 예를 들어 HTML 태그 자체에
서 글꼴을 표현하기 위해서 font라는 태그를, 텍스트를 중앙 정렬하기 위해서
center라는 태그를 사용했는데, strict.dtd를 사용하게 되면 이렇게 표현을 담당하
는 태그를 사용하면 안 됩니다.

strcit.dtd 문서에서 사용하지 말아야 할 HTML 태그입니다.
“center” “font” “iframe” “strike” “u” 등
좀더 자세한 내용은 다음의 URL에서 확인하기 바랍니다(참고로 여기서 해당되
는 내용은 HTML4.01과 XHTML1.0에 한정된 내용입니다).
http://24ways.org/2005/transitional-vs-strict-markup


DOCTYPE
strict(엄격한 형식)는 표현을 위한 용도로는 CSS를 사용하라는 것입니다. 처음
부터 새롭게 웹 사이트를 기획하고 설계할 때는 strict.dtd를 문서 형식으로 지정
하고 사이트를 개발하는 것이 맞습니다. 하지만 사이트를 유지 보수해야 하는 상
황이면서, 이전 버전으로 만들어진 웹 문서들이 많은 경우 이전 버전의 HTML 문
서와의 호환성 때문에 또는 <embed>나 비 표준 태그를 사용해야 할 필요가 있
을 때 현재 상태에서 호환성을 제공해 주는 문서 형식인 HTML1.0 Transitional을
사용하는 것이 좋습니다.


DOCTYPE
XHTML 1.1 DOCTYPE

HTML4.01 그리고 XHTML1.0 이후 좀더 많은 구조와 형식을 표현해 주기 위해서 개발자들
이 모여 몇 가지 버전의 HTML 언어를 만들게 되고 이렇게 만들어진HTML 언어들이 W3C
에 의해서 공식적으로 인정을 받게 됩니다.
XHTML1.0의 문제점을 수정해 만든 HTML 언어가 XHTML 1.1이다.
XHTML1.1은 문서 형식 즉 DOCTYPE을 지정해주는 요소를 아주 간소화해 버렸음. 이전
버전과의 호환성 부분을 무시해버리며, frameset 자체를 인정하기 않기 때문에 frameset
은 포함시키지 않습니다.

그래서 XHTML 1.1 버전의 표준 문서 형식에 따른 DOCTYPE은 하나만 있음.
XHTML1.1의 문서 양식은 아래와 같이 하나의 DOCTYPE만 갖습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" 'http://www.
w3.org/TR/xhtml1/DTD/xhtml11.dtd">

HTML5의 등장으로 XHTML 1.1은 더 이상 사용하지 않고 있음.


DOCTYPE
HTML5 DOCTYPE
HTML5도 이전 버전의 HTML로 만들어진 문서와의 호환성은 무시해 버리고 웹 표준
을 이용해서 새로운 웹사이트를 만들 경우에만 HTML5를 사용해야 한다. 왜냐하면
DOCTYPE 자체가 호환성을 염두에 두고 있지 않기 때문입니다.

HTML4.01 또는 XHTML1.0 이전 버전의 웹 문서가 많은 경우, HTML5의 DOCTYPE
을 사용하는 것보단 HTML4.01 또는 XHTML1.0의 DOCTYPE을 사용
하는 것이 안전합니다. 그래서 이전 버전의 문서를 계속 사용해야 하고 사이트가 엄
청 거대해서 전체 웹사이트를 HTML5로 변경하지 못할 경우에는 HTML4.01 또는
XHTML1.0의 transitional 모드를 사용하고, HTML5를 사용하기 위해서는 웹 표준에
의한 사이트로 새로 개발하든지, 변환해 주든지 해야 하는 것이다. HTML5에서는 더
욱 간단하게 DOCTYPE을 표현하게 되며, HTML5에서도 Frameset은 지원하지 않습
니다.

이 책에서 다룰 HTML5는 다음과 같이 아주 간단한 DOCTYPE을 갖습니다.

<!DOCTYPE HTML>


DOCTYPE
XHTML1.0의 전체 문서 구조

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목</title>
</head>
<body>
</body>
</html>


DOCTYPE
HTML5의 전체 문서 구조
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>제목</title>
</head>
<body>
</body>
</html>


용어 살펴보기
웹사이트의 소스를 보면 가끔 meta라고 표시된 부분을 볼 수 있습니다. 여기 meta라는 부분은
메타 데이터라고 해서 웹 페이지가 html로 구성되어 있는지, 검색 엔진에서 키워드는 어떤 키워
드를 지정할 것인지 표시해 주는 곳입니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

http에 대응하는 것은 컨텐츠 타입이며(http-equivalent), 컨텐츠는 텍스트/html로 구성되어 있다
는 말입니다. charset은 캐릭터 셋을 말하며, 현재 웹사이트의 언어를 지정해 주는 것입니다. 최
신의 웹사이트는 utf-8을 사용하여 제작됩니다. 이것은 유니코드 문자이며, utf-8 이전에는 euc-kr
이라는 한국어 셋을 이용하기도 했었습니다.

utf-8의 장점은 웹사이트에서 여러 나라의 언어를 표기하더라도 전부 표시되는 것입니다.
예를 들어 한국어 웹사이트에 중국어, 일본어, 아랍어 등을 표기하더라도, 전부 해당 문자가 보이
게 됩니다. 하지만 euc-kr로 지정할 경우, 중국어, 일본어, 아랍어 문자들은 전부 깨져 보여 읽을
수 없게 되는 경우도 있습니다.

meta에는 이외에도 검색 엔진에서 키워드 검색을 지정할 때도 사용할 수 있으며, 사용법은 다음
과 같습니다.

<meta name="keywords" content="웹 표준, HTML5, CSS3">


HTML문서의 기본 구조
모든 HTML 문서는 버전을 막론하고 기본적으로 동일한 문서 구조를 가지고 있
습니다. 그 구성요소는 크게 살펴보면 DOCTYPE, head 그리고 body입니다.

DOCTYPE은 앞에서도 언급하였지만, 문서가 어떻게 구성되어 있는지 브라우저
에 알려주는 역할을 합니다. DOCTYPE이 HTML4.01 포맷인지, XHTML1.0 포맷
인지, 그리고 HTML5 포맷인지를 알려주기 때문에 항상 문서의 첫 부분에 위치
한다. 그래야 브라우저가 HTML 문서를 렌더링할 때 이 문서는 어떤 형태의 문서
라는 것을 인식하여 그에 따른 기능을 수행하게 되는 것입니다.


<head>는 문서에 대한 각종 정보 및 CSS 파일, 자바스크립트 코드가 위치하는 곳이
다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ➊
<title> HTML 5 HEAD</title>
<link href="../CSS/reset.css” rel="stylesheet" type="text/css“ media="screen"/> ➋
<script src=/slideshow/html5-css3-16521216/16521216/"../Scripts/jquery.js" type="text/javascript"></script>
</head>

여기서 간단하게 <head>와 </head> 사이에 있는 몇 가지 요소들을 살펴보면,
➊ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
메타 태그로서, 현재 문서가 텍스트로 구성된 HTML 파일이면서 문자의 인코딩은
utf-8이다 라고 알려준다.

➋ <link href="../CSS/reset.css" rel="stylesheet" type="text/css“ media="screen" />
CSS 파일을 따로 분리해서 저장을 했으며, CSS 파일을 불러오는 역할을 하는 곳 이
다. 메타 태그와 마찬가지로 이 파일은 스타일시트이며, 텍스트로 이루어졌으며,
화면상에서만 사용하는 CSS 파일이다라는 정보를 알려준다.


Body 부분에는 실질적으로 웹 페이지에서 보이는 내용이 들어간다. 그리고 다
양한 HTML 태그를 이용하여 문서의 구조를 잡아주는 역할을 합니다.

내용을 보면 Body 내에 다양한 태그가 있는 것을 볼 수 있습니다.

이들 태그가 사이트의 뼈대를 이루게 됩니다.

<body>
<div id="wrap">
<div id="header">
<div class="logo"><a href="./"><img src=/slideshow/html5-css3-16521216/16521216/"imgs/logo.png" alt=" 디자인 “ /></a></div>
<div id="menu">
<ul>
<li><a href="./"><img src="imgs/menu6.png" alt="HOME" class="png24“ /></a></li>
... 중략 ...
</body>

XHTML1.0 문서의 <body>와 </body> 사이의 요소

�ݺ�ߣ

처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차 (20)

처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차