웹표준 CSS 실습 #2
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>YM</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="skipNav">
<a href="#contents">본문 바로가기</a>
</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="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li class="current"><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<hr class="hidden">
<div id="contents">
<h1>portfolio</h1>
<div class="portfolio">
<ul>
<li>
<div class="thumb">
<img src="img/Chrysanthemum.jpg" width="235" height="156" alt="이름 모를 꽃" />
</div>
<p class="date">2012.3.</p>
</li>
<li>
<div class="thumb">
<img src="img/Desert.jpg" width="235" height="156" alt="사막" />
</div>
<p class="date">2012.5.</p>
</li>
<li>
<div class="thumb">
<img src="img/food3.jpg" width="235" height="156" alt="스테이크" />
</div>
<p class="date">2012.5.</p>
</li>
<li>
<div class="thumb">
<img src="img/j1.jpg" width="235" height="156" alt="보석 목걸이" />
</div>
<p class="date">2013.1.</p>
</li>
<li>
<div class="thumb">
<img src="img/pizza.jpg" width="235" height="156" alt="피자" />
</div>
<p class="date">2013.1.</p>
</li>
<li>
<div class="thumb">
<img src="img/food1.jpg" width="235" height="156" alt="전채 요리" />
</div>
<p class="date">2013.3.</p>
</li>
<li>
<div class="thumb">
<img src="img/Lighthouse.jpg" width="235" height="156" alt="고성" />
</div>
<p class="date">2013.7.</p>
</li>
</ul>
</div>
</div> <!-- end of contents -->
<hr class="hidden" />
<address id="footer">
Copyright © 2013 YM. All rights reserved <br />
(02)000-0000 팩스(02)000-1111
</address>
</div> <!-- end of wrap -->
</body>
</html>
@charset "utf-8";
@font-face {
font-family: 'Nanum Gothic';
src: url('../font/nanum.ttf') ;
}
@font-face {
font-family: 'Yanone';
src: url('../font/Yanone.woff') ;
}
html, body {
width: 100%; height: 100%;
}
body, div, p, ul, ol, li, h1, h2, h3, h4 {
padding: 0; margin: 0;
}
ol, ul, li {
list-style: none;
}
img {
border: none;
}
body {
font-family: 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #676767;
border-top: 7px solid #7CC0CB;
}
.hidden {
display: none;
}
.noVisible {
visibility: hidden;
position: absolute;
font-size: 0;
width: 0;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
background: none;
}
#skipNav a {
display:block; height:1px; width:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0;
}
#skipNav a:hover, #skipNav a:active, #skipNav a:focus {
width:100%; height:auto; margin:0; padding:5px;
font-size:12px; line-height:1; text-decoration:none; text-align: center;
}
#wrap {
width: 960px;
margin: 0 auto;
}
#header {
width: 100%;
padding: 30px 0;
}
#logo, #logo a {
float: left;
}
#menu {
z-index: 999;
float: right;
margin: 23px 0 0 0;
}
#menu li {
display: inline;
margin: 0 0 0 20px;
}
#menu li a {
font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
font-size: 24px;
color: #999;
text-decoration: none;
text-transform: uppercase;
}
#header:after {
display: block;
content: "";
clear: both;
}
#campaign {
position: relative;
}
#campaign .caption {
z-index: 500;
position: absolute;
bottom: 72px;
left: 0;
padding: 20px;
background: #7CC0CB;
background: rgba(124,192,203,0.7);
color: #FFF;
font-size: 22px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}
#campaign img {
display: block;
}
#footer {
padding: 20px 0 15px;
margin-top: 70px;
background-color: #7CC0CB;
font-size: 0.9em;
text-align: center;
font-style: normal;
color: #fff;
clear: both;
}
#contents:after {
display: block;
content: "";
clear: both;
}
/* 메뉴에 현재 문서 표시 */
/* 타이틀 */
#contents h1 {
font-family: 'Yanone', 'Nanum Gothic', '맑은 고딕', Helvetica, Arial, sans-serif;
}
/* portfolio li 레이아웃 잡기 */
.portfolio ul{margin-left:-6px;}
.portfolio ul li {float:left;width:235px;height:210px;margin: 0 0 6px 6px;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
background:#ccc;
-moz-box-shadow:2px 2px 4px #888;-webkit-box-shadow:2px 2px 4px #888;box-shadow:2px 2px 4px #888;
}
.portfolio ul li img{border-top-left-radius:10px;border-top-right-radius:10px;}
.portfolio ul li p{text-align:center;padding:15px 0;}
'웹접근성과 웹표준' 카테고리의 다른 글
| CSS 하위브라우저 대응기법 (0) | 2013.08.20 |
|---|---|
| 웹표준 사이트 실습 예제 #4 CONTACT 화면 (0) | 2013.08.19 |
| 웹표준 사이트 실습 예제 #2 ABOUT 화면 (0) | 2013.08.19 |
| CSS3: 텍스트/박스에 그림자 효과, 박스 테두리 라운드 효과 (0) | 2013.08.18 |
| 네이버 널리에서 제공하는 웹 접근성 체크 (0) | 2013.08.17 |
