CSS 미디어쿼리 @media

역링크 토론

CSS3

개요

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

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

예시 1

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

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

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

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

예시 2: css 링크

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

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

같이 보기

참고

원본 주소 "https://zetawiki.com/w/index.php?title=CSS_미디어쿼리_@media&oldid=266744"