미디어 쿼리
미디어쿼리의 개요
반응형 웹을 구현할 때 여러가지 해상도를 가지고 있는 디바이스에 맞춰서
스타일시트를 적용할 수 있도록 한다. (디바이스의 해상도에 맞게 스타일시트를 적용)
디바이스 웹 브라우저 해상도
1. 데스크탑 : 모니터 해상도와 웹 브라우저 해상도가 같다.
4k : 3840px
FHD : 1920px
Notebook : 1920px
Laptop : 1440px
19인치 LCD : 1280px
17인치 LCD : 1024px
2. 모바일 : 디스플레이 해상도와 웹 브라우저 해상도가 다르다.
태블릿 : 768px, 820px
스마트폰 : 390px, 420px (390 iphone, 420 galaxy)
(위의 해상도에 따라서 break point를 지정해주어야한다.)
디바이스의 웹 브라우저 해상도로 미디어쿼리 중단점 지정
첫번째 영역 : 1600px 이상
두번째 영역 : 1000px 이상 1599px 이하
세번째 영역 : 760px 이상 999px 이하 (600px 이상 759px 이하)
네번째 영역 : 360px 이상 599px 이하
미디어쿼리 적용 방법 두가지
1. @media 를 사용해서 미디어쿼리 중단점을 지정하는 방법
2. link 태그를 사용하여 미디어쿼리 중단점에 맞는 외부 스타일 시트 파일을 html 문서에 포함하는 방법
HTML > link 태그를 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미디어쿼리</title>
<link rel="stylesheet" href="css/media.css"> <!--첫번재 방법-->
</head>
<body>
</body>
</html>style.css
@charset "utf-8";
* {margin:0; padding:0; box-sizing:border-box;}
@media screen and (min-width:1600px) {
body {background:orange;}
}
@media screen and (min-width:1000px) and (max-width:1599px){
body {background:pink;}
}
@media screen and (min-width:600px) and (max-width:999px){
body {background:violet;}
}
@media screen and (max-width:599px) {
body {background:green;}
}'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 플랙스 박스를 사용해 메뉴 구성 해보기 (0) | 2022.10.06 |
|---|---|
| [HTML+CSS3] 미디어쿼리(2) (0) | 2022.10.06 |
| [HTML+CSS3] 애니메이션(2) (0) | 2022.10.06 |
| [HTML+CSS3] 애니메이션 (1) (1) | 2022.10.06 |
| [HTML+CSS3] 트랜지션 타이밍 함수 (0) | 2022.10.05 |