"CSS 미디어쿼리 @media"의 두 판 사이의 차이

2017년 6월 27일 (화) 01:21 기준 최신판

1 개요[ | ]

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 참고[ | ]

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
-;CSS3 @media Rule, CSS media queries
+;CSS3 @media rule, CSS media queries; media queries
-;CSS3 @media 규칙, CSS3 @media 룰, CSS media 쿼리
+;CSS3 @media 규칙, CSS3 @media 룰, CSS 미디어 쿼리
+*화면 해상도 등에 따라 컨텐츠를 렌더링할 수 있도록 하는 CSS3 기능
+*[[반응형 웹]] 구현의 토대
+*2012년, [[W3C 추천]] 표준이 됨
 ==예시 1==
@@ 22번째 줄: / 25번째 줄: @@
 ==같이 보기==
-*[[반응형 웹]]
+* [[반응형 웹]]
-*[[respond.js 시작하기]]
+* [[respond.js 시작하기]]
+* [[CSS3]]
+* [[CSS 내비게이션바 버튼 레이블 숨기기]]
+* [[Less @media 쿼리 단축]]
-==참고 자료==
+==참고==
+*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
 [[분류: CSS3]]