CSS 이론 채워 넣기 - 9. 반응형 웹 디자인(Responsive Web Design)

1. 반응형 웹 디자인이란?

반응형 웹디자인(Responsive Web Design) 은 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다.

2. viewport meta tag

viewport meta tag는 브라우저의 화면 설정과 관련된 정보를 제공한다.

meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다.

일반적으로 viewport meta tag는 모바일 디바이스에서만 적용된다.

프로퍼티	Description	사용예
width	viewport 너비(px). 기본값: 980px	width=240
height	viewport 높이(px)	height=800
initial-scale	viewport초기 배율	initial-scale=1.0
user-scale	확대 축소 가능 여부	user-scale=no
maximum-scale	viewport 최대 배율	maximum-scale=2.0
minimum-scale	viewport 최소 배율	minimum-scale=1.0

3. @media

이것은 서로 다른 미디어 타입(print, screen, speech…)에 따라 각각의 styles을 지정하는 것을 가능하게 한다.

@media screen {
  * { color: red; }
}
@media print {
  * { color: blue; }
}

@media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

/* @media not|only mediatype and (expressions) {  CSS-Code;  } */
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

※ Media Query의 표현식에서 사용할 수 있는 프로퍼티

orientation을 제외한 모든 프로퍼티는 min/max 접두사를 사용할 수 있다.

프로퍼티	Description
width	viewport 너비(px)
height	viewport 높이(px)
device-width	디바이스의 물리적 너비(px)
device-height	디바이스의 물리적 높이(px)
orientation	디바이스 방향 (가로 방향: landscape, 세로방향: portrait)
device-aspect-ratio	디바이스의 물리적 width/height 비율
color	디바이스에서 표현 가능한 최대 색상 비트수
monochrome	흑백 디바이스의 픽셀 당 비트수
resolution	디바이스 해상도

예시

/*==========  Mobile First Method  ==========*/
/* All Device */

/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {}

/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {}

/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {}

/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {}

/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1200px) {}

/*==========  Non-Mobile First Method  ==========*/
/* All Device */

/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {}

/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {}

/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {}

/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {}

/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {}