01 미디어 쿼리(media query)
다양한 디바이스들이 웹브라우징을 지원하면서 화면 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해졌다
CSS의 미디어 쿼리(media query)는 이런 반응형 웹 다자인의 핵심 도구로, 조건에 따라 특정 CSS를 적용할 수 있다
미디어 쿼리 기본 문법
미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하는 미디어 쿼리의 문법은 다음과 같다
@media(/*조건*/) {
/* 스타일 */
}스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다
<div class="large">넓은 화면에서는 글자색이 토마토 색이 된다</div>
<style>
@media (min-width: 800px){
.large{
color: tomato;
}
}
</style>
주요 미디어 타입 (media type)
| all | 모든 디바이스(기본값) |
|---|---|
| screen | 스크린 디바이스 (모니터, 모바일 등) |
| 인쇄 장치 | |
| speech | 음성 합성기 (스크린 리더) |
자주 쓰는 조건
| max-width | 지정한 너비 이하일때 적용 |
|---|---|
| mIn-width | 지정한 너비 이상일때 적용 |
| max-height / min-height | 높이를 기준으로 조건 적용 |
| orientation : portrait | 세로 모드일때 |
| orientation : landscape | 가로 모드일때 |
| resolution | 디바이스 해상도 기준 |
논리 연산자
| and | 조건을 모두 만족해야 적용 |
|---|---|
| not | 조건을 만족하지 않을때 적용 |
| only | 오래된 브라우저에서 잘못된 적용을 막기 위한 키워드 |
| , | OR 조건으로 동작 (둘 중 하나라도 만족되면 적용) |
02 미디어 쿼리 분기점(breakpoint)
4개의 반응형 분기점
- 노트북 & 태블릿 가로 : 1024px ~ 1279px
- 태블릿 가로 : 769px ~ 1023px
- 모바일 가로 & 태블릿 세로 : 480Px ~ 767px
- 모바일: ~479px
/*노트북 & 태블릿 가로 : 1024px-1279px*/
@media all and (min-width:1024px) and (max-width:1279px){
/* style입력 */
}
/*태블릿 가로 : 769px-1023px*/
@media all and (min-width:768px) and (max-width:1023px){
/* style입력 */
}
/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px){
/* style입력 */
}
/*모바일 : -479px*/
@media all and (max-width:479px){
/* style입력 */
}3개의 반응형 분기점
- 노트북 & PC : 1024px ~
- 태블릿 가로, 세로 : 768px ~ 1023px
- 모바일 가로, 세로 : ~767px
/*노트북 & PC : 1024px-*/
@media all and (min-width:1024px){
/* style입력 */
}
/*태블릿 가로, 세로 : 768px-1023px*/
@media all and (min-width:768px) and (max-width:1023px){
/* style입력 */
}
/*모바일 가로, 세로 : -767px*/
@media all and (max-width:767px){
/* style입력 */
}반응형 접근 전략 (모바일 우선 vs 데스크탑 우선)
- 모바일 우선
- 기본 스타일은 모바일 기준으로 작성
- min-width 조건으로 점점 넓혀감
- 요즘 대부분의 프레임워크 (예: Tailwind, Bootstrap) 기본 전략
- 데스크탑 우선
- 기본 스타일은 데스크탑 기준으로 작성
- max-width 조건으로 좁혀감
/* Mobile First 예시: */
/* 기본: 모바일 */
body {
font-size: 14px;
}
/* 태블릿 이상 */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}
/* 데스크탑 이상 */
@media (min-width: 1200px) {
body {
font-size: 18px;
}
}미디어 쿼리 최적화 팁
- 비슷한 조건은 중첩 또는 공통 클래스로 묶자
- 너무 세분화된 breakpoint는 유지보수 어려움 → 3~4개로 단순화 권장
- CSS 구조 정리:
- 컴포넌트별로 media query 포함
- 모든 media query는 CSS 맨 아래 묶어서 작성 (전략 선택)
출처 : https://ityranno.tistory.com/entry/CSS-미디어쿼리-Media-Query-적용하기-사이즈-분기점-기준-px-테스트-방법
