21.06.15
공부한 것을 정리하는 용도의 글이므로 100% 정확하지 않을 수 있습니다.
참고용으로만 봐주시고, 내용이 부족하다고 느끼신다면 다른 글도 보시는 것이 좋습니다.
+ 틀린 부분, 수정해야 할 부분은 언제든지 피드백 주세요. 😊
by. ryalya
🔶 XHTML이란?
XML + HTML
- XML기반(XML로 작성된) HTML. (HTML4를 XML에 맞게 재정의한 언어)
- Extensible Hypertext Markup Language의 약자.
- XML 마크업 언어로 HTML보다 문법이 엄격함.
- 모든 주요 브라우저에서 지원됨.
🔹 XHTML을 왜 사용하는가?
-
HTML의 단점을 보완하기 위해!!
기존 HTML은 다소 부정확한 코딩이 있어도 무시하고 처리한다. -
HTML에서는 불가능한 일을 할 수 있음
ex)
- CDATA 섹션(<![CDATA[ … ]]>) 사용.
이 섹션 안의 문자들은 태그로 처리되지 않기 때문에 따로 이스케이프(escape) 해 줄 필요가 없다.
- processing-instruction 사용. 예를 들어 XML 문서에 스타일시트를 연결시킬 수 있다.
<?xml-stylesheet type="text/css" href="style.css" media="screen"?>
- 다른 XML 이름 영역(namespace)에 있는 요소(element)들을 포함시킬 수 있다.
-'캐릭터 엔티티(character entity)를 사용할 수 있다.
(※ 참고 : XHTML에서는 불가능하나 HTML에서는 가능한 일
- 기존 HTML에서 사용하던 〈!-- … --〉 코멘트로 스타일이나 스크립트의 일부를 주석 처리할 수 없다.
- 문서를 읽고 있는 도중에는 페이지의 일부를 동적으로 생성할 수 없다(예: document.write() 사용).
- 같은 named entity를 사용할 수 없다. 미리 정의된 <, >, &, "는 사용 가능.
- 자바 스크립트에서 .innerHTML 속성을 사용할 수 없다. )
🔶 XTHML 문법 규칙
🔹 XHTML 서식
-
구조적 측면
- XHTML DOCTYPE을 반드시 명시해야 한다.
- 〈html〉 태그의 xmlns 속성을 반드시 명시해야 한다.
- 〈html〉, 〈head〉, 〈title〉, 〈body〉태그를 반드시 사용해야 한다.
-
요소적 측면
- 모든 태그는 반드시 닫혀야 한다.
- 모든 태그는 순서대로 닫혀야 한다.
- 모든 요소는 반드시 소문자로 사용되어야 한다.
- XHTML 문서는 반드시 하나의 root 요소를 포함해야 한다.
-
속성적 측면
- 속성 이름은 반드시 소문자로 사용되어야 한다.
- 속성값은 반드시 따옴표로 감싸야 한다.
- 속성값 생략이 없어졌기 때문에 반드시 속성값을 명시해야 한다.
🔹 XHTML과 HTML 차이점
- 종료 태그가 없는 빈 태그(empty tag)는 반드시 끝에 공백과 함께 슬래시(/)를 붙인다.
(XHTML은 종료 태그 생략 불가능)
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은 '네임 스페이스'라는 것을 꼭 지정해 주어야 한다.
〈html〉 태그 안에 있는xmlns=http://www.w3.org/1999/xhtml" 속성이 네임 스페이스 부분
-
XHTML은 HTML보다 디버그하기가 더 어렵다.
-
XHTML은 HTML보다 형식이 좋고 깔끔하다.
(※ 웹 문서 문법 유효성 검사 - https://validator.w3.org/)
🔶 XTHML 요소
🔹 블록 요소
<h1 /> ~ <h6 />, <p />, <div />등 줄바꿈이 일어나는 태그들이 해당한다.- 대부분의 블록 요소 안에는 텍스트(문자)와 인라인 요소 모두 포함 가능.
- 대부분의 요소는 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록 요소 안에 블록 요소, 인라인 요소 안에 인라인 요소)
🔹 인라인 요소
<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>간의 순서 상관X. (계층으로 보면dt = dd)
: 블럭 요소, 인라인 요소
: 들여쓰기가 되어 있음.
:<dl>태그 안에서 사용되며,<li>와 같은 성질을 가지고 있음.
🔹 HTML → XHTML 문서 변환
- 첫줄에 다음 코드를 추가.
<!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">-
xmlns 속성을 추가.
-
모든 태그 이름을 소문자로 바꿔준다.
-
모든 빈 태그를 닫아준다.
-
모든 속성 이름을 소문자로 바꿔준다.
-
모든 속성값을 따옴표로 감싸준다.
끝내며
문법적으로 xml을 따랐다고 하지만, 차이점, 문법 특징 등을 살펴보면서 HTML과 큰 차이를 보이지는 않는다는 것을 알았다.
(논문에 따르면 Element들은 HTML 4.01 버전을 사용하고, 문법은 XML 문법을 따른다고 한다.)
xml은 정확하고 올바르게 작성된 문서를 만들기 위한 마크업 언어.
HTML은 위에서 언급했다시피 다소 부정확한 코딩이 있어도 무시하고 처리한다.
오늘날,사람들이 소비하는 컨텐츠들은 웹 이외에도 다양한 플랫폼에서 소비가 되고 있다.
그래서 부정확한 문법을 지원하는데 불필요한 자원을 더 많이 사용한다고 한다.
이러한 단점을 보완하기 위해 XHTML이 탄생했다는데
(논문에서는 XHTML의 목적을 Computer OS, Browser 종류 등에 관계없이 모든 환경에서 호환되는 웹 표준을 만드는데 있다고 한다.)
사용법면에서 HTML과 크게 다르지 않아서 그런가? 아직은 잘 모르겠다.
XHTML 파싱을 해보면서 차이점을 찾아보려 한다.
