숫자로 시작하는 CSS 클래스명

dev | 2009-11-06

서울신문 메인페이지 서울신문 웹사이트입니다. 다른부분도 많이 깨지지만 글자에 대한 스타일이 거의 적용이되지 않은 것을 볼 수 있습니다. CSS 코드를 열어보니 CSS 클래스명을 숫자로 시작한 것이 많습니다.

.07_log {font-size:8pt color:#717171; text-decoration:none}
.07_log a{font-size:8pt; color:#717171; text-decoration:none}
.07_log a:visited {text-decoration:none; color:#717171}
.07_log a:hover {text-decoration:none; color:#E04540}
.07_log a:active {text-decoration:none; color:#717171}

.07_sm {font-size:9pt color:#191243; text-decoration:none; padding: 1px 0px 0px 11px}
.07_sm a{font-size:9pt; color:#191243; text-decoration:none}
.07_sm a:visited {text-decoration:none; color:#191243}
.07_sm a:hover {text-decoration:none; font-weight: bold; color:#191243}
.07_sm a:active {text-decoration:none; color:#191243}

CSS 2.1문서의 글자와 대소문자에서는 아래와 같이 설명하고 있습니다.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B26 W3F".

CSS 2.1과 CSS1 문법을 비교한 부분에서는 아래와 같이 설명하고 있습니다.(정확히 무슨 말인지는 저도 잘 모르겠네요.)

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".35 5ft")

간단히 말해서 CSS 클래스명이 숫자로 시작해서는 안된다는 얘기입니다. 서울신문 웹사이트는 숫자로 시작하는 클래스명을 많이 사용해서 서체 설정과 관련된 부분은 거의 다 누락되었습니다. 아마도 서체의 크기를 클래스명 앞부분에 표기한 것 같은데 이 부분을 뒤로 옮기면 해결될 것입니다. 더 좋은 것은 서체 크기와 같이 디자인과 관련된 의미를 클래스명에 사용하지 않고 콘텐츠의 의미를 나타내는 키워드를 사용하는 것입니다.

아마도 개발자 분이 IE외의 브라우저는 거들떠도 안본 것 같습니다. 한번 열어보기만 해도 뭔가 문제가 있다는 것을 쉽게 발견했을텐데 말입니다. CSS를 사용했지만 IE외의 브라우저에서는 형편없이 깨지는 사이트들이 많이 보여서 안타깝습니다. 웹표준을 하려고는 하는데 제대로 올바른 길로 가지 못하고 있는 것 같습니다. 좋은 정보있으면 서로들 나누고 도왔으면 좋겠습니다.

Comments

  • daybreaker 2009-11-09

    예전보다는 확실히 웹사이트들의 호환성이나 표준 준수가 많이 좋아지긴 했는데 이런 경우처럼 아주 기본적이지만 간과하기 쉬운 것들을 한두 개 놓치는 바람에 엉망이 되는 경우가 꽤 있는 것 같습니다. 포탈에서도 세세한 영역으로 들어가면 아직도 자바스크립트 전용 링크를 제공해서 무심코 Ctrl+Click했다가 빈 창을 보고 어리둥절해하는 경우가 왕왕 있죠. (주소창을 보면 javascript:... -_-) 하루빨리 개선되길 바랄뿐입니다.

  • 신현석 2010-08-30

    오늘 확인해보니 메인 페이지에서는 숫자로 시작하는 클래스들이 다 고쳐져서 대부분의 브라우저에서 잘 보이네요. 계속 화이팅 하시길 바랍니다.

Post a comment

:

: 공개 되지 않습니다. Gravatar를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.