in 웹 디자인, 웹 접근성

CSS 선택자 남용 유감

CSS는 Cascading Style Sheet의 약자이다. 의역하면, 계단형(상속형) 스타일 시트이다. CSS는 (x)Html의 외양을 꾸미는 역할을 하며, 이름에서 알 수 있듯이 CSS의 가장 큰 특징은 상속형이다. 각각의 CSS 요소들의 정의된 성질들이 조상/자손, 부모/자식 관계 속에서 상속된다는 것이다.

이렇게 상속되는 특징을 잘 이해하고, CSS를 제작한다면, 웹문서는 출렁이는 파도처럼 부드러움을 갖게될 것이다. 웹사이트 전체적인 통일성과 유동성을 쉽게 구성할 수 있고, 추후 수정/보완할 수 있다.

그렇지 않고 CSS를 제작한다면 흡사, 웹문소의 구성요소들은 각개전투를 벌이다가 웹사이트 전체적인 전투진형을 흩뜨릴 것이며, 장군(제작자)의 작전명령을 오만년이 걸려서야 수행할 것이다. ^^;

이런 상속되는 특징을 이해하기 위해선 먼저 CSS 선택자를 이해해야 한다. 즉, CSS 선택자 이해 -> CSS 상속성 이해 -> CSS 이해가 되려남.. 이와 관련해서 현석님은 “선택자를 알면 CSS의 절반을 안다”라고 말했었다.

최근 UTF-8 인코딩을 지원하고, 웹표준을 준수한 GR보드가 공개됐다. 또한 개인화기능이 추가되고, 웹표준을 준수한 올블로그V2가 베타 테스트 중이다. 이 두 사이트가 웹표준을 준수한다고 해서 코드를 잠깐 확인해보니, CSS 선택자(Html 요소, Class 선택자, ID 선택자)가 남용된 걸 알 수 있었다.

웹 유효성 검사(Validate)는 수단이지 목적이 아니다. 검사를 통과했다고 표준도 아닐 것이다. 충분히 의미있고(sementic), 구조적인(Structual)인 마크업을 사용하도록 조금 더 노력한다면, 정말 멋진 사이트가 될 것이다.

GR보드와 올블로그 개발자 여러분 조금 더 힘내세요! 파이팅~!

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. 올블로그는 국내 대표 블로그 메타 사이트잖아요. 작년 여름부터 CDK(css 디자인 코리아) 회원들은 올블의 웹표준화에 관심이 있었답니다.

    직접 돕진 못하더라도, 이렇게나마 작은 의견 남기는 것 뿐이네요~ ^^:

    하늘님 파이팅~!!

  2. 그런데 이건 많이 써보는 수 밖에 없더라고요. 직접 코딩하는 게 항상 그렇지만.. 아무리 이론을 머리론 알고 있어도 직접 코딩하면서 벽에 부딫혀보지 않으면 익혀지지 않더군요. 저도 초보일 때는 잘 몰랐지만, 지금은 막 xhtml/css 새로 배우는 분들의 소스를 보면 class 남발 되어 있는 걸 보면서 나도 옛날엔 저랬구나.. 하고 깨닫게 되더군요.

    물론, 제가 그걸 그 분들에게 지적해준다고 한들 조언은 되겠지만 결국엔 그 습관이 한동안은 이어질거라는 것. 학문(?)의 이론과 실재란 참.. ^^;;

    어쨌든 그저 많이 코딩해보는 수 밖에 없는 것 같습니다.

  3. yser님/ 경험 측면도 있겠지만, 저는 기본을 제대로 학습할 기회가 없었다고 생각합니다. (저 역시 그랬구요)

    하지만 대부분 눈에 보이는 디자인에 관심을 갖을 뿐, 그 뼈대를 이루는 코드에 누가 관심을 갖을까요? ^^;