47166 Members __ Online

정렬
HOME스터디[s]웹표준

DIV 레이아웃 [3-2] : XHTML 기본 문법 정리

posted by 라부
date : , update :
hit : 36843, scrab : 1 , recommended : 13 , attach : 1

요새 회사일 땜에 글 올릴 시간이 읍썼쎄여.

*케 바쁜지... 올해는 휴가나 제대로 갈 수 있을라나 모르것시유.... ㅜㅜ

강좌 기둘리셨던 분들 쏘리~~~~~~

 

===================================================================================================================

 

XHTML 1.0 Strict 기본 문법 정리

 

우리는 앞으로 XHTML 1.0 Strict 모드를 사용하여 웹페이지를 제작할 것이라고 지난 시간에 이미 말씀 드렸었죠?

그리고 이 Strict 모드는 어떠한 문법적인 오류도 허용하지 않는 가장 엄격한 문서 형식이란것도 말씀 드렸습니다.

 

그래서 이번 시간에는 이 XHTML 1.0 Strict 의 문법에 대해 공부해 보는 시간을 갖도록 하겠습니다.

앞으로 제작하게 될 웹페이지는 이 문법대로 작성하셔야지만 원하는 결과를 얻으실 수 있으며

뛰어난 웹디자이너라고 칭찬 받습니다.

 

'꼭 이렇게 안해도 브라우저에서는 똑같이 보이던데 멀....' 라고 생각하실 수도 있겠습니다만

그건 우리가 사용하는 브라우저들이 똑똑해서 웬만한 오류는 자동으로 지들이 알아서 처리해 그런것이지

우리가 올바로 HTML 문서를 작성해서 그런것이 아니라는 것을 기억해 두세요.

웹 브라우저는 PC에만 있는 것이 아닙니다.

핸드폰에도 웹브라우저가 있고 세탁기, 냉장고, 자동차 등등 다양한 기기들에도 브라우저가 있을 수 있습니다.

이런 기기들은 PC 같이 풍부한 사양의 기기가 아니기 때문에

초 인공지능형 웹브라우저를 장착할 수 없습니다. 즉, 자동 오류 수정 같은 건 기대하기 어렵다는 뜻이지요.

오직 정확하고 올바른 문법에 의해 작성된 문서만이 올바르게 표현되는 것입니다.

 

아무튼 그건 그렇고.....

뭐, 문법이라고 해봤자 외우셔야 되는거 몇개 안됩니다.

너무 쉽습니다. 기냥 외우세여~~~

 

참, 시작하기 전에 잠깐 두가지 용어에 대해 정리를 하고 들가겠습니다.

1. Element (엘레멘트) :

우리가 지금까지 흔히들 HTML 태그라고 불러왔던 것들... <body>, <a>, <br> 뭐 이런것들 있잖슴까?

이것을 지금부터 Element 라고 부를 것입니다. 이것이 정식 명칭입니다.

 

2. Attribute (어트리뷰트) :

테이블에 border=1 이런식으로 테두리를 지정해 준다든가 width=300 이런식으로 가로 크기를 지정해 준다든가 하는거 잘 아시죠? 이처럼 Element 에 여러가지 다양한 옵션을 지정해 주게 되는데 이것을 Attribute(속성) 라고 부릅니다.

 

자, 그럼 이제 시작해 볼까요?

8가지 기본 문법 정리입니다. 하나 하나 자세히 읽어 보신 후 꼭 기억하세요.

 

 

 

 

1. <!DOCTYPE> 선언을 하자.

 

HTML 문서, 근데 우리는 XHTML 1.0 을 사용할꺼니까 걍 이제부터는 XHTML 이라고 부르도록 하죠.

XHTML 문서를 작성할 때 꼭 Doctype을 선언해 주어야 하며

다음과 같은 Doctype 선언 구문을 XHTML 문서 제일 상단에 위치 시키면 됩니다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 

근데 못보던게 하나 나왔져?

 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 

이것은 일반적인 <html> 대신 사용하시면 되는데

xmlns="http://www.w3.org/1999/xhtml" 란 기본 네임스페이스를 XHTML 의 네임스페이스로 설정한다는 뜻이구요,

lang="en" xml:lang="en" 이란 본 문서의 언어는 영어다.. 라고 표시하는 것입니다.

 

한글은 lang="ko" xml:lang="ko" 입니다. ko로 하면 영문, 한글 둘다 괜찮습니다.

(원래는 다른 언어가 나오면 span이나 div로 감싸서 별도의 언어 설정을 해주어야 합니다만

이러한 내용은 본 강좌의 범위 밖이라 생략합니다.)

 

