티스토리 블로그 XHTML CSS 오류 잡기

티스토리 블로그 XHTML CSS 오류

티스토리 블로그를 현재 사용 중 입니다. 티스토리는 테터툴즈 기반의 블로그로 XHTML ,CSS 를 따르는 블로그이죠. 티스토리 블로그 팁을 가끔 쓰면서 가끔은 저도 게을러서 제 블로그가 오류가 있음을 알면서도 넘어갈 때 도 있었죠. 웹표준은 W3C 에서 제안하는 내용에 맞춰서 작업을 해야하죠. 자신의 블로그에 오류가 얼마나 많은지 검사를 해보신 분이 있는분도 있을테고 안해보신 분도 계실겁니다. XHTML CSS 오류를 어떻게 잡는지 한번 살펴보고 왜 오류 잡기를 해야하는지 알아봅시다.

티스토리 블로그 오류는 한번 체크를 반드시

티스토리 블로그 오류 체크는 한번씩은 해보아야합니다. 자신이 넣은 코드나 블로그 팁등이 뭔가 어긋나게 안맞게 되어있을 수 있기 때문이죠. 자신이 넣은 코드는 모든 브라우저에서 특별한 경우가 아니라면 모두 일관되게 보여야합니다. 만약 지원을 안한다면 빼버리는 등의 꼼수를 사용해서라도 지켜야하죠.

자신의 블로그에 오류가 많다면 특정 브라우저에서만 잘 보이고 다른 브라우저에서는 레이아웃이 어긋나보이거나 댓글을 달 수 없는 상태이거나, 사용자가 블로그로 들어 왔을때 지연시간이 발생한다던가 여러가지 문제가 생길 수 있습니다.

XHTML 검사 : http://validator.w3.org/
CSS 검사 : http://jigsaw.w3.org/css-validator/

XHTML , CSS 오류를 검사해보고 자신의 블로그의 에러를 하나씩 잡아나가 봅시다. 완전히 에러를 없애진 못하더라도 심각한 에러는 고쳐둔다면, 만족할만한 성능을 블로그가 내어줄겁니다.

XHTML CSS 오류 보는법

위 XHTML , CSS 오류 검사 링크를 누른 뒤, 자신의 블로그 주소를 입력을 하고 검사를 합니다. Show Source 를 누르면 오류가 발생한 줄도 확인이 가능합니다.

XHTML 검사를 한 모습입니다. Show Source 를 해두면 해당 내용을 바로 볼 수 있습니다. 티스토리 스킨 자체에는 반복되는 부분을 나타낸 치환자 부분과 해석되는 부분등이 있습니다. 그런 부분들이 해석될 때, 나타나는 오류등을 진단을 합니다. XHTML 은 열고 반드시 닫아야한다는 원칙이 있죠. 그 부분을 어기면 위와 같이 오류가 나옵니다. 이 외에도 일일이 다 열거하기 힘들만큼 참 여러가지 오류가 있습니다. 오류가 나타난 줄을 확인 하고 해당 설명을 보면서 오류를 차근 차근 잡아가야합니다.

티스토리 XHTML CSS 오류 잡기위해 포기할 것들

티스토리 블로그를 기본스킨 즉 스킨 자체에는 XHTML , CSS 를 모두 완벽하게 체크를 했더라도 티스토리의 플러그인과 화면나타내는 구성등을 바꾸면 에러가 나는 부분이 있습니다.

댓글 이모티콘

댓글에 나타나는 글쓴이의 이모티콘을 나타나게 하면 해당 부분에 오류가 있습니다. 이부분을 나타나지 않게 하려면 이모티콘이 나타나지 않게 해야합니다.

카테고리 글 더 보기

CSS 에서 오류가 납니다. CSS3 에서는 해당 옵션이 있지만 CSS2.1 에는 없기에 나는 오류입니다. 넘겨도 괜찮은 오류이지만 CSS2.1 기준으로는 오류가 발생합니다.

트랙백 복사 , 글쓰기

