티스토리 툴바

Daum
Tistory
로그인

HTML/HTML5/HTML기초강좌 2010/09/07 02:13
[HTML DTD]

HTML DTD는 사용하고자 하는 HTML 문서의 종류와 버전을 표시합니다. HTML 문서느 약간의 종류가 있으며, W3C에서 정의한 방식을 따릅니다. 이렇게 HTML DTD를 넣어 작성한 문서는, 소위 웹표준에 맞는 문서의 시작을 의미합니다.  DTD의 사용은 브라우저마다 차이를 최소화하며, W3C에서 정의된 방식에 따르겠다는 말을 의미합니다. HTML 문서는 반드시 HTML DTD를 넣어 사용하는 것이 좋을 것입니다. 



[HTML DTD의 사용]

HTML DTD는 반드시 HTML문서의 가장 처음에 작성되어야 합니다. 
### html
<!doctype html>
<html>
<head>
  <title> HTML5 문서 </title>
</head>    
<body>
  HTML5를 따르는 문서입니다.
</body>
</html> 
위와 같은 첫 행의 "<!doctype ~>"은 HTML DTD를 말하며, 사용하고자 하는 HTML 문서 종류에 따라 다소 차이가 있습니다. 위와 같이 모두가 생략되어 html만 있는 경우는 HTML5를 사용함을 말합니다. 



[HTML의 종류와 DTD]

HTML에 따라 사용하고자하는 DTD는 다음과 같은 종류가 있습니다. XML과 호환되는 XHTML이 있으며, 또한 1.0, 4.01과 같은 버전의 표시, 엄격한 준수를 의미하는 strict와 그렇지 못한 transitional(또는, loose)로 구분이 됩니다. 아래와 같이 종류가 많으나 실제 사용하는 경우는 몇 개 없습니다. 어떠한 DTD를 사용하지 모를 첫 사용자라면 우선 "HTML4.01의 Transitional DTD"로 연습하기 바랍니다. 


HTML4.01의 Strict DTD
### plain;gutter: false;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
엄격한 HTML4.01을 따르며, font와 같은 사용이 금지된 요소 등과 frameset 을 사용할 수 없습니다. 

HTML4.01의 Transitional DTD
### plain;gutter: false;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
font와 같은 사용이 금지된 요소 등을 사용할 수 있으나, frameset 을 사용할 수 없습니다. 

HTML4.01의 Frameset DTD
### plain;gutter: false;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
Transitional과 같으며 frameset 을 사용할 수 있습니다.  


XHTML1.0의 Strict DTD
### plain;gutter: false;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
엄격한 XHTML1.0을 따르며, font와 같은 사용이 금지된 요소 등과 frameset 을 사용할 수 없습니다. 또한, XML의 문법 사용에 맞아야 합니다.

XHTML1.0의 Transitional DTD
### plain;gutter: false;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
font와 같은 사용이 금지된 요소 등을 사용할 수 있으나, frameset 을 사용할 수 없습니다. 또한, XML의 문법 사용에 맞아야 합니다.

XHTML1.0의 Frameset DTD
### plain;gutter: false;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Transitional과 같으며 frameset 을 사용할 수 있습니다.  


XHTML1.1 DTD
### plain;gutter: false;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.0 Strict과 같으나, 루비(Ruby)와 같은 모듈의 사용을 할 수 있게 합니다. 


HTML5 DTD
### plain;gutter: false;
<!DOCTYPE html>
HTML5를 따릅니다. 



[HTML DTD 종류의 선택]

과거에서 현재까지 4.01과 Transitional을 많이 사용했으며, 최근의 대부분은 xml과 호환이 되는 XHTML 1.0의 Transitional을 많이 사용합니다. 저는 HTML5는 하위를 지원하며, 간략해졌기에 편의상 HTML5의 DTD로 즐겨 사용합니다.  



[표준모드와 쿼크모드]

브라우저가 HTML문서를 처리를 할 경우, HTML DTD가 있으면 그에 맞는 W3C에서 정의한 방식에 따라 처리를 합니다. 이를 표준모드라고 하며, 그렇지 않은 경우를 쿼크모드라고 합니다.  

쿼크모드에서는 브라우저 회사마다 정의된 방식에 따르며, 그 결과에 차이를 보입니다. 대표적으로 박스모델에서 폭(width)과 높이(height)의 여백처리는 IE가 W3C의 표준과 달리 처리하기에 다른 결과를 보입니다. 

