일단 1번 구조를 다시 한번 보도록 하겠습니다.
상단에 헤더가 위치해 있고, 왼쪽으로 서브메뉴, 오른쪽으로는 메인 콘텐츠 그리고 아래쪽으로는 푸터가 위치해 있습니다.
웹 표준을 적용하지 않을 경우에는 이 사이트 구조를 전부 테이블 태그를 이용해서 작업을 했습니다. 상당히 코드 량이 많아지고, 테이블 태그를 많이 사용하다 보니, 어떨때는 테이블 태그내에서 중복되거나 생략된 태그로 인해 사이트 구조가 무너져서 버그가 생기고, 그 버그를 잡기 위해 정말 눈 빠지게 코딩 작업을 했었습니다.
하지만 웹 표준을 적용하게 되면 간단하게 사이트 구조를 정리해 줄 수 있습니다.
<div id=”header></div> : 헤더부분
<div id=”submenu”></div> : 왼쪽서브메뉴 부분
<div id=”contents”></div> : 메인 콘텐츠 부분
<div id=”footer”></div> : 푸터 부분
이렇게 HTML 에선 4개의 영역을 표시해 주는 역할만 하고 CSS 에서 각각의 값에 대한 정의를 해 주면 1번 구조와 같은 사이트가 나오게 됩니다.
전체적으로 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>
<div id=”submenu”></div>
<div id=”contents”></div>
<div id=”footer”></div>
</body>
</html>
위의 소스 코드를 보시면 알겠지만, 아주 간단하게 이루어져 있습니다.
근데 이렇게 간단한 소스 코드가 어떻게 1번 구조와 같이 변할 수 있을까요?
그 답은 CSS 에 있습니다. CSS 에서 id로 지정된 부분에 대해서 값을 지정해주는 것만으로 1번 구조와 같은 사이트를 만들 수 있습니다.
이제부터는 1번 구조와 같은 방식의 사이트를 직접 디자인하고 HTML 코딩을 해 보도록 하겠습니다.
이런 사이트의 구조를 가장 흔하게 접하는 사이트이며, 아래와 같이 가상의 사이트를 만들어서 살펴보도록 하겠습니다.
위의 사이트를 보면 1번의 구조와 같은 구조를 가진 사이트 입니다.
물론 이 사이트는 가사의 사이트 입니다.
그럼 이 사이트를 위와 1번 구조와 같이 나누면 어떻게 될까요?
상단 헤더는 아래와 같이 나눌 수 있습니다.
왼쪽 서브메뉴와 메인 콘텐츠 부분은 아래와 같이 나눌 수 있겠지요.
나머지 푸터는 아래와 같습니다.
자 여기서 헤더 부분을 #header라 하고 서브 메뉴 부분은 #submenu 콘텐츠 부분은 #contents 푸터 부분은 #footer 라고 정의를 합니다.
헤더 부분을 살펴보겠습니다.
헤더에는 회사 로고와 메인 메뉴들이 있습니다.
이 부분을 HTML을 이용해서 코딩하도록 하겠습니다.
헤더 부분에 대한 HTML코딩은 아래와 같습니다.
<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>
아주 간단하게 처리 되었습니다.
HTML 코딩만 한 결과물은 다음과 같습니다.
디자인과 HTML 구문 사이에는 많은 차이점이 발견됩니다.
이 책에서도 언급했지만, 웹표준은 구조와 디자인을 분리시키는 것부터 시작됩니다.
즉 HTML은 사이트의 구조만 잡아주고 CSS는 디자인을 입히는 것이라고 보시면 됩니다. 화면상에서 보이는 디자인은 향후 CSS에서 어떻게 디자인 되는지 다시 한번 살펴 보도록 하겠습니다. CSS 마법이 펼쳐집니다.
이어서 왼쪽 사이드 메뉴 HTML 코딩을 해보겠습니다.
<div id="submenu">
<h2> 회사소개</h2>
<ul>
<lI> 인사말</li>
<li> 회사연혁</li>
<li> 찾아오시는길</li>
</ul>
</div>
사이드 메뉴의 HTML은 더 간단합니다.
위의 코드만으로도 디자인이 완벽하게 됩니다.
HTML 만으로 된 사이드 메뉴는 다음과 같습니다.
이제 콘텐츠 부분에 대한 코딩을 하도록 하겠습니다.
<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>
코딩 결과물입니다.
이제 마지막으로 footer 부분 코딩입니다.
<div id="footer"> All Contents Copyright TUVULA Inc. All right reserved. </div>
Footer 부분이 제일 간단하네요
'웹 & IT > 웹표준 HTML, CSS & PHOTOSHOP' 카테고리의 다른 글
| 3. 포토샵 파일을 잘라내자 (0) | 2010.11.30 |
|---|---|
| HTML 코딩 완성하기 (0) | 2010.11.30 |
| 사이트 기본 구조 잡기 (0) | 2010.11.29 |
| HTML 코딩하기 (0) | 2010.11.29 |
| HTML 과 CSS 웹 표준 알아보기 2 (2) | 2010.11.29 |