<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="webstoryboy">
<meta name="description" content="반응형 웹 페이지 제작 샘플입니다.">
<meta name="keywords" content="반응형 사이트, 교육사이트">
<title>Responsive Site</title>
<!-- favicon & icon -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/icon_57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/icon_114.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/ico/icon_144.png">
<!-- style -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- webfont -->
<link href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' rel='stylesheet' type='text/css'>
<!-- html5 Support -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<![endif]-->
<!-- ie Version Checker -->
<script src="assets/js/ie-checker.js"></script>
<!-- jQuery -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<!--[if lte IE 8]>
<p style="font-size: 12px; color: #fff; background: #2885b0; padding:5px 0; margin: 0; text-align: center">사용하고 계신 브라우저는 최신 웹 브라우저가 아닙니다. 업그레이드를 하거나 다른 최신 브라우저 사용을 권장합니다.
<a style="color:#f57c00;" href="http://www.microsoft.com/korea/ie" target="_blank" >익스플로러,</a>
<a style="color:#f57c00;" href="http://www.mozilla.or.kr/ko/" target="_blank">파이어폭스,</a>
<a style="color:#f57c00;" href="http://kr.opera.com/download/" target="_blank">오페라,</a>
<a style="color:#f57c00;" href="http://support.apple.com/kb/DL1531?viewlocale=ko_KR&locale=ko_KR" target="_blank">사파리,</a>
<a style="color:#f57c00;" href="http://www.google.com/chrome?hl=ko" target="_blank">크롬</a></p>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<div class="quick">
<a href="#">Design Cafe</a>
<a href="#">Publisher Cafe</a>
</div>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Outliner</title>
</head>
<body>
<header>
<h1>반응형 사이트 타이틀</h1>
</header>
<nav>
<h2>반응형 사이트 전체메뉴</h2>
</nav>
<article>
<h2>반응형 사이트 서브 타이틀</h2>
</article>
<main>
<section>
<h2>반응형 사이트 컨텐츠</h2>
<section>
<h3>반응형 사이트 왼쪽 컨텐츠</h3>
<article><h4>반응형 사이트 왼쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 왼쪽 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 가운데 컨텐츠</h3>
<article><h4>반응형 사이트 가운데 컨텐츠1</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠2</h4></article>
<article><h4>반응형 사이트 가운데 컨텐츠3</h4></article>
</section>
<section>
<h3>반응형 사이트 오른쪽 컨텐츠</h3>
<article><h4>반응형 사이트 오른쪽 컨텐츠1</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠2</h4></article>
<article><h4>반응형 사이트 오른쪽 컨텐츠3</h4></article>
</section>
</section>
</main>
<footer>
<h2>반응형 사이트 푸터</h2>
</footer>
</body>
</html>
@charset "utf-8";
/* layout */
#header {height: 327px; background: url(../img/header_bg.jpg) repeat-x center top; }
/* container */
.container {width: 1200px; margin: 0 auto; background: rgba(0,0,0,0.2);}
/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 4px 0 4px 10px; display: inline-block; transition: color 0.3s ease;}
.quick a:hover {color: #ccc;}
/* mediaquery 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */
@media (max-width: 1280px){
.container {width: 100%;}
}
@media (max-width: 1024px){
}
@media (max-width: 960px){
}
@media (max-width: 768px){
}
@media (max-width: 600px){
}
@media (max-width: 480px){
}
@media (max-width: 320px){
}
@charset "utf-8";
/* 여백 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{margin:0;padding:0}
/* 테두리 초기화 */
fieldset,img{border:0 none}
/* 리스트 스타일 초기화 */
dl,ul,ol,menu,li{list-style:none}
/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px;font-family:'나눔 고딕','Nanum Gothic','Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;color:#222;}
a{color:#222;text-decoration:none}
a:hover{color:#118eff;text-decoration:none}
a:active{background-color:transparent}
/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
728x90
