차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- tech:css_media_query [2014/12/30 02:24] – V_L
+++ tech:css_media_query [2017/02/08 16:38] (현재) – V_L
@@ 줄 1: / 줄 1: @@
+{{tag>css media query}}
 ====== Css Media Query ======
+CSS3부터 지원하는 것으로, 여러 다양한 단말기의 조건에 따라 다른 화면구성을 할 수 있도록 한 것이다.
+모든 최신 인터넷브라우져에서 지원한다.
+[[ie]]의 경우 IE9 부터 지원한다.
+우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고
+‘all’, ‘screen’ 등의 미디어 타입 (media type) 과
+‘min-width’ 와 같은 미디어 속성 (media feature)과 ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서
+조건을 표현한다.
+그리고 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’로 계속 추가할 수 있다. 이렇게 표현된 조건을 쉼표 ','로 연결하여 동일한 스타일에 여러 조건을 적용할 수도 있다.
+조건부 CSS화일
+  <link rel="stylesheet" media="print and (min-width: 25cm)" href="print.css" />
+CSS 내의 조건
+  @media screen and (min-width: 400px) and (max-width: 700px) { … }
+‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px 입니다.
 <file css>
 /* Smartphones (portrait and landscape) ----------- */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 480px) {
 /* Styles */
@@ 줄 11: / 줄 32: @@
 /* Smartphones (landscape) ----------- */
 @media only screen
 and (min-width : 321px) {
 /* Styles */
@@ 줄 17: / 줄 38: @@
 /* Smartphones (portrait) ----------- */
 @media only screen
 and (max-width : 320px) {
 /* Styles */
@@ 줄 23: / 줄 44: @@
 /* iPads (portrait and landscape) ----------- */
 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px) {
 /* Styles */
@@ 줄 30: / 줄 51: @@
 /* iPads (landscape) ----------- */
 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : landscape) {
 /* Styles */
@@ 줄 38: / 줄 59: @@
 /* iPads (portrait) ----------- */
 @media only screen
 and (min-device-width : 768px)
 and (max-device-width : 1024px)
 and (orientation : portrait) {
 /* Styles */
@@ 줄 46: / 줄 67: @@
 /* Desktops and laptops ----------- */
 @media only screen
 and (min-width : 1224px) {
 /* Styles */
@@ 줄 52: / 줄 73: @@
 /* Large screens ----------- */
 @media only screen
 and (min-width : 1824px) {
 /* Styles */
@@ 줄 66: / 줄 87: @@
-{{tag>css media query}}
+<file css>
+@charset “utf-8”;
+/* All Device */
+모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
+/* Mobile Device */
+px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
+/* Tablet & Desktop Device */
+@media all and (min-width:768px) {
+사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
+}
+/* Tablet Device */
+@media all and (min-width:768px) and (max-width:1024px) {
+사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
+}
+/* Desktop Device */
+@media all and (min-width:1025px) {
+사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
+}
+</file>
+http://naradesign.net/wp/2012/05/30/1823/