- 미디어 쿼리 (Media Query)
반응형 개발 : 접속하고 있는 기기들 마다 다르게 반응하여 표현되도록 개발하는 것을 의미한다.
웹 페이지에 접속하고 있는 기기마다 원하는 형태로 스타일을 조정할 수 있는 기술이며, 기기의 화면, 너비, 높이 등으로 판단한다.
장점 : 업데이트, 유지관리, 디버깅이 쉬워지며, 업데이트 비용이 감소한다.
단점 : 구현이 어렵다, 다운로드 속도가 느려진다.
미디어 쿼리 사용해보기!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1_layout</title>
</head>
<style>
/*가상요소 : 해당 요소의 앞, 뒤에 가상의 요소가 있다고 가정하고 스타일을 지정하는 것을 의미한다. */
h1::before {
/*h1 이전에다가 가상의 요소가 있다고 가정하고 스타일을 주는 것, 가상요소여서 드래그해도 선택되지 않음*/
content:"1. ";
}
h1::after {
/*h1 이후에다가 가상의 요소가 있다고 가정하고 스타일을 주는 것 */
content:" - 기본";
}
/*데스크 탑
최대 : 1920
최소 : 1025
*/
/*화면 너비는 0~1280px*/
@media screen and (max-width:1280px){
body {
background-color: #ede7f6;
color:#ff1744;
}
h1::before {
content:"2. ";
}
h1::after {
content:" - 1025px ~ 1280px"
}
}
/*화면너비 0 ~ 1024px*/
@media screen and (max-width:1024px){
body {
background-color: #00838f;
color:#ffffff;
}
h1::before {
content: "3. ";
}
h1:after {
content: " - 961px ~ 1024px";
}
}
/*노트북*/
/* 화면너비 : 0~960px */
@media screen and (max-width:960px){
body {
background-color: #c8e6c9;
color:#f4511e;
}
h1::before {
content: "4. ";
}
h1::after {
content: " - 769px ~ 960px";
}
}
/*태블릿*/
/*화면너비 : 0~768px*/
@media screen and (max-width:768px) {
body {
background-color: #1565c0;
color:#ffffff;
}
h1::before {
content: "5. ";
}
h1::after {
content: " - 577px ~ 768px";
}
}
/*모바일*/
/*화면너비 : 0~576px*/
@media screen and (max-width:576px) {
body {
background-color: #f50057;
color:#ffffff;
}
h1::before {
content: "6. ";
}
h1::after {
content: " - 0px ~ 576px";
}
}
</style>
<body>
<h1>미디어 쿼리</h1>
<p>미디어 쿼리는 화면크기에 따른 각각의 속성 값을 지정하여, 여러개의 화면을 구성하는 기술이다.</p>
<p></p>
<h4>@media screen and (조건문) {스타일 적용 }</h4>
<ul>
<li>@media : 미디어 쿼리가 시작됨을 표시한다.</li>
<li>screen : 미디어 쿼리의 적용기기를 의미한다. / all : 모든기기</li>
<li>and : 앞의 기기와 뒤의 조건문을 둘 다 만족해야 성립한다.</li>
<li>(조건문) : 스타일을 적용시킬 대상 기기에 대한 조건을 의미한다.</li>
<li>스타일 적용문 : 조건에 따른 적용할 스타일을 지정한다.</li>
</ul>
</p>
</body>
</html>
화면의 너비에 따라 배경색, content의 문구가 다르게 나오도록 설정하였다.
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 13 : CSS, display, 위치 (0) | 2022.02.10 |
|---|---|
| DAY 12 : 상속, 폰트, 배경 (0) | 2022.01.25 |
| DAY 11 : 선택자, 우선순위 ,.. (0) | 2022.01.22 |
| DAY 10 : CSS, 선택자 (0) | 2022.01.21 |
| DAY 09 : progress, 시맨틱 태그 (0) | 2022.01.20 |