css 화면 크기에 맞춘 변경 (모바일 환경 , 테블릿 환경 등)

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’ 등이 있습니다.