본문 바로가기

Tistory

티스토리 간단한 방법으로 웹 표준을 지켜보자.!




티스토리 간단한 방법으로 웹 표준을 지켜보자.!


티스토리 간단한 방법으로 웹 표준을 지켜보자.!



티스토리 간단한 방법으로 웹 표준을 지켜보자.! - 파이어폭스 16.0 acid3 테스트 결과 100점 만점에 100점


파이어폭스는 꾸준한 업데이트로 100점도 안 되던 웹 표준 점수를 100점까지 끌어올려놨고 제가 티스토리 블로그를 하면서 IE에서 파이어폭스로 갈아탄 이유가 이것이기도 하죠. IE는 웹 표준 점수가 IE8 기준으로 23점이 나오네요.;;; 안습이라는...


자신이 쓰고 있는 브라우저는 웹 표준을 얼마나 준수하고 있는지 테스트해 보세요. (브라우저별로 이 사이트 주소를 입력하면 자동으로 테스트 됩니다.)  http://acid3.acidtests.org/


처음 티스토리 블로그를 시작할 때는 IE로 시작할 때였고 웹 표준에 대한 인식이 적어서 html 소스를 생각 없이 아는 데로 막 넣었었는데 시간이 지나면서 웹 표준에 대한 인식과 티스토리 블로그 로딩속도에 신경이 쓰이면서 html 소스를 꼼꼼히 살펴보게 되었죠.


최초에 제 티스토리 블로그 웹 표준 검사를 했을 때는 에러가 수백 개가 넘었던 걸로 기억하는데 블로그 스킨을 자체 제작한 뒤 다소 줄어들었지만 그래도 그러려니 하며 html 소스 수정할 생각은 못 하고 있었죠.


그리고 최근 블로그 로딩 속도의 발목을 잡고 있던 view on 달력을 지워버리고 해드 이미지의 용량도 줄이면서 블로그의 빠른 접속과 최적화를 위해 신경을 쓰다 보니 잊고 있었던 웹 표준이 다시 생각이 나더라구요. 예전보다는 html 소스량이 많이 줄어들어 에러도 같이 줄었지만 그래도 수정할 부분이 많이 있었습니다.


간단히 수정해줄 부분으로는 대문자소스를 소문자로 바꿔주는 것인데 예로 몇 가지를 적어 보았습니다.


<TABLE><TBODY><TR><TD></TD></TR></TBODY></TABLE>

<SCRIPT>

<DIV>


<META content="" />

<IMG SRC="" />

<BR />


더 많은 소스가 있겠지만 보편적으로 많이 사용되는 소스들로 적어 봤고 위 소스처럼 대문자로 입력되면 웹 표준 검사에서 에러로 검출되기 때문에 모두 소문자로 적어줘야 하고 웹 표준 검사를 해보면 알겠지만 에러난 부분에 뭐가 잘 못 됐는지를 포괄적으로 알려주기 때문에 그에 맞는 방법으로 융통성 있게 수정해 주면 돼서 웹 표준을 어렵게 수정할 일은 아니라고 봅니다.


그리고 " /" 이 부분도 웹 표준을 지키기 위해 꼭 넣어야 하는데 img, meta, br 소스에 빈칸과 / 를 오른쪽에 넣어주면 됩니다.


저 같은 경우는 중요 스크립트 소스를 기존엔 모두 html/css편집 페이지에 그대로 넣어서 사용했는데 소스 보기도 복잡하고 그리 자주 수정할 부분도 아니라서 ???.js 파일로 만들어서 불러오는 방식으로 바꿔버렸습니다. 일단 웹 표준 검사에서는 에러가 줄어들었지만 이 방법으로 웹 표준을 지켰다고는 확신할 순 없는 거 같습니다.


 - 스크립트 소스 파일로 만들어 불러오는 방법


<script>와 </script> 사이에 있는 소스를 메모장에 복사하여 ???.js로 저장해 주고 확장자는 꼭 *.js로 해줘야 합니다. 저장할 때 파일 형식엔 js 확장자가 없지만 파일명과 확장자를 적어서 저장하면 스크립트파일로 만들어집니다.


그리고 그 스크립트파일을 html/css편집 - 파일업로드에 올려두고 <script type="text/javascript" src="파일 경로/???.js"></script> 이런 식으로 <head></head> 사이에 넣어주면 됩니다.


무심하게 넘어갈 수 있는 부분이 있는데 지정된 입력값에는 무조건 "" 큰따옴표를 넣어줘야 합니다. IE에서는 티스토리 글쓰기를 할 때 표시가 안 되는 부분이 있는데 파이어폭스나 크롬같이 웹 표준을 지키고 있는 브라우저에서는 모두 큰따옴표가 들어가서 웹 표준에 대한 에러를 줄여주고 있습니다.


이런 글을 쓴다고 해서 제 블로그가 웹표준을 모두 지킨 건 아닙니다. 웹 표준을 지키기 위해 일부 소스를 다른 방법으로 교체하는 방법도 생각 중입니다. 수익모델 소스 때문에 웹 표준을 100% 지키기는 어렵지만 그래도 웹 표준에 최적화된 블로그를 만들기 위해 더 노력해야겠습니다.^^



티스토리 간단한 방법으로 웹 표준을 지켜보자.! - 치토스 박스 2 티스토리 블로그 웹 표준 검사


위에서 말했듯이 웹 표준 검사를 하고 에러 결과에 나온 수정방법을 참고했을 뿐인데 약 160개였던 에러와 20개의 경고가 92개와 12개로 줄어드는 엄청난 효과를 보았습니다. 아직 고쳐지지 못한 부분은 테이블 onMouseOver, onMouseOut에서 중복 에러가 나오고 있는데 이 부분만 모두 고쳐진다면 에러는 절반으로 줄어들 것으로 예상합니다.


사이트 웹 표준 검사하기 : http://validator.kldp.org/


티스토리 간단한 방법으로 웹 표준을 지켜보자.!