걍 뭉퉁그려 외우셔서 웹페이지 만드실때마다 맨 위에 삽입하셔서 사용하세요.

 

 

 

2. 5가지 필수 Element 들을 빼먹지 말자.

 

<!DOCTYPE>, <html>, <head>, <title>, <body> 이 5가지 Element 들은 XHTML 페이지 안에 무조건 기본적으로 존재하여야 합니다.

하나라도 빠지면 잘못된 문서가 됩니다.

 

그럼 위의 Element 들로 기본 셋팅을 해볼까요?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

    <head>

        <title></title>

    </head>

    <body>

    </body>

</html>

 

자. 위의 모습이 XHTML1.0 Strict 모드의 기본 셋팅입니다.

사용하고 계시는 HTML 에디터의 기본 셋팅을 위처럼 해 놓고 사용하시면 편합니다.

최신 에디터들은 위의 셋팅을 기본적으로 가지고 있는 것들도 있습니다.

 

 

 

3. META 언어 설정을 꼭 하자!

 

중요한게 또하나 있습니다.

Meta 언어 설정이 바로 그것입니다. 이미 여러분들도 알고 있는 것이죠.

 

<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />

 

아까 <html> Element의 Attribute으로써 lang="ko" xml:lang="ko" 일케 언어 설정했는데 뭘 또하냐고 의하해 하실 분들도 있겠지만

lang="ko" xml:lang="ko" 이 설정은 문서 양식으로써의 언어 설정이구요

meta 언어 설정은 웹브라우저나 검색엔진 로봇과 같은 것을 위한 언어 설정이라고 생각하시면 이해가 빠르실 겁니다.

 

어째든 이 meta 언어설정을 절대 빠뜨리시면 안됩니다. 엄연한 규칙이고 문법입니다.

그럼 이 메타 언어설정을 포함한 기본 셋팅을 다시 함 보시져.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

    <head>

        <meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />

        <title></title>

    </head>

    <body>

    </body>

</html>

 

자. 됐습니다.

이제부터는 항상 위의 기본 셋팅을 가지고 웹페이지 문서를 제작하시기 바랍니다.

 

 

 

4. 문서 꾸미는 일은 전부 CSS에게 맡기자.

 

이제부터 HTML 페이지는 문서의 구조와 의미만을 나타내는데 사용하시기 바랍니다.

디자인 적인 모든 요소들은 CSS 로 모두 분리하여 작성하셔야 합니다.

무슨 얘기냐면요....

 

<font color="black">구지성 *오~!!!</font>

 

이런식으로 문서의 디자인 적인 요소들을 Element의 Attribute으로 사용하면 안된다는 뜻입니다.

그럼 어떻게 해야 하느냐....

다음과 같이 모두 스타일로 표현해야 합니다.

 

<span style="color:black;">구지성 *오~!!!</span>

 

왜 <span> Element를 사용했느냐는 여기서 중요하지 않습니다.

중요한 것은 style=:color:black;" 처럼 디자인과 관련된 요소를 Attribute가 아닌 스타일로 처리했다는 것입니다.

 

따라서 다음과 같은 방법도 더 이상 사용하지 않습니다.

 

<body bgcolor="white">

 

다음과 같이 사용하게 됩니다.

 

<body style="background-color:white;">

 

CSS는 DIV 레이아웃에 있어서 아주 중요하기 *문에

이와 관련하여 다음 시간에 좀 더 자세하게 다뤄 보도록 하겠습니다.

 

 

 

5. 모든 Attribute 이름은 꼭 소문자로 하자.

 

이건 디게 간단한 얘긴데요.

 

<table WIDTH="100%">

 

일케 하면 안되구요

 

<table width="100%">

 

일케 해야된다는 뜻입니다.

Attribute 는 무조건 다 소문자로만 표기하셔야 합니다.

 

 

 

6. 모든 Attribute의 값은 반드시 " 따옴표 안에 입력하자.

 

이것도 디게 간단한 얘긴데여.

 

<table width=100%>

 

일케 하면 안되구요.

 

<table width="100%">

 

일케 해야된다는 뜻입니다.

Attribute의 값은 무조건 " 따옴표 안에 집어 넣으셔야만 합니다.

 

 

 

7. 열었으면 꼭 닫자... 무엇을? Element 를...

 

문을 열었으면 닫아야지여.

< > 로 시작했으면 </ > 로 꼭! 닫아 주어야 합니다.

<body></body>, <div></div>, <span></span> 일케 말이죠...

 

