티스토리 뷰
참고 : http://blog.naver.com/PostView.nhn?blogId=celeves&logNo=130100790759&parentCategoryNo=94&viewDate=¤tPage=1&listtype=0
표준이 웹종사자들에게 알려진지 벌써 수개월이 흘렀다. (수개월 뿐이겠는가.. 그동안 비슷한 세미나, 컨퍼런스, 워크샵 등등 생각해보면 참 긴 시간이었다.)
하지만 현재까지는 웹 표준을 준수한 사이트가 그리 늘지 않았고, 여전히 문서 선언부를 제대로 선언하지 않는 사이트가 많은 것 같다.
웹 페이지를 제작하면서 확장자만 .html 로 제작하면 모두 웹 페이지라는 생각을 오늘부터는 버렸으면 하는 바램으로 DOCTYPE 과 올바른 문서정의에 대해 알아보기로 하겠다.
사전적인 용어와 해설을 포함하는 글이다보니 다소 딱딱한 내용일 수도 있지만 문서를 제작함에 있어 기본인 부분을 잘 알고 넘어가야 된다는 생각에 반드시 제대로 알고 넘어가기를 바란다.
DOCTYPE 란?
DOCTYPE 은 "문서의 종류를 선언할 때 필요한 요소다." 라고 정의할 수 있는 태그라 하겠다.
올 바른 선언이라고 할 수는 없지만 현재 대부분의 브라우저들이 quirks mode 로 동작하는 "<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">" 라도 선언되어 있는 사이트면 그나마 양호한 사이트라고 말할 수 있다. 하지만, 국내 사이트 중 DOCTYPE 을 아예 선언하지 않는 페이지를 찾기가 더 쉽다. 이렇게 DOCTYPE 선언하지 않는다면 브라우저는 현재 페이지가 어떠한 HTML 버전을 사용하고 있는지 인식할 수 없기 때문에 호환모드(quirks mode)로 변환을 해서 rendering(화면구현)하게 된다.
브라우저가 알아서 호환모드로 변환하여 rendering 하는 것을 어찌보면 브라이저가 똑똑하다고 생각할 수 있겠지만 실제론 그 반대이다. 마크업과 스타일시트의 조합으로 멋진 사이트를 제작했다 하더라도 호환모드로 redering 한 브라우저는 매번 똑같은 화면묘사를 보여준다는 보장을 할 수 없기 때문에 사용자에게 큰 혼란을 가져다 줄 수도 있기 때문이다.
DOCTYPE 이 이렇게 중요한 것인 만큼 이제는 올바르게 알고 사용해야 하지 않을까 생각한다. 하지만 기존에 진행되던 방식을 하루 아침에 바꾸기는 어려울 것이다. 때문에 바로 바뀌지는 않겠지만 DOCTYPE 을 선언 해서 문서의 유형을 올바르게 정의내리는 것이 맞다는 사실을 알고 있다면 계속 DOCTYPE 선언을 하지 않고 페이지를 제작하는 것보다 시간을 가지고 조금 씩이라도 개선해 나가길 권하고 싶다.
그러기위해 사용해야 할 DOCTYPE 은 문서의 목적이나 구조에 따라 필요한 종류를 선언할 수 있다. 그 종류에는 엄격한 문법과 구조을 요구하는 strict 버전과 구버전의 속성이나 Tag 를 허용하는 transitional 버전 그리고 frame 을 이용해 제작하는 페이지를 위한 frameset 버전이 있다.
다음 코드는 W3C에서 권장하는 DOCTYPE 의 종류이다. ( 참고 : http://www.w3.org/QA/2002/04/valid-dtd-list.html )
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
추가내용 :
XHTML 문서를 작성한다면 DOCTYPE 선언 앞 부분에 XML 선언을 추가해야함.
<?xml version="1.0" encoding="utf-8"?>
xml 문서로 서비스 하는 경우가 아니라면 XML 선언은 하지 않는 것이 최선이다.
위의 링크를 따라가보면 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 은 리스트에 존재하지 않는다. 이 구문은 대부분의 브라우저들이 quirks mode 로 지원하기 때문에 사용을 지양해야 할 것이다.
웹 표준을 준수한 사이트를 살펴보면 대개는 브라우저가 이전 버전을 우용해야할 상황을 고려하여 transitional 을 많이 사용한다. 하지만 transitional 버전을 사용한다고 과거에 사용했던 표현만을 위한 Tag를 계속 사용한다면 문법상으로는 이상이 없으나 웹페이지의 효율성과 접근성은 저해될 가능성이 높다. 이런 부분들 까지도 신중하게 판단해서 사용해야 할 것이다.
올바른 문서정의
언어선언
문서를 정의할때 필요한 몇가지 중 위에서 언급한 문서유형 선언이 있고 다음으로 언급할 내용이 언어선언이다.
언어선언은 기본적으로 html 태그에 lang 속성을 이용해서 설정하고, 만약 xhtml1.0 이상의 DOCTYPE을 선언했다면 HTTP 의 헤더 또는 html 태그에는 xml:lang 속성으로 문서의 주 언어를 선언한다. 사실 언어선언은 반드시 필요한 사항은 아니지만 접근성을 높이기 위해서는 고려할만한 대상이다.
그리고 문서에 주 언어를 선언한 후에도 Tag 에 별도로 다시 선언 할 수도 있으니 필요한 언어선어을 한다면 조금은 접근성을 더 높일 수 있겠다.
컨텐츠 유형선언
컨텐츠 유형 정의 또한 올바른 문서 정의를 위해 꼭 필요한 요소이다.
컨텐츠 유형 정의는 미디어 유형( 예 : Content-Type:text/html ) 과 HTML 문서의 문자세트 ( 예 : charset="utf-8" )를 선언하며 문서에 반드시 명시해야한다.
먼저 Content-Type 은 MIME(Mulitipurpose Internet Mail Extension) type 이라 부르며 어떠한 미디어 형식인지를 브라우저에게 알려주는 역할을 한다. 모든 파일은 이 MIME type 을 가지고 있는데 예를들면 JPEG 파일은 image/jpeg, CCS 파일은 text/css 등이 있고 일반적인 HTML 페이지라면 text/html 을 사용하면 된다.
Character set 은 문서의 문자 형식을 설정하기 위해 선언하는데, 이는 문서에 작성된 혹은 작성되는 문자를 고려해서 설정해야한다.
예를 들면 character set 포멧으로는 서양 언어와 라틴계열 언어를 지원하는 "ISO-8859-1", 그리고 아시아어(일본어,"UTF-8" 포함)를 지원하는 "SHIFT_JIS"가 있고, 특수문자와 같은 광범위한 문자를 지원하는 Unicode 포멧 등이 있다.
만약 별도로 선언이 되지 않는다면 기본적으로 "ISO-8859-1"이 선언된다. 하지만 보편적인 페이지 제작을 위해서는 "UTF-8"을 권장하는데 이유는 대부분의 문자를 표현 할 수 있고 대부분의 컴퓨터에서 무리없이 작동하기에 사용하기 안전한 코드로 간주하기 때문이다.
컨텐츠유형을 선언하기 위해서는 몇가지 방법이 있는데
Client Side 선언방식인 meta Tag( <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> )를 이용하는 방식이 있고
Server Side 에서 선언하는 방식이 있다. 상황에 맞는 방식을 선언해서 컨텐츠의 유형을 설정해야 할 것이다.
끝으로
HTML 문서는 HTML 헤더 영역을 올바르게 선언했을때 비로소 HTML 문서로서의 효력을 가진다고 볼 수 있다. 위에서 말한 DOCTYPE 과 문서정의만이 아니라 HTTP 헤더부분의 정의를 전반적으로 세심하게 작성할 필요가 있다는 말이다. 하지만 작업자들이 사용하는 이디터 툴이나 기존에 잘못 제작된 페이지의 문서형식을 그대로 사용하기 때문에 이런 세세한 사항까지 고려하지 않고 작업을 한느 경우가 많다. 보다 많은 브라우저와 컴퓨팅 환경, 곧 사용자에 대한 배려를 위해서라도 제작자의 세심한 주의가 필요하겠다.
앞으로는 이와같은 사이트의 특성에 맞는 DOCTYPE 과 HTTP 헤더 영역의 문서정의를 올바르게 명시하고, 의미에 맞는 마크업과 더불어 표현을 잘 분리 한 페이지가 많이 제작되어, 효율성과 접근성을 높인 이상적인 페이지가 사용자를 더욱 편리하게 했으면 한다.
DOCTYPE 전환 / 브라우저모드
브라우저 모드 (렌더링모드 2가지)
1. 표준 호환 모드 : 기술 명세서의 내용대로 페이지를 화면에 표시
2. 비표준 확장 모드 : 하위 호환을 고려해서 페이지를 화면에 표시
DOCTYPE 전환
브라우저는 DOCTYPE 선언과 어떤 DTD 를 사용하는지를 보고 브라우저 모드를 결정한다.
예전 방식으로 작성된 문서와 표준 호환 문서를 구분해서 처리하기 위해 사용한다.
유효한 CSS 를 작성했음에도 불구하고 DOCTYPE 을 잘못 선택한 경우에는
비표준 확장모드로 동작해서 의도하지 않는 결과가 표시될 수 있다.
따라서 사이트 내의 모든 페이지에 완벽한 DOCTYPE 선언을 하고 HTML 문서일 경우에는 strict DTD 를 사용하는 것이 중요하다.
XHTML 문서
: 완벽한 DOCTYPE 을 지정한 경우에 보통 표준호환 모드로 화면 표시
HTML
: Strict DTD 지정한 경우 표준 호환 모드로 동작
: transitional DTD 지정한 경우 비표준 확장 모드로 동작
( DOCTYPE 을 선언하지 않았거나 잘 못 쓴 경우에는 HTML 문서나 XHTML 모두 비표준 확장 모드로 동작함 )
'Language > CSS' 카테고리의 다른 글
| [ CSS ] IE 버전별 CCS 적용 (0) | 2016.01.02 |
|---|---|
| [ CSS ] 웹 표준 개발자의 IE8 고려사항 (0) | 2016.01.02 |
| [ CSS ] 배경이미지 가운데 정렬 - 시안 작업 (0) | 2016.01.02 |
| [ CSS ] [ text-decoration ] 텍스트 가운데 줄 긋기 (0) | 2016.01.02 |
| [ CSS ] 선택자 활용 기초 (0) | 2016.01.02 |