DIV와 CSS를 이용한 웹 표준코딩의 장점
약 1년 전 네이버 블로그를 사용하면서 동일한 실험을 했던 적이 있습니다. 그 당시에는 Table Layout과 DIV Layout을 비교한다고 말했었지만 사실 Table Layout 이라는 말과 DIV Layout 이라는 말은 모두 잘못된 표현입니다. Table Layout 이라는 용어는 Table이 격자형의 2차원 데이터를 마크업 하는 용도를 지니고 있다는 점에서 Layout 이라는 표현과 함께 사용한 것이 잘못된 표현이며, DIV Layout 이라는 용어는 DIV가 의미를 그룹짓는 용도를 지니고 있다는 점에서 역시 Layout과 결합한 것은 잘못된 표현 입니다. 결국 Layout 이라는 것은 화면배치를 위한 표현에 해당하기 때문에 어떤 (X)HTML 요소와도 조합하여 사용하는 것은 잘못된 표현이라고 할 수 있습니다. Table Layout 이라는 말은 사실 ‘Table for Layout’ 즉, ‘레이아웃을 위하여 사용된 테이블’ 정도로 밖에 표현할 수 없습니다. 두 가지 표현이 별반 차이가 없는 것처럼 느껴지는 분들도 계실테지만 사실 엄청난 차이가 존재합니다. 전자는 Table이 Layout을 위하여 사용되고 있고 또 그럴 수도 있다는 것을 전제 하지만 후자는 Table이 Layout 용도로 사용되는 것을 확실하게 경계하였기 때문에 사용되는 표현입니다. 어쨌거나 이미 네이버에서만 162분이나 스크랩을 하셨고 저는 1년이 지난 최근에서야 해당 포스트를 수정하였는데 1년동안 여러 분들께 잘못된 정보를 제공했다는 사실 때문에 약간의 죄책감을 가지게 되었습니다. 그것을 만회할 요량으로 다시 해당 코드를 손질하고 이곳에 올려놓습니다. 이제는 자수하여 광명찾고 싶습니다.
동일 디자인의 Table for Layout과 CSS Layout 비교
|
Table for Layout 예제보기 |
CSS Layout 예제보기 |
 |
 |
웹 표준 방식의 CSS Layout은 콘텐트가 논리적으로 선형화 됩니다.
상기 두 개의 이미지는 동일한 Layout을 제공하고 있지만 코드는 각각 다릅니다. 이미 짐작하고 계셨겠지만 이번에는 CSS를 제거한 상태로 한번 보여드리겠습니다. CSS를 제거하게 되면 콘텐트가 선형화 되는 모습을 시각적으로 확인할 수 있고 선형화 하였을 때 콘텐트의 나열 순서에 무리가 없다면 그것은 어떤 장치에서 보더라도 논리적으로 바르게 이해할 수 있습니다. 왼쪽은 화면배치를 위하여 Table이 사용된 페이지이며 오른쪽이 CSS를 이용하여 Layout된 페이지 입니다. Opera Mini와 같은 휴대용 웹 브라우징 장치는 웹 페이지를 렌더링 할 때 Table을 모두 걷어내고 CSS조차 제거된 상태로 표시합니다. 따라서 아래 두 가지 경우의 페이지 가운데 어떤 페이지가 논리적으로 선형화 될 것인지는 굳이 보지 않더라도 쉽게 추측이 가능합니다. 사실 이것은 CSS Layout의 영향이라기 보다는 Markup을 잘 했기 때문에 볼 수 있는 결과 입니다. 하지만 거꾸로 생각하면 표현요소가 Markup으로부터 완전히 분리되어 있기 때문에 이렇게 논리적으로 Markup 하는것이 가능해 집니다. Layout에 Table을 사용하는 경우는 마크업이 표현요소를 포함하고 있기 때문에 콘텐트를 논리적으로 배치하려고 시도하면 표현문제와 충돌하게 되고 결국 논리보다는 표현을 위한 용도로 마크업을 사용하게 되어 논리적인 배치와는 거리가 멀어지게 됩니다.
CSS 제거 상태 비교
|
CSS가 제거된 Table for Layout 예제보기 |
CSS가 제거된 Web Standard Layout 예제보기 |
 |
 |
