CSS 미디어쿼리 @media

1 개요

CSS3 @media rule, CSS media queries; media queries

CSS3 @media 규칙, CSS3 @media 룰, CSS 미디어 쿼리

• 화면 해상도 등에 따라 컨텐츠를 렌더링할 수 있도록 하는 CSS3 기능
• 반응형 웹 구현의 토대
• 2012년, W3C 추천 표준이 됨

2 예시 1

• 예제: http://zetawiki.com/ex/css/media.html

<style>
@media (max-width:600px) {
	body { background: red; }
}
</style>

→ 웹브라우저 화면의 너비가 600px 이하일 때 배경색을 빨간색으로 바꿈

→ ( 600px 초과일 때는 기본색상인 흰색 )

3 예시 2: css 링크

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

→ 800px 이하일 때 example.css 참조

4 같이 보기

• 반응형 웹
• respond.js 시작하기
• CSS3
• CSS 내비게이션바 버튼 레이블 숨기기
• Less @media 쿼리 단축

5 참고

• https://en.wikipedia.org/wiki/Media_queries
• http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• https://developer.mozilla.org/en/docs/Web/Guide/CSS/Media_queries