이제 전체적인 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>초보자를 위한 예제사이트</title>
</head>
<body>
<div id="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>
<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>
<div id="footer"> All Contents Copyright TUVULA Inc. All right reserved. </div>
</body>
</html>
전제 HTML 소스코드입니다. 이 소스코드에 의한 화면은 이렇게 나옵니다.
단순하게 HTML으로만 전체적인 사이트의 구조를 완성했습니다.
여기서 보시면 점선으로 표시된 곳은 “div” 로 이루어진 곳입니다. 일종의 블록이라고 보셔도 무방합니다.
여기서 화면상에서 보시면 순서대로 header 부분, submenu 부분, contents부분과 footer 부분은 id로 묶여 있는 것을 알 수 있으며, header 부분에 main_menu 부분은 class 로 묶여 있는 것을 볼 수 있습니다.
여기서 id 와 class 의 차이점을 간단하게 살펴보겠습니다.
Id와 class 는 선택자라고 합니다.
선택자는 여러가지 종류가 있습니다.
Type , class, id, 복수, 자손(descendant), 자식(child), 속성(attribute) 등이 있으나, 다른 선택자는 좀 더 복잡한 사이트를 만들 때 필요하고, 여기서는 필요하지 않기 때문에, 여기서는 id와 class 에 대한 내용만 확인해 보겠습니다.
“id”와 “class” 는 사용법에 있어서 동일합니다.
즉 문서의 양식을 표현할 때는 id를 사용하나 class를 이용하나 똑 같은 기능을 합니다.
하지만 DOM script 사용시에는 “id” 만 사용 가능합니다.
DOM script을 이용하여 문서를 제어하거나 함수를 정의해 주는 역할은 “id”를 통해서만 가능합니다.
결론적으로 문서의 큰 구조를 나눌 때 “id”를 이용하고, “class”는 문서 내에서 반복되는 구문을 사용할 때 사용하면 편리합니다.
'웹 & IT > 웹표준 HTML, CSS & PHOTOSHOP' 카테고리의 다른 글
| 오늘의 강좌 | Save for web 옵션 알아보기 (0) | 2010.12.01 |
|---|---|
| 3. 포토샵 파일을 잘라내자 (0) | 2010.11.30 |
| 세부 HTML코딩 (2) | 2010.11.30 |
| 사이트 기본 구조 잡기 (0) | 2010.11.29 |
| HTML 코딩하기 (0) | 2010.11.29 |