홈페이지 제작시 xhtml 기본 구조 세팅

프로그래밍/CSS2015. 8. 26. 19:30

아래의 소스가 기본적인 xhtml의 구조가 되는데 유의 할점은 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" lang="ko" xml:lang="ko">

<head>

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

<meta name="description" content="15it" />

<meta name="keyword" content="15it, 웹표준" />

<title>yeonshoes.blogspot.com</title>

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

</head>

<body>

</body>

</html>

각 부분을 설명하자면

<!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 선언을 안하게 되면 각 브라우저마다 다른 형식의 코드해석으로 인해 같은 내용도 브라우저에 따라 다른 내용이 나타나게 됩니다.

그리고 XTHML의 호환모드중 하나인 XHTML 1.0 Transitional를 사용한 부분입니다 ( 다른 모드도 많지만 가장 많이 사용되는 1.0 호환모드의 소스입니다)

유의할 점이라면 반드시 HTML문서의 첫줄에 위치해야하며 문서형 선언의 위에는 공백을 포함 어떠한 요소도 넣으면 안됩니다.

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

이 부분은 xhtml로 문서가 작성된 것을 나타내는 부분으로 lang="ko", xml:lang="ko" 즉, 한국어로 사용이 된다는 부분을 알려주는 부분입니다

head 태그 같은 경우는 많이들아시는데 주로 <meta>,<title>,<link>,<script>와 같은 태그가 들어가며 가능하면 head 태그안의 내용은 최소화 하는것이 좋습니다. ( head 태그를 가장 먼저 해석하기 때문입니다.)

description 같은 경우 본 문서의 간단한 설명을 하는 부분이며 keyword 같은 경우 검색엔진의 키워드를 넣는 부분입니다 여기서 주의할점은 검색엔진 로봇은 컴마(,)를 무시하기 때문에 키워드를 구별할시에 한칸을 띄워주면 됩니다

문서의 제목을 쓰는 부분입니다

스타일시트 CSS를 가져오는 부분입니다

본문의 내용이 들어가는 부분입니다

저작자표시 비영리 변경금지

'프로그래밍 > CSS' 카테고리의 다른 글

div의 테두리를 결정하는 border 속성의 명령어 (0)	2015.08.28
텍스트 영문 대/소문자를 text-transform를 이용해 변경하는 방법 (0)	2015.08.27
가운데 정렬을 시키는 margin: 0 auto; 명령어가 적용이 안될때 확인해야하는 부분 (2)	2015.08.27
텍스트에 그림자 효과를 주는 text-shadow 명령어 (0)	2015.08.27
display:none; 과 visibility:hidden; 의 간단한 차이점 (0)	2015.08.26