웹표준과 접근성 7일차.
<!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