div만 쓰면 웹표준?

예전에 작업해줬던 사이트를 오랫만에 방문했더니 뭔가 느낌이 묘하다. 얼핏 봤을 때는 몰랐는데, 제대로 보니 여기저기 많은 부분들이 바뀌어있다. 작업할 때 일 분배 건으로 조금 기분이 상하기도 했었고, 서로 바쁜 탓에 애를 먹었던 기억이 있었는데 어쨌든 기능이 추가되고 한 거 보니 개발을 담당할 다른 누구를 찾은 것 같다.

ftp 비밀번호 등은 아직 기억하고 있지만, 구지 로그인해서 내 소스를 얼마나 잘 이해하고 활용했는지까지는 알고 싶지 않았다. 다만 일부 구간만 스크롤 되고 하는 것들에 fixed positioning이 사용된 걸 보니 웹표준을 조금 아는 사람이 작업을 한 것 같아서 ‘소스 보기’를 클릭했는데, 어라?

dl, dt, dd 같은 태그들을 사용하려고 했던 거 보면 분명 웹표준에 관심이 있는 사람이었을 것 같다. 하지만 dl(definition list)에서 dt(definition term)과 dd(definition description)이 가지는 의미에 대해서까지는 제대로 알고 있지 못했나보다. 위에서와 같이 마크업된 컨텐츠라면 ‘”글번호. 글쓴이”는 “제목 날짜” 이다.’ 라는 의미가 부여된다.

웹 표준은 테이블을 사용하지 않는 것이라는 잘못된 인식에서 시작한 문제로 보이는데, 게시판 형식이라면 위에서 처럼 표현하기 보다는 아래와 같이 테이블을 사용해서 표현하는 것이 맞다.

웹 표준은 테이블 형태로 표현되지 않는 것들을 테이블을 이용해서 표현하는 것을 하지 말자는 것이지 테이블을 아예 사용하지 말자는 것이 아니다.

살펴본 김에 다른 페이지들도 살펴보기 시작했다. 어라?

오히려 dl이 사용되었음 좋았을 곳에는 dl을 활용하고 있지 않았다. ‘위치’, ‘년도’ 등은 IR (Image Replacement) 기법을 활용하고 있는 것을 확인할 수 있었는데 그렇다면 아래와 같이 마크업 하는게 더 좋지 않았을까하는 생각이 든다.

위치나 년도 뒤에 콜론(:)을 꼭 붙이고 싶다면 dt { margin-right: 10px; background: url(colon-img.gif) no-repeat right; } 같은 방법을 이용하면 된다. 태그가 나타내는 바가 ‘위치는 한국이다.’ 이므로 콜론이 빠지는 것이 의미론적으로는 더 맞을 것 같다.

아래 코드는 어떨까? title속성은 그 엘리먼트에 있는 내용에 대해 설명해주기 위한 용도로 사용된다.

title 속성은 스크린 리더를 사용하는 시각 장애인들에게 큰 도움이 되겠지만 좋은 소리도 여러번 들으면 짜증나는 법이다.

코드에 prototype 등이 활용된 것을 보면 분명 손으로 한 마크업일 것 같고, 여러모로 웹표준에 관심있는 사람이 짠 코드로 보이는데 조금씩 아쉬운 부분이 보인다.

물론 아예 신경도 안쓰고 위지윅으로 날림 작성한 페이지보다는 저런 페이지가 나을 지도 모르겠다. 하지만 웹표준은 그저 테이블 대신 div를 사용하는 것이 아니다. ‘각각의 태그들을 자신이 쓰일 곳에 제대로 써주는 것’ 그게 웹표준의 시작이 아닐까?

Published by

2 thoughts on “div만 쓰면 웹표준?”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">