728x90
728x90
미디어 쿼리 (Media Query)
- 웹 페이지를 출력하는 디바이스의 종류/크기에 따라 CSS 스타일을 변경할 수 있는 기능
- 디바이스의 특성에 맞게 화면을 보여주기 위해 사용함
- 브라우저 크기에 맞게 자동으로 스타일을 조정함 → 사용자 경험 개선에 큰 도움
@media [only | not] 미디어유형 [and 조건1] [and 조건2] ... {
스타일속성 : 속성값 ;
}- and
: 조건을 계속 추가할 수 있음
- 콤마(,)
: 동일한 스타일을 사용할 미디어 유형/조건이 있다면 콤마로 추가할 수 있음
- only
: 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 함
- not 미디어 유형
: 해당 미디어를 제외하고 적용함
ex) @media screen and (min-width:200px) and (max-width:360px) { ... ; }
# 미디어 유형
- all
- screen : 컴퓨터, 스마트폰 스크린
- print : 인쇄 장치
- tv
# 미디어 쿼리 조건
1) 너비와 높이
- min-width : 최소 너비
- min-height : 최소 높이
- max-width : 최대 너비
- max-height : 최대 높이
2) 화면 회전
- portrait : 단말기 세로 방향
- landscape : 단말기 가로 방향
# 미디어 쿼리 중단점 (breakpoint)
- 서로 다른 CSS를 적용할 화면 크기 기준
- mobile first : 모바일 기기 레이아웃을 기본으로 작성하고, 태블릿 & PC 레이아웃 작성
/* 스마트폰 세로 */
@media only screen and (min-width : 320px) { ... }
/* 스마트폰 가로 */
@media only screen and (min-width : 480px) { ... }
/* 태블릿 세로 */
@media only screen and (min-width : 768px) { ... }
/* 태블릿 가로, 데스크톱 */
@media only screen and (min-width : 1024px) { ... }
외부 미디어 쿼리 적용 방법
<link> 태그 사용
<head>
<link rel = "stylesheet" media = "미디어쿼리조건" href = "css파일경로">
</head>@import 구문 사용
<style>
@import url(css파일경로) 미디어쿼리조건 ;
</style>
내부 미디어 쿼리 적용 방법
media 속성 사용
<style media = "미디어쿼리조건">
선택자 { 스타일속성 : 속성값 ; }
...
</style>@media 구문 사용
<style>
@media 미디어쿼리조건 { 스타일속성 : 속성값 ; }
</style>320x100
반응형
'HTML & CSS' 카테고리의 다른 글
| [HTML] 웹사이트에 지도 삽입하기 (카카오맵) (0) | 2023.10.24 |
|---|---|
| [CSS] 플렉스 박스 레이아웃 (0) | 2023.02.12 |
| [CSS] 가변 그리드 레이아웃 (0) | 2023.02.12 |
| [CSS] 애니메이션 스타일 (animation) (0) | 2023.02.12 |
| [CSS] 트랜지션 스타일 (transition) (0) | 2023.02.12 |