XHTML이란
■ XML + HTML
・XML기반(XML로 작성된) HTML. (HTML4를 XML에 맞게 재정의한 언어)
・Extensible Hypertext Markup Language의 약자
・XML 마크업 언어로 HTML보다 문법이 엄격하다
・모든 주요 브라우저에서 지원한다
■ XHTML을 사용하는 이유
・Computer OS, Browser 종류 등에 관계없이
모든 환경에서 호환되는 웹 표준을 만들기 위해
・HTML의 단점을 보완하기 위해
- 기존 HTML은 다소 부정확한 코딩이 있어도 무시하고 처리
・HTML에서는 할 수 없는 일을 할 수 있다
(ex 1) CDATA 섹션 사용
이 섹션 안의 문자들은 태그로 처리되지 않기 때문에
따로 이스케이프(escape) 해 줄 필요가 없다
<![CDATA[ … ]]>
(ex 2) processing-instruction 사용
XML 문서에 스타일시트를 연결시킬 수 있다
<?xml-stylesheet type="text/css" href="style.css" media="screen"?>
(ex 3) 다른 XML 이름 영역(namespace)에 있는
요소(element)들을 포함시킬 수 있다
(ex 4) '캐릭터 엔티티(character entity)를 사용할 수 있다
XTHML 문법 규칙
■ XHTML 서식
・구조적 측면
- XHTML DOCTYPE을 반드시 명시해야 한다
- <html> 태그의 xmlns 속성을 반드시 명시해야 한다
- <html>, <head>, <title>, <body> 태그를 반드시 사용해야 한다
・요소적 측면
- 모든 태그는 반드시 닫혀야 한다
- 모든 태그는 순서대로 닫혀야 한다
- 모든 요소는 반드시 소문자로 사용되어야 한다
- XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다
・속성적 측면
- 속성 이름은 반드시 소문자로 사용되어야 한다
- 속성값은 반드시 따옴표로 감싸야한다
- 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다
■ XHTML과 HTML 차이점
・종료 태그가 없는 빈 태그(empty tag)는
반드시 끝에 공백과 함께 슬래시(/)를 붙인다
(HTML은 종료 태그 생략 가능)
HTML : <hr>
XHTML: <hr />
・비어있지 않은 요소는 반드시 종료태그를 가져야 한다
HTML : <p>첫 번째 문장</p><p>두 번째 문장
XHTML: <p>첫 번째 문장</p><p>두 번째 문장</p>
・요소들은 반드시 열린 순서대로 닫힌다
HTML : <em><p>This is some text.</em></p>
XHTML: <em><p>This is some text.</p></em>
・<img> 태그에는 반드시 alt 속성이 기술되어야 한다
HTML : <img src="alternative.png" />
XHTML: <img src="alternative.png" alt="explanation" />
・모든 텍스트(text)는 반드시 태그로 감싸져야 한다
HTML : <body>본문에 사용되는 텍스트 단락</body>
XHTML: <body><p>본문에 사용되는 텍스트 단락</p></body>
・모든 속성값은 반드시 따옴표로 감싼다
HTML : <td rowspan=3>
XHTML: <td rowspan="3">
・태그 이름이나 속성 이름에는 반드시 소문자만을 사용해야 한다
HTML : <BODY><P>태그 이름 태그 속성</P></BODY>
XHTML: <body><p>태그 이름 태그 속성</p></body>
・XHTML은 반드시 속성값을 명시해야 한다
(속성에 속성값 생략 불가능)
HTML : <textarea readonly>읽기만 가능합니다</textarea>
XHTML: <textarea readonly="readonly">읽기만 가능합니다</textarea>
・특수문자를 쓸 때는 Entity Name 또는
Entity code를 사용해야 한다
・XHTML은 '네임 스페이스'라는 것을 꼭 지정해 주어야 한다
XTHML 요소
■ 블록 요소
・<h1 /> ~ <h6 />, <p />, <div />등 줄 바꿈이 일어나는 태그들이 해당한다
・대부분의 블록 요소 안에는 텍스트(문자)와 인라인 요소 모두 포함 가능
・대부분의 요소는 같은 형태의 다른 요소를 안에 포함할 수 있다
c(블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소)
■ 인라인 요소
・<strong />, <a />, <span />, <img />등 줄 바꿈이 일어나지 않는 태그들이 해당한다
・인라인 요소는 블록 요소를 포함할 수 없다
・대부분의 요소는 같은 형태의 다른 요소를 안에 포함할 수 있다
(블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소)
XTHML 리스트
■ ol (Order List) - 순차적 목록
・<ol>블록 요소
・<ol>요소는 블록 요소이며,<li>요소 이외의 다른 요소는 포함할 수 없다
・<li>인라인 요소
・<li>요소는 블록 요소이며 텍스트, 인라인 요소, 블록 요소를 포함할 수 있다
<ol>
<li> ~~~~ </li>
<li> ~~~~ </li>
<li> ~~~~ </li>
</ol>
■ ul (Unorder List) - 비순차적 목록
・<ul>블록 요소
・<ul>요소는 블록 요소이며,<li>요소 이외의 다른 요소는 포함할 수 없다
・<li>인라인 요소
・<li>요소는 블록 요소이며 텍스트, 인라인 요소, 블록 요소를 포함할 수 있다
<ul>
<li> ~~~~ </li>
<li> ~~~~ </li>
<li> ~~~~ </li>
</ul>
■ dl (Definition List) - 정의형 목록
・용어와 설명으로 구성된 목록
・<dl> (Definition List)
- 정의 목록을 나타내는 태그
- 블록 요소 속성을 가지고 있음
- 하지만 <dt>, <dd>이외 요소 포함 불가
- 용어 설명에 적합한 태그
・<dt> (Definition Term)
- 정의 용어의 제목을 나타내는 태그
- 인라인 요소. 인라인 요소와 텍스트를 포함할 수 있음
- <dl>태그 안에서 사용되며, <dt>는 여러 개가 와도 상관없음
・<dd> (Definition Description)
- 정의된 제목에 대한 설명
- 블록 요소 속성을 가지고 있음
- <dt>, <dd> 간의 순서 상관없음 (계층으로 보면 dt = dd)
- 블럭 요소, 인라인 요소
- 들여 쓰기가 되어 있음
- <dl>태그 안에서 사용되며, <li>와 같은 성질을 가지고 있음
■ HTML → XHTML 문서 변환
1. 첫 줄에 다음 코드를 추가
<!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">2. xmlns 속성을 추가.
3. 모든 태그 이름을 소문자로 바꿔준다
4. 모든 빈 태그를 닫아준다
5. 모든 속성 이름을 소문자로 바꿔준다
6. 모든 속성값을 따옴표로 감싸준다