XHTML/CSS 이야기 (1)
컨텐츠 정보
- 19,653 조회
- 4 추천
- 목록
본문
0. 들어가며...
내용이 길어서 여러번 나누어 올리게 될 것 같습니다. 강의는 아닌 것 같고.. 소개 정도로 읽어주시면 감사하겠습니다.
원래는 CSS에 대한 나름대로의 팁이나 노하우를 몇 개 소개하려고 했는데 아무래도 전체적으로 한번 훑고 지나가는 게 나을 것 같아서 제 자신을 위해 정리하는 겸 해서 올립니다. 부족한 점이 있어도 너그럽게 지적해주시길... ^_^
1. XHTML - What & Why?
원래 이 글의 목적은 CSS에 대한 이야기입니다만, XHTML을 빼놓고 CSS를 이야기하는 건 뭔가 허전합니다. 그래서 먼저 간단하게 짚고 넘어갑니다.
사실 XHTML의 핵심내용은 너무 간단해서 열줄 정도로 정리할 수도 있습니다. 중요한 것은 왜 XHTML을 써야하는가겠지요.
일단 XHTML이 무언가에 대해서부터.
XHTML은 eXtensible HyperText Markup Language의 약자입니다. HTML을 대체하기 위한 목적으로 만들어졌고, HTML 4.01 규약에 "거의" 준합니다. 쉽게 말하자면 XHTML은 HTML의 XML 버전이라고 생각하시면 되고 일반 HTML에 비해 좀더 명확하고 구조적인 특징을 가지고 있습니다.
2000년 1월에 W3C의 공식 표준으로 지정된 이후 HTML의 표준이라하면 XHTML 1.0을 가리킵니다. 당연히 최근의 모든 HTML 브라우저는 XHTML 1.0을 완벽히 지원하고 있습니다.(지원해야만 합니다.)
그러나, 대부분의 브라우저는 일반 HTML을 써도 상관없습니다. 게다가 HTML 문법이 상당히 느슨하기 때문에 어쩌면 XHTML의 딱딱한 규정을 지키는 것이 오히려 번거로울 수도 있습니다. 그렇다면 왜 굳이 HTML대신 XHTML을 써야 할까요?
- XHTML은 XML의 일종입니다.
사실 국내에서 웹 페이지 제작은 "IE를 통해 사용자가 눈으로 보는 것"을 목적으로 만들어집니다. 따라서 일단 눈으로 보이는 부분만 멀쩡하면 내부적으로 HTML 문서가 어떻게 구성되어있든 아무도 신경쓰지 않지요.
뭐가 문제가 되냐구요? HTML의 재활용과 생산성의 문제입니다. 일반적인 관습대로 작성된 HTML 문서는 내용과 디자인, 문서구조가 모두 뒤범벅이 되어있습니다. 디자인을 바꾸려면 일일이 HTML문서를 수정해줘야 합니다. 내용이나 문서구조 역시 마찬가지. 당연히 크로스 브라우징이나 크로스 플랫폼은 아예 염두에 두지 않습니다. HTML 문서가 반드시 "사람의 눈"에만 보이는 것은 아닐 수도 있습니다. 어떤 어플리케이션의 입력데이터로 HTML이 사용될 수도 있고, 때로는 상이한 플랫폼과 환경에서 해석되어야 할 수도 있습니다.
기존의 HTML 습관으로는 이러한 변화에 대처하기 힘들죠. 그래서 똑같은 내용이라고 하더라도 모바일 환경을 위해서 따로 만들고, PDA버전을 위해 따로 만들고, 심지어는 같은 PC환경이라도 브라우저 버전별로 따로 만들기도 합니다.
단순한 디자인의 문제라구요? 이런 문제도 있습니다. 어떤 회사의 PR 사이트를 만들면서 영어와 중국어 버전이 각각 필요할 때. 이런 경우에도 각각의 페이지를 다 따로 만들어줘야합니다. 어떤 사이트의 페이지를 읽어와서 재가공해야할 경우 일일이 해당 페이지를 분석해서 페이지별로 파싱해줘야합니다. 왠지 뭔가 굉장히 효율이 낮은 작업을 하고 있다는 생각 안드세요?
XHTML은 XML의 HTML 버전입니다. 즉, XML이라는 소리입니다. XML은 잘 아시다시피 데이터 교환을 위해 데이터의 내용과 구조, 형식을 분리 정의하는 규약입니다. 이러한 XML을 지원하는 어플리케이션, 브라우저라면 어디에서나 XHTML은 통용될 수 있습니다. 제대로 작성된 XHTML문서는 크로스 브라우징이나 크로스 플랫폼에 대해 신경쓰지 않아도 됩니다. XML을 지원하는 어플리케이션에서도 별다른 작업없이 바로 입력 데이터로 쓸 수 있습니다. 뒤집어 말하자면, XHTML문서만 제대로 만들어도 별도의 XML문서를 생성할 필요가 없습니다.
- XHTML은 구조화된 문서를 만들어줍니다.
당연한 이야기지만, XML의 규격을 따르게 되니 저절로 "구조화된" 문서로 만들어집니다. 구조화된 문서의 특징은 "가독성"이 높아집니다. 여기서 "가독성"이란 단지 생성된 코드를 사람이 읽기 편하다는 뜻뿐만 아니라, 다른 기계나 프로그램도 읽기 수월합니다. 만약 디자인 부분을 CSS로 분리해낸다면 훨씬 더 간단해집니다. 지금까지 만들어온 일반적인 HTML 코드를 떠올려보세요. 아마도 실제 내용보다 디자인 요소가 차지하는 부분이 더 클 겁니다. 파일의 용량이 커짐은 물론, 도대체 이 HTML문서가 뭘 하는 문서인지, 무엇을 보여주려고 하는 문서인지 사람의 눈으로 브라우저에서 띄워보기 전까지는 파악할 방법이 없습니다. 무엇이 컨텐츠인지, 무엇에 대한 컨텐츠인지, 사람이 한번 해석해서 파싱문법을 가르쳐주지 않으면 기계나 프로그램으로서는 알 수가 없습니다.
XHML과 CSS를 사용함으로써 훨씬 가벼워진 페이지를 만들어낼 수 있습니다. 잘 구조화된 XHTML 문서는 수정이나 재활용도 훨씬 쉬워집니다.
2. XHTML - How?
XHTML의 규약은 매우 단순(?)합니다. 위에서 XHTML이 무엇이며, 왜 써야하는지에 대해 설명한 것을 보면 엄청나게 거창할 것 같지만 사실, 김빠질 정도로 단순하죠.
1) 모든 엘리먼트들은 반드시 완벽하게 중첩되어야 합니다.
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.
2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.
3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.
4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.
5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.
6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.
당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.
7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.
8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)
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">
다음은 이러한 XHTML 규칙에 따라 생성된 XHTML 코드의 예입니다. 아마 겉으로 보기에는 일반 HTML과 별 차이를 못느끼실지도. ^_^;
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
생각보다는 간단하죠?
Strict DTD에서는 사용할 수 없는 HTML 태그들이 있습니다.
<applet> : 애플릿을 이용하기 위해서는 <object> 를 대신 쓰세요.
<frame>, <frameset>, <noframes>: Frameset DTD로 선언하지 않으면 사용할 수 없습니다.
<center>, <font>, <basefont>, <s>, <strike>, <u> : 이러한 "디자인 요소"들은 사용할 수 없습니다. 디자인과 관련된 부분은 모두 CSS에서 처리하도록 합니다.
<iframe> : XHTML 문서에서는 iframe을 사용하지 않습니다. 구조화된 문서를 만드는데 방해됩니다.
<dir>, <menu> : 역시 사용하지 않습니다. (HTML 4.01에서도 삭제되었죠. ^_^)
속성에 대해서도 조금 설명..
class, id, style, title은 대부분의 태그에서 사용되는 핵심 속성입니다. class는 클래스규칙이나 스타일규칙을 적용하는 속성이며, id속성은 해당 엘리먼트를 다른 엘리먼트와 구분짓게 하고, style은 인라인 스타일을 적용할 때 쓰입니다. title은 해당 엘리먼트에 대한 설명으로 보통 툴팁 도움말을 띄울 때 쓰죠.
보통 다음처럼 씁니다.
<div id="greeting" class="main_text" style="border:1px solid #F00;margin:5px" title="Hello, World">
Hello World
</div>
물론 필요없는 속성은 생략해도 되죠.
이 밖에 텍스트 출력방향을 지정해주는 dir속성과 사용되는 문자코드를 지정해주는 lang속성이 있으며,
엘리먼트에 키보드 단축키를 지정해주는 accesskey 속성과 탭 인덱스 순서를 지정해주는 tabindex 속성이 올 수 있습니다.
휴.. 너무 길어졌네요. ^_^ XHTML의 이벤트 속성은 DHTML이나 JavaScript규약에 준하니 그 쪽을 참고하시면 됩니다.
XHTML에 대해서는 이쯤 해서 마치고, 다음부터는 실제로 CSS를 이용한 디자인에 대한 이야기를 하겠습니다. 어떻게 하면 문서를 디자인으로부터 해방시킬까에 대한 내용이 될 것 같네요. 참, 그전에 아주 간단한 CSS 요약 정리정도는 들어갈 듯.
내용이 길어서 여러번 나누어 올리게 될 것 같습니다. 강의는 아닌 것 같고.. 소개 정도로 읽어주시면 감사하겠습니다.
원래는 CSS에 대한 나름대로의 팁이나 노하우를 몇 개 소개하려고 했는데 아무래도 전체적으로 한번 훑고 지나가는 게 나을 것 같아서 제 자신을 위해 정리하는 겸 해서 올립니다. 부족한 점이 있어도 너그럽게 지적해주시길... ^_^
1. XHTML - What & Why?
원래 이 글의 목적은 CSS에 대한 이야기입니다만, XHTML을 빼놓고 CSS를 이야기하는 건 뭔가 허전합니다. 그래서 먼저 간단하게 짚고 넘어갑니다.
사실 XHTML의 핵심내용은 너무 간단해서 열줄 정도로 정리할 수도 있습니다. 중요한 것은 왜 XHTML을 써야하는가겠지요.
일단 XHTML이 무언가에 대해서부터.
XHTML은 eXtensible HyperText Markup Language의 약자입니다. HTML을 대체하기 위한 목적으로 만들어졌고, HTML 4.01 규약에 "거의" 준합니다. 쉽게 말하자면 XHTML은 HTML의 XML 버전이라고 생각하시면 되고 일반 HTML에 비해 좀더 명확하고 구조적인 특징을 가지고 있습니다.
2000년 1월에 W3C의 공식 표준으로 지정된 이후 HTML의 표준이라하면 XHTML 1.0을 가리킵니다. 당연히 최근의 모든 HTML 브라우저는 XHTML 1.0을 완벽히 지원하고 있습니다.(지원해야만 합니다.)
그러나, 대부분의 브라우저는 일반 HTML을 써도 상관없습니다. 게다가 HTML 문법이 상당히 느슨하기 때문에 어쩌면 XHTML의 딱딱한 규정을 지키는 것이 오히려 번거로울 수도 있습니다. 그렇다면 왜 굳이 HTML대신 XHTML을 써야 할까요?
- XHTML은 XML의 일종입니다.
사실 국내에서 웹 페이지 제작은 "IE를 통해 사용자가 눈으로 보는 것"을 목적으로 만들어집니다. 따라서 일단 눈으로 보이는 부분만 멀쩡하면 내부적으로 HTML 문서가 어떻게 구성되어있든 아무도 신경쓰지 않지요.
뭐가 문제가 되냐구요? HTML의 재활용과 생산성의 문제입니다. 일반적인 관습대로 작성된 HTML 문서는 내용과 디자인, 문서구조가 모두 뒤범벅이 되어있습니다. 디자인을 바꾸려면 일일이 HTML문서를 수정해줘야 합니다. 내용이나 문서구조 역시 마찬가지. 당연히 크로스 브라우징이나 크로스 플랫폼은 아예 염두에 두지 않습니다. HTML 문서가 반드시 "사람의 눈"에만 보이는 것은 아닐 수도 있습니다. 어떤 어플리케이션의 입력데이터로 HTML이 사용될 수도 있고, 때로는 상이한 플랫폼과 환경에서 해석되어야 할 수도 있습니다.
기존의 HTML 습관으로는 이러한 변화에 대처하기 힘들죠. 그래서 똑같은 내용이라고 하더라도 모바일 환경을 위해서 따로 만들고, PDA버전을 위해 따로 만들고, 심지어는 같은 PC환경이라도 브라우저 버전별로 따로 만들기도 합니다.
단순한 디자인의 문제라구요? 이런 문제도 있습니다. 어떤 회사의 PR 사이트를 만들면서 영어와 중국어 버전이 각각 필요할 때. 이런 경우에도 각각의 페이지를 다 따로 만들어줘야합니다. 어떤 사이트의 페이지를 읽어와서 재가공해야할 경우 일일이 해당 페이지를 분석해서 페이지별로 파싱해줘야합니다. 왠지 뭔가 굉장히 효율이 낮은 작업을 하고 있다는 생각 안드세요?
XHTML은 XML의 HTML 버전입니다. 즉, XML이라는 소리입니다. XML은 잘 아시다시피 데이터 교환을 위해 데이터의 내용과 구조, 형식을 분리 정의하는 규약입니다. 이러한 XML을 지원하는 어플리케이션, 브라우저라면 어디에서나 XHTML은 통용될 수 있습니다. 제대로 작성된 XHTML문서는 크로스 브라우징이나 크로스 플랫폼에 대해 신경쓰지 않아도 됩니다. XML을 지원하는 어플리케이션에서도 별다른 작업없이 바로 입력 데이터로 쓸 수 있습니다. 뒤집어 말하자면, XHTML문서만 제대로 만들어도 별도의 XML문서를 생성할 필요가 없습니다.
- XHTML은 구조화된 문서를 만들어줍니다.
당연한 이야기지만, XML의 규격을 따르게 되니 저절로 "구조화된" 문서로 만들어집니다. 구조화된 문서의 특징은 "가독성"이 높아집니다. 여기서 "가독성"이란 단지 생성된 코드를 사람이 읽기 편하다는 뜻뿐만 아니라, 다른 기계나 프로그램도 읽기 수월합니다. 만약 디자인 부분을 CSS로 분리해낸다면 훨씬 더 간단해집니다. 지금까지 만들어온 일반적인 HTML 코드를 떠올려보세요. 아마도 실제 내용보다 디자인 요소가 차지하는 부분이 더 클 겁니다. 파일의 용량이 커짐은 물론, 도대체 이 HTML문서가 뭘 하는 문서인지, 무엇을 보여주려고 하는 문서인지 사람의 눈으로 브라우저에서 띄워보기 전까지는 파악할 방법이 없습니다. 무엇이 컨텐츠인지, 무엇에 대한 컨텐츠인지, 사람이 한번 해석해서 파싱문법을 가르쳐주지 않으면 기계나 프로그램으로서는 알 수가 없습니다.
XHML과 CSS를 사용함으로써 훨씬 가벼워진 페이지를 만들어낼 수 있습니다. 잘 구조화된 XHTML 문서는 수정이나 재활용도 훨씬 쉬워집니다.
2. XHTML - How?
XHTML의 규약은 매우 단순(?)합니다. 위에서 XHTML이 무엇이며, 왜 써야하는지에 대해 설명한 것을 보면 엄청나게 거창할 것 같지만 사실, 김빠질 정도로 단순하죠.
1) 모든 엘리먼트들은 반드시 완벽하게 중첩되어야 합니다.
일반 HTML문서라면 <b><i>테스트</b></i> 처럼 쓰더라도 아무 문제가 없습니다만, XHTML 문서는 반드시 <b><i>테스트</i></b>처럼 중첩구조가 완벽해야합니다. HTML에서는 가끔 닫는 태그를 빼먹어도 별 문제없이 동작하지만, XHTML에서는 </xxx>처럼 닫는 태그들을 반드시 사용해야 합니다. 특히 <p>태그를 사용할 때라든가, 문서 마지막에 </html>쓰는 것 같을 때 주의해야겠지요.
2)모든 태그와 속성들은 소문자를 사용합니다.
<DIV NAME="xxx"> 처럼 쓰면 안되고 반드시 <div name="xxx">처럼 써야합니다. 물론 대문자로 쓰더라도 해석은 됩니다만 어플리케이션 호환성을 위해 반드시 소문자로 쓰는 습관을 들입시다.
3)홀로 쓰이는 단독 태그들도 반드시 닫겨야 합니다.
Empty Element라고 불리우는 단독 태그들 - br, hr, img 등등... - 은 쌍으로 열리고 닫기지 않는데 어떻게 하냐구요... <br />, <hr />, <img src="xxx" />처럼 써야합니다. /앞의 공백은 붙여주시는 쪽을 권장합니다.
4)속성값을 줄 때에는 반드시 겹따옴표로 묶어줍니다.
즉, <table width=100>은 틀린 XHTML 문법이며, <table width="100"> 처럼 써야만 합니다.
5)단축형 속성값은 쓸 수 없습니다.
즉 <option selected> 대신 <option selected="selected">처럼 써야만 합니다.
6) name 속성대신 id 속성을 사용합니다.
<input name="password" /> 대신 <input id="password" />처럼 사용합니다. name과 id의 가장 큰 차이점은 하나의 문서내에서 동일한 name값을 가지는 엘리먼트들이 있어도 상관없지만, id값은 같은 문서에서 동일한 id값을 가질 수 없습니다.
조금 다른 이야기지만 JavaScript에서 문서내의 객체에 접근할 때, 이런 엘리먼트의 name을 바로 오브젝트나 프로퍼티처럼 쓰는 경우가 있는데, 잘못된 습관입니다. (IE가 나쁜 버릇은 전부 들이게 만든다는... -_-a) 예를 들어 password.value 처럼 쓰는 것은 옳지 않습니다. 이럴 경우에는 getElementsByName이나 getElementById 같은 메쏘드를 써서 해당 오브젝트를 반환받아 써야합니다. 즉, getElementById('password').value 처럼 쓰는 것이 옳습니다.
당분간은 옛날 브라우저와의 호환을 위해 id와 name을 동시에 쓰는 쪽을 권장합니다.
7)lang 속성의 사용
만약 문서내에 특정 언어로 쓰여진 부분이 있다면, lang 속성을 이용해 언어를 구분해줍니다.
<div lang="no" xml:lang="no">Heia Norge!</div>
노르웨이어로 쓰여진 부분이라면 이런 식으로 처리한다는 예입니다.
8)<!DOCTYPE>의 사용.
실제로 이 <!DOCTYPE>은 XHTML 문법에는 포함되지 않습니다. 이것은 해석기나 브라우저로 하여금 이후 이어지는 문서가 XHTML이며 어떤 DTD(Document Type Definition)에 의해 해석되어야하는 지를 지정해주는데 이용됩니다. 통상 Strict, Transitional, Frameset의 세 종류가 있으며, Strict는 엄격한 XHTML문법을 따르고 CSS와 같이 이용될 때 쓰입니다. Transitional은 틀린 XHTML 문법이 있어도 HTML문법에 준해서 오류를 허용할 때 쓰입니다. Frameset은 말그대로 HTML의 frame을 이용할 때 쓰입니다. 각각의 경우에 대해 아래의 내용을 문서의 가장 첫줄에 적어주시면 됩니다. (기왕 XHTML을 만드는 것, 되도록이면 Strict를 쓰도록 합시다.)
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">
다음은 이러한 XHTML 규칙에 따라 생성된 XHTML 코드의 예입니다. 아마 겉으로 보기에는 일반 HTML과 별 차이를 못느끼실지도. ^_^;
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
생각보다는 간단하죠?
Strict DTD에서는 사용할 수 없는 HTML 태그들이 있습니다.
<applet> : 애플릿을 이용하기 위해서는 <object> 를 대신 쓰세요.
<frame>, <frameset>, <noframes>: Frameset DTD로 선언하지 않으면 사용할 수 없습니다.
<center>, <font>, <basefont>, <s>, <strike>, <u> : 이러한 "디자인 요소"들은 사용할 수 없습니다. 디자인과 관련된 부분은 모두 CSS에서 처리하도록 합니다.
<iframe> : XHTML 문서에서는 iframe을 사용하지 않습니다. 구조화된 문서를 만드는데 방해됩니다.
<dir>, <menu> : 역시 사용하지 않습니다. (HTML 4.01에서도 삭제되었죠. ^_^)
속성에 대해서도 조금 설명..
class, id, style, title은 대부분의 태그에서 사용되는 핵심 속성입니다. class는 클래스규칙이나 스타일규칙을 적용하는 속성이며, id속성은 해당 엘리먼트를 다른 엘리먼트와 구분짓게 하고, style은 인라인 스타일을 적용할 때 쓰입니다. title은 해당 엘리먼트에 대한 설명으로 보통 툴팁 도움말을 띄울 때 쓰죠.
보통 다음처럼 씁니다.
<div id="greeting" class="main_text" style="border:1px solid #F00;margin:5px" title="Hello, World">
Hello World
</div>
물론 필요없는 속성은 생략해도 되죠.
이 밖에 텍스트 출력방향을 지정해주는 dir속성과 사용되는 문자코드를 지정해주는 lang속성이 있으며,
엘리먼트에 키보드 단축키를 지정해주는 accesskey 속성과 탭 인덱스 순서를 지정해주는 tabindex 속성이 올 수 있습니다.
휴.. 너무 길어졌네요. ^_^ XHTML의 이벤트 속성은 DHTML이나 JavaScript규약에 준하니 그 쪽을 참고하시면 됩니다.
XHTML에 대해서는 이쯤 해서 마치고, 다음부터는 실제로 CSS를 이용한 디자인에 대한 이야기를 하겠습니다. 어떻게 하면 문서를 디자인으로부터 해방시킬까에 대한 내용이 될 것 같네요. 참, 그전에 아주 간단한 CSS 요약 정리정도는 들어갈 듯.
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.
