NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


보안된 페이지의 HTML Validation Check 방법.

본문 건너 뛰기

안녕하세요? 웹 표준화팀의 정찬명 입니다. 오늘은 여러분들께 효율적인 HTML Validation Check 방법에 대한 간단한 제안을 드리고자 합니다. 이러한 내용을 포스팅 하게 된 계기는 다음과 같이 요약할 수 있습니다.

  1. W3C에서 제공하는 Validator 도구는 보안된 페이지에 접근할 수 없음.
  2. W3C에서 제공하는 Validator 도구는 사용자가 몇번의 Task를 수행하여야만 도달할 수 있는 페이지에 접근할 수 없음.
  3. W3C에서 제공하는 Validator 도구는 매 페이지의 URL 또는 코드를 복사 후 붙여넣기 해야 하는 불편함이 존재.
  4. 개발자 직군에 따라 Validation Check 수단이나 도구가 다를 수 있는데 이것은 Validation 검사결과에 차이를 가져오기 때문에 업무에 혼란을 가중.

따라서 현실성 있고 신뢰할 수 있는 다른 도구들을 고려해 보자면 아래와 같고,

  1. Dreamweaver > File > Check Page > Validate Markup(Shift+F6)
  2. Firefox + HTML Validator

이 두 가지 방법 가운데 Dreamweaver는 UI 개발직군에서만 주로 사용하는 도구이기 때문에 공식 툴로 선정하여 사용하기에는 무리가 있으며, 실제로 Validation 체크를 수행해본 결과 Firefox와 HTML Validator 확장 기능을 공통된 툴로 선정하고 이것을 이용하는 것이 가장 쉽고 빠르게 체크하는 방법이라는 결론에 이르게 되었습니다.

다만 우리는 W3C의 Validation Check 검증결과와 동일한 결과를 얻기를 원했는데 다행히도 Firefox의 HTML Validator에는  W3C에서 제공하는 검증 알고리즘과 동일한 알고리즘(SGML Parser)을 제공하고 있었습니다.

Firefox + HTML Validator 인터페이스 소개

Firefox에 HTML Validator를 부가기능으로 장착하면 ‘별도의 Validation Check 실행명령을 내리지 않아도 항상 실시간’으로 브라우저 우측 하단의 상태표시줄에 Validation 검증결과가 표시됩니다.

HTML Validator Interface - 오류, 경고 출력 메시지

  • "V" 표시는 오류나 경고가 없이 완벽한 문서라는 것을 의미하고
  • "!" 표시는 경고로서 오류는 없지만 브라우저 호환이나 접근성에 문제가 있을 수 있으므로 확인을 요하는 목록
  • "X" 표시는 오류가 검출되어 HTML Validation을 통과하지 못하고 있음

을 각각 의미합니다. 자세한 오류내역을 확인하려면 저 메시지를 더블클릭 하여 보다 상세한 오류내역과 오류 코드의 위치를 정확하게 찾을 수 있게 됩니다.

HTML Validator의 오류설명 및 디버깅 화면

Firefox + HTML Validator 를 이용하여 W3C와 동일한 검증결과 얻기

우리는 W3C의 검사결과에 준하는 검증결과를 확인하고자 하므로 HTML Validator 의 옵션설정 화면에 들어가서 SGML Parser 형식의 알고리즘을 선택해야 합니다. SGML Parser는 W3C에서 제공하는 검사결과와 거의 동일한 오류검출 결과를 출력합니다.(테스트 결과 오류 수는 같지만, 경고 수는 다를 수 있음)

HTML Validator의 검증 알고리즘 선택 화면

이미 HTML Validator 가 설치되어 있다면 ‘도구 > Html Validator Options … > General > Algorithm’  조작을 통하여 SGML Parser 알고리즘을 선택하거나 변경할 수 있습니다.

분류: 웹 표준 | 2008년 2월 26일, 18:52 | 정찬명 | 댓글: 19개 |
트랙백URI - http://naradesign.net/wp/2008/02/26/136/trackback/

