<!--
※ 반응형 웹 디자인
1.메타 코드 작성
<meta name="viewport" content="sidth=device-width, initial-scale=1">
2.미디어 쿼리(Media Query) 적용: 디바이스의 스크린 크기에 따라 다른 스타일 시트를 적용하는 것.
2-1. 미디어 쿼리 적용방법
a. <link> 로 적용
<link rel="stylesheet" href="./css/fhd-1400.css" media="screen and (min-width:1400px) and (max-width:1920px)">
<link rel="stylesheet" href="./css/hd-1000.css" media="screen and (min-width:1000px) and (max-width:1399px)">
<link rel="stylesheet" href="./css/tb-768.css" media="screen and (min-width:760px) and (max-width:999px)">
<link rel="stylesheet" href="./css/sm.css" media="screen and (max-width:759px)">
b. @media 로 적용
@media screen and (min-width:1400px) { }
@media screen and (min-width:1000px) and (max-width:1399px) { }
@media screen and (min-width:760px) and (max-width:999px) { }
@media screen and (max-width:759px) { }
★ <link>보단 @media 를 주로 사용한다.
2-2. 반응형 이미지
이미지를 선택자로 선택한 후 width를 100%로 지정한다.
2-3. 부트스트랩(Bootstrap5)의 미디어 쿼리 중단점
a.576px 미만(xs)
b.576px 이상(sm)
c.768px 이상(md)
d.992px 이상(lg)
e.1200px 이상(xl)
f.1400px 이상(xxl)
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="sidth=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/media.css">
</head>
<body>
<h2>media query</h2>
<div></div>
</body>
</html>
----------------media.css
@charset "utf-8";
/*media.css*/
@import url("reset.css");
h2 { padding-top:100px; font-size:42px; color:#06f; text-align:center; text-transform:uppercase; }
div { width:95%; height:500px; margin:100px auto; background:#fc0; }
@media screen and (max-width:576px) {
body { background:#000; }
h2 { font-size: 32px; color:#fff; }
div { width:100%; }
}
/**/
@media screen and (min-width:576px) {
body { background:#a50; }
h2 { font-size: 32px; color:#fff; }
div { width:100%; }
}
/**/
@media screen and (min-width:768px) {
body{background:#999;}
}
/*tb:768px*/
@media screen and (min-width:1000px) {
body { background:#0a8; }
h2 { color:#fff; }
div { width:950px; }
}
/*hd:1024px*/
@media screen and (min-width:1400px) {
body { background:#06f; }
h2 { color:#fff; }
div { width:1350px; }
}
/*fhd:1920px*/
----------------reset.css
@charset "utf-8";
/*reset.css*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
*{ margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Noto Sans KR', sans-serif; font-size:15px; color:#333; background:#fff;}
h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; }
ul li { list-style:none; float:left; }
a { display:block; text-decoration:none; }
img { width:100%; }
.clear { clear:both; }
-----------------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="sidth=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/header.css">
</head>
<body>
<header>
<div class="btn"></div>
<h1>logo</h1>
<nav>
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</nav>
</header>
</body>
</html>
-----------------header.css
@charset "utf-8";
/*media.css*/
@import url("reset.css");
header {
height: 70px; padding: 0 50px;
background: #000;
}
h1 { position:absolute; top:15px; font-size: 28px; color: #fff; text-transform: uppercase;}
a { padding: 0 20px; color: #fff; }
a:hover { color: #fc0; }
.btn { float: left; width: 40px; height: 40px; margin:15px; background: #fff; border-radius: 5px; }
@media screen and (max-width:576px) {
header {display: block; padding: 0; }
h1 { left: 50%; transform: translateX(-50%); }
nav {display: none;}
}
/*sm:375px*/
@media screen and (min-width:576px) {
header {
display: block;
padding: 0; background: #550;
}
h1 { left: 50%; transform: translateX(-50%); }
nav {display: none;}
}
/**/
@media screen and (min-width:768px) {
header{
background: #086;}
h1{left:80px;}
a {padding: 0 15px;}
nav {display: block; float:right; margin-top: 25px; margin-right: 50px;}
.btn {display: none;}
}
/*tb:768px*/
@media screen and (min-width:1000px) {
header{ background: #049;}
a {padding: 0 30px;}
}
/*hd:1024px*/
@media screen and (min-width:1400px) {
header { background:#006;}
}
/*fhd:1920px*/
'Coding' 카테고리의 다른 글
| CSS 선수학습(13) (0) | 2021.07.27 |
|---|---|
| CSS 선수학습(11) (0) | 2021.07.26 |
| CSS 선수학습(10) (0) | 2021.07.21 |
| CSS 선수학습(9) (0) | 2021.07.21 |
| CSS 복습/실습 (0) | 2021.07.20 |