CSS (12) - 반응형 웹과 미디어 쿼리

 

1. 모바일 기기를 위한 뷰포트

 

뷰포트를 지정하면, 접속한 기기와 화면에 맞춰 확대하거나 축소해서 표시할 수 있다.

 

1.2 뷰포트 지정하기 

<meta name="viewport" content="속성1=값, 속성2=값2">

지정할 수 있는 속성

width (뷰포트 너비) device-width 또는 크기 (브라우저 기본값)

height(뷰포트 높이) device-height 또는 크기 (브라우저 기본값)

user-scalable (확대 축소 가능 여부) yes or no 

initial-scale (초기 확대 축소 값) 1~10

 

1.3 뷰포트 단위

 

vw : 1vw 뷰포트 너비의 1%

vh: 1vh는 뷰포트 높이의 1%

vmin: 뷰포트 너비와 높이 중 작은 값의 1%

vmax: 뷰포트의 너비와 높이 중 큰 값의 1%

 

2. 미디어 쿼리 알아보기 

 

미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다. 

해상도에 따라 다른 스타일 시트를 적용해 주는 것을 말한다. 

 

2.1 미디어 쿼리 알아보기 

 

CSS 모듈인 미디어쿼리는 사이트 접속 장치에 따라 특정 CSS 스타일을 사용하는 방법이다.

 

2.2 미디어 쿼리 구문 

@media [only|not]미디어 유형 [and 조건] * [and 조건]

only: 미디어 쿼리 무시 

not: 다음에 지정하는 미디어 유형은 제외 (ex not tv)

and: 조건을 여러개 연결해서 추가할 수 있다.