W3C CSS 유효성 검사, CSS Validation Service

요즘에는 웹표준, 웹접근성 등의 이야기를 많이 하죠. 그래서 HTML의 유효성 검사도 많이들 하시는 것 같더라고요. W3C에서 제공하는 CSS 유효성 검사라는 게 있는데, 아시는 지 모르겠네요.

저도 처음에는 웹표준에 맞게 스킨의 HTML을 작성했지만 한 번 해놓으면 끝나는 것이 아니라 글을 쓸 때마다 매번 신경써줘야하는 거라서 매우 귀찮더라고요. 여러가지 플러그인이나 기능을 사용할 수 없기도 하고요. 그래서 지금은 포기한 상태에요.

그에 반해 CSS는 한 번 해놓으면 글을 쓰는 것과 전혀 상관이 없어요. 물론 수정할 수 있는 부분이 많지 않아서 100% 만족시키기는 어렵지만 한 번의 설정으로 효과를 볼 수 있지요.

W3C에서 제공하는 CSS 유효성 검사 사이트에 접속합니다.

주소를 이용하거나 파일업로드, 직접 입력의 세 가지 방법으로 검사를 할 수 있어요. 블로그 주소를 넣고 검사 버튼을 눌러보죠.

CSS Validation Service 사이트

검사 결과가 나와요. 윗쪽에는 오류, 가운데는 경고, 마지막은 오류를 수정한 css입니다.

오류가 110개나 나왔네요. 하지만 티스토리 사용자가 수정할 수 있는 css 파일은 style.css 파일밖에 없기 때문에 수정할 수 있는 오류는 아래 5개 뿐이에요. 나머지는 티스토리의 기본 파일이라 수정이 안돼요.

CSS Validation Service 결과

오류는 설정한 CSS가 제대로 적용되지 않아요. 따라서 꼭 수정해야하는 내용이지요. 대부분은 오타이거나 세미콜론(;)을 빼먹는 등 아주 단순한 실수들이에요. 그 외에 생기는 오류들은 css 정보를 제공하는 사이트를 참고하여 수정하면 됩니다.

일부는 css 버전에 따라 달라 생기는 오류도 있어요. 위 첫번째 그림의 "추가설정"에서 css 버전을 달리해서 검사하면 확인할 수 있어요.

경고는 수정하지 않아도 블로그의 모양에는 아무런 이상은 없지만 좀 더 효율적인 CSS가 될 수 있도록 가능하면 수정해주세요.

맨 아래에 보면 오류를 수정한 css가 나오는데 그걸 그대로 가져다쓰면 블로그가 원래 본인이 생각했던 것과 다르게 보일 수 있어요. 그래서 복사해서 사용하는 건 추천하지 않고, 그냥 오류 내용을 수정하시는 게 나아요.

여담이지만 티스토리는 기본적인 규칙도 지키지않는 css파일을 사용하는 지 모르겠어요. 아마도 핵을 쓴 것 같은데, 굳이 그럴 필요가 있는 지 의문이에요.

블로그 속도 측정 - Google PageSpeed Insights에서도 티스토리의 플러그인들 때문에 속도를 조금 더 빠르게 할 수 없었는데, css에서도 문제가 있네요.

그리드형

티스토리툴바