HTML 코딩 다시 확인하기
이전 장에서 작업했던 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">
è 여기를 보시면 헤더 부분에 DOC Type 을 정의해 준 것을 볼 수 있습니다. XHTML 1.0 Transitional 버전으로 작업하는 것을 볼 수 있습니다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
è 캐릭터세트는 UTF-8 형식으로 했습니다. 한국에서 보통 사용사 euc-kr 을 많이 사용하기도 합니다만, utf-8은 유니코드의 형식이기 때문에 어떤 언어로 된 운영체제를 사용하더라도 한글이 제대로 표현됩니다.
euc-kr 인 경우에는 유니코드가 아니라 8비트 문자 인코딩으로 한글 완성형 인코딩입니다. 경우에 따라 외국에서 접속했을 경우 한글이 전부 깨져 보이게 됩니다. 그래서 이 캐릭터 세트의 정의가 상당히 중요합니다. 물론 utf-8을 사용할때는 DB 에도 utf-8 형식으로 지정을 해줘야 합니다. Euc-kr 인 경우도 마찬가지입니다.
<title>초보자를 위한 예제사이트</title>
è 타이틀을 지정해 줬습니다. 브라우저 상단에 이 타이틀이 보이게 되는 것입니다.
</head>
<body>
<div id="header>
è 헤더를 정의해 준 곳입니다. Id 값으로 header 라고 정의를 해줬고, 향후 CSS 작업을 할 때 di로 정의를 해준 부분은 반드시 #header 라고 # 이라는 문자가 있어야 합니다.
<div class="logo"><img src="imgs/logo.png" width="174" height="33" alt="TUVULA 로고" /></div>
<div class="main_menu">
<ul>
<li><img src="imgs/menu1.gif" width="51" height="13" alt="회사소개" /></li>
<li><img src="imgs/menu2.gif" width="52" height="13" alt="제품소개" /></li>
<li><img src="imgs/menu3.gif" width="51" height="13" alt="고객센터" /></li>
<li><img src="imgs/menu4.gif" width="52" height="13" alt="공지사항" /></li>
</ul>
</div>
</div>
è 여기까지 헤더를 정의해 준 부분입니다. 로고와 메인메뉴를 정의해 주고 각각의 이미지를 삽입했습니다. 헤더의 백그라운드 이미지는 CSS 에서 정의를 해 줍니다.
<div id="submenu">
<h2> 회사소개</h2>
<ul>
<lI> 인사말</li>
<li> 회사연혁</li>
<li> 찾아오시는길</li>
</ul>
</div>
è 여기까지가 화면의 좌측에 나타나는 서브메뉴가 있는 곳입니다.
<div id="contents">
<h1> Company Information</h1>
<div class="top_nav">회사소개 > 회사연혁</div>
<h3> 회사연력 / History </h3>
<dl>
<dt> 2010 </dt>
<dd> 8. 캐논제품 공식 수리 센터 인증 </dd>
<dd> 7. 니콘 코리아 공식 수리 센터 인증</dd>
<dd> 3. 트랜샌드 제품 공식 딜러 인증 </dd>
</dl>
<dl>
<dt> 2009 </dt>
<dd>12. 삼성 카메라 공식 딜러 인증 </dd>
<dd> 11. 세기상사 공식딜러 인증</dd>
<dd>10. 펜탁스 한국내 공식 딜러 인증 </dd>
<dl>5. 매출 10억 달성 </dl>
</dl>
<dl>
<dt> 2008 </dt>
<dd> 8. 캐논제품 공식 수리 센터 인증 </dd>
<dd> 7. 니콘 코리아 공식 수리 센터 인증</dd>
<dd> 3. 트랜샌드 제품 공식 딜러 인증 </dd>
<dd>12. 삼성 카메라 공식 딜러 인증 </dd>
<dd> 11. 세기상사 공식딜러 인증</dd>
<dd>10. 펜탁스 한국내 공식 딜러 인증 </dd>
<dd>5. 매출 10억 달성 </dd>
</dl>
</div>
è 여기는 메인 콘텐츠가 들어가는 부분입니다. Id 값이 contents 로 되어 있는 것을 확인 할 수 있습니다. 여기서 특이하게 봐야 하는 부분이 <dd> <dt> <dl> 태그입니다. 이 부분에 대해서는 CSS 코딩하기에 들어가서 자세하기 사용법을 알려 드리도록 하겠습니다.
<div id="footer"> All Contents Copyright TUVULA Inc. All right reserved. </div>
è 마지막 부분인 footer 입니다. 화면 하단에 들어가는 부분인데, 아주 간단하게 처리되어 있는 것을 보실 수 있습니다.
</body>
</html>
è HTML 태그를 닫아 줌으로써 이 페이지의 코딩이 끝났다는 것을 알려주고 있습니다.
'웹 & IT > 웹표준 HTML, CSS & PHOTOSHOP' 카테고리의 다른 글
| CSS 박스 모델 이해하기 (10) | 2010.12.07 |
|---|---|
| 4. CSS 코딩하기 (0) | 2010.12.07 |
| 오늘의 강좌 | Save for web 옵션 알아보기 (0) | 2010.12.01 |
| 3. 포토샵 파일을 잘라내자 (0) | 2010.11.30 |
| HTML 코딩 완성하기 (0) | 2010.11.30 |