[CSS] 스타일 속성 - 미디어쿼리(@media)

[ Media Query (미디어 쿼리) ]

• 화면 크기, 해상도, 기기 종류 등 미디어 조건에 따라 다른 CSS를 적용하는 기능
• 반응형 웹(Responsive Web) 구현의 핵심
• @media 규칙을 사용

@media (조건) {
  /* 조건이 참일 때 적용할 CSS */
}

1. 미디어 타입

타입	설명
all	모든 기기 (기본값)
screen	화면 (모니터, 스마트폰, 태블릿 등)
print	인쇄

<!-- 화면(모니터, 스마트폰 등)에서 적용되는 스타일시트 -->
<link rel="stylesheet" type="text/css" media="screen" href="default.css">

<!-- 인쇄 시 적용되는 스타일시트 -->
<link rel="stylesheet" type="text/css" media="print" href="print.css">

/* default.css
	 화면 미디어 타입일 때 모든 요소에 sans-serif 폰트 적용 */
@media screen {
  * { font-family: sans-serif; }
}

 

2. 주요 미디어 특성 (조건)

특성	설명	예시
width	뷰포트 너비	(width: 768px)
max-width	최대 너비 이하	(max-width: 768px)
min-width	최소 너비 이상	(min-width: 1024px)
max-height	최대 높이 이하	(max-height: 900px)
min-height	최소 높이 이상	(min-height: 500px)
orientation	화면 방향 portrait : 세로 모드 (높이 > 너비) landscape : 가로 모드 (너비 > 높이)	(orientation: landscape)

 

3. 논리 연산자

연산자	설명	예시
and	두 조건 모두 만족	screen and (max-width: 768px)
, (쉼표)	두 조건 중 하나 만족 (OR)	(max-width: 480px), (orientation: portrait)
not	조건 반전	not screen

 

4. 반응형 브레이크포인트 (Breakpoint)

구분	기준	예시
모바일	~767px	(max-width: 767px)
태블릿	768px~1023px	(min-width: 768px) and (max-width: 1023px)
데스크탑	1024px~	(min-width: 1024px)

 

1) Mobile First — 작은 화면 기준으로 작성 후 min-width로 확장

/* 기본 (모바일) */
div { font-size: 14px; }

/* 태블릿 이상 */
@media (min-width: 768px) {
  div { font-size: 16px; }
}

/* 데스크탑 이상 */
@media (min-width: 1024px) {
  div { font-size: 18px; }
}

 

2) Desktop First — 큰 화면 기준으로 작성 후 max-width로 축소

/* 기본 (데스크탑) */
div { font-size: 18px; }

/* 태블릿 이하 */
@media (max-width: 1023px) {
  div { font-size: 16px; }
}

/* 모바일 이하 */
@media (max-width: 767px) {
  div { font-size: 14px; }
}