반응형을 만들어 보았다
<!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="반응형 웹 페이지 제작 샘플입니다.">
<meta name="keyword" content="반응형 사이트, 교육사이트">
<meta name="robots" content="all">
<title>Document</title>
<!-- favicon & icon -->
<link rel="shortcut icon" href="img/icon/044-buffer.ico">
<link rel="buffer-icon" href="img/icon/044-buffer.ico">
<!-- style css -->
<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">
<!-- html5 Support & ie Version Checker -->
<script src="setting/html5shiv.js"></script>
<script src="setting/ie-checker.js"></script>
<!-- jQuery -->
<script src="setting/jquery-1.9.1.js"></script>
</head>
<body>
<header id="header">
<div class="container">
<div class="quick">
<a href="#">메인</a>
<a href="#">로그인</a>
</div>
</div>
</header>
</body>
</html>@charset "UTF-8";
/* layout */
#header {height: 400px; background: url(../img/header/title_html1.png) no-repeat center top /contain;}
/* container */
.container {width: 1280px; margin: 0 auto; background: rgba(0,0,0,0.2);font-size: 1%}
/* 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){
.container {width: 100%;}
}
@media (max-width: 960px){
.container {width: 100%;}
}
@media (max-width: 968px){
.container {width: 100%;}
}
@media (max-width: 600px){
.container {width: 100%;}
}
@media (max-width: 480px){
}
@media (max-width: 320px){
}여기 미디어 가 창 싸이즈를 말하고 있다 그럼으로 사이즈를 설정 변경할 수 있다
Or71nH