CSS - 반응형 웹을 위한 미디어 쿼리 사용

미디어 쿼리 : 미디어 유형이나 장치의 특성에 따라 스타일을 다르게 적용할 수 있게 하는 기능

주로 반응형 웹 디자인에서 사용되며 화면크기, 해상도, 디바이스 종류 등에 따라 스타일을 동적으로 조절하는 데 활용

 

뷰포트(Viewport) : 웹페이지가 보여지는 화면 영역

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 

디바이스에 맞춰서 최적화

content 속성값

속성값	설명
width	뷰포트의 너비를 설정. 보통 device-width로 설정함
height	뷰포트의 높이를 설정. 잘 사용하지 않음
initial-scale	뷰포트의 초기 배율을 설정. 1이 default, 1보다 작으면 축소 값, 1보다 크면 확대 값으로 설정
minimum-scale	뷰포트의 최소 축소 비율을 설정. 0.25가 default
maximum-scale	뷰포트의 최대 확대 비율을 설정. 5.0가 default
user-scalable	뷰포트의 확대 또는 축소 여부를 설정. yes or no, no로 지정하면 화면을 확대 또는 축소 불가.

 

미디어 쿼리의 기본 문법

 @media only screen and (min-width: 1140px) and (orientation: landscape) {

   p {

      color: red;

   }

 }

portrait : 화면의 방향이 세로일 때 적용

landscape : 화면의 방향이 가로일때 적용

and () and ()를 통해 여러 조건 적용 가능