<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="웹 퍼블리셔를 위한 웹 표준 사이트 제작 수업입니다.">
<meta name="keywords" content="웹표준, 웹표준사이트, 웹접근성, webstoryboy">
<title>Webstandard</title>
<!-- style -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- webfont -->
<link href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container">
<div class="quick">
<a href="#">Designer Cafe 디자이너 카페</a>
<a href="#">Publisher Cafe 퍼블리셔 카페</a>
</div>
<div class="title">
<p>Can See the Futrue, Only Dream</p>
<h1><a href="#">Webstoryboy.co.kr</a></h1>
</div>
<div class="icon">
<ul>
<li class="icon-tit1"><a href="#"><span class="ir">icon1</span></a></li>
<li class="icon-tit2"><a href="#"><span class="ir">icon2</span></a></li>
<li class="icon-tit3"><a href="#"><span class="ir">icon3</span></a></li>
<li class="icon-tit4"><a href="#"><span class="ir">icon4</span></a></li>
</ul>
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont-nav">
<div class="container">cont-nav</div>
</div>
<!-- //cont-nav -->
<div id="cont-tit">
<div class="container">cont-tit</div>
</div>
<!-- //cont-tit -->
<div id="cont-ban">
<div class="container">cont-ban</div>
</div>
<!-- //cont-ban -->
<div id="cont-cont">
<div class="container">cont-cont</div>
</div>
<!-- //cont-cont -->
</div>
<!-- //contents -->
<div id="footer">
<div class="container">footer</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
/* layout */
#wrap {width: 100%; }
#header {width: 100%; height: 327px;
/*background-image: url(../img/header_bg.jpg);
background-repeat: repeat-x;
background-position: center top;*/
background: url(../img/header_bg.jpg) repeat-x center top;
}
#contents {width: 100%; height: 400px; background-color: #888;}
#footer {width: 100%; height: 200px; background-color: #777;}
/* container */
.container {position: relative; width: 990px; background-color: rgba(255,255,255,0.4); margin:0 auto;}
/* contents layout */
#cont-nav {width: 100%; height: 100px; background-color: #666; }
#cont-tit {width: 100%; height: 100px; background-color: #555; }
#cont-ban {width: 100%; height: 100px; background-color: #333; }
#cont-cont {width: 100%; height: 100px; background-color: #222; }
/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 5px 0 0 10px; display: inline-block;}
.quick a:hover {color: #ccc;}
/* title - inline
.title {text-align: center;}
.title p {background-color: #2698cb; font-size: 28px; display: inline-block; color: #fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;}
.title h1 a {background-color: #4aa8d4; font-size: 18px; color: #fff; text-transform: capitalize; padding: 5px 15px; display: inline-block; }
*/
/* title - position */
.title h1 {position: absolute; left:390px; top: 150px; }
.title h1 a {background-color: #4aa8d4; font-size: 18px; color: #fff; text-transform: capitalize; padding: 5px 15px; display: block; }
.title p {background-color: #2698cb; font-size: 28px; color: #fff; padding: 5px 15px; text-transform: uppercase; position: absolute; left:230px; top:100px; }
/* icon */
.icon {position: absolute; left: 360px; top: 220px; }
.icon ul {overflow: hidden;}
.icon li {float: left;}
.icon li a {width: 57px; height: 57px; display: block; margin: 0 3px; background-image: url(../img/icon.png); }
.icon li.icon-tit1 a { }
.icon li.icon-tit2 a {background-position: 0 -120px; }
.icon li.icon-tit3 a {background-position: 0 -240px; }
.icon li.icon-tit4 a {background-position: 0 -360px; }
.icon li.icon-tit1 a:hover {background-position: 0 -60px; }
.icon li.icon-tit2 a:hover {background-position: 0 -180px; }
.icon li.icon-tit3 a:hover {background-position: 0 -300px; }
.icon li.icon-tit4 a:hover {background-position: 0 -420px; }
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, form, input,legend, textarea, select, fieldset, p, button {margin: 0; padding: 0;}
/* 링크 초기화 */
a {color: #273743; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: "나눔 고딕", "Nanum Gothic", "돋움", Dotum, sans-serif; font-size: 12px; line-height: 1.7; }
/* 제목 스타일 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 12px; font-weight: normal;}
/* 블릿기호 초기화 */
li, ol, ul {list-style: none;}
/* ir 효과 */
.ir {width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top: 0;}
728x90