보통 Table을 선형화 하더라도 콘텐트의 순서가 완전히 뒤죽박죽으로 인식되지는 않습니다. 왜냐하면 Table을 걷어내는 경우 좌측 상단으로부터 우측 하단으로 콘텐트가 선형화 되는데 그러한 순서에 맞게 페이지의 콘텐트를 배치하는 경우도 있기 때문입니다. 그러나 그것은 운이 아주 좋은 경우이며 대부분의 경우는 논리적인 순서에 문제가 생기게 됩니다.
CSS Layout은 Table for Layout에 비하여 파일의 용량을 50% 이상 절감해 줍니다.
무엇인가 원하는 위치에 표시하기 위하여 Table을 Layout에 사용하는 경우는 <table><tr><td>내용</td></tr></table> 형식으로 코딩 되지만 CSS Layout은 <div>내용</div> 형식으로 코딩 됩니다. 예제코드 전체를 보여드리겠습니다. 화면(또는 지면) 관계상 코드를 모두 담아내면 화면이 너무 커지므로 코드의 서체크기를 일부러 줄여 놓았습니다. 코드를 자세히 확인하시려면 그냥 복사해서 메모장에서 볼 것을 권합니다.
HTML Code 비교
|
Table for Layout |
CSS Layout |
|
89 line |
39 line |
|
2,661 byte |
1,027 byte |
|
<!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=euc-kr" />
<title>Table for Layout</title>
<link href="TableForLayout.css" rel="stylesheet" type="text/css" />
</head>
<body style="margin:0">
<p id="moveTo"><a href="CSSLayout.html">Go to CSS Layout</a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td colspan="3" valign="top" id="header">Table for Layout</td>
</tr>
<tr>
<td width="20%" height="300" valign="top" style="background:#666"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu">
<tr>
<th style="height:30px; background:#999">2Depth Title </th>
</tr>
<tr>
<td>Menu1</td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Menu2</td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Menu3</td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Menu4</td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Menu5</td>
</tr>
<tr>
<td class="line"></td>
</tr>
</table></td>
<td width="60%" height="300" valign="top" style="background:#999"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="pageTitle">
<tr>
<th style="height:30px">3Depth Title </th>
</tr>
</table>
<table width="100%" cellspacing="0">
<tr>
<td id="text">Content </td>
</tr>
</table></td>
<td width="20%" height="300" valign="top" style="background:#CCC"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="links">
<tr>
<th style="height:30px; background:#666">Links </th>
</tr>
<tr>
<td>Link List 1</td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Link List 2 </td>
</tr>
<tr>
<td class="line"></td>
</tr>
<tr>
<td>Link List 1</td>
</tr>
<tr>
<td class="line"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3" valign="top" id="footer" style="background:#333"><a href="http://naradesign.net/">naradesign.net</a></td>
</tr>
</table>
</body>
</html>
|
<!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=euc-kr" />
<title>CSS Layout</title>
<link href="CSSLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id="moveTo"><a href="TableForLayout.html">Go to Table for Layout</a></p>
<h1>CSS Layout</h1>
<div id="center">
<div id="menu">
<h2>2Depth Title </h2>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id="content">
<h3>3Depth Title </h3>
<div id="text"> Content </div>
</div>
<div id="links">
<h3>Links</h3>
<ul>
<li>Link List 1</li>
<li>Link List 2</li>
<li>Link List 3 </li>
</ul>
</div>
</div>
<address id="footer">
<a href="http://naradesign.net/">naradesign.net</a>
</address>
</body>
</html> |
CSS Code 비교
|
Table for Layout |
CSS Layout |
|
17 line |
23 line |
|
1,030 byte |
1,771 byte |
|
* { font-size:small; font-family:Arial}
a { font:inherit; color:#FFF; text-decoration:none}
a:hover { text-decoration:underline}
#moveTo { position:absolute; top:4em; right:2em}
#header { font-size:5em; color:#FFF; font-weight:bold; background:#000}
#menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left}
#menu td { font-size:small; font-weight:bold; color:#FFF}
#menu td.line { height:1px; padding:0; background:#FFF}
#pageTitle { margin-bottom:1em; background:#999}
#pageTitle th,
#link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
#text { color:#FFF;}
#links { margin-bottom:1em}
#links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
#links td { color:#FFF}
#links td.line { height:1px; padding:0; background:#FFF}
#footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF} |
* { margin:0; padding:0; font-size:small; font-family:Arial}
h1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px}
h2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
h3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
a { font:inherit; color:#FFF; text-decoration:none}
a:hover { text-decoration:underline}
#moveTo { position:absolute; top:4em; right:2em}
#center { position:relative; overflow:hidden}
#menu { position:relative; width:20%; background:#666; float:left; height:300px}
#menu ul { margin:20px; margin-top:0; padding:0}
#menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none}
#content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px}
#content h3 { margin-bottom:1em}
#text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana}
#text table { border-left:1px solid #CCC; border-top:1px solid #CCC}
#text table caption { font-weight:bold; text-align:left}
#text table th { background:#666}
#text table th,
#text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center}
#links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px}
#links ul { margin:20px; margin-top:0; padding:0}
#links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none}
#footer { position:relative; clear:both; background: #333; font-family: Verdana; font-size:x-large; font-weight:bold; color:#FFF; padding:20px } |
CSS Layout의 경우 HTML 파일의 용량은 50% 이상 절감됩니다. CSS파일의 용량은 약 70% 정도 증가하였지만 CSS파일은 웹 사이트 접속시 딱 한번 로드되고 로컬 PC의 캐시메모리에서 재활용 되므로 전송량에 미치는 부하는 무시해도 좋은 수준입니다. 이 실험에서는 비록 하나의 웹 페이지를 단순 비교하였지만 웹 페이지의 수가 증가하면 증가할 수록 웹 표준 방식의 CSS Layout Code는 경제적인 효과가 배가됩니다.
사람이나 로봇(컴퓨터)이 이해하기 쉬운 구조가 됩니다.
코드가 줄어들기 때문에 개발자들이 코드보기가 수월해 진다는 것은 쉽게 추측할 수 있습니다. 즉, 삽질을 줄여주죠. 하지만 그런 점은 겨우 부가적인 이점에 불과합니다. 웹 표준 방식의 HTML 코드는 모바일 장치를 포함한 어떤 종류의 웹 브라우저 장치에서 출력 되더라도 그것을 이해할 수 있는 수준으로 렌더링 됩니다. 또한 검색엔진으로부터 높은 점수를 받습니다. 특히 Title 태그와 h1~h6 등의 제목태그 및 alt 텍스트를 사용할 때 그렇습니다. 검색엔진의 접근성이 높아져서 피검색 될 확률이 높아집니다.
유지보수가 쉬워지고 유지보수 비용을 절감시켜 줍니다.
웹 사이트의 디자인만 개편한다고 가정할 때 Table 기반으로 Layout된 페이지들은 Layout을 변경하기 위하여 수천 페이지의 HTML 문서를 모두 열어서 수정해야 하는 고통이 따릅니다. 하지만 CSS 기반으로 Layout된 웹사이트는 HTML 파일은 열어볼 필요조차 없어집니다. 불과 몇개의 CSS파일을 수정하는 것으로 매우 간단하게 수천개의 웹 페이지 디자인을 개편할 수 있습니다. 표현요소를 CSS로 완벽하게 분리했다면 HTML파일을 수정해야 하는 상황은 오직 데이터가 업데이트 될 때 뿐입니다.
웹 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다.
웹은 태어날 때부터 보편성을 전제하였습니다. 즉, 웹 표준만 지키면 누구나 접근할 수 있도록 이미 그렇게 설계 되어 있다는 의미 입니다. 가장 짧은 시간에 접근성을 크게 증진시킬 수 있는 방법으로서 image 요소에 대한 alt 텍스트를 강조하고 있는데 이것은 WCAG 지침이기 이전에 XHTML 표준 문법입니다. 실제로 WCAG 지침은 XHTML의 표준 문법 가운데 접근성 이슈만 추려내 놓고 그것을 지키라고 말하는 문장이 많습니다.
|
Table Layout |
Div Layout |
|
HTML 코드라인 수 = 59 Line |
HTML 코드라인 수 = 31 Line |
|
HTML 파일 용량 = 1.58 KB |
HTML 파일 용량 = 746 Byte |
|
<table width="800" border="0" cellspacing="0" cellpadding="20">
<tr>
<td colspan="3" valign="top" bgcolor="#000000" id="logo">Table Layout</td>
</tr>
<tr>
<td width="200" height="400" valign="top" bgcolor="#666666">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu">
<tr>
<th bgcolor="#999999" style="height:30px">Menu List </th>
</tr>
<tr>
<td>Menu1</td>
</tr>
<tr>
<td>Menu2</td>
</tr>
<tr>
<td>Menu3</td>
</tr>
<tr>
<td>Menu4</td>
</tr>
<tr>
<td>Menu5</td>
</tr>
</table>
</td>
<td height="400" valign="top" bgcolor="#999999">
<table width="380" border="0" cellspacing="0" cellpadding="5" id="contents">
<tr>
<th bgcolor="#999999" style="height:30px">Page Title </th>
</tr>
<tr>
<td valign="top">Layout Test Page. </td>
</tr>
</table>
</td>
<td width="100" height="400" valign="top" bgcolor="#CCCCCC">
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="contents">
<tr>
<th bgcolor="#999999" style="height:30px">Links </th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#333333" id="copy">Copyright</td>
</tr>
</table>
|
<div id="logo">Table Layout</div>
<div id="page">
<div id="menu">
<h1>Menu List </h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
</div>
<div id="contents">
<h2>Page Title </h2>
<div id="text">Layout Test Page. </div>
</div>
<div id="links">
<h2>Links</h2>
</div>
</div>
<div id="copy">Copyright</div>
|
|
CSS 코드라인 수 = 8 Line |
CSS 코드라인 수 = 11 Line |
|
CSS 파일 용량 = 919 Byte |
CSS 파일 용량 = 1.27 KB |
|
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold}
#menu th { border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left}
#menu td { border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF}
#contents th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666}
#contents td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify}
#links th {border-bottom:3px solid #FFFFFF; font-family:Arial; font-size:24px; font-weight:bold; color: #FFFF00; text-align:left; background:#666666}
#links td { font-family: Verdana; font-size:12px; line-height:150%; color:#FFFFFF; text-align:justify}
#copy { font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; } |
h1 { width:190px; padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#999999; border-bottom:3px solid #FFFFFF; margin:0}
h2 { padding:5px; font-size:24px; font-weight:bold; font-family:Arial; color:#FFFF00; background:#666666; border-bottom:3px solid #FFFFFF; margin:0}
#logo { font-family:Arial; font-size:100px; color:#FFFFFF; font-weight:bold; background:#000000; width:760px; padding:20px}
#page { position:relative; width:800px; overflow:visible}
#menu { position:relative; padding:20px; width:200px; background:#666666; float:left; height:400px }
#menu ul { margin:0; padding:0}
#menu li { width:190px; padding:5px; border-bottom:1px dotted #FFFFFF; font-family:Arial; font-size:14px; font-weight:bold; color:#FFFFFF; list-style:none}
#contents { position:relative; padding:20px; background: #999999; font-size:12px; font-family:Verdana; color:#FFFFFF; width:380px; float:left; height:400px}
#text { padding:5px; line-height:150%; font-family:Verdana; text-align:justify}
#links { position:relative; float:left; background:#CCCCCC; width:100px; padding:20px; clear:right; height:400px}
#copy { position:relative; clear:both; background: #333333; font-family: Verdana; font-size:50px; font-weight:bold; color:#FFFFFF; width:760px; padding:20px } |
DIV+CSS 레이아웃과 웹 표준 코딩의 장점
1. 작고 가벼운 구조와 용량
Div 레이아웃의 경우 순수한 HTML 파일의 코드 라인 수와 파일의 용량은 Table 레이아웃에 비하여대략 50%정도 절감됩니다. 이렇게표준으로 코딩된 HTML 파일은 한개 사이트에서 수십 수천 페이지에 이르기 때문에 사용자의 트래픽으로 인한 서버의 부하를 경감할 수 있습니다. 유지보수 비용과 직결되는 문제죠.
Div 를 이용한 표준 코딩이 가벼워 질 수 밖에 없는 이유는 다음과 같습니다.내용 하나를 원하는 위치에 표기하기 위하여 Table 로 코딩하려면 <table><tr><td>내용</td></tr></table> 이와 같이 3쌍의 태그로 둘러싸야 합니다.하지만 Div 로 코딩하면 <div>내용</div> 1쌍의 태그로 족합니다. HTML 태그의 코드 라인수와 용량이 반으로 줄만 하죠
CSS 코드가 조금 더 늘어나긴 하지만 CSS 파일은 해당 웹사이트에 접속시 최초 1회 다운로드 되어 사용자 PC의 캐시메모리에 저장되며, 해당 웹사이트를 빠져나갈 때까지 다시 다운로드 되는 일이 거의 없는 파일입니다. 따라서 CSS 파일의 용량이 늘어나면 HTML 코드가 줄어들어도 전체적인 트래픽량은 대동소이 하지 않을까 라고 생각하신다면 잘못된 계산 입니다. HTML코드는 페이지를 열때마다 새롭게 다운로드 하지만 CSS 파일은 한번만 다운로드 되는 파일이기 때문입니다.
2. XML포멧으로 확장가능,CSS의존도를 높여디자인개편 비용을 절감
웹 표준 코딩은 문서의 구조와 표현을 분리합니다. 구조는 HTML으로 정의하고, 표현은 CSS로 정의합니다. 예를 들면 문서의 제목을 표현함에 있어서 <h1>태그는 구조적으로 의미있는 태그 입니다. 하지만 <h1> 태그는 글자를 단지 구조적으로만 의미있게 표현할 뿐보여주기 위한 장식적인 디자인 표현은 CSS 에서 담당합니다.이렇게 되면 HTML 태그는 문서의 구조만, CSS는 표현만 따로 분리하여 정의 한 것으로이는XML 데이터 문서로의 확장을 용이하게 만들고디자인 변경시 HTML 파일의 편집비율은 줄어들고 CSS파일만 수정하면 됩니다.
비표준 웹문서의 디자인 개편시HTML 1,000 페이지를 모두 일일이 열어서 Find & Replace 방식으로 수정하여야했습니다. 또는테이블 구조가 변경되는 경우기존의 페이지를 수정하는 것보다 다시 생산하는 방식이 훨씬 빠르기 때문에 디자인 개편은 곧 사이트의 재구축을 의미하였습니다.W3C에서 표준으로 권고하는 웹 표준방식으로 제작된 웹사이트는딸랑 CSS 1개 파일을 수정함으로서 HTML 1,000 페이지를 한꺼번에 디자인 개편하는 놀라운 경험을 할 수 있습니다.CSS의 본래 목적이 바로 그것입니다. 이것을 이해하려면 먼저 CSS의 디자인 표현 가능성과 한계에 대하여 알아두셔야 합니다. CSS의 디자인 표현 능력은 상상 그이상입니다.
3. 사람이나 로봇(컴퓨터)이이해하기 쉬운구조
둘러싸는 코드가간결하고 코드라인의 양이 줄기때문에 구조를 한눈에 파악하기 쉽습니다. 또한 그뿐만이 아닙니다.Div 레이아웃에서 h1, h2 태그를 사용한 것은 제목을 표기하기 위함이며 ul, li 태그를 사용한 것은 목록을구조적으로 의미있게 표현하기 위함 입니다. h1 태그 대신 제목을 <tr><td>...</td></tr>안에표현하는 것은어떤 의미도 없으므로 사람이든 검색로봇이든 이해하기 어려운 정보 입니다. 하지만h1태그로 둘러싼 제목은 사람 뿐만 아니라 검색로봇도 의미있게 받아들이고 XML 데이터로 확장하기에도 용이합니다. 그동안 하찮게 여겼던 태그들이 얼마나 중요한지 모르실 껍니다.
4. Table 은 고지식 하고 Div 는 유연합니다
솔직히 저는 처음 Div 코딩을 제안 받았을때 이해하기 어려웠습니다. 왜 그래야 하는지. Table 태그도 분명 표준 태그이며 편하고 유용하게 사용해 왔는데 왜이제는 사용하면 안돼는지 의아해 했습니다. 하지만 Div 의 장점을 알게 되면서 부터는 더이상 그것이 궁금하지 않게 되었습니다. 물론 Div 레이아웃을 사용하는 것이 웹 표준 방식이며소고기 맛을 처음 본 사람이 돼지고기는 쳐다보지도 않는 상황과 같다고 말씀드릴 수 있겠네요. 벽에 액자를 붙인다고 합시다. Table이 콘크리트 벽에 못을 깊숙히 때려박는 행위라면 Div 는 콘크리트 벽에 실리콘 접착행어를 달아주는 것과 같습니다. 언제든지 깔끔하게 떼어서 다른 위치에 붙일 수 있죠. 이게 가장 큰 장점 입니다. 게다가 레이아웃과 디자인 표현에 관한 코드가 CSS 파일안에서 모두 정의 되므로 문서의 구조와 내용은 변경하지 않고 디자인과 레이아웃만 바꾼다면 HTML 파일은 열어볼필요도 없어집니다. 레이아웃과 디자인을언제든지 쉽게 바꿀 수 있는 유지보수의 용이성이죠.
Table 은 현재 셀과 이웃셀이 연결되어 있습니다. 따라서 서로 높낮이나 크기를 완전히 다르게 하려면 따로 Table 태그를 한번 더 사용해야 합니다. 그리고 셀과 셀이 서로 연결되어 있기 때문에 특정부분의 레이아웃을 잘못 변경하면 페이지의 나머지 레이아웃도 함께 수정해야 합니다. 하지만 Div 태그는 각자 따로 노는 스타일 입니다. 물론 서로 밀어내고 붙어있는등 유기적인 관계를 가질 수도 있으며 이것을 변경하는 것은 매우 쉽습니다. css 코드의 position 속성만 변경하면 됩니다. 그럼 서로 함께 움직이거나 따로 놀도록 설정 할 수 있습니다. 다시 한번 말하지만 Div 태그는 둥둥 떠다니는 레이어의 성격을 함께지니고있으므로 언제든지 원하는 위치로 옮길 수 있어 유지보수가 매우 용이 합니다.
5. 접근성 문제는 웹 표준만 지키면 90% 이상 해결 됩니다
행정자치부에서 발표한 "홈페이지 구축운영 표준지침 2005" 문서에는 "한국형 웹 콘텐츠 접근성 지침 1.0" 이라는 별첨문서가 있는데 2005년부터 구축되기 시작한 행정기관 홈페이지는 해당 지침을 따르도록 되어 있는 말 그대로의 지침 입니다. 아직 강제성은 없지만 이 지침을 기준으로 평가하는 행위도 이루어 지고 있고 또 앞으로 강제될 활률이 높습니다.
이러한 접근성 지침의 근간이 되는 문서는 W3C에서 발표한 "웹 접근성 가이드" 입니다. 웹 표준은 접근성을 고려하여 제정된 것이기 때문에 웹 표준만 지키면 접근성 문제는 90%이상 자동으로 해결됩니다. 따로 떼어놓고 생각할 수 있는 문제가 아닙니다.
자료출처 : http://blog.naver.com/naradesign?Redirect=Log&logNo=110001611307
자료수정링크 : http://blog.naver.com/celeves
이슈/로또/정보 
miriya 댓글 | 2007년 2월 3일, 3:38
웹표준을 지키면 뭐가 좋은지 알기 쉽게 잘 설명하셨네요^^
전 요즘 테이블 배제하고 DIV 익히는중인데, DIV가 얼마나 심플한지느낄 수 있었습니다.
CSS가 얼마나 좋은놈인지는 수십개의 비슷한 웹페이지를 만들때 실감할 수 있더군요.
개개의 태그에 마킹하는 대신 CSS로 묶어놓고 파일 한부분만 수정하면 다른 페이지가 동시에 수정되는 그 효율성이란~~
eouia 댓글 | 2007년 2월 3일, 3:50
이 글에 나온 자료는 찬명님의 허락을 얻어 다음주 블로터닷넷에서 열리는 포럼에 발표(?) 교육(?)자료로 사용됩니다. 흔쾌히 사용을 허락해주시고, 친절하게 블로그 포스팅까지 남겨주신 찬명님께 감사드립니다.
정찬명 댓글 | 2007년 2월 3일, 3:55
뜨억~ 이시간까지 안주무시고 ㅡㅜ; 자꾸 이러시면 우리 후배들이 IT업종에 뛰어든걸 두려워 하지 않을까요? ㅎㅎㅎ. 늦은시간, 아니 이렇게 이른 시간에 댓글 주셔서 정말 반갑고 감사드립니다.^___^ 사무실에 혼자 있었는데 댓글 확인하고 외로움을 싹 잊었습니다.
일모리 댓글 | 2007년 2월 3일, 4:56
유지보수에 관한 부분이 참 민감한 곳이 한국 입니다. 그런만큼 이 부분에 대해서 테이블을 걷어내면 $$이 절약된다는 전제를 내걸면 열띈 공방이 몇일째 이어질수도 있다고 생각이 되네요.
일단 비용 절감에 있어서 중요한 부분이 시멘틱 하게 짜여 졌느냐 입니다. 그리고 그걸 받혀줄만한 디자인도 함께 말이죠. 그저 1px의 차이를 매꾸기 위해 div 를 한개 더 넣고, span 넣고 짜여지는 페이지는 나중에 css를 바꿀때에도 테이블 만큼은 아닐지라도 고생하게 되죠.
그것이 두번째 문제를 부르는데 시멘틱하게 태그를 완성하며 css를 알맞게 사용할만한 소위 말하는 퍼블리셔들이 그리 많지 않다는 것입니다. 그만큼 비용절감을 예상하고 했건만 인원이 적은만큼 $$도 들겠죠.
이 외에도 여러 이유들이 있는지라 비용절감에 참 어려움을 느낍니다. 아 물론 해외에는 오히려 비용절감이 상당한 메리트 입니다. 자유 자제의 디자인 변화는 espn.com 에서도 잘 볼수 있죠. 아무튼 쉽지 않은 주제 같네요… ㅠㅠ
최용진 댓글 | 2007년 2월 3일, 22:28
찬명아, 전에 얘기한 것처럼 우리회사에 이 게시물 게재 좀 할께…
개발자에게 널리 알리고 싶은 내용이지만, 얼마나 공감할 지는 시간이 지나봐야 알 듯 싶다.
(원체 나를 포함해 개발자들이 텍스트를 진지하게 읽는 것에 게으른 지라.. )
언제든 한 잔 그리우면 연락줘.. ^^
정찬명 댓글 | 2007년 2월 5일, 12:41
즐거운 주말들 보내셨나요? 주말동안 PC를 멀리하다보니 답변이 좀 늦었습니다 ^^
일모리님께서 민감한 이슈를 잘 끌어내 주신것 같습니다. 말씀하신대로 웹 표준을 바르게 소화할 수 있는 웹 퍼블리셔들이 많지 않은것이 문제라면 문제인데 이는 차차 개선이 되어질 것으로 전망합니다. 또한 현재로서는 희소가치를 지니고 있는 웹 퍼블리셔들이 그만한 처우를 받아야 할 것으로 생각 되기도 하구요.
용진이형, 얼마든지 가능합니다. 하단에 CC(Creative Commons) 표시가 되어있는 저작물들은 일정 조건만 지켜주면 형 뿐만이 아니라 누구라도 별도의 허락 없이 사용할 수 있습니다. SI 업계에서도 이런 분야에 관심을 가지고 있는것을 보면 정말 웹 표준이 대세는 대세인가 봅니다.^^ 설이 지나기 전에 제가 한턱 쏠께요. 지난번엔 너무 죄송했어요ㅡㅡ;(그 다음날 다른 곳에서 사용하니 카드결제 잘 되더라구요ㅎㅎㅎ)
최병훈 댓글 | 2007년 2월 6일, 10:52
많은 도움됬습니다.
정말 그동안 CSS란걸 안썼던게 정말 바보같은 짓이란걸 느끼게됫네요.
어쩌피 몇페이지 안되는거라고 생각했었는데…
저렇게 코딩이 간단 간단해질수 있는군요.
StarLight 댓글 | 2007년 2월 6일, 11:09
웹 표준을 지켰을 때의 장점을 일목요연하게 잘 설명해 주셨네요! 좋은 글 잘 읽였습니다.
정찬명 댓글 | 2007년 2월 6일, 12:24
진작에 썼더라면 더 좋았을뻔 했다는 생각이 듭니다.^^ 도움이 되셨다니 기쁘고 좋은 글이라고 평해주셔서 감사합니다.