Responsive Web 반응형 웹 | Viewport | 미디어 쿼리

반응형 웹사이트

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

 

뷰포트(viewport)

: 웹 브라우저에서 실제 내용이 표시되는 영역. 반응형 웹에서는 각 디바이스의 viewport에 맞는 화면을 보여줘야 한다. 이때 사용하는 메타 태그가 "뷰포트 메타 태그" 이다.

 

메타 뷰포트 태그

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

 

메타 뷰포트 태그 속성

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

일반적인 사용법

: 뷰포트의 너비를 디바이스 화면 너비에 맞추고 초기화면 배율을 1로 지정한다.

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

 

뷰포트 단위

• vw : 뷰포트 너비의 1%
• vh : 뷰포트 높이의 1%
• vmin : 뷰포트 너비와 높이 중에서 작은값의 1%
• vmax : 뷰포트 너비와 높이 중에서 큰 값의 1%

---

 

미디어 쿼리

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

 

미디어 쿼리 문법

@media 키워드를 사용하여 특정 디바이스에 어떤 CSS를 적용할 것인지 결정한다. 이때 특정 구간을 breakpoint라고 한다.

Responsive layout grid  >>> BreakPoint 참고 링크

 

기본형

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

• only : 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다. (거의 사용하지 않는다.)
• not : not 다음에 지정하는 미디어 유형을 제외한다.
• and : 조건을 여러개 연결해서 추가할 수 있다.

   ex) 미디어 유형이 screen이면서 최소 너비가 768px 이고 최대 너비는 1439px일 경우에 적용할 CSS

        @media screen and (min-width: 768px) and (max-width:1439px)

    @media (max-width: 600px) {

      body {

        background-color: red;

      }

    }

    @media (max-width: 400px) {

      body {

        background-color: blue;

      }

    }

 

미디어 유형

• all : 모든 장치에 적합
• print : 인쇄 결과물 및 출력 미리보기 화면
• screen :  주로 화면이 대상이다.