그러하기에 HTML DTD를 꼭 명시하여, 표준모드로 브러우저가 처리할 수 있게 해야 합니다. 이것이 웹표준을 위한 첫 시작이라 봅니다. 

'HTML/HTML5 > HTML기초강좌' 카테고리의 다른 글

HTML문서의 종류와 선언 (DTD)  (0) 2010/09/07
HTML 요소와 문법  (0) 2010/09/06
HTML 문서 개괄  (0) 2010/09/06
HTML 문서 작성하기  (0) 2010/09/06
NO TRACKBACK AND NO COMMENT

HTML/HTML5/HTML기초강좌 2010/09/06 08:49
[빈 공간의 처리]

HTML에서는 여러 문자를 사용할 수 있습니다. 이중 하나 이상의 빈 공간(스페이스, 탭, 개행 등)은 하나의 빈문자로 취급합니다. 
### html
<html>
<head>
    <title> 빈 공간 예제 </title>
</head>
<body>
빈     공간입니다.
   빈 공간입니다.
</body>   
</html>
출력 결과
### plain;gutter: false;
빈 칸입니다. 빈 공간입니다.


[빈 공간의 사용]

빈 공간을 표시할 경우에 한 칸인 경우는 "&nbsp;"를 대신, 새로운 행일 경우 "<br />"요소를 사용합니다.
### html
<html>
<head>
    <title> 빈 공간 예제 </title>
</head>
<body>
빈 &nbsp;  &nbsp;  공간입니다. <br />
   빈 공간입니다.
</body>   
</html>
출력 결과
### plain;gutter: false;
빈     공간입니다.
빈 공간입니다.

[특수 문자와 이스케이프]

html문법에서 특별히 사용되는 문자인 경우, 이러한 문자는 다르게 인식됩니다. 따라서 해당 문자를 표시하기 위해서는 이를 대체하여 이스케이프(escaped)된 다른 문자를 사용합니다.  대표적으로 위에서 빈 문자로 인식되는 "&nbsp;"와 같은 것이 있습니다. 

또한 요소의 시작을 알리는 "<"문자도 "&lt;"와 같이 이스케이프된 문자로 대신 사용하면 올바르게 "<"로 표시됩니다.  


[HTML 요소의 구분]

HTML의 요소들은 성격상 아래와 같이 분류될 수 있습니다. 

  • 빈 요소 (empty element)
    • 내용(content)이 없는 요소입니다. 
    • 대표적으로 br, img, hr, link 등이 있습니다. 
    • 사용시 "<br />"과 같이 끝을 함께 닫혀 표기되어야 합니다. 
    • 호환을 위해, xhtml에서는 빈 요소를 위와 같이 표시하는 것을 지켜야 합니다.
  • 금지 요소 (deprecated element)
    • 사용해서는 안될 요소입니다. 
    • HTML의 버전이 올라가면서 등, 기존의 요소들에서 삭제되는 것들을 말합니다.
    • 호환을 위해 사용하지 않는 것이 좋습니다.
    • 대표적으로 font, center 등의 요소 
  • 블록 요소 (block element)
    • 하나의 행을 차지하는 요소입니다. 
    • 볼록 요소들은 위에서 아래로 쌓이게 됩니다.
    • 대표적으로 div, h1~h6, p 등의 요소가 있습니다. 
  • 인라인 요소 (inline element)
    • 블록 요소와 대조적으로 행 내에 서로 어울리는 요소들입니다.
    • 좌에서 우로 하나씩 쌓이다가, 가득차면 다음 행으로 넘어가게 됩니다.
    • 대표적으로 span, a, img 등의 요소가 있습니다.
  • 대체되는 요소   
    • 내용이 다른 형식으로 대체되어서 표현되는 요소들을 말합니다. 
    • 대표적으로 img 요소가 있습니다. 



'HTML/HTML5 > HTML기초강좌' 카테고리의 다른 글

HTML문서의 종류와 선언 (DTD)  (0) 2010/09/07
HTML 요소와 문법  (0) 2010/09/06
HTML 문서 개괄  (0) 2010/09/06
HTML 문서 작성하기  (0) 2010/09/06
NO TRACKBACK AND NO COMMENT

