DIV 레이아웃 [3-1] : HTML..... 표준과 비표준에 대하여...
지금까지 우리는 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; 이게 뭔가 하고 고민하시지 마세요.. 가로, 세로, 배경 이미지 지정한 것 뿐입니다...)
그럼 위의 HTML을 브라우저로 함 볼까요?
음... 뭐 예상대로 가로 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>
그리고 브라우저로 함 보겠습니다.
오~ 패딩이 적용되니까 글씨들이 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>
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 와 함께 브라우저로 확인해 보겠습니다.
모습이 정확히 같습니다.
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 xmlns="http://www.w3.org/1999/xhtml" lang="utf-8" xml:lang="utf-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!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 모드 양식대로 렌더링할 것입니다.
그럼 어디 브라우저로 확인해 볼까요?
어라? 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와 같은 브라우저들은 다음과 같이 잘못 해석된 결과물을 화면상에 뿌려 주게 되는 것이지요.
IE 비표준 모드에서는 실제 공간 + 패딩 + 마진 = 전체 가로길이 (또는 세로길이) 가 됩니다.
따라서 위의 그림을 해석하면
가로의 길이는 실제공간 160px + 왼쪽 padding 20px + 오른쪽 padding 20px = 200px 이 되는 거구요,
세로 길이는 실제공간 60px + 윗쪽 padding 20px + 아랫쪽 padding 20px = 100px 이 되는 것입니다.
아래의 그림을 보시면 좀 더 이해가 빠르실 겁니다.
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 페이지를 작성한다는 뜻 정도로만 알고 계시면 됩니다.
자, 위에서 보았던 이 그림을 한번 더 보도록 하겠습니다.
방금 전 보았던, 비표준으로 작성된 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을 선언해 주어야 합니다만 본 강좌에서는 다루지 않습니다.
DIV 레이아웃 [3-2] : XHTML 기본 문법 정리
우리는 앞으로 XHTML 1.0 Strict 모드를 사용하여 웹페이지를 제작할 것이라고 지난 시간에 이미 말씀 드렸었죠? 그리고 이 Strict 모드는 어떠한 문법적인 오류도 허용하지 않는 가장 엄격한 문서 형식이란것도 말씀 드렸습니다.
그래서 이번 시간에는 이 XHTML 1.0 Strict 의 문법에 대해 공부해 보는 시간을 갖도록 하겠습니다.
앞으로 제작하게 될 웹페이지는 이 문법대로 작성하셔야지만 원하는 결과를 얻으실 수 있으며
뛰어난 웹디자이너라고 칭찬 받습니다.
'꼭 이렇게 안해도 브라우저에서는 똑같이 보이던데 멀....' 라고 생각하실 수도 있겠습니다만
그건 우리가 사용하는 브라우저들이 똑똑해서 웬만한 오류는 자동으로 지들이 알아서 처리해 그런것이지
우리가 올바로 HTML 문서를 작성해서 그런것이 아니라는 것을 기억해 두세요.
웹 브라우저는 PC에만 있는 것이 아닙니다.
핸드폰에도 웹브라우저가 있고 세탁기, 냉장고, 자동차 등등 다양한 기기들에도 브라우저가 있을 수 있습니다.
이런 기기들은 PC 같이 풍부한 사양의 기기가 아니기 때문에
초 인공지능형 웹브라우저를 장착할 수 없습니다. 즉, 자동 오류 수정 같은 건 기대하기 어렵다는 뜻이지요.
오직 정확하고 올바른 문법에 의해 작성된 문서만이 올바르게 표현되는 것입니다.
아무튼 그건 그렇고.....
뭐, 문법이라고 해봤자 외우셔야 되는거 몇개 안됩니다.
너무 쉽습니다. 기냥 외우세여~~~
참, 시작하기 전에 잠깐 두가지 용어에 대해 정리를 하고 들가겠습니다.
1. Element (엘레멘트) :
우리가 지금까지 흔히들 HTML 태그라고 불러왔던 것들... <body>, <a>, <br> 뭐 이런것들 있잖슴까?
이것을 지금부터 Element 라고 부를 것입니다. 이것이 정식 명칭입니다.
2. Attribute (어트리뷰트) :
테이블에 border=1 이런식으로 테두리를 지정해 준다든가 width=300 이런식으로 가로 크기를 지정해 준다든가 하는거 잘 아시죠? 이처럼 Element 에 여러가지 다양한 옵션을 지정해 주게 되는데 이것을 Attribute(속성) 라고 부릅니다.
자, 그럼 이제 시작해 볼까요?
8가지 기본 문법 정리입니다. 하나 하나 자세히 읽어 보신 후 꼭 기억하세요.
1. <!DOCTYPE> 선언을 하자.
HTML 문서, 근데 우리는 XHTML 1.0 을 사용할꺼니까 걍 이제부터는 XHTML 이라고 부르도록 하죠.
XHTML 문서를 작성할 때 꼭 Doctype을 선언해 주어야 하며
다음과 같은 Doctype 선언 구문을 XHTML 문서 제일 상단에 위치 시키면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
근데 못보던게 하나 나왔져?
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
이것은 일반적인 <html> 대신 사용하시면 되는데
xmlns="http://www.w3.org/1999/xhtml" 란 기본 네임스페이스를 XHTML 의 네임스페이스로 설정한다는 뜻이구요,
lang="en" xml:lang="en" 이란 본 문서의 언어는 영어다.. 라고 표시하는 것입니다.
한글은 lang="ko" xml:lang="ko" 입니다. ko로 하면 영문, 한글 둘다 괜찮습니다.
(원래는 다른 언어가 나오면 span이나 div로 감싸서 별도의 언어 설정을 해주어야 합니다만
이러한 내용은 본 강좌의 범위 밖이라 생략합니다.)
걍 뭉퉁그려 외우셔서 웹페이지 만드실때마다 맨 위에 삽입하셔서 사용하세요.
2. 5가지 필수 Element 들을 빼먹지 말자.
<!DOCTYPE>, <html>, <head>, <title>, <body> 이 5가지 Element 들은 XHTML 페이지 안에 무조건 기본적으로 존재하여야 합니다. 하나라도 빠지면 잘못된 문서가 됩니다.
사용하고 계시는 HTML 에디터의 기본 셋팅을 위처럼 해 놓고 사용하시면 편합니다.
최신 에디터들은 위의 셋팅을 기본적으로 가지고 있는 것들도 있습니다.
3. META 언어 설정을 꼭 하자!
Meta 언어 설정이 바로 그것입니다. 이미 여러분들도 알고 있는 것이죠.
<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
아까 <html> Element의 Attribute으로써 lang="ko" xml:lang="ko" 일케 언어 설정했는데 뭘 또하냐고 의하해 하실 분들도 있겠지만 lang="ko" xml:lang="ko" 이 설정은 문서 양식으로써의 언어 설정이구요
meta 언어 설정은 웹브라우저나 검색엔진 로봇과 같은 것을 위한 언어 설정이라고 생각하시면 이해가 빠르실 겁니다.어째든 이 meta 언어설정을 절대 빠뜨리시면 안됩니다. 엄연한 규칙이고 문법입니다.
그럼 이 메타 언어설정을 포함한 기본 셋팅을 다시 함 보시져.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
<title></title>
</head>
<body>
</body>
</html>
자. 됐습니다.
이제부터는 항상 위의 기본 셋팅을 가지고 웹페이지 문서를 제작하시기 바랍니다.
4. 문서 꾸미는 일은 전부 CSS에게 맡기자.
이제부터 HTML 페이지는 문서의 구조와 의미만을 나타내는데 사용하시기 바랍니다.
디자인 적인 모든 요소들은 CSS 로 모두 분리하여 작성하셔야 합니다.
무슨 얘기냐면요....
<font color="black">구지성 *오~!!!</font>
이런식으로 문서의 디자인 적인 요소들을 Element의 Attribute으로 사용하면 안된다는 뜻입니다.
그럼 어떻게 해야 하느냐....
다음과 같이 모두 스타일로 표현해야 합니다.
<span style="color:black;">구지성 *오~!!!</span>
왜 <span> Element를 사용했느냐는 여기서 중요하지 않습니다.
중요한 것은 style=:color:black;" 처럼 디자인과 관련된 요소를 Attribute가 아닌 스타일로 처리했다는 것입니다.
따라서 다음과 같은 방법도 더 이상 사용하지 않습니다.
<body bgcolor="white">
다음과 같이 사용하게 됩니다.
<body style="background-color:white;">
CSS는 DIV 레이아웃에 있어서 아주 중요하기 *문에
이와 관련하여 다음 시간에 좀 더 자세하게 다뤄 보도록 하겠습니다.
5. 모든 Attribute 이름은 꼭 소문자로 하자.
이건 디게 간단한 얘긴데요.
<table WIDTH="100%">
일케 하면 안되구요
<table width="100%">
일케 해야된다는 뜻입니다.
Attribute 는 무조건 다 소문자로만 표기하셔야 합니다.
6. 모든 Attribute의 값은 반드시 " 따옴표 안에 입력하자.
Attribute의 값은 무조건 " 따옴표 안에 집어 넣으셔야만 합니다.
<table width=100%> 틀림 –> <table width="100%">
7. 열었으면 꼭 닫자... 무엇을? Element 를...
문을 열었으면 닫아야지여.
< > 로 시작했으면 </ > 로 꼭! 닫아 주어야 합니다.
<body></body>, <div></div>, <span></span> 일케 말이죠...
<img>, <br>, <hr>, <input>, <meta> 등과 같이 닫힘이 없는 Element 들은 끝에 / 를 표시해서 닫아 주어야 합니다.
<img src="abcd.gif" />, <br /> 처럼 말이죠. 꼭 닫아 주어야 합니다.
간혹 <li> 를 </li> 없이 사용하시는 분들이 계신데 이것또한 꼭 닫아 주셔야만 합니다.
<li>서울
<li>경기
<li>부산
... 은 잘못 된거구여
<li>서울</li>
<li>경기</li>
<li>부산</li>
이게 올바른 것입니다.
7. Attribute 값을 절대로 생략하지 말자.
우리 이런거 많이 사용하고 있져...
<input checked>
<input readonly>
<option selected>
근데여.. 이거 잘못된거구요.
XHTML 에서는 생략된 Attribute 값을 " 따옴표안에 꼭 지정해 주셔야 합니다.
<input checked="checked" />
<input read"readonly" />
<option selected="selected" />
일케 말이죠...
마땅한 값이 없이 사용해왔던 Attribute 들은 그 자신이 Attribute 임과 동시에 스스로가 그 값이 된다고 생각하시면 편합니다. 중요한 것은 꼭 따옴표 안에 그 값을 지정해 주셔야만 한다는 것입니다.
다음을 참고하시면 도움이 되실 겁니다.
8. name Attribute 대신 id Attribute 를 사용하자.
name Attribute 를 사용하는 Element들이 있습니다.
a, img, applet, frame, iframe, map 등이 바로 그것인데요.
XHTML에서는 name 대신 id Attribute를 사용하게 됩니다.
즉,
<img src="abcd.gif" name="picture" />
일케 하면 틀린 거구요.
<img src="abcd.gif" id="picture" />
일케해야 올바른 것입니다.
근데 한가지 예외가 있는데 바로 map Element 입니다.
문법대로라면
<map id="map1">
라고해야 맞는 것인데...
사실 실제로 작업을 해보시면 아시겠지만 저렇게 해놓으면 작동 안합니다. (브라우저에 따라 차이는 있습니다)
그렇다고 해서 그냥
<map name="map1">
라고 해놓으면 나중에 문법 검사 할때 오류 납니다.
아마도 XHTML 2.0 이상 버전(또는 CSS 3.0 이상 버전) 에서는
위 오류가 바로 잡힐것 같은데 (아마도 map Element를 대체할 뭔가가 나오겠지요... )
지금은 이도 저도 아닙니다.
그래서 꽁수를 사용하는데
그것은 두개의 Attribute 를 다 사용하는 것입니다.
<map name="map1" id="map1">
이렇게요.... ^^;;
어*뜬 중요한건 map을 제외하고서는 무조건 name 대신 id 를 사용한다는거.... 잊지 마세요.
부록: 문법 검사 방법
XHTML로 페이지를 작성한 후 올바르게 작성되었는지 문법 오류 검사를 하실 수 있는 방법이 있습니다.
위의 주소로 가셔서 본인이 작성하신 XHTML 페이지의 URL을 입력하시거나
.html 파일을 업로드 하셔서 문법 오류 검사를 하실 수 있습니다.
어쩔때는 오류가 디게 많이 나와서 헉! 하고 놀랄 때도 있지만
사실 몇가지만 수정하면 오류수가 쭉쭉 줄어드는 경우가 대부분입니다.