http://spongi.tistory.com/71
최근 들어 적절한 테이블 사용의 사례가 많아지고 있습니다.
예전에는 테이블 태그들을 이용해 사이트의 레이아웃을 잡는 용도로 많이 사용 되었는데 웹접근성과 정보의 명확성을 위해 각각의 태그용도에 맞도록 제작되고 있는 추세입니다.
테이블은 정리되어있지 않은 데이터들을 일목요연하게 보여줄 수 있는 장점이 있습니다.
특히나 게시판 혹은 데이터들의 통계정보 등은 테이블로 표시하기에 좋은 데이터 구조들이죠.
몇몇분들은 테이블 태그의 사용을 자제하라고 하지만 무작정 써도 되는 무방한 태그를 쓰지 말라는 건 어불성설이죠. 용도에 맞는 적절한 사용은 웹표준에 더욱더 부합되는 것이니 쓸땐 쓰는게 좋은 겁니다. 하하하하
우선 본격적인 강좌에 들어가기 앞서 가독성과 접근성에 이야기 하고 들어가겠습니다.
간단하게 말씀드려 가독성이란 읽기 쉬운 정도를 말합니다. 예를 들어 글을 쓰는데 뛰어쓰기도 없고 단락구분도 되어있지 않은 글을 읽는다고 생각해보십시오. 죽빵을 한대 갈기고 싶으시죠? 맞습니다!!! 죽빵 갈겨야죠.
그러면 어떤게 보기 좋죠? 물론 띄어쓰기도 잘 되어있고, 단락구분도 알맞게 되어 거기다 맞춤법까지 완벽하다면 정말 금상첨화겠죠. 이 사람한텐 죽빵 대신에 호빵을 줍시다... 퍽(!!!!) 악~~~
쿨럭...이처럼 가독성이란 데이터들을 나열할 때 그 정보를 보는 사람이 얼마나 편하고 잘 이해할수 있도록 하는지가 가장 큰 목적입니다. 그렇다면 접근성은?
이건 이렇게 말할 수 있습니다. 어떤 문학작품을 보는데 '뫼산이 높디하되...서당견 삼년이면...' 뭐 이딴 작품이 있다고 한다면 이러한 작품을 갓 유치원에 입학하신 유딩분께서 이 글을 보신다면 '음...이 문학작품은 이래서 어쩌구 저쩌구'라고 평가를 내린다면 그건....뭔가 세상이 잘못된겁니다. 자고로....유딩때는 유희왕카드에 열광하고 포켓몬을 사랑해야.....가 아니라 에헴!!
어쨋든 갓 유치원에 입학한 어린아이가 난해한 국문학을 이해하기란 쉽지 않겠죠. 그렇다면 이걸 쉽게 이해할수 있게 하려면 어떻게 해야 할까요. 책안에 한자풀이도 넣어주고 어린아이의 눈높이에 맞는 설명도 같이 곁들여 준다면 어린아이도 쉽진 않겠지만 어느정도 국문학을 읽어보려고 하지 않겠습니까. 혹은 시각장애인이 책을 읽기 위해선 첨자가 필요하죠. 책에 부록을 통해 첨자로 인쇄하여 같이 껴서 준다면 누구나 이 문학작품을 읽을수가 있겠지요.
접근성이란 누구나가 쉽게 읽을수 있도록 접근 장벽을 낮추는 요소입니다. 실제 웹에서 이런 예를 든다면 가장 크게 작용되는 브라우저의 종류, 사용자의 환경적인 요인 등에 의해서 접근성이 판단될 수 있을듯 합니다.
서론이 너무 길었는데 이렇게 두가지 특성들을 잘 이해하고 작성하신다면 웹표준에 가까운 문서들을 만들어 낼수 있을 겁니다. 그러면 본격적으로 테이블 태그를 하나 작성해보도록 하지요.
가장 좋아하는 가수 9명
아티스트 번호 |
가수 |
앨범 |
|---|
1 |
박완규 |
Sweet Lessons 41 |
2 |
최재훈 |
Return |
3 |
임재범 |
The story of Musicians - 옛사랑 2 |
4 |
쿨 |
사랑을 원해 |
5 |
이적 |
나무로 만든 노래 |
6 |
임창정 |
Different Color |
7 |
퀸 |
Say It`s Not True |
8 |
김광석 |
너무 아픈 사랑은 사랑이 아니었음을 |
9 |
트랜스픽션 |
Revolution |
|
소스가 약간 길긴 하지만 별로 어려운건 없으니 하나하나 살펴보도록 하지요.
우선 스크린샷을 보겠습니다.
스타일 시트를 적용시키기 전의 모습
스타일 시트를 적용시킨 모습
아래와 위의 스크린샷의 모습이 다른걸 보실수가 있습니다. 아무래도 밑의 이미지가 좀 더 보기가 좋죠.
이런 모습을 가독성이 좋다고 할수가 있습니다. 하하하하~
썸머리와 캡션
가장 좋아하는 가수 9명이부분이 보이시죠? 여기는 현재 테이블로 표시한 데이터가 무슨 데이터인지 표시를 하는 일종의 제목이라고 할수 가 있습니다. 물론 안써주셔도 괜찮지만 가능하다면 사용하는 편이 좋습니다.
summary속성은 현재 테이블의 내용을 요약해서 보여줄수 있는 역할을 합니다. 이미지 태그에 alt속성과 같다고 할 수 있죠.
thead, tbody, tfoot
테이블 내용을 좀 더 세분화 시켜서 구성을 할수가 있습니다. 물론 화면상에서는 이걸 쓴다고 해서 달라지는건 없습니다만 스타일 시트를 적용시킨다거나 소스의 가독성을 생각한다면 저런식으로 나눠주는게 좋다고 생각합니다.
테이블 안에서 이 3개의 태그는 사용의 제한이 있는데 thead와 tfoot은 한 테이블에서 하나만 작성을 하실수가 있습니다. 하지만 tbody의 경우는 여러번 사용해도 무방합니다.
아티스트 번호 |
가수 |
앨범 |
|---|
행의 제목 부분은 위 소스와 같이 td대신 th를 사용해 작성하도록 합니다. 그리고 특이한 속성이 나오는데 scope라는 속성입니다. 이 속성은 현재 나타낸 제목이 열(col)에 해당되는건지 행(row)에 해당되는건지 명시하는 겁니다. 물론 화면상 변화는 없습니다.
col, colgroup
이건 멀까요?
행을 나누는 태그는 tr입니다. 이 tr태그에 스타일을 먹이면 그 줄의 td들은 모두 상속을 받게 되서 한번에 스타일 적용이 가능합니다. 그렇다면 반대로 열을 한번에 적용시킬려면 어떻게 해야 될까요?
음.....아무리 생각해도 일일히 적용시키는 수밖에 없죠? 하지만 W3C에서는 이 문제를 해결하기 위해 col엘리먼트와 colgroup엘리먼트를 제공하고 있습니다. 하지만 안타까운건 이 엘리먼트를 지원하는 브라우저들이 많지 않다는 거지요...ㅜ ㅡ
현재는 그렇게 중요한 역할을 하는 것이 아니니 그냥 이런게 있구나만 알고 넘어갑시다.
테이블 테두리
테두리에 대한 모델은 두가지가 있습니다. 한가지는 분리모델(separate) 또한가지는 공유모델(collapse) 입니다. 분리모델은 각 셀마다 테두리선을 지정하고, 공유모델에서는 각 셀이 하나의 테두리선을 함께 사용합니다. 대부분 브라우저는 분리모델을 기본으로 하고 있습니다. 그냥 테이블 속성에 border="1"이라고 주시면 약간 뭔가 두껍게 표시되는 모습을 보실수가 있습니다.
이건 기본적으로 분리모델로 테이블 테두리가 적용되어 있기 때문입니다. 그렇기 때문에 겹치는 부분을 하나의 라인처럼 보이게 할려면 border-collapse: collapse; 라는 속성을 주셔야 합니다.
table {
border-collapse: collapse;
width: 40em;
border: 2px solid #ddd;
}
화면 모양을 만들어 볼까요?
caption{
font: bold 1.2em 돋움 sans-serif;
margin: 1em 0;
}
캡션을 좀더 강조해서 제목부분처럼 보이게 했습니다.
em이라는 단위가 나오는데 이건 좀더 나중에 설명하겠습니다.
col{
border-right: 1px solid #ccc;
}
col#album{
border: none;
}
열의 오른쪽 라인에 옅은 회색의 줄을 넣어주기 위해 col 선택자에 모두 1px 줄을 지정해 주었습니다.
하지만 맨 오른쪽에 있는 열은 적용이 되면 안되겠죠. 왜냐 본래 테이블 테두리가 있으니까요. 그래서 album의 열에는 border를 주지 않았습니다.
thead{
background-color: #ddd;
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
}
각 열의 제목부분에 해당되는 thead부분도 본문과는 다르게 표시하면 좋겠지요.
배경색과 라인을 좀더 새롭게 해줬습니다.
th{
font-weight: normal;
text-align: center;
}
th부분은 본래 bold체가 기본으로 되어있지만 이 부분은 그냥 normal로 지정해주었습니다.
text-align 은 글자 정렬 속성인거 아시죠?
#artistNumHead{
text-indent: -1000em;
}
번호에 해당되는 열제목을 숨기기위해서 들여쓰기 속성을 음수로 지정하였습니다.
안보이게 할거면 왜 써줬냐는 분도 있지만 써주는게 좋습니다. 왜냐 시각장애인을 위한 스크린리더라는 프로그램이 있는데 이게 간단하게말해서 뭐냐면....그냥 음성으로 화면의 내용을 말해주는 프로그램입니다.
그렇기 때문에 제가 앞전에 말씀드린 웹의 접근성을 위한다면 화면상에는 보이진 않아도 소스상에는 보여줘야
하겠죠?
추가사항 정리
.odd{
background-color:#edf5ff;
}
이건 각 행마다 색을 다르게 해주기 위해서 지정해놓은 스타일입니다.
전 홀수행에만 class속성을 이용해 적용시켜주었습니다. 물론 프로그래밍에선 반복문을 이용해 지정을 하겠지요.
tr:hover{
background-color: #3d80df;
color: #fff;
}
thead tr:hover, tfoot tr:hover{
background-color: transparent;
color: inherit;
}
IE의 경우 hover라는 선택자를 a태그에서만 지원합니다.
그래서 IE에서는 자바스크립트를 사용해서 바꿔주는 방법이 있지만 여기서는 범위를 벗어나는 이야기이므로 따로 언급하지 않겠습니다. 추가적인 사항이니 그냥 이런식으로 효과를 줄수 있다는 걸 알아두세요.
thead td{
border-right: 1px solid #EEE;
}
이 부분은 IE에서 테이블 태그안에 border라는 속성을 주지 않을경우 아래와 같이 스타일을 주었다고 하더라도
table {
border-collapse: collapse;
width: 40em;
border: 2px solid #ddd;
}
테이블 안쪽의 셀에는 라인이 표시되지 않습니다. 그래서 각 열의 오른쪽을 col 셀렉터에 적용시킨 스타일대로 똑같이 표기하기 위해 준 스타일입니다.
별거 아닌 내용인데 글이 길어졌네요...후...
도움이 되셨길 바라며 다음 시간에는 박스모델에 대해서 알아보도록 하겠습니다.
중요한 부분이니 다음 시간을 기대해 주세요~~ bye!!
