47367 Members __ Online

정렬
HOME스터디[s]웹표준

DIV 레이아웃 [3-1] : HTML..... 표준과 비표준에 대하여...

posted by 라부
date : , update :
hit : 31956, scrab : 1 , recommended : 16 , attach : 9

지금까지 우리는 DIV 레이아웃 작업을 시작하기에 앞서 아주 중요한 기초 개념들을 배웠습니다.

지금부터는 이러한 개념들을 보다 확실히 정리하고 이해함으로써

실제 프로젝트에 이를 직접 적용하고 사용할 수 있는 내공을 키워 보도록 하겠습니다.

 

==================================================================================================

 

 

HTML은 문서(Document)이며 지정된 문서양식(Document Type)이 있다.

 

 

이미 누누히 얘기했던 거죠. HTML은 문서라는거....

그림 그리는 화판이 아니라 문서입니다. 디자인 하시는 분들... 이점을 많이 혼동하고 계시는 것 같습니다.

문서이기 때문에 지정된 문서 양식이 있습니다. 그 양식을 Doctype(닥타입)이라고 부릅니다.

 

HTML 문서의 Doctype에는 여러가지 종류가 있습니다만

그 중에서 우리는 앞으로 모든 예제를 XHTML 1.0 Strict 모드 양식을 사용하여 작성할 것입니다.

(Doctype에 대해서는 별도의 강좌를 할 예정입니다. 지금 이야기하기에는 분량이 꽤 많습니다.)

 

다만 표준모드비표준모드에 대해서는 짚고 넘어가 보도록 하죠.

 

다음의 HTML 페이지를 볼까요?

<html>
<head>
<title>Untitled</title>
</head>
<body>
       <div style="width:200px;height:100px;background:url(200x100.png) no-repeat;">구지성 *오~~!!!! 킹왕짱~!!!</div>
</body>
</html>

div 의 크기를 가로 200 픽셀, 세로 100 픽셀로 지정해 준 다음 

아래와 같이 동일한 사이즈의 그림을 백그라운드로 지정해 주었습니다.

(스타일에 대해서는 앞으로 하나 하나 씩 배워 나갈 예정이니 굳이 width:200px;height:100px;background:url(200x100.png) no-repeat; 이게 뭔가 하고 고민하시지 마세요.. 가로, 세로, 배경 이미지 지정한 것 뿐입니다...)

 

3101

 

그럼 위의 HTML을 브라우저로 함 볼까요?

 

3102

 

음... 뭐 예상대로 가로 200 * 세로 100 짜리 div 안에 배경 이미지와 텍스트가 들어가 있네요...

그럼 이번에는 div 에 padding(패딩)을 설정해 볼까요?

 

<html>
<head>
<title>Untitled</title>
</head>
<body>
       <div style="padding:20px;width:200px;height:100px;background:url(200x100.png) no-repeat;">구지성 *오~~!!!! 킹왕짱~!!!</div>
</body>
</html>

그리고 브라우저로 함 보겠습니다.

 

3103

 

오~ 패딩이 적용되니까 글씨들이 div 의 테두리로부터 그 만큼 떨어져 있네요.

그럼 여기서 질문을 하나 던져 보겠습니다.

padding이 적용된 후의 div 태그의 크기는 가로 세로 몇 픽셀일까요?

 

div에 빨간 테두리를 쳐서 확인해 보도록 하죠.

 

<html>
<head>
<title>Untitled</title>
</head>
<body>
       <div style="border:1px solid red;padding:20px;width:200px;height:100px;background:url(200x100.png) no-repeat;">구지성 *오~~!!!! 킹왕짱~!!!</div>
</body>
</html>

 

3104

 

padding을 20 픽셀을 주었는데도 div 의 가로 , 세로 길이에는 변함이 없네요.

위의 모습이 당연한 것이 아니냐... 라고 느끼시는 분들은

비표준(표준이 아니라는 얘기죠.. ^^;;) HTML과 Table 에 뼈속까지 길들여져 있는 분들입니다.

 

우선 위의 코드를 table로 동일하게 함 만들어 보겠습니다.

 

<html>
<head>
<title>Untitled</title>
</head>
<body>

 

<div style="border:1px solid red;padding:20px;width:200px;height:100px;background:url(200x100.png) no-repeat;">구지성 *오~~!!!! 킹왕짱~!!!</div>

 

<br />

 

<table border="1" width="200" height="100" cellpadding="20" background="200x100.png">
<tr>
<td valign="top">구지성 *오~~!!!! 킹왕짱~!!!</td>
</tr>
</table>

 

</body>
</html>

 

 

