목록

https://tong.nate.com/mrsono0/36193112

웹표준의 개요 및 xhtm  

웹표준의 필요성에 대해 이야기 하기 전에 한가지 짚고 넘어가야 할 것이 있습니다.
지금 웹개발자들이 알고 있는 지식은 표준이 아니란 말인가?
그렇다면 왜 표준이 흐트러 졌는가?

이제 웹의 역사는 10년정도 밖에 안되었습니다. 이 짧은 기간에 엄청난 발전이 있었습니다.
우리나라의 경제도 한때 급성장을 했었지만 그로 인해 많은 문제가 발생했고 IMF를 겪었습니다.
웹도 마찬가지 입니다. 짧은 기간동안 급성장으로 인해 문제를 안게 되었습니다.
이 문제의 원인중 하나가 과거 웹브라우저의 양대산맥 IE와 NS의 점유율 전쟁 때문입니다.
점유율을 높이기 위해 W3C를 무시, 비표준 태그를 남발하였고 지금의 문제를 낳게 된 것입니다.
다행히 현재 IE를 제외하고 파이어폭스,오페라,사파리등의 최신 브라우저들은 표준을 준수하고 있습니다.

그래도 지금의 웹은 문제없이 발전하고 있지 않은가?

아닙니다. 현재 웹은 기형적으로 발전하고 말았습니다. 웹의 근본인 누구나 어디서든 정보를 이용할 수 있어야 하는데 국내의 웹은 IE 전용으로 개발되어 있습니다. 불행히도 IE는 윈도우 전용이며 리눅스, 맥등의 다른 OS를 지원하지 않습니다.

어차피 국내는 대부분이 IE를 사용하기 때문에 문제가 없다고 본다.

이런 생각은 웹의 근본을 벗어난 생각이며 근시안적인 발상입니다. 물론 현재는 국내유저의 대부분이 IE를 사용하고 있습니다. 하지만 FF(파이어폭스)가 등장하여 점유율을 높이고 있으며 이에 힘입어 오페라등의 브라우저 점유율도 높아지고 있습니다. 그리고 웹이란 PC만으로 이용하는 것이 아닙니다. 최근 모토로라에서 브라우저를 내장한 핸드폰을 출시했고 앞으로 웹은 각종 모바일기기에서 동작하게 될 것입니다. 웹의 발전은 빠르고 역사는 짧습니다. 현재의 웹이 앞으로도 똑같이 유지될 것이라 생각하는 것은 위험한 발상입니다.

웹표준을 지키면 위와 같은 문제가 해결되는가?

웹표준 권고안은 W3C(월드와이드웹 컨소시움)에서 제정하고 있습니다. W3C는 수많은 기업이 자사의 이익을 위해 표준안을 건의하고 채택하는 곳 입니다. 한가지 예를 들 하나의 웹페이지를 제작하면 PC는 물론 각종 모바일 기기등 어디에서도 문제없이 보여지도록 노력하고 있습니다. 매번 각각의 환경에 따라 웹페이지를 제작하는 것은 소모적이고 불필요한 행위 입니다. W3C에 가입한 기업들은 이런 문제들을 해결하기 위해 표준을 내놓고 채택하는 것입니다.

지금당장 먹고살기도 바쁜데 웹표준 같은거는 나중에 해도 되지 않을까?

이런 생각은 우물안 개구리의 생각이며 흐름을 보지 못하고 있는 것 입니다. 현재 해외의 웹개발 기술력에 비해 국내의 기술력은 밑바닥 수준입니다. 겉모습의 화려함에 국내의 웹사이트 제작 능력이 좋아보이는 것 입니다. 과거 해외의 웹사이트 트래픽 순위에 국내의 웹사이트가 장악을 했었지만 지금은 순위에서 밀려났으며 일본은 물론 중국의 웹사이트 보다 낮은 순위를 기록하고 있습니다.

그 밖에 웹표준에 신경쓰고 있는 IE7, 인기 포털들의 CSS 레이아웃, 해외에서 쏟아지는 웹표준 정보, 국내의 발전적인 생각을 가진 웹개발자들의 웹표준화 운동등 곳곳에서 변화가 일어나고 있습니다.

그렇다면 해외의 웹사이트 처럼 촌스러운 디자인으로 웹사이트를 제작하라고?

이건 잘못된 편견 입니다. 기술력과 디자인은 별개 입니다. 우리 (주)유비는 국내의 디자인에 웹표준 기술을 적용하여 수건의 웹사이트를 제작 했습니다.

그렇다면 이제 웹표준을 준수함으로 인해서 얻어지는 이익을 알아보겠습니다.

코드가 간결해진다.
디자인과 데이터가 분리된다.
트래픽이 줄어든다.(더 빠른 다운로드)
유지보수가 쉬워진다.
재활용성이 높아진다.

웹접근성이 높아진다.
IE외의 각종 브라우저, OS, 모바일기기, 스크린리더등 이용에 문제가 없다.
신체적으로 장애를 가진 사람들이 웹을 이용함에 도움을 준다.

브라우저가 발전하고 새로운 장치가 생겨도 기능을 수행함에 문제가 없다.

위와 같은 장점에도 불구하고 웹표준을 지킴에 어려운 부분이 존재합니다.
하드코딩을 해야 한다.
새로 공부해야 한다.
IE는 비표준모드 뿐만 아니라 표준모드도 지원하지만 버그가 많다.
일단 당장은 웹표준을 지키지 않더라도 웹사이트 제작에 문제가 없다.

