차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판이전 판다음 판 | 이전 판 | ||
| tech:css_media_query [2014/12/30 23:55] – 115.93.88.196 | tech:css_media_query [2017/02/09 01:08] (현재) – V_L | ||
|---|---|---|---|
| 줄 1: | 줄 1: | ||
| + | {{tag> | ||
| ====== Css Media Query ====== | ====== Css Media Query ====== | ||
| CSS3부터 지원하는 것으로, 여러 다양한 단말기의 조건에 따라 다른 화면구성을 할 수 있도록 한 것이다. | CSS3부터 지원하는 것으로, 여러 다양한 단말기의 조건에 따라 다른 화면구성을 할 수 있도록 한 것이다. | ||
| + | |||
| + | 모든 최신 인터넷브라우져에서 지원한다. | ||
| + | [[ie]]의 경우 IE9 부터 지원한다. | ||
| 우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고 | 우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고 | ||
| 줄 82: | 줄 86: | ||
| </ | </ | ||
| - | {{tag>css media query}} | + | |
| + | |||
| + | < | ||
| + | @charset “utf-8”; | ||
| + | |||
| + | /* All Device */ | ||
| + | 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. | ||
| + | |||
| + | /* Mobile Device */ | ||
| + | 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다. | ||
| + | |||
| + | /* Tablet & Desktop Device */ | ||
| + | @media all and (min-width: | ||
| + | 사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다. | ||
| + | } | ||
| + | |||
| + | /* Tablet Device */ | ||
| + | @media all and (min-width: | ||
| + | 사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다. | ||
| + | } | ||
| + | |||
| + | /* Desktop Device */ | ||
| + | @media all and (min-width: | ||
| + | 사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다. | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | http:// | ||