CSS 미디어쿼리 @media

1 개요[ | ]

CSS3 @media rule, CSS media queries; media queries
CSS3 @media 규칙, CSS3 @media 룰, CSS 미디어 쿼리
  • 화면 해상도 등에 따라 컨텐츠를 렌더링할 수 있도록 하는 CSS3 기능
  • 반응형 웹 구현의 토대
  • 2012년, W3C 추천 표준이 됨

2 예시 1[ | ]

<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 같이 보기[ | ]

5 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}