2017. 9. 13. 16:42ㆍ웹 표준 퍼블리싱 바이블
1.DOCTYPE 지정하기
웹 표준으로 마크업하는 가장 기본적인 사항은 바로 "문서형의 선언"입니다. HTML문서의 최상단에 지정하며 HTML 버전에 따라 차이가 있습니다.
1-1. HTML4의 경우
다음의 3가지의 형식 중에서 가장 많이 활용되는 타입은 "Transitional 타입"입니다. "Strict 타입"의 경우 엄격하고 제약이 많은 만큼 다소 까다롭지만, 유지/보수에 효율적이고 속도도 빠른 장점이 있습니다.
-1) Strict타입 : 엄격한 형식으로 iframe, font, center 등 폐지된 요소를 사용할 수 없습니다.
|
|
-2) Transitional 타입 : 다소 유연한 형식으로 폐지된 요소라도 사용 가능합니다.
|
|
-3) Frameset 타입 : 문서가 프레임을 포함할 경우 사용합니다.
|
|
1-2. XHTML1.0의 경우
XHTML 문서는 1.0버전을 주로 사용합니다. 1.1버전의 경우 문법이 까다롭고 브라우저에서의 호환문제도 있어 그 인기가 줄었고 XHTML2.0 버전은 전혀 새로운 문법으로 등장했지만, 호응이 적어 중단되었습니다. 이후 HTML5에게 다음 세대의 자리를 양보하게 됩니다.
-1) Strict타입 : 엄격한 형식으로 iframe, font, center 등 폐지된 요소를 사용할 수 없습니다.
|
|
-2) Transitional 타입 : 다소 유연한 형식으로 폐지된 요소라도 사용 가능합니다.
|
|
-3) Frameset 타입 : 문서가 프레임을 포함할 경우 사용합니다.
|
|
1-3. HTML5의 경우
HTML5에서는 문서형 선언이 매우 간결해졌습니다. 이전까지 지정하던 세 가지의 타입은 더 이상 필요가 없으며 대부분의 브라우저에서 정상적으로 인식합니다.
|
|
※ 대부분의 브라우저에서 인식한다는 것이 HTML5에서 새로 만들어진 태그와 속성까지 인식된다는 말은 아닙니다.
2. 언어 지정하기
웹 문서 작성에서는 언어지정 또한 필수 입니다. 언어지정은 HTML요소에 전체적인 언어를 우선 지정하고, 본문 중 언어의 지정이 필요한 영역에 다시 지정할 수 있습니다. HTML에서 지정할 수 있는 언어는 150여개 이상입니다. 이 중 많이 사용하는 언어는 한국어(ko), 영국영어(en), 미국영어(en-us), 프랑스어(fr), 중국어(zh), 일본어(ja) 등입니다.
2-1. HTML에서의 언어지정
HTML4와 HTML5 모두 같은 방법으로 적용합니다.
|
<html lang="ko"> |
2-2. XHTML에서 적용하는 방법
XHTML에서는 XML의 namespace를 작성합니다. 그리고 xml:lang도 같이 지정합니다.
|
|
2-3. 본문에서 재지정하는 방법
HTML 선언에서 ko를 지정했으므로 기본언어는 한국어로 맞춰진 상태입니다. 본문에서 다른 언어로 작성된 부분은 시작태그에 "lang" 속성으로 언어를 설정해 주면 됩니다.
3. 문자 코드셋 지정하기
문서를 시작하면 문자 코드셋을 지정해야 합니다. 1바이트를 사용하는 영문의 경우에는 크게 상관이 없지만, 한글이나 한자에서는 2바이트, 3바이트로 늘어나는 부분을 제대로 표현하기 위해 정확이 지정해야 합니다. 한들의 문자 코드셋은 한때 euc-kr을 사용했었는데, 한글의 2바이트와 2000 글자를 지원합니다. 요즘은 utf-8을 사용하며, 1~4바이트를 지원하므로 대부분의 다국어 문자를 지원할 수 있게 되었고, 한글 1만 글자를 지원합니다. utf-16 문자 코드셋도 있지만, 브라우저에서는 완벽히 지원되지 않았습니다. 참고로 프로그래밍 언어인 java가 내부적으로 이 문자 코드셋을 사용합니다.
3-1. XHTML 1.0에서 문자 코드셋 지정하기
<meta>요소를 이용해서 문자 코드셋을 지정합니다. 이때 마임타입은 application/xhtml+xml로 지정하는 것이 올바른 표현이지만, 하위호환성을 고려해서 "text/html"로 지정합니다. 마임타입은 원래 전자우편을 위한 인터넷 표준 포멧을 지정하는 방법이지만, 각 문서 또는 마크업 언어마다 드 타임을 지정하는 방법 정도로 알아두시면 됩니다. HTML5에서는 생략 가능하며, 작성하는 위치는 비ASCII 문자인 한글이 나올 수 잇는 부분보다 앞에 작성합니다.
3-2. HTML에서 문자 코드셋 지정하기
HTML5에서는 마임타입 생략이 가능하므로 다음과 같이 간략하게 작성할 수 있습니다.
|
|
4. 메타요소 알아보기
웹 페이지를 검색하기 위해 사람들은 보통 검색엔진을 사용하는데, 메타요소는 검색엔진에 특정 홈페이지나 HTML문서에 대한 색인정보를 표현하는 수단으로 시작되었습니다. 이후 여러 가지 기능을 가진 다양한 메타요소들이 만들어졌습니다. "http-equiv" 속성으로 지시문을 나타내고, "name" 속성으로 메타 데이터 이름을 작성합니다. XHTML1.0과 HTML5에서 사용방법이 다르진 않지만 HTML5에서는 디바이스의 화상 표시 영역을 지정하는 "viewport"가 추가되었습니다.
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 3-3. 특수문자 삽입 방법과 텍스트를 정의하는 인라인 요소들 (0) | 2017.10.06 |
|---|---|
| 3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류 (0) | 2017.09.25 |
| 2-4. HTML5의 등장 (0) | 2017.09.13 |
| 2-3. 구조를 다루는 마크업 언어 (0) | 2017.09.12 |
| 2-2. 웹 접근성이란? (0) | 2017.09.12 |