19개의 댓글이 있습니다.

  1. 호이♡ 댓글:

    오~~ 로컬파일을 검사할때 불편함이 존재해서 항상 오페라에서 오른쪽 버튼누르고 유효성 검사를 해왔는데 이젠 그럴 필요가 없군요~~~

    좋은 정보 감사합니다 ^^

  2. Na! 댓글:

    파이어폭스.. 브라우져인가? 개발툴인가?

    멀게도 아니고. 저 부터도.. 개발중페이지는 파이어폭스 서핑은 IE7의 패턴입니다..

    좋은 브라우져임에는 틀림없죠..

  3. 남덕현 댓글:

    맞아요~
    W3C에서 제공하는 Validator 정말 저런 점이 불편했어요~

    부가기능으로 설치는 해놨는데, 유용하게 사용하지는 못하고 있었는데,
    앞으로 좀 잘 활용해봐야겠어요~ㅋㅋ

  4. spike 댓글:

    대신 아직 리눅스 버전 파폭은 지원하질 않는군요. 좀더 기다리면 나올라나?!

  5. 이원민 댓글:

    이젠 파이어폭스로 쉽게 유효성 검사를 할 수 있을 것 같아요.
    유익한 정보 감사합니다.

  6. seevaa 댓글:

    정말 편리하군요… 좋은 정보 감사합니다.

  7. 필유 댓글:

    Web Developer 부가 기능을 사용중인데, ctrl+shift+H 눌러서 validation하는 것보다 편리하겠군요. 한번 사용해봐야겠습니다^^

  8. boki 댓글:

    와우~ 이런 좋은 기능이~~방금 검사해서 에러 6개 수정했어요.
    항상 좋은 정보 감사합니다^^

  9. 벨리데이터는 벨리데이터일뿐…

    “네이버 탑페이지 HTML 유효성 검사 통과” 코멘트에서 id와 name의 중복문제가 나온다. 사실 “보안된 페이지의 HTML Validation Check 방법”을 보면서 살짝 예상하기도 했었다. (더불어 W3 Validator는 …

  10. wystan 댓글:

    실시간으로 확인할 수 있어서 정말 좋네요.
    저도 확인 못했던 오류 하나 찾아서 수정했습니다.

    좋은 정보 알려주셔서 고맙습니다~ ^^

  11. 정찬명 댓글:

    wystan님, 와주셨군요 ^^; 저도 wystan님 블로그에서 더 많이 배우고 있습니다. 감사합니다. (__)

  12. wystan 댓글:

    오히려 제가 감사를 드려야 하는데 그동안 표현을 못했습니다. ^^;
    전부터 좋은 정보와 생각을 많이 얻고 있었거든요.
    다시 한 번 감사드립니다.

  13. 작업 댓글:

    안녕하세요
    좋은 정보 감사합니다^^
    저도 이 기능을 사용을 했었는데
    결과에 X표시가 나오고 “html캐쉬가 비어있습니다”
    그래서 거기를 더블클릭 하고 보면 오류나 경고는 없다고 나오는데
    이 부분은 어떤 상황에서 나오는지 궁금합니다….

  14. 정찬명 댓글:

    저도 가끔 그런 상황을 만나는데요. 똑같은 페이지에서 그런 상황을 만날때도 있고 아닐때도 있어서 아무래도 부가기능의 버그는 아닌지 추측하고 있습니다. 새로고침을 하면 또 정상적으로 표시되지 않으시나요?

  15. 작업 댓글:

    답변 감사합니다
    몇일전까지는 됬다가 안됬다가 했었는데
    이제는 새로고침을 해도 변하질 않네요…
    그래서 좀 더 살펴보니 어느 특정한 페이지들만 그런거 같기도 하고…
    안될려면 아예 안되지 정말 어쩌다 한번 되니깐…답답하네요..ㅜㅜ

  16. 정찬명 댓글:

    HTML Validator 에서 “HTML 캐쉬가 비어 있습니다” 라는 오류 메시지와 관련하여 아래와 같은 도움말이 있네요. 큰 도움은 안 되는것 같지만. ㅡㅡ;

    http://users.skynet.be/mgueury/mozilla/user_guide.html

    This icon appears when the HTML cache is empty. If the cache is empty, the extension is not able to get the HTML and without HTML, it is not possible to validate it ….

    This appears most of the time when the HTTP return code is not 200. (ex: HTTP-404). In such case, even if the browser return HTML, Firefox does not store it in his cache. And I am not able to validate it.

    Another way to have this icon is to disable the cache of Firefox in the about:config.

    이 아이콘은 HTML 캐시가 비었을 때 표시된다. HTML 캐시가 비어있으면 확장기능이 HTML을 가져오지 못하고 유효성 검사가 불가능해 진다.

    대부분의 경우 HTTP 반환 코드가 200이 아닌 경우에 발생한다. 이런 경우 브라우저가 HTML을 반환하더라도 파이어폭스는 HTML캐시를 저장하지 못한다.

    이 오류는 파이어폭스의 about:config 설정에서 캐시를 비활성화한 경우에도 만날 수 있다.

    PS :
    HTTP 반환 코드가 200이 아닌 경우가 언제 어떻게 왜 발생하는지 그걸 모르니 여전히 답답 하네요.

  17. 최지연 댓글:

    오래 되었지만 오늘 HTML 테스트 해보면서 우연히 이 증상을 만났습니다.
    여러 증상으로 인한 메시지겠지만 저 같은 경우는 이미지 링크 경로가 상대경로 일 경우 이 메시지가 나타납니다.
    ./경로/이미지.jpg 이럴 경우 해당 메시지가 나타나고 http://도메인/경로/이미지.jpg로 하면 안나타나네요…

  18. 정찬명 댓글:

    최지연님 코멘트 감사합니다. 이 포스트 보시는 분들께 분명히 도움이 될껍니다. ^^

  19. […] 외에도 HTML Validation이나 CSS Validation을 통과하지 못한 페이지도 있었습니다. Firefox의 부가기능인 HTML Validator를 사용 했다면 HTML Validation은 실시간으로 체크할 수 있고, 드림위버의 CSS 브라우저 […]

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님