CSS3 미디어 쿼리 (media queries)
먼저 보는 기본 예시
@media only screen and (max-width: 68.75em) { /\* 1100 \*/ }
@media only screen and (max-width: 62.5em) { /\* 1000 \*/ }
@media only screen and (max-width: 47.5em) { /\* 760 \*/ }
역사
간단한 형태의 미디어 쿼리는 CSS2에서 부터 사용되었습니다.
- 예제1:
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
- 예제2:
@media screen { * { font-family: sans-serif } }
즉, ‘screen’이나 ‘print’ 처럼 ‘미디어 타입 (media types)’ 에 따라서 특화된 스타일을 사용할 수 있었습니다. 그밖에 제안되었던 타입들로 ‘all’, ‘aural’ (HTML4), ‘braille’, ‘embossed’ (CSS2), ‘speech’ (CSS2), ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ 등이 있었습니다. 특히 ‘handheld’ 타입은, 현재의 반응형 웹의 징조를 보여주었다고 생각됩니다.
문법
[ only | not ]? 미디어 타입 and (미디어 속성 : 값) |
---|
- 우선 ‘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) { … }
미디어 타입
현재 HTML5/CSS3의 미디어 타입 종류는, HTML4/CSS2에서 정의된 것들을 그대로 사용하고 있습니다. 하지만, 대부분 ‘all’, ‘screen’, ‘print’ 정도가 주로 사용되고 있습니다.
미디어 속성
일부 미디어 속성들은 min- 이나 max- 등이 머리말이 붙을 수 있습니다.
width
- viewport의 (스크롤바를 포함한) 가로 길이입니다. 즉 가로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
height
- viewport의 (스크롤바를 포함한) 세로 길이입니다. 즉 세로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-width
- 실제 기기 스크린의 가로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-height
- 실제 기기 스크린의 세로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px 입니다.
orientation
- 지면을 향한 기기의 방향입니다. (세로보기, 가로보기)
- 값: ‘portrait’ 또는 ‘landscape’
aspect-ratio
- 기기의 width와 height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
device-aspect-ratio
- 기기의 device-width와 device-height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
color / color-index / monochrome
- 기기가 표현할 수 있는 색에 관련된 정보입니다.
- 값: 정수
- min, max 머리말 사용가능
resolution
- 기기의 픽셀 덴시티 정보입니다.
- 값: 해상도 dpi 또는 dpcm
- min, max 머리말 사용가능
그밖에 TV 에서 사용될 있는 ‘scan’과 특정 출력에 적용되는 ‘grid’ 등이 있습니다.
'개발자 공부 업무 정보 > HTTP,FRONT' 카테고리의 다른 글
레이어창을 브라우저 화면 가운데 띄우기 (0) | 2019.01.12 |
---|---|
css width 계산식 (0) | 2019.01.12 |
js 숫자타입 올림 반올림 , 소수점 (0) | 2019.01.11 |
javascript 문자열 비교 ( 포함 ) (0) | 2019.01.11 |
DOM 객체에 동적으로 추가된 이벤트 핸들러 제거하는 방법 (0) | 2019.01.11 |