[Web] CSS - 미디어 쿼리(Media Queries)를 활용한 반응형 웹 디자인

⊙ 미디어 쿼리란?

반응형 웹 디자인을 만들기 위해 어떤 조건이나 장치 환경을 만족했을 때 css를 적용할 수 있는 방법을 제공합니다.

• 뷰 포트 크기에 따른 사이트 레이아웃 조절
• 다크 모드 지원

다음과 같은 조건들이 필요할 때 용이하게 사용할 수 있습니다.

 

⊙ 뷰 포트(View Port)란?

실제 내용이 표시되는 영역으로 기기마다 픽세 표시 방법이 다르기에 뷰포트를 지정해 화면을 표시한다.

 

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

 

⊙ 미디어 쿼리 구문

기본형

@media (조건){스타일}
@media 미디어 유형 (조건) and (조건) {스타일}

 

⊙ 미디어 쿼리의 조건

- 웹 문서의 가로 너비와 세로 높이 (뷰포트)

종류	설명
width, height	웹 페이지의 가로 너비, 세로 넓이
min-width, min-height	웹 페이지의 최소 너비, 최소 넓이
max-width, max-height	웹 페이지의 최대 너비, 최대 넓이

- 화면 회전: 스마트폰이나 테블릿의 화면 회전 여부

종류	설명
orientation: portait	단말기의 세로 모드
orientation: landscape	단말기의 가로 모드

 

⊙ EX 1)

브라우저의 가로 크기가 720px 이하일 때, 배경 색을 빨강색으로 바꾸시오.

<div class="ex1"> 미디어 쿼리 연습 EX1) </div>

@media (max-width: 720px) {
  .ex1 {
    background-color: red;
  }
}