파이어폭스 부가기능 웹표준검사 Html Validator

웹 표준 검사 Html Validator

웹개발자 필수 파이어폭스 부가기능 중 한 가지라고 감히 말씀드릴 수 있습니다. 웹페이지 W3C의 tidy에 의한 웹표준 준수 정도를 검사해 주는 파이어폭스 부가기능 입니다. 블로그 스킨의 웹표준 준수 정도를 쉽게 확인할 수 있습니다. 얼마 전에 소개 드렸던 Firebug 와 함께 사용하시면 좋겠죠.

09년 03월 16일 발행글을 수정 재발행 한 글입니다.

Html Validator를 설치하시면 하단 우측 툴바에 3가지 아이콘으로 웹표준 준수 여부를 표시 해주며 더블 클릭시 상세한 내용을 볼 수 있습니다. 또한 표준에 맞게 수정된 소스도 만들어 줍니다. 이것도 Firebug와 마찬가지로 저는 설치한지 오래되서 그런지 회색으로만 나와서 삭제하고 다시 설치했더니 이제야 원래 색상이 나오네요. 색상만 봐도 감이 오지요.. 자신의 사이트는 어떤 아이콘으로 표시되는지 일단 살펴보세요.


웹 표준 검사 Html Validator

제 메인 페이지를 예를 들어 설명 드리겠습니다. 메인 페이지에 접속을 하니 작업 표시줄에 삼각형의 노란아이콘이 뜹니다. 푸른색의 아이콘이 뜨길 바랬는데 말이죠.. ㅋㅋㅋ 아이콘 위에 마우스를 올리면 저런 결과를 보여줍니다. 경고 숫자 만큼 수정하라는 얘기죠. 그나마 경고라서 다행입니다. 뻘건 오류가 아니라서 말이죠.
뻘건딱지 나오시는분들 고생들좀 하세요.. ^^

노란 아이콘을 더블 클릭하면 아래와 같은 창이 하나뜹니다. 메인페이지 오류내용을 프레임별로 나눠서 리스트로 보여주죠.


HTML Tidy 결과

모든 오류를 보시고 싶으시면 확인을 누르시면 되고 오류가 생긴프레임의 내용만 보고싶으시면 해당프레임을 선택하시고 더블클릭이나 확인 누르시면 됩니다.

보시면 블코, 블로거뉴스,믹시는 각 메타 사이트 위젯으로 제가 수정할 수 없습니다. 블로거뉴스 녹색불 켜졌습니다. 문제가 없다는거죠. 블코, 믹시 위젯은 각메 타사이트 관리자께서 수정을 해주셔야겠죠..^^

2프레임 55경고 메세지가 출력되었지요. 저부분을 제가 수정해야 하는 부분입니다. 오늘 검색순위&박스오피스 위젯을 넣었는데 문제가 많군요. 일단 7개의 오류가 생긴 프레임을 살려보겠습니다.


소스 보기

해당 프레임을 더블클릭 하면 아래와 같은 창이 새로 뜹니다. 상단 내용은 원본 소스 내용이고 하단의 좌측부분은 오류내용 우측은 권고안?? 이라고 도움말이 뜨죠.

하단 좌측 부분의 경고 리스트를 하나 하나 클릭하시면 상단에서 해당 소스의 위치로 이동해서 보여주고요. 하단 우측부분에는 “뭐가 잘못되었으니 이런식으로 고쳐라.” 라며 아주 친절하게 알려줍니다. 하나 하나 수정하시면 되겠죠.


소스 보기

제 메인 페이지에서 처음 4프레임에서 71개의 경고 문구가 생겼었지요. 오늘 추가했던 검색 순위 & 박스 오피스 위젯을 잠시 삭제시키는것으로 오류를 수정했다고 가정하고요.. ㅋㅋ 자 보시져.. 저는 페이지를 W3C 인지 웹표준인지에 대해서 퍼펙트하게 수정하였습니다. 블코와 믹시 위젯 경고16개는 제가 수정할 수 있는방법은 삭제시키는 것이지요.


프레임 선택

한번씩들 살펴보세요. 자신의 블로그가 얼마나 많은 웹표준을 무시하고 있는지를요. 페이지 수정하실 땐 얼마전에 소개한 firebug 로 살펴보시면서 수정하세요.

Leave a Comment