웹표준 사이트 실습 예제
<!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>YM</title>
<style type="text/css">
html, body {width: 100%; height: 100%;}
body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,span{marin:0;padding:0;}
img{border:0 none;}
body,div,p,h1,h2,h3,h4,h5,h6{font-size:13px;line-height:1.2em;}
ul,ol,li{list-style:none;}
/* 화면에서 보이지 않게 할 것 */
.hidden{display:none;}
/* skip navigation */
div#skipNav a:link, div#skipNav a:visited{display:block;width:1px;height:1px;font-size:0;line-height:0;margin:0 -1px -1px 0;overflow:hidden;}/*블럭요소로 만든 뒤 작게 만들어 보이지 않게,박스넘는 영역은 안보이게*/
div#skipNav a:hover,div#skipNav a:active,div#skipNav a:focus{width:100%;height: auto;margin:0;padding:5px;font-size:13px;line-height:1;text-decoration:none;text-align:center;color:#333;}/*위에서 보이지 않게 했던 것을 원상복구.탭키 누르면 뜸(focus)*/
.noVisible{visibility:hidden;position:absolute;width:0;height:0;line-height:0;margin:0;padding:0;font-size:0;background-color:none;}/*있지만 보이지 않게, 자리를 차지하지 않게*/
/* 레이아웃 */
body{text-align:center;/* ie하위버전에서 가운데에 오게 */
border-top:7px solid #7cc0cb;/*t상단에 줄 하나 넣음 */
}
#wrap{width:960px ;margin: 0 auto;text-align:left; }/* 가운데에 오게,위의 ie하위버전 태그를 원상복구 */
#footer{padding:20px 0 15px;margin-top:40px;text-align:center;color:#fff;background:#7cc0cb;font-style:normal;}
#header{padding:30px 0;}
#header:after{content:"";display:block;clear:both;}
#logo{float:left;}
#menu{float:right;}
#menu li{display:inline;margin:0 0 0 10px;}/ * float:left 대신 inline 요소로 바꿔저서 배치해봄 */
.caption{position:absolute;display:block;background:#7cc0cb;}
</style>
</head>
<body>
<div id="skipNav">
<a href="#contents">본문 바로가기</a> // tab키를 누르면 나타나는 스킵 네비게이션
</div>
<hr class="hidden" />
<div id="wrap">
<div id="header">
<h1 id="logo"><img src="img/ym.gif" width="145" height="48" alt="YM LOGO" /></h1>
<h2 class="noVisible">메인메뉴</h2>
<ul id="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="contents">
<div id="campaign">
<img src="img/penguins.jpg" width="960" height="400" alt="" />
<p class="caption">새로운 기술을 학습합니다.</p>
</div>
</div>
<hr class="hidden" />
<address id="footer">
Copyright © 2013 YM. All rights reserved <br />
(02)000-0000 팩스(02)000-1111
</address>
</div>
</body>
</html>
'웹접근성과 웹표준' 카테고리의 다른 글
| 웹 접근성 검사도구 (0) | 2013.08.17 |
|---|---|
| CSS3 프로퍼티: opacity, transform, transition (0) | 2013.08.12 |
| APMSETUP7: 내 컴퓨터를 웹서버로 만들기 (0) | 2013.08.11 |
| 모바일 뷰포트(viewport) (0) | 2013.08.11 |
| 타이포그래피 프로퍼티 (0) | 2013.08.10 |
