HTML&CSS 본문

HTML Grammar

일반

(X)HTML/CSS/SCRIPT 분리

문서의 내용과 디자인과 행동을 분리한다. 분리하는 목적은 CSS와 javascript 없이도 문서를 이용할 수 있게 하는데 있다.

정확한 문서 구조 준수

문서의 기본 구조는 다음과 같이 해당페이지의 기본정보를 포함하는 head와 본문을 포함하는 body를 갖는다.

<html>
<head>
    (해당 페이지 기본 정보)
</head>
<body>
    (해당 페이지 본문)
</body>
</html>

다음과 같은 기본 구조를 갖는다.

  • XHTML
    <!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" lang="ko" xml:lang="ko">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
        <title> Daum 서비스명 </title>
    </head>
    <body>
    ...
    </body>
    </html>
  • HTML5
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>Daum 서비스명</title>
    </head>
    <body>
    ...
    </body>
    </html>
  • HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ko">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
        <title> Daum 서비스명 </title>
    </head>
    <body>
    ...
    </body>
    </html>
표준 엘리먼트 사용

비표준 엘리먼트 ( font, center, font, strike, u, s, applet, basefont, dir, isindex, xmp )를 사용하지 않는다.

모든 요소는 완벽하게 중첩되어야 한다
<p>This is a <strong>bad</p>example</strong> (X)
<p>This is a <strong>good</strong>example</p>  (O)
모든 속성값은 속성이 함께 선언되어야 한다.
<option value="wrong" selected>bad example</option> (X)
<option value="right" selected="selected">good example</option> (O)
모든 요소와 속성은 소문자여야 한다.
<DIV ID="idbox">bad example.</DIV> (X)
<div id="idbox">good example.</div> (O)
모든 속성 값은 인용 부호("")안에 표기한다.
<table border=1 cellpadding=0 cellspacing=0>..bad example..</table> (X)
<table border="1" cellpadding="0" cellspacing="0">..good example..</table> (O)
부위인식자의 모든 NAME속성을 ID속성으로 변경한다.
<input type="text" name="nick" />
<input type="text" id="nick" />
<input type="text" id="nick" name="nick" />

↑ 구버젼 브라우져들의 호환성을 위해 id와 name속성을 혼용해서 사용한다.

모든 요소는 닫아야 한다.
<img src="good_sample.gif" alt="좋은 예제 이미지" />
<input type="text" /> <hr /> <br />

Empty 엘리먼트도 닫아주어야 한다. (단, HTML 4.01 은 제외)

<div></div> <p></p> <strong></strong>

FireBug 사용시 Non-Empty 엘리먼트 내에 내용이 없으면 위와 같이 Empty 엘리먼트 처럼 닫아주는데 이와같이 사용하면 절대로 안된다.

text나 URL, script에 포함된 특수 문자는 escape 시킨다.

<, ", &, > 은 & l t ; , & q u o t ; , & a m p ;, & g t ; 로 escape

<script type="text/javascript">
<!--
document.write("<\/P>");
-->
</script>
 
<a href="http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1&w=knowledge&q=">bad example</a> (X)
<a href="http://tab.search.daum.net/dsa/search?nil_profile=g & a m p ; nil_searchtitle=1 & a m p ; w=knowledge & a m p ; q=">good example</a> (O)

DTD 및 인코딩

DTD란?
  • 브라우저에게 웹페이지의 문서종류를 알려주는 선언문으로, 해당 문서의 최상단에 선언한다.
  • DTD는 브라우저가 올바른 화면표시(Rendering)를 하기 위해 반드시 필요하다.
  • DTD를 사용하면 브라우저들의 렌더링을 표준에 맞춰 렌더링을 하게끔 하기 때문에 다양한 환경에서 상호 운용성을 보장할 수 있다.
DTD 기본 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE

현재문서는

html

일반적으로 html이나 xhtml으로, 최상위 엘리먼트는 html이므로 html로 작성

PUBLIC

PUBLIC 또는 SYSTEM 을 설정, PUBLIC(국제적 공용문서) / SYSTEM(내부적, 제한적 문서)

"-//W3C//DTD XHTML 1.0 Transitional//EN"

비공인 인증인 W3C기관에 의해 XHTML1.0을 transitional 방식의 영어 공용어를 출력하며

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

참조할 DTD문서는 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 이다.

Strict

선언된 (x)HTML 버전의 문법과 구조를 정확하게 사용한다. 지원하지 않는 엘리먼트를 사용해서는 안된다

Transitional

