레이블이 html인 게시물을 표시합니다. 모든 게시물 표시
레이블이 html인 게시물을 표시합니다. 모든 게시물 표시

2008년 11월 13일 목요일

[텍스트큐브]텍스트큐브닷컴 블로그 수정하기

텍스트큐브닷컴이 (http://blog.textcube.com/) 아직 베타 버전이라 스킨편집기능을 제공하고 있지 않습니다.

 

어쩌면 텍큐닷컴 베타 사용자들(저를포함)이 가장 우선적으로 필요로 하는 기능이 아닐까? 라는 생각을 해봅니다.

스킨편집 기능이 되어야 구글광고도 포스팅부분에 달수있고, 스킨도 자기 스타일데로 꾸밀수 있을텐데 말이죠.

그래서 생각해낸게 html 위젯 기능을 이용한 방법입니다. 마크업을 마음데로 할수는 없어도, css로 스킨스타일은 바꿀수가 있습니다.

 

제블로그를 보시면 텍큐에서 기본제공되는 스킨에서 스타일만 바꿔준것입니다.

아마도 이게 css 구조의 사이트에 장점이 아닐까 하는 생각을 합니다.

 

그럼 사용방법을 잠깐 알아보도록 하겠습니다.

먼저 '내 블로그 관리하기'를 클릭후 관리자 페이지로 들어가십시오.

그후 상단메뉴 꾸미기 > 위젯 > 위젯 추가를 해주세요.

 

 

다행이도 베타이긴 하지만 html 코드 위젯을 제공합니다. 숨쉴구멍은 남겨두었네요.^^

위젯 코드를 선택하시고, 그안에 스타일을 기술합니다.

 

 

위와 같이 내부스타일을 이용하는 방법입니다. 스타일 우선순위는 인라인 > 내부 > 외부순입니다.

이걸 이용한것입니다. 스킨 구조를 보아하니 외부로 css를 불러들였습니다. 그래서 우선순위가 높은 내부스타일을 적용시켰습니다. [자세히보기]

 

위젯안에

 

<style type="text/css">

원하는 스타일

</style>

 

썩 좋은 방법은 아닙니다만, 이렇게 하는 방법도 있구나! 라고 알고 넘어가시면 감사하겠습니다.

 

위까지 해놓고 질문이 나올수 있습니다.

여기서 해당 레이아웃 id나 class 명을 어떻게 알아내나요?

 

파이어폭스 부가기능중에 firebug 라는 기능이 있습니다. 그걸 사용하시면 쉽게 알아낼수 있습니다.

어떻게요? 아래 이미지를 참고해주세요.

 

 

보시는 바와 같이 오른쪽 사이드바 id 명을 쉽게 찾을수 있습니다.

고로 위젯에 바꾸고자하는 id 명에 스타일만 추가해 주시고, class 도 같은 방법으로 하시면 됩니다.

 

이게 싫은신분은 소스보기로 해당소스를 찾는 방법도 있습니다. 요건 아마 귀찮을겁니다.

 

수정이 끝나셨으면, 해당 위젯을 사이드 바 적당한 위치에 넣으시면 되겠습니다.

저같은 경우는 프로필 위에 위치시켰습니다.

 

 

css를 이용해서 배경이미지도 바꿀수가 있으며 시간이 많으시다면, 레이아웃 위치도 바꿈으로 전혀 다른 스킨으로 재탄생시킬수도 있겠습니다.

 

다시 말씀드리지만, 위방법은 썩 좋은 방법은 아니며, 성격이 급한 분들을 위한 임시방편으로 보셨으면 합니다.

 

ps) 원상복구 시키고자 할시 해당 위젯을 삭제하시면 됩니다.^^

2008년 11월 8일 토요일

[잡담]신의키스를 아십니까?

홈페이지를 제작해보거나, html 에 관심이 있던 분들이라면 신의키스를 모두가 아실거라 생각됩니다.
2006년 초까지 운영되다 리뉴얼 공지를 띄운채 아무런 리뉴얼없이 2008년 10월29일에 다시 오픈을 했습니다.
공지글을 읽으시면 아시겠지만, 운영자(신키님)의 무책임함을 인정하는듯 합니다.
어찌됐건 신의키스가 2년넘게 문을 닫음에도 불구하고 활성화된 모습이 보여지는걸 봐서 오픈되길 기다리는 분들이 꽤나 있었나봅니다.


제로보드 사이트에서도 여러 스킨배포로 유명세를 많이 탔었습니다.
제로보드4에서 XE까지 2년사이에 웹에서는 엄청난 변화가 있었고, 발전되었습니다.


공지에서 언급했듯이 리뉴얼 목적으로 파일을 옮겨서 인지 오류페이지도 종종 보입니다.

저같은 경우는 2003년도에 '신의키스'를 알게되었는데, 그때당시 정말 많이 배운것 같습니다. html에 매력에 빠져 재미있게 공부를 했고, 지금 5년이 지난 현재 웹퍼블리셔로 일하게 된것도 그때의 영향력이 조금은 작용하지 않았나 하는 생각을 해봅니다.

