HTML colgroup thead tbody tfoot scope 개념 정리 및 사용 방법
이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다.
사실 표 테이블을 작성함에 있어서는 그냥 일반적인 tr, th, td 의 요소들만 알고 계셔도 충분히 만드실 수 있습니다. 하지만 이 내용에서 나오는 요소들의 태그를 활용하는 이유는 바로 접근성 때문인데요, 우리는 단순히 시각화된 내용을 통해 정보를 가져가지만, 세상에는 장애를 가지신 분들도 계십니다. 바로 그 분들을 위한 요소라고 생각하시면 좋을 것 같습니다. 시각장애인 분들은 보통 안내음성을 통해서 정보를 얻게 되는데, 제목에 나온 태그들이 바로 음성 전달을 효과적으로 하기 위한 요소들이라는것만 이해하시면 됩니다. 그러면 바로 예시를 통해 알아보겠습니다.
이러한 표를 만든다고 가정해 보겠습니다. 정상인이 볼 때에는 쉽게 정보를 알 수 있습니다. 태블릿PC와 스마트폰 판매현황에 대한 표이고, 상/하반기로 나뉘었고 마지막에는 총 판매수가 나와있다는걸 너무나도 쉽게 알 수 있죠?
만약 음성으로 전달받아야 하는 상황이라면 어떻게 해야 할까요? 그냥 처음부터 차근차근 텍스트를 읽어준다고 가정해 봅시다. 구분 > 태블릿PC > 스마트폰 > 상반기 판매수 > 2만대 > 5만대 > 하반기 판매수 > 3만대 > 11만대 > 총판매수 > 5만대 > 16만대 이렇게 듣게 되실 것입니다. 이 표는 내용이 적어서 그나마 이해하는데 큰 어려움은 없지만, 만약 열이 10줄 이상인 표라고 한다면 어떻겠습니까? 무슨 소린지 햇갈릴 수 있을 겁니다. 그래서 이렇게 코딩을 하는 이유가, 바로 효과적인 음성전달을 위해서 입니다. 어떻게 요소들이 마크업이 되어있는지 아래의 스크린샷을 보시면서 이해하시면 되시겠습니다.
보시면 summary 라는 태그가 보입니다. 이 요소는 실제 웹상에서는 보이지 않습니다. 음성 프로그램으로 현재의 웹페이지를 출력하게 된다면 그 때 음성으로 전달하게 되는 요소입니다. 내용은 작성해놓은 텍스트를 읽게 됩니다. 그러면 이 표가 어떤 내용을 담고 있는지 파악을 쉽게 할 수 있겠죠?
그리고 보시면 thead 다음에 통상적으로 따진다면 당연히 tbody가 와야 하는데, 아이러니하게도 tfoot 이 먼저 왔습니다. 이유는 뭘까요? 바로 신속성 때문입니다. 어찌되었듯 음성인식 프로그램은 태그들을 순차적으로 읽게 되고, tfoot에 있는 총 판매수를 먼저 읽히게 하는 이유는 본문 내용이 중요하지 않는 분들이 있을 수 있기 때문입니다. 나는 본문보다는 빨리 결론부터 알아야 한다면 굳이 본문 음성 내용을 다 들을 필요는 없으니까요.
그리고 scope 라는 태그가 새롭게 등장했습니다. scope="col" 혹은 scope="row" 라고 작성되어 있는데, 이 역할 또한 음성을 효과적으로 재생하기 위한 순서를 정하는 요소들 입니다. col은 현재 이 텍스트는 가로줄에 대한 목록이라는 것을 뜻하고, row는 세로줄에 대한 목록이라는 의미 입니다. 예제에서 예로든 내용으로 말씀 드리자면, "구분" 은 "상반기 판매수" 와 "하반기 판매수" 그리고 "총 판매수" 라는 목록의 대표 입니다. 그러므로 세로의 의미인 col 이 쓰여졌습니다. 그리고 상반기/하반기/총 판매수는 세로 라인에 있는 각 텍스트들의 대표 목록이죠. 그래서 row 가 사용된 것입니다. 이 개념이 좀 햇갈릴 수 있는데, 단순하게 생각해 보세요. 어떤 내용을 대표하게 되는 메뉴인지만 생각하면 됩니다.
코딩 마크업은 그냥 많이 해보는게 최고인 것 같습니다. 저도 이 부분을 하루종일 붙잡고 있었고 결국 이해하는데 성공했습니다. 어렵게 이해한만큼 기억이 오래 남는다고 하지만 혹시 또 까먹을 수 있으니 이렇게 글로 남겨둬야겠습니다. 제 뇌는 언젠가 저를 배신할테니 말입니다. ㅎㅎ 그래도 새로운걸 배우니까 상당히 보람찬 하루하루를 보내고 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
