XHTML의 서식
xhtml은 html을 xml로 재정의한 언어이기 때문에 요소와 속성에는 차이가 없다.
하지만 xml 방식의 엄격한 규칙을 적용하기 때문에 문법상 html과 xhtml은 몇가지 차이점이 있다.
* 요소 사용 시 종료 태그 생략 불가능
<p><img src=”image.jpg” alt=”그림”>
<p><img src=”image.jpg” alt=”그림”></p>
* 요소명과 속성명에 소문자 사용
<P><IMG SRC=”image.jpg” ALT=”그림”></P>
<p><img src=”image.jpg” alt=”그림”></p>
* 빈 요소 사용시 <요소명 /> 형식으로 기술
<p><img src=”image.jpg” alt=”그림” /></p>
* 속성에 속성값 생략 불가능
<select selected> … </select>
<select selected=”selected”> … </select>
* 잘못된 중첩 사용 불가능
<p><span><em> … </span></em></p> // 순서 바뀜
<p><span><em> … </em></span></p> // 올바른 순서
* 모든 속성값에 인용부호 사용
<img src=image.jpg alt=그림 />
<img src=”image.jpg” alt=”그림” />
* <, >, &을 <, >, &로 변환하여 사용
<h1>웹 표준 & 웹 접근성</h1>
<h1>웹 표준 & 웹 접근성</h1>
* 주석을 바르게 사용하고 그 안에 --(더블대시) 사용불가
<!-- 주석 삽입 -->
<!---- -- 잘못된 사용 방법. 더블대시를 연결하여 사용하면 안됨. -- ---->
<!-- ***** 유효한 사용 방법 ***** -->
XHTML 구성 요소
* 태그
태그는 “<” 와 “>” 로 묶어서 표현하는 명령어.
기본 형식은 <tag> ~ </tag> 이고 일부의 경우에는 <tag /> 형태로 사용함.
* 요소 (element)
시작 태그부터 종료 태그까지 모든 명령어를 “요소(element)”라고 함.
<h1> 웹 접근성과 XHTL </h1>
시작태그 텍스트 종료 태그
* 속성 (attribute)
시작 태그는 태그의 의미와 필요에 따라 개별적인 옵션을 가질 수 있는데 “속성(attribute)” 라고 함.
* 값 (value)
각 속성이 가지는 값.
<p id=”note” class=”box” title=”대체설명”>단락 내에 여러 개의 속성을 지정한 경우</p>
XHTML 문서의 기본 구조
* DTD 선언
웹페이지를 제작할 때 선언하는 문서형 정의.
- 엄격형 (Strict)
- 호환형 (Transitional)
- 프레임형 (Frameset)
* <html> ~ </html>
웹 페이지의 시작과 종료를 의미.
* <head> ~ </head>
html 문서는 머리부분과 본문 부분으로 나눌 수 있는데 머리영역을 나타내는 태그.
문서의 일반적인 정보와 title 등의 제목을 선언.
* <body> ~ </body>
html 문서의 본문 부분에 해당.
화면에 나타나는 모든 부분은 <body> 태그와 </body> 태그 사이에 선언해야 함.
블록 요소와 인라인 요소
* 블록 요소 (block element)
블록 요소는 제목(<h1>~<h6>), 문단(<p>), 작성자 정보(<address>) 등이 있음.
대부분의 블록 요소는 인라인 요소와 텍스트를 포함 할 수 있고 일부는 다른 블록을 포함 할 수 있음.
* 인라인 요소 (inline element)
링크(<a>), 이미지(<img>), 강조(<em><strong>) 등이 해당되는 요소.
텍스트도 인라인 요소로 취급.
인라인 요소 안에는 대부분 인라인 요소와 텍스트를 포함할 수 있지만 블록 요소는 포함할 수 없음.
문서형 정의 및 선언, 네임 스페이스, 휴먼 랭귀지
1. 문서형 정의 및 선언(DTD)
마크업 문서를 작성하려면 문서의 첫머리에 문서형 정의(DTD: Document Type Definition)를 선언해야 함.
문서형 정의의 종류에 따라 특정 요소의 사용이 제한되거나 규칙이 다르게 적용되고
웹브라우저가 문서를 렌더링하는 기준이 됨.
생략 할 경우 브라우저마다 다르게 보이는 원인이 될 수 있음.
| Strict | W3C가 의도했던 문서타입. 구조와 표현을 분리하기 위해 단계적으로 사라질 표현에 관한 요소와 속성을 배제한 문서타입 ex) center, font, iframe, strike, u… 등등 |
| Transitional | 기존에 만든 문서들과의 호환성을 유지하기 위해 중간 단계로 설정한 것 |
| Frameset | 프레임셋 |
모든 웹 문서는 문서형 선언(DTD)로 시작함.
DTD 선언은 html 문서 첫 줄에 위치해야 하고 DTD 선언 위에는 공백을 포함해서 어떤 요소도 오면 안됨.
| HTML 4.01 | Strict <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> |
| XHTML 1.0 | Strict <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Transitional <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Frameset <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> |
2. 네임 스페이스
xhtml은 html을 xml로 재정의한 언어이기 때문에
xml이 가지는 확장성을 이용하여 xml 형식의 문서표준을 네임스페이스(xmlns)를 이용하여 지원할 수 있음.
xhtml 은 <html xmlns=”http://www.w3.org/1999/xhtml”> 을 네임 스페이스 값으로 갖는다.
예를 들어 MathML이라는 수학식 기호를 표현하기 위한 언어를 삽입하려면
네임스페이스에 http://www.w3.org/TR/2000/REC-xhtml1-20000126 을 지정하면 됨.
3. 휴먼 랭귀지
웹 브라우저나 음성 브라우저 같은 User Agents가 웹 문서에 쓰여진 언어를
올바로 해석할 수 있도록 문서에 사용언어를 선언할 수 있는데
대표적 방법에는 휴먼 랭귀지(human language) 명시와 meta 요소를 이용한 선언이 있다.
<html xml:lang=”ko” lang=”ko”>
<p>사과는 영어로 <span lang=”en”>apple</span>,
독일어로 <span lang=”de”>apfel</span>이라고 합니다.</p>
영문 단어의 경우 영어나 프랑스어, 스페인어로 접근하면 읽는 방식이 달라지게 됨.
스크린 리더가 어떤 언어로 읽을지 선택할 수 있도록 설정해 줌.
언어를 설정하는 방식은
html 에서는 lang 속성을 사용하고
xhtml 1.0 에서는 text/html 의 경우에 lang 과 xml:lang 속성을 사용하고
xhtml 1.1 에서는 xml:lang 속성만 사용함.
