HTML 과 CSS 웹 표준 알아보기

웹 표준이란 무엇인가?                                                    

 

웹 표준은 간단하게 정의하면 구조(HTML, XHTML) 와 표현(CSS), 양식(자바스크립트)을 분리해서 개발하는 것이라고 할 수 있습니다.

즉 HTML으로 구조를 정의하고 표현(디자인적 요소)는 CSS 을 이용해서 배치하고 동적 기능은 자바스크립트를 이용해서 동작하게 하는 것을 웹 표준이라고 할 수 있습니다.

 

웹 표준 이전 방식에서는 HTML만을 이용해서 구조와 표현을 했었는데, 이 방식은 표현을 하기 위해서 과도한 HTML 태그들을 생겨나고, 구조 또한 복잡해지기 때문에 개발하는 당시와 향후 유지 보수 시 엄청나게 많은 시간과 인력이 낭비되는 단점이 있습니다.

 

웹 표준을 적용하게 되면 웹 기획자, 디자이너, 개발자 이렇게 3분야의 핵심 멤버들이 각각 맡은 분야에 대한 큰 그림을 그릴 수 있습니다.

 

기존 웹 개발 방식은 디자이너와 개발자 사이에서 수많은 오류와 버그에 시달릴 수 있지만, 웹 표준에서는 각자 맞은 분야에 맞는 구조를 서로가 그릴 수 있게 되는 것입니다.

 

기획자는 HTML 코드를 통해 전체 사이트의 큰 뼈대를 그릴 수 있고, 디자이너는 HTML 코드와 CSS 코드의 조화를 통한 디자인을, 개발자는 HTML, CSS, 자바스크립트를 결합한 최종 웹사이트의 결과물을 만들어 낼 수 있습니다.

 

웹 표준은 상호 호환성 문제를 해결해 줄 수 있습니다.

표준 웹 기술을 사용하게 되면, 각종 기종 혹은 플랫폼에 따라 보여지지 않거나, 혹은 의도된 바와는 전혀 다른 모습의 사이트를 보여지게끔 하는 것을 방지 할 수 있습니다. 하나의 웹 브라우저에서만 지원되는 특정 태그를 지양하고 모든 웹 브라우저에서 사용 가능한 표준 기술을 사용함으로써, 모든 브라우저에 대한 상호 호환성은 물론 미래의 어떤 웹 브라우저에서도 같은 모양의 사이트를 만들 수 있습니다.

 

 

웹 표준 스펙                                                                

 

웹 표준은 World Wide Web Consortium (W3C http://www.w3.org/ ) 에서 만들어 집니다.  W3C는 국제적인 웹 기술 표준 기구로써, 미국 MIT 컴퓨터 과학 연구소, 정보수학 유럽 연구 컨소시엄 그리고 일본의 게이오 대학이 만들었습니다.

 

이 단체는 현재 510여 개의 국제적인 다국적 IT 기업체가 참여하고 있으며, 자사의 하드웨어나 소프트웨어를 웹 표준 기술에 탑재하거나, 자사의 기술을 표준화 하고자

많은 노력을 하고 있는 곳입니다.

 

웹에 관련한 표준은 사실상 존재하진 않습니다. W3C 에서는 웹에 대한 표준 권고안이 있을 뿐 입니다. 하지만 이 권고안(Recommendation)이라는 것이 웹 표준에 대한 기준이라고 할 수 있습니다. 

 

W3C에서 제공하는 각종 웹 표준 권고안에 대해서 알아 보겠습니다.

 

HTML(Hypertext Markup Language)의 정의
HTML 은 웹 페이지의 구조에 대해서 설명하는 언어입니다. HTML이 제공하는 내용은 다음과 같습니다.

- 머리글, 텍스트, 테이블, 목록, 사진 등의 온라인 문서의 발행
- 하이퍼 링크 또는 버튼의 클릭들에 의한 온라인 정보 검색

- 온라인 예약, 주문, 정보 검색 등 원격서비스와의 상호작용을 위한 폼 디자인

- 스프레드시트, 동영상, 사운드와 같은 어플리케이션을 문서 내에 삽입

 

HTML 사용하면 제작자는 마크업을 통해서 페이지의 구조를 만들 수 있습니다.

 

XHTML(extensible Hypertext Markup Language) 의 정의

XHTML 은 HTML의 변형으로써, XML 의 문법을 가집니다. X의 의미는 extensible 확장 가능한 HTML 이라는 의미로 HTML 과 같은 구문을 가지지만 약간 다른 요소를 지닙니다.  또한 XHTML 을 사용하게 되면 태그를 전부 닫도록 권고됩니다. 즉 예전에는 <br> 이던 값이 XHTML 을 사용하게 되면 </br> 로 사용해야 하며, 시작 태그가 있으면 반드시 태그의 끝을 닫아야 합니다.

<li> 태그 인 경우에도 HTML 에서는 <li> 만 사용해도 문제가 없었지만 XHTML 을 사용하면 <li> </li> 이와 같이 반드시 닫아야 합니다.

 

CSS 의 정의                                                      

CSS는 사용자의 디자인 속성을 정의합니다.

CSS을 이용하게 되면 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있습니다.

CSS는 하나의 웹 페이지를 큰 화면이나, 작은 화면 또는 프린트와 같은 각기 다른 종류의 기기들에게 보여 줄 수 있습니다. CSS 는 HTML 과는 독립적으로 작동하며, XML 기반의 모든 마크업 언어와 사용 가능합니다.

 

HTML 와 CSS의 분리는 사이트를 운영 유지 보수하는데 훨씬 장점이 있습니다. 또한 하나의 스타일시트는 여러 번 재 사용 가능합니다.

CSS을 이용하게 되면 구조를 표현에서 분리 가능합니다.