테두리에 border를 주고 가로를 200, 세로를 100 픽셀로 하여 크기를 지정하여 주었습니다.

그리고 padding에 20 픽셀을 주고 배경 이미지도 똑같이 지정하여 주었습니다.

그럼 이것을 div 와 함께 브라우저로 확인해 보겠습니다.

 

3105

 

모습이 정확히 같습니다.

div 의 가로 세로 크기를 지정해 주고 패딩 준 모습과

table의 가로 세로 크기를 지정해 주고 패딩 준 모습이 정확히 일치합니다.

 

암것두 이상한게 없어 보이는 이 시점에서 HTML 문서의 Doctype을 지정해 보도록 하겠습니다.

문서의 Doctype을 지정하는 방법은 간단합니다.

다음과 같이 HTML 문서 최상단에 문서 타입 선언 구문을 입력하기만 하면 됩니다.

우리는 앞으로 XHTML1.0 Strict 모드를 사용할 꺼니까 XHTML1.0 Strict 모드에 대한 문서타입 선언을 하겠습니다.

참고로 Strict 모드는 HTML 문서의 양식(또는 문법)을 엄격하게 적용하는 모드입니다.

 

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

 

<html>
<head>
<title>Untitled</title>
</head>
<body> 

<div style="border:1px solid red;padding:20px;width:200px;height:100px;background:url(200x100.png) no-repeat;">구지성 *오~~!!!! 킹왕짱~!!!</div> 

<br /> 

<table border="1" width="200" height="100" cellpadding="20" background="200x100.png">
<tr>
<td valign="top">구지성 *오~~!!!! 킹왕짱~!!!</td>
</tr>
</table> 

</body>
</html>

자. 이제 웹브라우저는 위의 HTML 페이지를 XHTML1.0 Strict 모드 양식대로 렌더링할 것입니다.

그럼 어디 브라우저로 확인해 볼까요?

 

3106

 

어라? div가 깨진건가요?

XHTML 1.0 Strict 모드를 사용하겠다고 선언해 준것 밖에는 달라진게 없는데

div 사이즈가 200 x 100 보다 훨씬 크게 보이네요.

ㅋㅋㅋㅋㅋㅋㅋ

ㅋㅋㅋㅋㅋㅋㅋ

.....................

 

사실은 div 가 깨진게 아닙니다.

div 는 지금 보시는 저 모양대로가 표준에 맞게 제대로 나온 모양입니다.

 

원래 div (또는 Block-Level Element) 의 width 와 height 는

padding 과  margin 을 제외한, 텍스트가 실제로 들어가게 되는 공간의 width와 height가 됩니다.

그래서 전체적인 가로의 길이는 실제공간 200px + 왼쪽 padding 20px + 오른쪽 padding 20px = 240px 이 되는 거구요,

전체적인 세로 길이는 실제공간 100px + 윗쪽 padding 20px + 아랫쪽 padding 20px = 140px 이 되는 것입니다.

이것이 표준 HTML 문법과 양식에 맞춰 계산하는 올바른 크기 계산법입니다.

 

문서 상단에 문서타입을 선언해 주지 않으면

웹브라우저는 표준 모드로 동작하지 않기 때문에 (즉, 비표준 모드로 동작하게 된다는 뜻) 

브라우저 스스로 판단하여 HTML 코드를 렌더링합니다.

따라서 IE와 같은 브라우저들은 다음과 같이 잘못 해석된 결과물을 화면상에 뿌려 주게 되는 것이지요.

 

 3107

 

IE 비표준 모드에서는 실제 공간 + 패딩 + 마진 = 전체 가로길이 (또는 세로길이) 가 됩니다.

따라서 위의 그림을 해석하면

가로의 길이는 실제공간 160px + 왼쪽 padding 20px + 오른쪽 padding 20px = 200px 이 되는 거구요,

세로 길이는 실제공간 60px + 윗쪽 padding 20px + 아랫쪽 padding 20px = 100px 이 되는 것입니다.

 

아래의 그림을 보시면 좀 더 이해가 빠르실 겁니다.

 

3108

 

HTML 코드 맨위에 Doctype  선언을 해주느냐 안해주느냐에 따라서

브라우저가 HTML 코드를 렌더링 하는 방법이 전혀 달라지기 때문에

둘중에 하나를 분명히 선택하여 그에 맞게끔 코드를 작성해주는 것이 중요합니다.

이때 Doctype을 선언해 주는것이 표준(Standard)에 맞는 것임으로

당연히 모든 HTML 문서에는 Doctype을 선언해 주어야 하는 것입니다.

 

