관리 메뉴

IAress

웹표준과 접근성 7일차. 본문

카테고리 없음

웹표준과 접근성 7일차.

IAress 2012. 10. 22. 22:16
반응형

<!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" xml:lang="ko" lang="ko">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
    /* reset */

    h1, h2, p, div, { 
        margin: 0px;
        padding: 0px;
    }

    body{
        font-family: "돋움",dotum, arial;
        font-size: 12px;
        font-weight: normal;
    }

    /* 디자인에 필요없는 요소 감추기 */
    {
        display: /* show, block, inline */
    }


   

    #mainTitle { display: none; }
   
    /* GNB */
    #gnb {

        width: 800px;  /* width: 100%;*/
        margin: auto;
        position: relative;
       
    }


    #m1, #m2, #m3, #m4, #m5 {

        background: #3399ff;
        width: 160px; /* width: 20% */
        float: left; /* left:160px->left: 20% */
        font-size: 0.8em; /* 80% */
        text-align: center;
        color: #fff;
        /*height: 30px;*/
        /*padding: 10px 0;*/
        line-height: 30px;
    }

   

    #s1,  #s2, #s3, #s4, #s5 {

        position: absolute;
        top: 100px; 
       
       
    }

    .clear { clear:both }
  </style>
 </head>
 <body>

<div id="main">
 <div id="header">
    <div id="logo">
        <h1 id="mainTitle">삼성전자</h1>
    </div>

    <div id="gnb">

        <div id="m1"><h2>제품정보</h2></div>
        <div id="s1">
        <ul>
            <li>휴대폰</li>
            <li>TV/AV</li>
            <li>IT</li>
            <li>IT모바일</li>
        </ul>
        </div>


        <div id="m2"><h2>비즈니스</h2></div>
        <div id="s2">
        <ul>
            <li>사업소개</li>
            <li>비전안내</li>
            <li>제휴문의</li>
        </ul>
        </div>


        <div id="m3"><h2>고객지원</h2></div>
        <div id="s3">
        <ul>
            <li>메뉴얼 다운로드</li>
            <li>제품보증기간</li>
            <li>매장 찾기</li>
        </ul>
        </div>


        <div id="m4"><h2>제품리뷰</h2></div>
        <div id="s4">
        <ul>
            <li>생활가전</li>
            <li>IT/모바일</li>
            <li>컴퓨터/노트북</li>
        </ul>
        </div>


        <div id="m5"><h2>삼성Apps</h2></div>
        <div id="s5">
        <ul>
            <li>Apps 특징</li>
            <li>Apps 소개</li>
            <li>다운로드</li>
        </ul>
        <div class="clear"></div>
        </div>
    </div>
</div>
</div>


<br />
<br />
<br />
<br />
 </body>
</html>

week7.html


반응형
Comments