과도기적으로 사용하기 위한 선언으로, strict보다 유연하다. 선언된 버전 이외의 문법과 구조를 허용한다

Frameset

Transitional 속성과 더불어, frameset(iframe, frame)을 지원한다.

※ frameset은 문서의 구조에 관한 엘리먼트이기 떄문에, transitional에서 frameset을 사용해도 화면표시가 일어난다. 따라서, 사실상 frameset은 transitional과 동일하게 취급된다

DTD 종류
XHTML
  • 엄격(Strict) DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 변이(Transitional) DTD 권장
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 프레임셋(Frameset) DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5
<!doctype html>
HTML
  • 엄격(Strict) DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 변이(Transitional) DTD 권장
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • 프레임셋(Frameset) DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTD 적용시 예외

모든 HTML문서는 반드시 DTD를 선언하여야 하지만 아래의 경우 예외 사항으로 Quirks Mode 를 사용한다

DTD가 없는 서비스에 들어가는 문서인 경우
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quirks Mode 사용시 문제점

다음과 같이 CSS Box model상에서 브라우저간 맞지 않는 문제가 있음

<style type="text/css">
    #block1{width:400px;height:200px;padding:50px;border:10px solid green;background-color:maroon}
    #block1 strong{font:bold 14px dotum;color:#fff}
</style>
<div id="block1"><strong>Block1</strong></div>
엄격(Strict) DTD 사라진 엘리먼트

center, font, iframe, strike, u와 같은 엘리먼트의 사용이 엄격형에서 사용하지 말아야할 것이다.

엄격(Strict) DTD 금기 사항
엄격(Strict) DTD 금기 사항
엘리먼트 금기사항
a 다른 a 엘리먼트들을 포함 할 수 없다
pre img, object, big, small, sub 또는 sup 엘리먼트들을 포함 할 수 없다.
button input, select, textarea, label, button, form, fieldset, iframe 또는 isindex 엘리먼트들을 포함 할 수 없다.
label 다른 label 엘리먼트들을 포함 할 수 없다.
form 다른 form엘리먼트들을 포함 할 수 없고, input 엘리먼트를 직접 사용할 수 없고, 반드시 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.
body text/img를 직접 사용할 수 없고, 반드시 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.
blockquote text는 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.
엄격(Strict) DTD 사라진 속성
align : table 관련 태그에서만 허용됨(col, colgroup, tbody, td, tfoot, th, thead, tr).
language
background
bgcolor
border : table 태그에서만 허용됨.
height : img, object 태그에서만 허용됨.
hspace
name : HTML 4.01 Strict에서는 허용되고, XHTML 1.0 Strict에서는 form, image 태그를 제외하고 허용됨.
noshade
nowrap
target
text, link, vlink, alink
vspace
width : img, object, table, col, colgroup 태그에서만 허용됨.
엄격(Strict) DTD 필수 속성
<map name="CDATA" >
<area alt="%Text;">
<img src="%URI;" alt="%Text;" >
<param name="CDATA">
<form action="%URI;">
<optgroup label="%Text;">
<textarea rows="NUMBER" cols="NUMBER" >
<base href="%URI;">
<meta contect="CDATA" >
<style type="%ContentType;">
<script type="%ContentType;">
엄격(Strict) DTD 필수 속성
<applet width="%Length;" height="%Length;" >
인코딩 선언
  • 기본 인코딩 : 기본적으로 모든 HTML문서는 utf-8을 기본 인코딩으로 사용한다.
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 예외 : 기존 서비스가 euc-kr로 되어있는 상태에서 추가적인 문서를 작성 할 때에는 해당 인코딩을 따른다 (통검)
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    ※ 파일 저장시 반드시 설정한 인코딩으로 저장한다.

블록요소, 인라인요소

블록요소 (Block Element)
  • 줄을 바꿔 각각 독립된 줄에 표시된다.
  • 별도의 CSS 컨트롤이 없다면 해당 문서 크기만큼의 너비를 가지며, 문서의 위에서부터 차곡차곡 쌓이는 형태로 표시된다.
  • 인라인 요소와 텍스트 혹은 또 다른 블록요소를 포함 할 수 있다.
인라인요소 (Inline Element)
  • 다른 인라인 요소와 같은 줄에 표시된다.
  • 별도의 CSS컨트롤이 없다면 해당 문서의 좌측부터 우측으로 나열되는 형태로 표시된다.
  • 또 다른 인라인 요소와 텍스트를 포함 할 수 있으나, 블록요소를 포함할 수는 없다.