신의키스에 대해서 긍정적인 생각이 많았었는데, 10월29일 2년전의 사이트 그대로 오픈한걸 보고 실망이 이만저만이 아니었습니다.
웹은 정말 빠르게 발전하고 변화하고 있는데, 2년전의 모습그대로의 소스를 보니, 웹표준을 준수하고 있는 이시점에 table의 레이아웃과, 파폭에서 동작하지 않는 팁들, 사용하지 않는 font 태그등등을 보면서 안타까운 마음을 갖게 된건 사실입니다.
대부분이 익스전용 팁들이라 이런팁들을 보면서 홈페이지를 배우는 유저들이 코딩에 대한 나쁜습관이 생기질 않을까 하는 걱정도 됩니다.
차라리 리뉴얼을 멋지게 하고 '짜잔~'하고 오픈되었으면 좋았을것을.. 한때 '신의키스'를 좋아하는 유저로서 아쉬움이 남습니다.

이부분은 신키님도 나름 생각하고 계실거라 믿습니다.

사실 저도 신의키스의 트래이드마크인 천사가 그립긴했습니다.
5년전의 제모습이 생각나기두 하구요.. 예전에 신의키스의 bgm이 신승훈의 '오랜이별 뒤에' 였을때가 있었는데, 그노래가 순간 뇌리를 스쳐지나갑니다.

어찌됐건 다시 오픈한걸 축하드리며, 멋진 모습으로 거듭나길 바랍니다.


2008년 9월 21일 일요일

[(x)html]textarea 속에 내용넣기 (마우스 클릭시 사라짐)

1. 클릭하면 지우기

<textarea cols=40 rows=5 onclick="this.value=''">내용을 적어주세요.</textarea>

2. 클릭했을때 사용자가 입력한 문장이면 지우지 않기

<textarea cols=40 rows=5 onclick="if(this.value=='내용을 적어주세요.'){this.value=''}">내용을 적어주세요.</textarea>

마우스 오버시로 바꾸실려면 onclick 를 onMouseOver 로 바꾸시면 됩니다.

2008년 9월 20일 토요일

[CSS]IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6

