웹접근성을 코딩하시는 분들이면은 아주 기본적이라고 생각을 합니다만..포스팅을 하는이유는

저도 아직까지는 막상 코딩을 할려치면은 가끔씩 햇갈릴때도 있다곤합니다. 역시 배울때는 확실하게 배워야 후회가 없는거 같아요^^

그러으로 저도 공부할겸해서 겸사겸사 포스팅을 시작해볼려 합니다.

 

본론으로 들어가 table의 scope="col"과 scope="row"에 대해서 알아보겠습니다.

 

먼저 table에 scope="col"과 scope="row"를 왜 작성하느냐에 대해서 말하면은 쉽습니다. 시작장애인들은 눈으로 보기 힘들기 때문에

웹페이지를 볼려하면은 스크린리더기라는 프로그램을 사용하여 오직 귀로만 테이블에 정보를 얻어야 하기 때문에 

table에 scope="col"과 scope="row" 작성하으로써 테이블의 데이타를 인식하고 읽는 순서를 결정하게 됩니다.

웹표준 및 웹접근성에는 필수 사항이죠~

 

자! 그럼 흔히 쓰이는 기본테이블을 보면서 이야기를 해보겠습니다. 

※스크린 리더가 읽어주는 방향은 다음과 같다. 면적195 → 매매가87,500 → 전세가38,000 순서대로 읽어준다.

 

 

이럴때 면적,매매가,전세가영역은 thead영억에 해당하는 라인입니다. 이 라인에는 scope="col"(열↓) 이 붙습니다. 

 

    <tr>

       <th scope="col">면적(m²) </th>

       <th scope="col">매매가(만원) </th>

       <th scope="col">전세가(만원) </th>

   </tr>

 

 

그리고 면적 아래부분의 159, 195셀의 부분에는 scope="row"(행→) 가 작성되게됩니다.

   

   <tr>

       <th scope="row">159B </th>

       <th scope="row">195 </th>

   </tr>

 

 

나머지 내용이 들어 가는 영역에는 td가며서 내용에는 scope="col"과 scope="row"가 내용에는 들어가지 않습니다.

제목에서 흘러가는 방향을 잡아주었기 때문에 내용에는 안들어가게 되는겁니다.

 

 

 

그럼 아래와같은 약간 복잡한 구조의 테이블의 경우도 한번 살펴보겠습니다. 

※구분 → 2월 → "상품종류 스마트폰 7만대" → "상품종류 테블리PC 2만대" → "상품종류 데스크탑PC 1만대" 순서대로 읽어줍니다.

 

간단하게 전체적인 테이블 소스를 훌터보겠습니다.

 

   

 

    <table width="100%" summary="월별 스마트폰, 테블리PC, 데스트탑PC 판매현황">

       <caption>상품에 따른 월별 판매현황</caption>

       <colgroup>

          <col width="20%" />

          <col width="25%" />

          <col width="25%" />

          <col width="30%" />

       </colgroup>

       <thead>

          <tr>

             <th rowspan="2" scope="col">구분</th>

             <th colspan= "3" scope="colgroup">상품종류</th>   ← scope="colgroup" 행으로 병합되었때는 그룹으로 사용함.

          </tr>

          <tr>

             <th scope="col">스마트폰</th>

             <th scope="col">테블리PC</th>

             <th scope="col">데스크탑PC</th>

          </tr>

       </thead>

       <tbody>

          <tr>

             <th scope="row">1월</th>

             <td>5만대</th>

             <td>3만대</th>

             <td>1만대</th>

          </tr>

          <tr>

             <th scope="row">2월</th>

             <td>7만대</th>

             <td>2만대</th>

             <td>1만대</th>

          </tr>

       </tbody>

    </table>

 

 

 

 

내용을 보시면은 어느정도 내용이 파악이 될것입니다. 진행방행에 물이 흘러가는 수로를 만들어 준다고 생각하면은

쉽게 이해가 되실거라 믿습니다. 위 소스에서의 상품종류가 셀이 행으로 병합이되어있기 때문에 scope="colgroup" 사용하였습니다.

그럼 반대경우인 열로 병합을 하게되었을때는 scope="rowgroup" 으로 표기가 되겠습니다.

 

 

 

마지막으로 기본테이블중인 것 중에 하나인 폼테이블을 살펴보겠습니다.

※이름 → 홍길동, 아이디 → hong 순서대로 읽어줍니다.

 

이름, 아이디, 비밀번호, 휴대전화 에는 <th scope="col">이름 </th> 이렇게 작성을 합니다.

그리고 역시나 내용들어 가는 열의 부분은 <th>홍길동</th> 이렇게 작성하면 됩니다.

 

 

 

by 그놈의 머리속 박조욱 2014. 2. 14. 15:07