제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

웹 & IT/웹표준 HTML, CSS & PHOTOSHOP

HTML 코딩 다시 확인하기

유지아빠 2010. 12. 1. 10:32

 

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 태그를 닫아 줌으로써 이 페이지의 코딩이 끝났다는 것을 알려주고 있습니다.