<img>, <br>, <hr>, <input>, <meta> 등과 같이 닫힘이 없는 Element 들은 끝에 / 를 표시해서 닫아 주어야 합니다.

<img src="abcd.gif" />, <br /> 처럼 말이죠. 꼭 닫아 주어야 합니다.

 

간혹 <li> 를 </li> 없이 사용하시는 분들이 계신데 이것또한 꼭 닫아 주셔야만 합니다.

 

<li>서울

<li>경기

<li>부산

 

... 은 잘못 된거구여

 

<li>서울</li>

<li>경기</li>

<li>부산</li>

 

이게 올바른 것입니다.

 

 

 

7. Attribute 값을 절대로 생략하지 말자.

 

우리 이런거 많이 사용하고 있져...

 

<input checked>

<input readonly>

<option selected>

 

근데여.. 이거 잘못된거구요.

XHTML 에서는 생략된 Attribute 값을 " 따옴표안에 꼭 지정해 주셔야 합니다.

 

<input checked="checked" />

<input read"readonly" />

<option selected="selected" />

 

일케 말이죠...

마땅한 값이 없이 사용해왔던 Attribute 들은 그 자신이 Attribute 임과 동시에 스스로가 그 값이 된다고 생각하시면 편합니다.

중요한 것은 꼭 따옴표 안에 그 값을 지정해 주셔야만 한다는 것입니다.

 

다음을 참고하시면 도움이 되실 겁니다.

 

3201

 

 

 

8. name Attribute 대신 id Attribute 를 사용하자.

 

name Attribute 를 사용하는 Element들이 있습니다.

a, img, applet, frame, iframe, map 등이 바로 그것인데요.

XHTML에서는 name 대신 id Attribute를 사용하게 됩니다.

 

즉,

 

<img src="abcd.gif" name="picture" />

 

일케 하면 틀린 거구요.

 

<img src="abcd.gif" id="picture" />

 

일케해야 올바른 것입니다.

 

근데 한가지 예외가 있는데 바로 map Element 입니다.

문법대로라면

 

<map id="map1">

 

라고해야 맞는 것인데...

사실 실제로 작업을 해보시면 아시겠지만 저렇게 해놓으면 작동 안합니다. (브라우저에 따라 차이는 있습니다)

그렇다고 해서 그냥

 

<map name="map1">

 

라고 해놓으면 나중에 문법 검사 할때 오류 납니다.

아마도 XHTML 2.0 이상 버전(또는 CSS 3.0 이상 버전) 에서는

위 오류가 바로 잡힐것 같은데 (아마도 map Element를 대체할 뭔가가 나오겠지요... )

지금은 이도 저도 아닙니다.

그래서 꽁수를 사용하는데

그것은 두개의 Attribute 를 다 사용하는 것입니다.

 

<map name="map1" id="map1">

 

이렇게요.... ^^;;

어*뜬 중요한건 map을 제외하고서는 무조건 name 대신 id 를 사용한다는거.... 잊지 마세요.

 

 

 

 

부록: 문법 검사 방법

 

XHTML로 페이지를 작성한 후 올바르게 작성되었는지 문법 오류 검사를 하실 수 있는 방법이 있습니다.

 

http://validator.w3.org/

 

위의 주소로 가셔서 본인이 작성하신 XHTML 페이지의 URL을 입력하시거나

.html 파일을 업로드 하셔서 문법 오류 검사를 하실 수 있습니다.

어쩔때는 오류가 디게 많이 나와서 헉! 하고 놀랄 때도 있지만

사실 몇가지만 수정하면 오류수가 쭉쭉 줄어드는 경우가 대부분입니다.

함 사용해 보세요~~ 물론 꽁짜입니다.

 

 

 

===========================================================================================================

 

 

다음 시간에는 CSS 스타일에 대해 실전에 대비하여 쫘~악 *어 보도록 하겠습니다.

오늘 강좌 내용만큼이나 아주 중요합니다.

그럼 담에 또......... 꾸뻑~

 

 

출처 - http://blog.naver.com/wdig    

 

######################################################

#####     작성자: 간츠 gantz2010@hotmail.com                     #####
#####     블로그: http://blog.naver.com/wdig                      #####
#####     기   타: 퍼 가실때는 출처를, 질문은 이메일로...       #####

#####################################################









웹표준, div, 레이아웃, 강좌
댓글 5 | 엮인글 0

DIV 레이아웃 [4-1] : CSS 기초 개념 잡기
DIV 레이아웃 [3-1] : HTML..... 표준과 비표준에 대하여...





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E