이팁은 나라디자인 ( http://www.naradesign.com ) 블로그에서 가져온 팁입니다.
흔히 "따라다니는 스크롤배너" 라는 팁으로 자바스크립트와 함께 사용되어져 왔었는데, 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁이라고 할수있습니다.



* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body { _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; _z-index:-1; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}



<div id="content">
<h1>Fixed Layer Hack for IE6</h1>
</div>
<div id="aside">
<h2>Example</h2>
</div>

호환되는 브라우저

 

 * Firefox2, Opera9, Safari2, IE6~7 에서 모두 동일하게 position:fixed 형태로 렌더링 합니다.
 * IE5.0~IE5.5 버전의 브라우저에서는 position:absolute 형태로 렌더링 합니다.
 * DTD가 Quirks Mode 상태일 때에는 적용되지 않습니다.

자세한 사항은 나라디자인 (정찬명님) 사이트에서 확인 하시기 바랍니다.

2007년 3월 21일 수요일

[잡담]웹표준이란?

웹표준이란 :

웹표준이란 극히 어렵게 생각할 필요는 없습니다
서울 사람은 서울사투리를 전라도 사람은 전라도 사투리를 충청도 사람은 충청도
사투리를 경상도 사람은 경상도 사투리를 쓰고 있습니다

이는 지역에서 생활하는 이라면 아주 친근하며 또한 당연한 일입니다
하지만 타지역에서 온 사람이 그 지역의 사투리를 알아 듣기엔 다소 긴장을
해야할 때가 있습니다 쓰는 표현법과 억양이 틀리기에 언어 소통에 일시적
장애를 가질 수 있기 때문입니다

그래서 현재 수도인 서울을 기점으로 교양있는(?) 사람들이 쓰는 일반적인
언어를 표준어로 사용 그 표준어를 이용하면 의사전달에 큰 불편함 없이
서로의 의견을 대화할 수 있습니다

이와 마찬가지로 웹에도 여러 종류의 브라우져들이 있습니다
우리가 흔히 쓰는 익스 플러러와 함께 요즘 다시 부활을 꿈꾸는
네스케이프 네스케이프의 오픈소스를 이용 열린 유저들의 참여로 탄생한
오픈소스인 불여우 오페라사의 오페라브라우져등 주위를 조금만 둘러보면
참 많은 브라우져들이 존재합니다
물론 이외에도 다른 부라우져들이 많이 있습니다만 현재 익스 외에 사용되어지는
타 브라우져의 점유율에서 위의 네스케이프 불여우 오페라등이 많은 부분을
찾이하는 대표적인 브라우져입니다

위에서 지방에 따라 각기 다른 사투리를 구사한다고 했듯이
이들 브라우저들은 각기 자신의 부라우져에 맞는 환경을 제공하기에
익스에서 보는 모습과 불여우에서 보는 모습 오페라에서 보는 모습등이
약간의 차이들이 있으며 또는 지원되지 않는 기능들이 다소 존재합니다
대표적인 예로 익스에서의 스크롤바 색상지원은 타브라우져에선 되지 않습니다

세상에는 많은 사람들이 있습니다
이들은 저마다 편한 웹브라우져로 웹서핑을 즐기고 있으며
또한 각기 다른 운영체제와 컴퓨터 사양 그리고 컴퓨터를 사용하는 이의
건강성 또한 서로 틀립니다

웹써핑을 하는 사람중엔 시력이 좋지 않거나 혹은 아예 볼수 없는 장애인들도
있을것이며 색약 혹은 손이 불편해서 마우스를 사용할 수 없는 사람들도
있을것입니다

만약 웹프로그래머가 혹은 홈페이지의 제조자가 익스환경만을 고려해
콘텐츠를 제작하게 된다면 타 환경인 모질라 계열(불여우 네스케이프)등에서는
자신이 의도한 바를 전달할 수 없는 상태가 될수도 있습니다
그 예로 현재 모 커뮤니티는 익스외에는 접근허용을 하지 않도록 (엑티브 엑스의 사용상 문제 -엑티브 액스는 익스플러러의 기능성중 제일 오남용되는 부분입니다 -) 세팅이 되어 있습니다
이는 결국 차별일 수 밖에 없습니다

표준말을 쓰면 큰 불편없이 서로의 의견을 전달할 수 있듯이
웹에도 웹표준이 있습니다

웹표준을 거쳐 나온 권고안을 기초로 소스를 만들게 되면 각기 다른 환경에서도
최소한의 의사전달은 명확히 할수 있으며 css(캐스캐이드 스타일 시트)를
통해 레이아웃의 틀어짐을 조절하여 각 브라우져에서 보여지는 모습 또한
비슷하게 맞출수가 있습니다

웹표준에서 지향하는 것은 간단 명료합니다
첫째 불필요한 태그의 오남용을 막고 표준화(권고안에 의한)된 태그들을
제때 제곳에 의미 적절하게 사용할 것
시작 태그가 있으면 닫음 태그가 있을것

둘째 모든 요소를 제외한 상황에서도 그 문서의 의미전달이 확실할 수 있도록
마크업을 통한 배열을 잘할 것
- 스크립트의 작동 중지 혹은 이미지의표현을 사용하지 않고 접근했을때
스타일 시트를 꺼놓고 봤을때 등 기타 외부적인 요소를 통해서도
해당 문서의 마크업이 잘되었다면 읽기 편한 구조적인 배열로 보여서
의미 전달엔 이상이 없습니다 -

세째 되도록 표현 기법들은 스타일 시트에서 정의해서 쓸수 있도록하며
내부적인 자바 스크립트 또한 되도록 문서의 헤드 부분에 기술해서 쓸수 있도록
할것 이는 문서의 간결성외에도

이를 이용하는 사람이 시력을 잃은 장애인일
경우 도움이 될수 있습니다

시력을 잃은 장애인들이 흔히 웹써핑을 할수 있도록
도움을 주는 것이 스크린리더란 장치입니다

문서를 스크린 리더가 읽어서 말을 해주는 장치입니다
만약 중간 중간 군더더기가 많이 들어 있거나 혹은 잘못된 표현

또는

잘못된 표기등이 있을 경우 스크린 리더기는 엉뚱한 정보를 사용자에게
말해줄 수 도 있으며 필요없는 부분을 읽음으로서 사용자에게 혼란을 가중
시키며 포인터 부분이 원하는 곳에서 벗어날 수도 있습니다
( 문서 중간에 쓰인 자바 스크립트의 잘못된 방법에 의해 )
눈이 보이는 이는 별 상관 없겠지만 안보이는 이들에겐
처음부터 다시 읽거나 해야 하는 부담감이 있을수 있습니다

위에서 열거한 세가지가 현재 웹표준기관인 http://www.w3.org/
에서 대체적으로(?) 원하는 기준안들입니다

아래 링크로 들어가보십시오.
http://forums.mozilla.or.kr/viewtopic.php?t=3960
시각장애인 1급 판정을 받은 분이 웹표준에 대해 작성하신 글입니다.

이런 분들을 위해서라도 웹표준을 지켜야 할거 같습니다.
 
출처 : 예뜨락님 http://repter.ddam119.com/

2007년 2월 28일 수요일

[웹표준]DIV와 CSS를 이용한 웹 표준코딩의 장점

이글은 nhn 정찬명님의 글을 옮겨 싫은 자료입니다.


웹 표준코딩을 준수 했을때 어떤 가시적인 효과가 있는지 직접 검증하기 위하여 한가지 실험을 하였습니다. 첨부된 파일은 동일한 화면을 Table로 구성하였을 때와 Div로 구성하였을 때 어떤 차이가 있는지 보여드리기 위하여 작성된 html 및 css 파일입니다.

사용자 삽입 이미지
사용자 삽입 이미지
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://naradesign.net/wp/2007/02/03/113/