환경설정의 트랙백 복사 글쓰기 버튼을 생성하면 이부분에서 에러가 발생합니다. 이부분을 사용하지 않아야 에러가 나지 않습니다.

XHTML CSS 오류 거의 다 잡았지만 뷰애드는

XHTML 검사를 하면서 스킨에 있는 오류는 거의 잡았습니다. 소개, 방명록, 카테고리 등에서 살펴보면 에러가 0 (XHTML 1.0 Transitional) 으로 나오네요.  XHTML 오류를 잡는 작업은 꾀 고되고 번거로운 작업입니다. 여러번 검사를 해보면서 에러를 하나씩 잡아나가야 하기 때문이죠. 마지막 이 녹색줄의 오류검사를 통과했다는 부분을 보면 감동이 밀려오죠.

씨디맨의 컴퓨터이야기 블로그를 첫페이지를 검사해보면 7 Errors, 6 warning(s) 로 나옵니다. 이 부분의 에러는 다음의 새로운 수익원인 뷰애드에서 나오는 에러더군요. 그 배너 하나에서 7개의 에러를 뿜어냅니다. 꼭 수정하려면 코드를 강제로 수정해버리면 되긴 하겠지만, 강제로 수정하면 뷰애드 정책에 어긋나니 이부분은 뷰에드에 문의를 해봐야할듯하네요.

뷰애드에서 에러를 내는 부분을 살펴보니 & 를 & 로 쓰지 않아서 나는 오류와 몇몇 지정되지 않은 속성값을 사용한 부분, 중복된 사용값 등이 있네요. 이런 오류까지 모두 잡아볼까 하는 생각이 잠깐 들었지만, 아무래도 뷰애드에 먼저 문의를 하고 하는게 우선일듯해서 문의를 먼저 해볼까 생각중입니다. 이 부분은 뷰애드에서 조금만 수정해주면 해결이 될듯하니까요.

블로그 튜닝은 이뤄져야 한다

블로그를 최적화 하는 작업은 반드시 해야합니다. 자신의 블로그에 수천명이 동시에 들어왔는데 스킨이 무겁거나 오류가 있어서 재대로 보여주지 못한다면 손해겠죠. (X)HTML 부분에 해당하는 skin.html 부분에 <img> 태그의 내용은 스킨을 다시 불러올 때 항상 다시 불러오는 부분도 있습니다. CSS 에 이미지를 지정해두면 한번 불러와진 부분은 로컬 컴퓨터에서 불러오기때문에 속도가 빠르다는 장점이 있죠. 다만 CSS 는 이미지가 수정되었을때 다시 불러오지 않으면 이전 이미지가 보인다는 문제가 있고, (X)HTML 에 지정한건 느리긴 하지만, 항상 새로운 이미지가 뜬다는 장점도 있죠. 이 외에도 IE6 이하 버전에만 해당하는 내용과 브라우저간의 특성. 아직까지는 경계가 애매하여 꼼수등으로 해결하는 부분등 알아야할 부분들이 많이 있습니다. 이미지의 무게 또한 중요합니다. 가볍게 해두어야 보다 많은 사람이 부하없이 가져갈 수 있겠죠. 이런 여러가지를 알아야 튜닝이 가능할겁니다.

제가 이번에 글 쓴 목적은 제가 에러를 거의 다 잡고 뷰애드에 대해서 글을 쓰기 위함과 기록을 하기 위해서이지만, 오류를 어느정도 인지하고 어느정도는 잡아주는게 좋다는걸 알려주기 위함 이었습니다. 오류를 100% 모두 다 잡는건 힘들지도 모릅니다. 다만, 큰 오류를 잡고 잡을 수 있는 사소한 오류들을 모두 다 잡아준다면 블로그를 방문해준 블로거에게 보다 좋은 인상을 심어 줄 수 있을겁니다.

스킨 관련 링크

블로그 팁 11가지 : http://v.daum.net/link/6857259
XHTML id , class 의미 : http://v.daum.net/link/6401005
XHTML 틀리기 쉬운 문법들 : http://v.daum.net/link/4316564