HTML/HTML5/HTML기초강좌 2010/09/06 06:53
HTML문서는 여러 요소들을 사용하여 작성자가 원하는 내용과 형식의 문서를 작성할 수 있습니다. 이러한 요소(element)는 "<" 와 ">"로 묶인 점에서 태그(tag)라고 불리기도 하며 크게 구별없이 사용됩니다. 또한 이러한 요소를 사용하면서 HTML문서를 작성할 때는 기본적으로 문서의 골격을 이루는 요소는 반드시 작성해야 합니다. 

여기서는 개별적인 요소와 문서 골격에 관해서 두가지 이야기를 간단히 정리해 봅니다. 


[HTML 요소 형식]

HTML 요소는 다음과 같은 형식으로 작성되어야 합니다.  HTML문서에서 사용되는 요소명은 지정이 되어 있으며, 이 요소명에 따라 사용할 수 있는 속성, 또 속성에 따라 사용할 수 있는 값의 형식이 지정되어 있습니다.

### html
<element property1="value1" property2="value2" ... > 내용 </element>

  • 요소명(element)  
    • 정의된 요소명을 이름으로 사용해야 합니다. . 
    • 한번 열린 요소는 반드시 마감을 해야 합니다. (예외, 내용이 없는 빈요소[empty element])
    • 호환을 위해서 소문자로만 된 요소명을 작성하는 것이 좋습니다.
  • 속성과 값 : property1="value1"  
    • 각 요소에 따라 정의된 속성(property)과 속성에 따른 형식을 가진 값(value1)을 사용해야 합니다. 
    • 여러 요소를 나열하여 사용할 수 있습니다. 
    • 호환을 위해서 소문자로만 된 속성명을 작성하는 것이 좋습니다.
  • 내용  
    • 대부분의 요소는 내부에 다른 요소를 포함시킬 수 있습니다. 예외적으로 성격에 따라 불가능하기도 합니다. 
    • 본래 내용 자체를 가질 수 없는 요소가 있습니다. (빈 요소[empty element], 대표적으로 br요소)


[HTML 문서 형식]

하나의 html문서가 될려면, html문서의 골격을 이루려면, 반드시 또는 빠짐없이 써야하기로 추천되는 요소들이 있습니다. 

### html
<!doctype html>
<html>
  <head>
    <title> 문서명 </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   </head>
   <body>
      문서 본문
    </body>
</html>

  • 1행의 doctype 부분 
    • 흔히 약자 DTD라 부르며 사용하고자 하는 HTML 문서의 종류를 알립니다. 
    • 빠진 경우 브라우저마다 출력에 상당한 차이를 보일 수 있습니다.
    • 일반적으로 이야기하는 웹표준, 반드시 DTD를 사용해야 합니다. 
  • 2행과 10의 html 요소
    • html문서의 시작과 끝을 알리는 요소로 반드시 필요합니다.
  • 3행의 head  
    • 문서에 관련된 정보를 주로 담고 있습니다. 
    • 또한 문서의 서식을 담당하는 CSS나, 동적으로 표현 및 언어로써 연산등 기능을 수행할 수 있는 자바스크립트 파일을 담기도 합니다. 
  • 5행의 meta
    • 문서에 관련된 정보를 담는 요소로, 여기서는 소소코드가 작성된 문자집합을 말합니다. 
    • 한글이 사용되는 문서에서는 제대로 표현하기 위해 빠짐없어야 하며, ANSI로 저장된 경우는 "euc-kr"을 사용하며 위와 같은 것은 "utf-8"로 작성된 소스코드입니다. 
    • "utf-8"은 한국어 뿐만 아니라, 세계의 다른 언어를 동시에 표시할 수 있는 방식으로 널리 사용되고 있습니다. utf-8로 사용하는 경우 반드시, 해당 소스코드가 이에 맞는 문자집합을 사용하여 저장할 수 있게 설정을 맞춰어야 합니다. 
  • 7행 body
    • 실제로 출력된 문서의 본문에 해당되는 부분입니다. 




'HTML/HTML5 > HTML기초강좌' 카테고리의 다른 글

HTML문서의 종류와 선언 (DTD)  (0) 2010/09/07
HTML 요소와 문법  (0) 2010/09/06
HTML 문서 개괄  (0) 2010/09/06
HTML 문서 작성하기  (0) 2010/09/06
NO TRACKBACK AND NO COMMENT