웹 표준 코딩의 장점. Table for Layout과 CSS Layout의 비교 실험.
약 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 예제보기 |
|---|---|
 |  |
웹 표준 방식의 CSS Layout은 콘텐트가 논리적으로 선형화 됩니다.
상기 두 개의 이미지는 동일한 Layout을 제공하고 있지만 코드는 각각 다릅니다. 이미 짐작하고 계셨겠지만 이번에는 CSS를 제거한 상태로 한번 보여드리겠습니다. CSS를 제거하게 되면 콘텐트가 선형화 되는 모습을 시각적으로 확인할 수 있고 선형화 하였을 때 콘텐트의 나열 순서에 무리가 없다면 그것은 어떤 장치에서 보더라도 논리적으로 바르게 이해할 수 있습니다. 왼쪽은 화면배치를 위하여 Table이 사용된 페이지이며 오른쪽이 CSS를 이용하여 Layout된 페이지 입니다. Opera Mini와 같은 휴대용 웹 브라우징 장치는 웹 페이지를 렌더링 할 때 Table을 모두 걷어내고 CSS조차 제거된 상태로 표시합니다. 따라서 아래 두 가지 경우의 페이지 가운데 어떤 페이지가 논리적으로 선형화 될 것인지는 굳이 보지 않더라도 쉽게 추측이 가능합니다. 사실 이것은 CSS Layout의 영향이라기 보다는 Markup을 잘 했기 때문에 볼 수 있는 결과 입니다. 하지만 거꾸로 생각하면 표현요소가 Markup으로부터 완전히 분리되어 있기 때문에 이렇게 논리적으로 Markup 하는것이 가능해 집니다. Layout에 Table을 사용하는 경우는 마크업이 표현요소를 포함하고 있기 때문에 콘텐트를 논리적으로 배치하려고 시도하면 표현문제와 충돌하게 되고 결국 논리보다는 표현을 위한 용도로 마크업을 사용하게 되어 논리적인 배치와는 거리가 멀어지게 됩니다.
| 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> 형식으로 코딩 됩니다. 예제코드 전체를 보여드리겠습니다. 화면(또는 지면) 관계상 코드를 모두 담아내면 화면이 너무 커지므로 코드의 서체크기를 일부러 줄여 놓았습니다. 코드를 자세히 확인하시려면 그냥 복사해서 메모장에서 볼 것을 권합니다.
| 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> |
| 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의 표준 문법 가운데 접근성 이슈만 추려내 놓고 그것을 지키라고 말하는 문장이 많습니다.
'Develop > Study' 카테고리의 다른 글
| ELK (ElasticSearch + Logstash + Kibana) 구성 (0) | 2017.02.24 |
|---|---|
| GNB 란 (0) | 2016.10.24 |
| 특수문자, 용어 등 (0) | 2016.10.24 |
| Mantis에서 지메일을 smtp서버로 설정하는 방법 (0) | 2016.10.24 |
| svn 백업 및 복원(Subversion Backup And Restore) (0) | 2016.10.24 |