마지막으로 저의 생각은 이렇습니다.
아무리 국내는 IE 사용자가 대다수고 당장 웹표준을 지키지 않아도 뭐라고 하는 사람이 없다고 주장한다고 세계의 변화는 기다려주지 않습니다. 지금 이 순간에도 기술의 차이는 벌어지고 있습니다. 핑계만 대고 있다가는 도태되어 버립니다. IT직종은 한번 공부한 것으로 평생 사용하는 것이 아닙니다. 자신이 앞으로도 계속 IT 관련 일을 할 것이라면 꾸준한 공부가 필요하며 이것은 몸값을 높이기 위한, 자신을 위한 것 입니다. 해외와 비교하면 국내의 웹표준은 이제 갓 시작했습니다. 자신의 노력여부에 따라 국내에서 몇 안되는 웹표준 개발자가 될 수 있습니다.
XHTML이란?

참고 사이트 :

https://ko.wikipedia.org/wiki/XHTML

https://trio.co.kr/webrefer/xhtml/overview.html



HTML은 현재 4.01까지 나와있습니다. 이 HTML 4.01을 XML을 이용하여 재구성한 것이 XHTML입니다. XML은 문서를 구성하고 데이터를 구조화하는데 유용하며 현재는 안쓰는 곳이 없다고 할 정도로 웹에서 필수가 되었습니다. XML에 대한 자세한 이야기는 이곳에서 다루지 않겠습니다.

XHTML을 사용하는 이유는? 웹표준 준수 및 디자인과 데이터의 분리, 웹접근성 향상등 이제는 필수 입니다. 현재 XHTML은 1.1까지 나왔습니다.

XHTML은 HTML 4.01을 재구성 한 것이기 때문에 HTML 4.01을 안다면 크게 어렵지 않습니다.

몇가지 규칙만 지켜주면 됩니다.

그 전에 간단한 용어를 익히도록 하겠습니다.

엘레멘트(element) – 태그를 뜻합니다.
애트리뷰트(attribute) – 태그의 속성을 뜻합니다.
문서타입정의(DTD) – Document Type Definitions 웹페이지의 문서형식을 뜻합니다.

그럼 이제 XHTML의 규칙을 알아 보겠습니다.

1) XML 문서 이므로 XML 선언을 한다.
<?xml version="1.0" encoding="UTF-8"?>
하지만 IE의 버그로 인해서 이 것을 선언 할 경우 IE는 비표준 모드로 동작합니다.
때문에 실무에서는 적용하지 않지만 앞으로 IE6이 IE7로 모두 옮겨간다면 적용해도 괜찮을 겁니다.

2) DTD를 선언한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/strict.dtd">
문서타입은 단순히 “나는 아무개 문서입니다.”를 나타내 주는 것으로 이 선언을 바탕으로 웹브라우저의 웹페이지 랜더링 방식이 변하게 됩니다. XHTML에는 이런 DTD가 3가지 있습니다.

strict.dtd

W3C에서 사실상 가장 권장하는 DTD 입니다. Strict 라는 단어의 뜻에서 알 수 있듯이 문법적인 오류를 전혀 허용하지 않는 DTD 선언입니다.

transitional.dtd

Transitional Mode 의 경우 XHTML 문법을 지키는 것은 마찬가지 이지만 Deprecated Element의 사용이 허용되며, body Element의 bgcolor, text 등의 Attribute 를 사용할 수 있습니다.

frameset.dtd

Frameset Mode의 경우는 이 사이트의 경우처럼 브라우저 창을 2개 이상으로 분할하여 사용하고 싶을 때 Frameset 페이지에 선언해 줍니다.

저희 유비는 XHTML 1.1 DTD를 선언합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
이것은 W3C에서 모든 새로운 웹 페이지에 적용하도록 권고하고 있습니다.

3) 문서들이 잘 구성되어야 합니다.

<span><a></span></a> ( X )
<span><a></a></span> ( O )

4) 엘레멘트와 트리뷰트 모두 소문자이어야 합니다.

<A HREF="””></A> ( X )
<a href="””></a> ( O )

5) 엘레멘트 모두 닫혀야 합니다. 빈 엘레멘트도 닫혀야 합니다.

<div> <hr> <img> ( X )
<div></div> <hr /> <img /> ( O )

6) 애트리뷰의 값은 반드시 따옴표로 둘러싸야 합니다.

<img src="abc.com/> ( X )
<img src="”abc.com”/> ( O )

7) 애트리뷰트 최소화가 없습니다. 모든 애트리뷰트에는 값이 필요합니다.

<input type=”radio” selected/> ( X )
<input type=”radio” selected=”selected” /> ( O )

위의 사항들이 가장 기초적이며 필수적인 것들 입니다.
그외 XHTML에서 사용하지 말아야 하는 엘레멘트들도 있습니다.

https://www.w3schools.com/xhtml/xhtml_reference.asp

위의 사이트에는 XHTML에서 허용하는 엘레멘트가 나열되어 있습니다.
나열된 것 외의 엘레멘트는 사용하지 않도록 주의해야 합니다.


각 엘레멘트들의 특성과 속성등은 틈틈히 익혀두어야 웹접근성을 공부할 때 도움이 됩니다.
어차피 HTML 4.01에서 다뤘던 것들과 많이 다르지 않으므로 공부에 큰 어려움을 없을 것 입니다.
허용 가능한 엘레멘트들의 사용법은 HTML 4.01에 대한 문서를 참고해도 문제없습니다.
XHTML 자체가 HTML 4.01을 재구성 한 것이기 때문입니다.

이 게시물을