Aire Kahn이 제시한 법칙 - 그 자세한 설명

1. 레이아웃을 나누기 위해 <table>을 사용하지 말것. 대신, CSS를 이용하여 레이아웃을 구성하라. 2. <table>은 표를 보여주기 위한 용도로만 사용을 제한할 것. 최초로 HTML을 제안되었을 때 <table>은 표를 구성하기 위해서 만들어진 태그였습니다. 이것이 레이아웃을 담당하기에 그 기능이 적합했기에 많은 이들이 <table>을 레이아웃을 구성하기 위한용도로 사용하였으며, 더더욱 문제는 최근의 학원이나 책자 등에서는 당여하다는 듯이 레이아웃을 위한 태그이다..라고까지 설명하기에 이르렀습니다. 이전에 MS워드나 아래아한글같은 PC용 워드프로세서에서 "표"를 이용해서 레이아웃을 구성했던 것처럼 <table>도 그 원 기능이 변질되어 버리게 된 것입니다. 현 시점에서는 이러한 기능이 편리할지는 모르겠지만, 가까운 미래에 장애자용 브라우저라든지 논리적 근거를 둔 브라우저가 보급이 되었을 시에는 커다란 문제로 다가올 것입니다. 표와 레이아웃을 위한 예를 보십시요. 구 분 12월 1월 2월 3월 4월 5월 매출액 9,096 9,269 9,341 9,374 9,895 9,177 매출원가 7,892 7,814 7,789 7,961 8,344 7,996 매출총이익 1,204 1,455 1,552 1,413 1,551 1,181 일반관리비 443 464 368 407 463 421 영업이익 760 991 1,184 1,006 1,088 760 영업외손익 -1,088 -879 -981 -1,302 -896 -654 경상이익 -327 111 203 -296 102 106 당기순이익 -243 52 108 14 25 77 위와 같이 <table>을 표로 사용했을시, 각각의 열과 행(colume과 row)는 연계성을 가지고 있으며, 이러한 논리는 장애자용 브라우저에서 상당한 강점을 가집니다. 하지만, <table>을 단지 레이아웃만을 이용하게 사용한다면 [데스크탑]현대멀티캡, 성능/가격 두배로 만족하기!!
[MP3]아이리버 가방 증정 깜짝 이벤트!
[MP3]Yepp 신제품 온라인 런칭 기념 대축제
[MP3]아이오디오 4月 왕대박 사은품 이벤트※ 링크 누르지 마세요...^^...Copy해붙이다보니..링크가 그대로... 논리적으로 위의 예에서는 줄단위로 배열된 이미지와 text, link가 연계성을 가집니다. 하지만, 시각적으로 보았을시에만 이러한 논리를 가질 근거가 되지만, "모음전"과 "사은품"이라는 이미지가 같은 열에 있음으로서 연계성을 가지게 되고 전혀 다른 링크인 text들 마져 연계성을 가진다는 논리가 발생합니다. 혹은 전자와 후자의 반대경우에도 문제가 발생합니다. 연계성을 연산을 해야하는 프로그램으로서는 각각의 연계성을 연산하기 위한 근거가 필요하게 되고, 이러한 근거가 부족하다면 제작자 임의로 이러한 연계성의 증거를 제시해야 하고 됩니다. 이 또한 통일된 표준이라는 월드와이드에 부적합하게 되죠. 별에 별 이유로 <table>태그를 사용함에 있어 레이아웃과 표 두가지 모든용도로 사용하기에는 부적하다는 것입니다. 그래서 레이아웃은 CSS를 사용하는 것이 좋은 방법임을 제시하고 있습니다. 3. 모든 글자는 CSS를 통해 구현할 것. 이는 <font>태그의 사용을 자제하라는 w3c.org의 논조와 동일합니다. <font>태그는 그 기능상 어떠한 논리도 지니고 있지 못하고, 그 문자의 색상이나 스타일의 변화로 인해 인?게 되는 차별성, 부각성등이 시각적 인지에서만 가능하고, 연산이나 장애자들에게는 어떠한 영향도 주지 못한다는 것이죠. 또한, 사이트전체에 규격화된 문자스타일을 규정함으로서 본문, 일반, 강조, 조심...등과 같은 파별성, 부각성, 각각의 level등등, 통일된 접근을 가능하게 하자는 것입니다. 간단하게 말해서, 책하나를 샀을때, 각 chapter별로 서로 다른 문자체와 스타일이 존재한다면, 무엇이 제목이고, 본문이고, 주석이고, 설명인지....애매하게 인식되는 결과를 낳는 것과 같은 맥락입니다. 4. 페이지는 CSS를 사용하지 않아도 논리적이고 읽기가능하도록 제작하라. 논리적이라는 뜻은...각각의 태그와 text, link, image등이 중요도, 강조, history, site depth등의 차이점과 강조의 강약, 단계, level등을 구분하게 하고, 아울러 연계성이 있는 것끼리 하나의 그룹으로 만들어 브라우저가 논리적 연산이 가능하도록 하자는 데 있습니다. 5. 글의 구조는 <h1>~<h7>,<strong>,<p>등을 이용하여 글의 구조를 논리적으로 만들어라. 6. 글의 설명에는 <b>, <center>등을 사용하라. <h1>, <h2>태그는 제목을 표시하는 태그로 <h1>는 가장 중요한 제목, <h2>는 <h1>보다 한단계 낮은 중요도의 제목..같이 1~7까지 중요도의 차이를 쉽게 설명할 수 있게 하고 있습니다. <em>는 emphasis 강조의 뜻을 나타내는 논리 태그이고, <strong>은 strong mphasis <em>보다 한단계 더 강조됨을 나타내는 논리 태그입니다. 강조의 강약이 차이가 있을시에는 이를 사용해서 논리를 설명하라는 것입니다. <p>태그는 각각의 문단을 나타내는 태그로서 문단의 정의와 구분을 담당하게 됩니다. 단순히 <br>태그로 줄을 넘김으로서 시각적 판단만 가능케 하는 페이지를 만들지 말고, <p></p>를 사용하여 논리적으로 문단의 정의와 구분을 가능케 하라는 것입니다. ※ <p>태그를 사용하여 단점인 강제적으로 여백을 생성케하는 것은 CSS의 margin으로 해결이 가능합니다. 이러한 태그들을 사용함으로서 페이지 자체에 논리적 근거를 제시하라는 것입니다. <h1>제헌 헌법 (제정 ; 1948, 7, 17) <h2>대한민국 헌법</h2> <span> 悠久한歷史와傳統에빛나는우리들大韓國民은己未三一運動으로大韓民國을建立하여........... 檀紀4281年7月12日이憲法을制 定한다.</span> <h3>제 1장 </h3> <h3>제 2장 </h3> <h3>제 3장 </h3> <h3>제 4장 </h3> 반대로, 아무 의미없이 단순히 시각적 강조만을 하기 위해서 <em>, <strong>, <p>같은 태그를 사용하지 말고, <b>, <center>같이 아무런 의미가 부여되지 않은 태그를 사용하라는 것입니다. ※ 많은 분들이 착각하고 계시는...<font>, <b>, <i>, <u>, <s>, <center>같은 태그의 사용을 자제하라는 w3c.org의 충고는 any structural or any logical...meaning text에 사용하지 말라는 것입니다. 무작정 이러한 태그의 사용을 자제하라는 것이 아닙니다. HTML4.0은 html은 논리적으로, CSS를 유저의 접근성을 위한 도구로 사용하라는 것입니다. 7. 링크에는 title속성을 사용하라. 8. 이미지에는 alt속성을 사용하라. <a href=.....> 여기에 title="링크의 설명"를 붙여 시각적 판단뿐 아니라 논리적 판단이 가능하도록 하라는 것입니다. 또한 title속성은 여타 문단이나 문장, 이미지, object등에도 설명을 부여하여 논리적 판단이 가능하도록 강력 추천하고 있죠. 시각장애자의 웹서핑를 누군가 도와준다고 가정하면, 도와주는 사람은 분명히 링크명을 말하고 이에 대한 설명도 덧붙여 주겠죠. 그러한 기능을 title속성을 이용하여 하라는 것입니다. 어떤 책에서는 title속성이 풍선말을 가능케 하는 속성이라고 사기를 치는데....반성해야합니다. alt속성은 이미지가 100% load되기 이전에 그 이미지를 설명하도록 하는 속성입니다. 시각적 판단 이전에 그 이미지가 무엇을 설명하고자 하는지 인지하게 하자는 것이죠. <a href="http://blog.naver.com" title="네이버 블로그로 가는 링크">네이버 블로그</a> <img src="fan_1.jpg" alt="환상적인 묘기" title="환상적인 묘기"> 9. 감광성 간질과 같은 환자들을 위하여 반짝이는(blink) 문자, 이미지를 사용하지 말라. 감광성 간질...이게 뭔지 알아내느라 도서관에도 다녀왔습니다. 몇년전, 오락하다가 발작해서 죽은 중학생얘기...그것입니다. blink되는 문자를 판독하기 위해 과도하게 집중하다보면 이런 발작이 일어난다는 것이죠. 그러니깐, 쉽게 읽기 힘들게 만드는 모든 글자와 이미지들의 사용을 자제하자는 겁니다. 제 생각엔, 플래쉬에서도 이러한 부분은 조금 참조해야하지 않을까 싶습니다. 10. ?업을 사용하지 말라. 너무나 많이 들은 얘기인지라 다들 아실거라 믿습니다. ?업이 중요성이 짙은 이슈를 제시하는 기능으로 사용되지만, 시각적 판단으로도 거추장스러운 도구로 인식되어가고 있고, 장애자들에게는 ?업은 거추장을 넘어 장벽으로까지 다가올 것입니다. 페이지의 내용을 이해하기 위해서는 페이지 전체에 논리적인 구조와 해설이 필요한데... 이러한 논리에서 벗어난 새로운 페이지의 등장은 장애자들에게는 이해를 99.9% 불가능하게 하는 도구가 되어 버리는 것입니다. 11. 움직이는 문자를 사용하지 말라. 9번의 것과 비슷한 맥락입니다. 시각적으로도 읽기가 불편한 것이죠. 12. 경고를 뜻하는 붉은색을 아이콘에 사용하라. 시각적 판단이 쉽도록 하기 위해 아이콘을 사용할 때에는 눈에 띄는 붉은 색 계통을 주로 사용하는 것이 좋다는 것입니다. 메타포를 이용한 아이콘이 주류를 이루는 우리나라 실정에는 조금 뒤떨어진 얘기입니다만, 그 취지는 충분히 이해가 가능하실 거라 믿습니다.