최근들어 웹표준 웹표준하는 소리를 많이 들어 봤을겁니다.
왜 웹표준이라는것이 중요한데, 라는 소리들도 많이 있고, 일반 사용자에게는 웹표준의 의미가 무의미 할 수도 있습니다. 도태체 왜 이런것을 만들어서 웹개발자들 머리만 아프게 만드는지 원...
지금까지 사용했던 방법들을 사용해서 웹사이트를 개발해도 전혀 문제가 없잖아? 근데 왜 굳이 웹표준을 지켜야 하는거야? 라는 말들도 많습니다.
처음에는 저도 그렇게 생각했습니다.
하지만 웹표준이라는 것이 대세이고, 또한 방법을 익히다 보면, 기존의 방식보다 훨씬 편하고, 더 능률적이며, 추후 웹사이트 수정시 엄청 편하게 전체 사이트를 전부 수정 할 수도 있다는 것, 그리고 하나의 폼( form) 또는 템플릿 처럼 만들면, 하나의 사이트로 여러 사이트를 개발한 효과를 볼 수도 있다는 점.
그리고 프로그래머가 태그를 잘 못 건들여서 디자인 전체가 망가지는 그런 불행한 사태도 미연에 방지 할 수 있다는 점 등, 윂표준을 준수하며 작업을 하게 되면, 기존 개발 방법보단 200%이상의 효율성을 나타낼 수 있습니다.
자 그럼 웹표준이란 무엇인가에 대해서 이야기 해 보도록 하겠습니다.
웹표준은 W3C 에서 정한 규격이라고 보시면 됩니다.
W3C에서는 HTML4.0 XHTML 1.0 CSS 1 , CSS 2 의 규격을 정해서 이 규격에 맞는 웹사이트를 제작하는 것을 권고하고 있으며, 최신의 브라우저들은 이 권고 사항에 맞게끔 개발되어 어떤 브라우저를 사용하던지 같은 모양으로 보이게끔 됩니다.
그럼 지금까지 개발한 것은 뭐 다른 브라우저에서 안 보이나? 라고 생각하실 수도 있습니다.
보이긴 합니다. 하지민 웹표준을 지원하지 않게 되면 한국에서 거의 절대적인 IE 를 제외한 Firefox 나 오페라, 사파리 등의 브라우저에서는 제대로 보이지도 않을뿐더러 작동도 되지 않는 경우가 많이 발생합니다.
대표적으로 보겠습니다.
옥션이나 기타 쇼핑몰 사이트를 파이어폭스로 한번 보세요.
보이긴 합니다. 하지만 사이트가 IE 에서 보이던 것 과는 조금 엉뚱하게 보입니다.
또 게시판에 글을 쓸려고 해도 지원이 안되거나, 어떤 사이트는 " 이 사이트는 인터넷 익스플로러 이외의 브라우저는 제대로 보이질 않습니다" 라는 경고 문구가 나오기도 합니다.
이 부분은 특히 액티브엑스 라는 IE에서만 쓰이는 기술 때문이기도 합니다.
하지만 왜 유독 한국에서만 IE에서만 작동되고, 다른 브라우저에서는 작동이 되질 않는지 보면, 웹표준 기술에 의한 사이트 개발을 하지 않았다는 결론에 도달하게 됩니다.
브라우저의 호환성 면에서 보면 웹표준을 준수하게 되면, IE 전용 사이트 입니다 라는 다소 황당한 문구를 경고로 보내진 않겠지요.
자 그럼 웹표준의 표준 스펙에 대해서 소개해 드리겠습니다.
XHTML
최근의 사이트의 소스를 보면 아마 아래와 같은 태그 표시가 되어 있는 사이트들이 많습니다.
아래의 태그를 현재 제가 사용하는 티스토리에서 처음에 나오는 소스 코드입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 사이트를 개발할때 맨 처음에 위와 같은 태그를 집어 넣어서 이 페이지는 이런 규격을 준수하고 있습니다. 라고 정의를 해주는 것입니다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
XHTML 1.0 transitional
위와 같이 XHTML 도 2개의 규격이 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
XHTML 1.0 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
하나는 Transitional 하나는 strict
Tranditional 는 조금은 융통성있게 문서를 표현한다 라고 보시면 되고 Strict 는 규격에 딱 맞춰서 작성한다. 라고 보시면 됩니다.
즉XHTML 의 경우 문서내에서 <font> <b> <i> 와 같은 표현 요소를 배제하고 모든 태그를 닫아야 합니다만 Transitional 에서는 이런 태그를 사용해도 허용되지만 Strict 에서는 이런 태그를 사용할 경우 부적합하다라고 하는 것입니다.
현재 사용하는 티스토리도 보면 HTML 4.0 에서 사용하는 태그들이 많이 보입니다.
이것이 허용되는 것이 문서 처음 부분에 transitional로 정의를 해줘서 가능한 것입니다.
그렇기 때문에 사용자가 만들 페이지에 대해서 어떤 XHTML 를 사용할 건지에 대한 판단을 처음 부터 지정해 줘야 합니다.
그리고 보시면 charset 부분이 UTF-8규격으로 되신 것을 보실 수 있습니다.
이는 유니코드로써, 에전에는 charset 을 euc-kr와 같이 특정 국가 별로 캐릭터 셋을 정해 주던 것에서 UTF-8 규격의 유니코드를 사용하는 것도 보실 수 있습니다.
유니코드를 사용하게 되면 어떤 브라우저에서도 해당 국가의 유니코드 문자세트가 설치되면 그 사이트를 글자 째짐이 없이 볼 수 있습니다.
하지만, 유니코드를 사욜하게 될때는 서버에서 이 유니코드가 지원되는지 부터 확인해 봐야 합니다.
즉 아파치 서버나 IIS서버에서 이런 캐릭터 셋을 UTF-8 규격을 지원해 주지 않으면, 문서에서 UTF-8로 정의 해 줄 경우 사이트가 제대로 표시 되지 않을 수 있습니다.
그럼 XHTML에서는 문서 표현시 <font> <b> 이런 태그를 사용하지 않으면, 문서 표현을 어떻게 하느냐 라는 질문이 있을 수 있는데,
이것은 CSS를 통해서 하게 됩니다.
CSS 는 페이지 디자인 속성, 폰트 크기, 색상, 이벤트 등등의 디자인 요소를 전부 표현해 줘서 문서와 디자인을 완벽하게 분리 시켜주는 역할을 하개 됩니다.
여기서 CSS에 관한 내용은 아주 자세히 그리고 상세하게 예제를 통해서 알아 보도록 하겠습니다.
그리고 XML 이 있습니다.
XML 이란 eXtensible Markup Language 의 약자로써 HTML 이나 CSS로 표현되지 못하는 영역을 DTD를 이용, 정의하는 것을 말합니다.
XML 은 특히 RSS기술로 인하여 HTML로 표현한 문서를 다른 어플리케이션에서 표현해 주는 가교적인 역핳을 담당하게 됩니다.
예전에는 HTML문서는 단순 문서였지만 XML 기술이 도입됨으로 인해서 문서가 더 이상 단순 문서가 아닌 데이터로써 취급되기 시작합니다.
DOM
Document Object Model 의 약자인 DOM은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여 이를 자유롭게 사용할 수 있도록 만든 것입니다.
DOM 또한 CSS 를 다루면서 예제를 들면서 설명하도록 하겠습니다.
일단 오늘은 여기까지 웹표준의 기초 정보를 알려드리고 다음 시간에는 웹표준의 방법론에 대해서 이야기 하도록 하겠습니다.
'웹 & IT > 웹표준/CSS' 카테고리의 다른 글
| 웹 표준에서의 Table 태그 의 올바른 용도 (0) | 2009.09.05 |
|---|---|
| IE8에서 사이트 제작시 문제가 있다면... (0) | 2009.04.08 |
| 웹표준 | 선택자 알아보기 (0) | 2008.08.01 |
| 웹표준 | 실전 레이아웃 잡기 (0) | 2008.07.31 |
| 웹표준 | 웹 표준 사이트 방법론 (1) | 2008.07.29 |