태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

요즘 들어 웹 표준에 대한 이야기들이 많다. 애플이 아이폰에 플래시를 지원하지 않는다고 발표하고, 대신에 HTML5 표준을 준수할 것을 권고하면서 웹 표준에 대한 관심은 더 높아졌다. 그렇다면 '웹 표준'이란 무엇이고, 웹 표준을 준수한다는 것은 어떤 것인지 알아보도록 하자.

1. 웹 표준이란?
  웹 표준이란 표준화 기구들(주로 W3C, World Wide Web Consortium)에서 정의하는 것으로, 웹 사이트를 작성할 때 이용하는 HTML이나 CSS, JavaScript 등에 대한 규정을 담고 있다.


2. 웹 표준을 지켜야 하는 이유는?
  표준은 지키라고 있는 것이니까. 물론 표준을 지키지 않는다고 웹 페이지가 만들어지지 않는 것은 아니다. 하지만 이랬던 적 없었는지 생각해보자.
같은 사이트를 접속하는데 브라우저마다 모양이 다르게 나오는 경우
같은 사이트인데 특정 브라우저로 접속했을 때 기능이 작동하지 않는 경우
등등 
이런 문제를 해결하기 위한 가장 필수적이면서 기본적인 방법이 바로 웹 표준을 준수하는 일이다. 우리 나라의 경우는 IE에 대한 의존도가 너무 높다. 그래서인지 웹 페이지들이 IE에 맞춰서 꾸며져 있는 경우가 많은데, 그런 사이트들을 크롬이나 파이어폭스 등 다른 웹브라우저를 이용해서 접속하면 페이지가 정상적으로 나타나지 않는다. 심지어는 페이지를 ActiveX와 Flash로 도배해놓아서 사이트에 로그인조차 되지 않는 곳도 아직 꽤 있다. 웹 표준을 지킨다면 이런 일은 벌어지지 않을 것이다.(참고 : http://ko.wikipedia.org/wiki/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD%EC%9D%98_%EC%9B%B9_%ED%98%B8%ED%99%98%EC%84%B1_%EB%AC%B8%EC%A0%9C)
하지만 웹 표준을 지키면 예쁜 페이지를 만들 수 없다고 생각하는 사람들이 있다. 하지만 그건 큰 오산이다. CSS만으로도 충분히 예쁜 페이지를 만들 수 있으며, HTML의 새로운 표준인 HTML5를 이용하면 기존의 Flash 애니메이션 기능을 외부 플러그인 없이 구현할 수도 있다고 한다.


3. 웹 표준을 준수하고 있을까? 
  그렇다면 우리가 평소에 사용하고 있는 웹 브라우저나 웹 페이지들이 웹 표준을 준수하고 있는지 알아보자.

3-1. 우선, 웹 브라우저가 표준을 얼마나 지키고 있는지 알아보는 방법이다.
웹 브라우저의 표준 준수 정도를 확인할 수 있는 테스트로 대표적인 것이 Acid 테스트이다. Acid test는 Acid1, Acid2, Acid3 총 세 가지가 있는데, Acid1과 Acid2 테스트는 현존하는 거의 모든 브라우저들이 기준을 완벽하게 통과하고 있다. 차이는 Acid3에서 발생한다.
 

(Google Chrome의 Acid3 테스트 결과. 100점 만점을 기록한다.)

필자가 테스트 해본 결과로는, 구글 크롬 15와 파이어폭스 7.0.1 8.0에서는 모두 만점을 기록했다. 그리고 IE 9.0에서는 95점을 기록했다.
본인의 브라우저를 테스트해보고 싶은 분들은 다음 링크를 따라가보시길 바란다.



3-2. 그 다음으로 웹 사이트들이 웹 표준을 잘 지키고 있는지 알아보자.
웹 표준을 제정하는 기관인 W3C에서 제공하는 사이트가 있다. 주소는 http://validator.w3.org/이다.


이 페이지에서는 URL을 입력하거나, 자신이 만든 페이지의 파일을 업로드하거나, 혹은 자신이 짠 코드를 직접 기입하는 방법을 통해서 웹 표준 준수여부를 확인할 수 있다. 


4. 웹 표준을 준수하는 방법은?
DTD
Down Team is Down이 아니다. Document Type Definition의 약자로 쓰인 DTD는 우리 말로는 '문서형 정의'라 부른다. 이는 HTML이나 XHTML 문서를 만들 때 필수적으로 선언해야하는 것이다. 선언의 예는 다음과 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 
XHTML 1.0 Strict를 정의한 부분이다. 꽤나 복잡하게 생겼는데, 그나마 HTML5에 들어서는 선언이 많이 단순화되어, <!doctype html>(대소문자 구분 없이)이라고만 적어주면 된다. 그렇다면 이렇게 복잡한 선언을 왜 하는 것일까? 바로 HTML이나 XHTML의 버전에 따라 문법에 약간의 차이가 있고, 지원되는 기능에 차이가 있기 때문이다. 따라서 웹브라우저는 우리가 선언한 방식대로 문서를 읽어들여 우리에게 보여준다.

DTD는 어떻게 구성되는가?

<!DOCTYPE 최상위요소 PUBLIC(또는 SYSTEM) "FPI" "URI"> 순서로 기입한다. 예를 들자면,

HTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd" 

 (참고)HTML의 버전


대충 웹 표준이 무엇이고, 어떻게 해야 지킬 수 있는 것인지 알아보았다. 이제부터는 인터넷 서핑을 하면서 웹 표준에 대해서 한 번씩은 생각해보는 것이 어떠할지?
 

  • Favicon of https://alllink.tistory.com BlogIcon 링크정보 2011.11.20 16:07 신고

    블로그에서는 기능의 작동유무보다는 레이아웃부분이 안맞는 경우가 많이 생기는데, 웹표준에 맞춰 스킨을 수정했더니 그런 문제가 없어지더라고요.
    브라우저에따라 간격이나 색상이 조금씩 차이가 나기도하지만 그건 어쩔 수 없으니 그냥 넘어가고요.