12. 반응형 웹

반응형 웹 사이트란?

웹 사이트에서 PC화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지 입니다.

 

 

뷰포트(viewport)

뷰포트란 웹 브라우저에서 실제 내용이 표시되는 영역입니다. 모바일 viewport와 PC의 viewport는 그 크기가 다릅니다. 그렇기 때문에 반응형 웹 에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있습니다.

이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다.

 

 

메타 뷰포트 태그 지정하는 법

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

 

 

메타 뷰포트 태그 속성

• width - 뷰포트 가로
• height - 뷰포트 세로
• user-scalable - 사용자 확대/축소 가능 여부
• initial-scale - 초기 화면 비율
• maximum-scale - 최대 화면 비율
• minimum-scale - 최소 화면 비율

 

일반적인 사용법

뷰포트의 너비를 디바이스(스마트폰) 화면 너비에 맞추고 초기화면 배율을 1로 지정합니다.

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

 

 

뷰포트 단위

• vw - 뷰포트 너비. 100vw = 뷰포트 width 의 100%
• vh - 뷰포트 높이. 100vh = 뷰포트 height 의 100%
• vmin - 뷰포트의 너비와 높이 중에서 작은 값.
• vmax - 뷰포트의 너비와 높이 중에서 큰 값.

 

미디어 쿼리

접속하는 디바이스나 뷰포트에 따라 특정 CSS 스타일을 사용하는 방법입니다.

 

 

미디어 쿼리 문법

• 기본형 - @media [only | not] 미디어 유형 [and 조건] * [and 조건]
• only - 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
• not : not 다음에 지정하는 미디어 유형을 제외합니다.
• and : 조건을 여러개 연결해서 추가할 수 있습니다.
• 예) @media screen and (min-width: 768px) and (max-width: 1439px)

 

미디어 유형

• all - 모든 장치에 적합합니다.
• print - 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
• screen - 주로 화면이 대상입니다.
• speech - 음성 합성장치 대상입니다.

 

미디어쿼리 조건

• min-width - 웹 뷰포트의 최소 너비입니다.
• max-width - 웹 뷰포트의 최대 너비입니다.

 

 

 

---

실습

<!-- HTML -->
<div class="view"></div>

/* CSS */
.view {
/* background-color: green; */
  width: 50vw;
  height: 50vh;
/* width: 50vmin;
  height: 50vmax; */
}

@media (max-width: 500px) {
  .view {
    background-color: green;
  }
}
@media (min-width: 501px) and (max-width: 1000px) {
  .view {
    background-color: blue;
  }
}
@media (min-width: 1001px) {
  .view {
    background-color: yellow;
  }
}