사실 Doctype을 선언해 주었다고 해서 무조건 표준에 맞는 태그 렌더링이 이루어지는 것은 아닙니다.

왜냐면 Doctype에는 여러가지 종류들이 있으며

그중에는 비표준 양식과 호환을 이루어 렌더링 되어지게끔 하는 것들도 있기 때문입니다.

- HTML 4.01 - Strict

- HTML 4.01 - Transitional

- HTML 4.01 - Frameset
- XHTML 1.0 - Strict

- XHTML 1.0 - Transitional

- XHTML 1.0 - Frameset
- XHTML 1.1

* 위 처럼 다양한 종류의 Doctype 들이 있습니다.

하지만 Doctype을 아예 선언하지 않아서 비표준 모드로 렌더링 되어지는 것과

비표준 양식을 호환하겠다는 Doctype을 선언한 후 비표준 호환 모드에 맞게 코딩하여 이것을 렌더링하는 것에는

분명한 차이가 있다는 얘기입니다.

 

여러가지 Doctype들 중,

우리는 앞으로 모든 예제를 XHTML 1.0 Strict 모드 양식을 사용하여 작성할 예정입니다.

XHTML 1.0 Strict 모드가 무엇인지 잘 모르셔도 괜찮습니다.

그냥 표준 HTML 문서 양식을 가장 엄격하게 적용하여 HTML 페이지를 작성한다는 뜻 정도로만 알고 계시면 됩니다.

(향후 Doctype에 대해서는 별도의 강좌를 할 예정입니다.

지금은 이 정도로만 알고 계서도 앞으로의 강좌를 무리없이 보실 수 있습니다.)

 

자, 위에서 보았던 이 그림을 한번 더 보도록 하겠습니다.

 

3109

 

방금 전 보았던, 비표준으로 작성된 div 의 모습입니다. 

너무나 많은 분들이 위의 그림속 div가 표준이 아닌 비표준으로써 잘못 렌더링 되어진 것이라는 것을 잘 이해하지 못합니다.

왜냐면 바로 밑에 있는 table 표현 방식에 익숙해져 있기 때문이죠.

 

table에 가로, 세로, 패딩 값을 주면 위 그림처럼 나오기 때문에

div도 가로 세로 패딩 값을 주면 동일하게 표현될 것이라는 막연한 착각을 하게 되는 것이지요.

하지만 위 처럼 div 가 표현되는 것은 비표준이라는 것을 꼭 기억해 두시기 바랍니다.

 

자. 그럼 정리하겠습니다.

 

1. HTML은 문서이며 지정된 문서양식(Doctype)이 있습니다.

2. Doctype에는 여러 종류가 있으며 페이지의 성격이나 형태에 따라 적합한 문서타입을 적용할 수 있습니다.

3. 우리는 앞으로 XHTML 1.0 Strict 모드 문서타입을 사용할 예정입니다.

4. Doctype은 선언 구문을 HTML 페이지 최상단에 기입하기만 하면 간단하게 지정할 수 있습니다.

5. 웹 브라우저가 HTML 코드를 렌더링 하는 방식에는 표준 모드와 비표준 모드가 있습니다.

6. 표준 모드와 비표준 모드는 화면상에서 서로 다른 방식으로 보여지게 되는 경우가 많습니다.

7. 따라서 여러가지 HTML 문서 양식들 중 하나를 선택하여 해당 렌더링 방식에 맞는 HTML 코딩을 해야 합니다.

8. 이때 표준 양식대로 문서를 작성하겠다는 Doctype을 선언하여 표준 모드 상태로 HTML 문서를 작성하는 것이 올바른 방법입니다.

9. Doctype을 선언하지 않고 그냥 <html> 만으로 시작하면 해당 HTML 문서는 웹브라우저에서 비표준 모드로 동작합니다.(비추)

10. 어쩔수 없이 비표준 호환 모드를 사용하고자 할 때는 비표준 호환모드를 사용하겠다는 Doctype을 선언해 주어야 합니다만 본 강좌에서는 다루지 않습니다.

 

 

출처 - http://blog.naver.com/wdig    

 

######################################################

#####     작성자: 간츠 gantz2010@hotmail.com                     #####
#####     블로그: http://blog.naver.com/wdig                      #####
#####     기   타: 퍼 가실때는 출처를, 질문은 이메일로...       #####

#####################################################









웹표준, div, 강좌, 레이아웃
댓글 7 | 엮인글 0

DIV 레이아웃 [3-2] : XHTML 기본 문법 정리
DIV 레이아웃 [2-3] : div, p, span 태그들의 차이점을 아시나요?





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E