Sysnet 웹 사이트의 CSS 2.1 변환 기록
오~~~ HTML5 준수한 것에 대한 여세를 몰아서 CSS도 바꿔봤습니다. ^^
다음의 css validator를 사용했고,
W3C CSS 검사 서비스
; http://jigsaw.w3.org/css-validator/
이것도 역시 방문하시는 분들이 쉽게 CSS 2.1 표준 준수에 대한 현황을 확인할 수 있도록 웹 페이지의 왼쪽 하단에 "W3C CSS" 이미지를 제공해 두었고, 그것을 클릭하시면 SYSNET 웹 페이지들이 표준 준수를 하고 있음을 알 수 있습니다.
현재 SYSNET 웹 사이트에서 '2011년 6월 10일' 이전에 쓴 게시물을 제외하고는 모두 CSS 2.1 규격에 부합하고 있습니다. (물론, 앞으로의 글들은 모두 규격을 따를 것이고.)
여기서는 제 경우에 오류난 것들을 어떻게 바꿨는지를 사례를 들어 설명해 보겠습니다.
잘못된 값 : font-family Lexical error at line 6, column 18. Encountered: "\ub9d1" (47569), after : "" 맑은 고딕, Consolas, Verdana;
아하... css validator가 한글을 싫어하는군요. ^^; 어쨌든 한글 폰트명이 들어있으면 저렇게 오류를 발생시켰습니다.
그래서, "맑은 고딕"을 영문으로 - "Malgun Gothic" - 바꿔주었습니다. ^^
속성 overflow-x는 CSS 레벨 2.1에 존재하지 않지만 [css3]에는 존재합니다 : scroll scroll
속성 overflow-y는 CSS 레벨 2.1에 존재하지 않지만 [css3]에는 존재합니다 : scroll scroll
이에 대해서는 아래와 같은 답변이 있는데요.
overflow-x property not valid css 2.1 what to do instead?
; http://www.sitepoint.com/forums/general-development-issues-140/overflow-x-property-not-valid-css-2-1-what-do-instead-603388.html
실제로 저도 "overflow: auto;"로 변경해 보니 오히려 필요 없는 상황에서 스크롤 라인을 없애주니 더욱 매끄러운 HTML 문서가 표현되었습니다.
잘못된 값 : border 오직 0만이 length일 수 있습니다. 값 뒤에는 반드시 단위가 표현되어야 합니다 : 1 1
위의 오류가 발생한 css 원문은 다음과 같습니다.
table.sitelist
{
border-spacing: 0;
width: 100%;
border: 1;
}
사실,
지난 HTML5 작업하면서 여러 가지 속성값들을 css로 이전할 때 겪었던 문제가 바로 '단위'를 지정하는 것을 깜박해서 정상적으로 UI가 나오지 않는 것이었습니다.
css validator를 사용하니, 저렇게 단위를 사용하지 않은 것들을 검증해 주고 있습니다. 그래서, "px"를 붙이는 것으로 문제 해결.
잘못된 값 : cursor hand는 올바른 cursor 값이 아닙니다 : hand hand
정말이지, cursor hand 값이 CSS 표준이 아닌 줄은 몰랐군요. ^^; 다음의 글에 따라서,
CSS cursor
; https://developer.mozilla.org/en/CSS/cursor
"cursor: pointer" 값으로 바꿔주었습니다.
알 수 없는 오류 org.w3c.css.parser.analyzer.TokenMgrError: Lexical error at line 1, column 14. Encountered: "?" (63), after : ""
이 오류를 해결하는 것이 가장 난감했습니다. css validator가 정상적으로 오류가 발생한 라인 정보를 보여주지 않기 때문에 위의 정보만으로는 도대체 어디서 잘못된 것인지 알 수 없기 때문입니다.
어쩔 수 없습니다. CSS 검사 대상이 되는 웹 페이지를 브라우저로 방문하고 '소스 보기'를 한 다음 그 내용을 그대로 HTML 파일로 저장해서 검사시켰습니다. 물론, 위의 오류가 발생하지 않을 때까지 HTML 태그 삭제를 반복했고, 결국 다음의 구문을 삭제했을 때 오류가 발생하지 않게 되었습니다.
<h1 style='font-family: 맑은 고딕, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>Sysnet 웹 사이트의 HTML5 변환 기록</h1><br />
뭐가 원인인지 아시겠죠? ^^ 그렇습니다. style 구문에 들어간 font-family의 한글 이름 때문입니다. css validator가 한글하고 별로 안 친한 것이 다시 한번 증명되고 있습니다. ^^; 따라서 "맑은 고딕"을 이번에도 "Malgun Gothic"으로 변경해 주는 것으로 해결!
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]