CSS


게시글 'css + xhtml 로 홈페이지 만들기 - xhtml 기본 세팅'에 대한 정보
css + xhtml 로 홈페이지 만들기 - xhtml 기본 세팅
등록일 2009-09-13 조회 3,698
xhtml문서를 작성하기 전에 기본적으로 꼭 들어가야 할 요소들을 살펴보도록 합시다. xhtml은 대소문자를 구분하며, 열어준 태그는 반드시 닫아야 합니다.되도록 소문자로 작성하는 것을 장려합니다.

index.html

<!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" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta name="description" content="바이러핵" />
<meta name="keyword" content="바이러핵, 웹표준" />
<title>virhac.com</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>



</body>
</html>


1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD 선언을 해줍니다. DTD는 Document Type Definition 의 약자로서 문서형식을 정의해주는 것입니다. DTD가 없으면 각 브라우저는 자신들만의 방식으로 코드를 해석하기 때문에 같은 내용이라도 브라우저별로 다르게 보일 수 있습니다. 여기서는 일반적으로 많이 쓰이는 XHTML 1.0 호환모드인 XHTML 1.0 Transitional 로 정의했습니다. 다른 DTD는 XHTML 1.0 엄격모드 , HTML 4.01 호환모드, HTML 4.01 엄격모드 등이 있습니다만 잘 사용하지 않으므로 자세한 설명은 검색해보시면 나옵니다; 이왕 할꺼 [XHTML 1.0 엄격모드]로 하지!! 라는 분들도 계십니다만;; 제약사항이 좀 있는관계로.....;;;

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

html 처음부분이죠! 문서의 시작을 나타냅니다. xmlns="http://www.w3.org/1999/xhtml"는 본 문서가 xhtml로 작성되었음을 나타내는 것입니다. 일반 html문서는 <html>로 시작되지만 xhtml문서는 <html xmlns="http://www.w3.org/1999/xhtml">로 시작합니다.
lang="ko", xml:lang="ko" 각각 한국어를 사용할거라고 알려줍니다.

3.<head></head>

웹 페이지의 내용을 보여주기 전에 head 태그를 먼저 해석하기 때문에 head안에 들어가는 내용은 최소화 할수록 좋습니다. 꼭 필요한 정보들만 기입하도록 합시다.
<meta> , <title> , <link> , <script> 와 같은 태그들이 들어갑니다.

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

본 문서에서 사용할 문자셋을 지정해 줍니다. 우리는 ecu-kr을 사용할 것이므로content="text/html; charset=euc-kr" 이렇게 지정해 주었습니다.

5.<meta name="description" content="바이러핵 사이트입니다." />

본 문서의 간략한 설명을 적어줍니다. 또한 메타태그의 문자는 가급적 200자를 넘기지 않도록 하는것이 좋습니다.

6.<meta name="keyword" content="바이러핵 스타일시트 웹표준" />

검색엔진 로봇은 컴마(,)를 무시하므로 키워드를 구분할 때는 한칸을 띄워주면 됩니다.

7.<title>virhac.com</title>

본 문서의 제목을 써줍니다.

8.<link href="css/default.css" rel="stylesheet" type="text/css" />

스타일 시트를 가져옵니다. 03편에서 미리 만들어둔 default.css 파일을 css폴더안에 넣고 연결시켰습니다.

9.<body></body>

<body> 와 </body> 사이에 본문 내용이 들어가면 되겠죠 ^-^?