반응형 웹 디자인

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

뷰포트
(ViewPort)
앞서 나왔듯 웹 브라우져에서 실제 내용이 표시되는 영역이다.
모바일 뷰포트와 PC뷰포트는 그 크기가 다르므로 반응형 웹에선 뷰포트에 맞게 화면을 보여줘야 한다.

뷰포트 메타태그를 사용해 화면에 맞게 보여줄 수 있다.

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

메타 뷰포트

지정법

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

태그 속성

• width : 뷰포트 너비
• height : 뷰포트 높이
• user-scalable : 사용자 확대/축소 가능여부 (no로 설정시 사용가자 확대, 축소 불가능)
• initial-scale : 초기 화면 비율
• maximum-scale : 최대 화면 비율
• minimum-scale : 최소 화면 비율

미디어 쿼리

(Media Query)
접속하는 디바이스나 뷰포트에 따라 특정 CSS를 사용하는 방법이다.

@media 키워드를 이용하여 특정 미디어(디바이스) 에서 어떤 CSS를 사용할지 지정하는데, 여기서 특정 구간을 중단점(breakpoint)라고 한다.

<style>@media only|not 매체유형 and (조건) { CSS스타일코드; }</style>

• only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음

• not : not 다음에 지정하는 미디어 유형을 제외함

• and : 조건을 여러개 추가함

자주 사용하는 미디어 쿼리 조건

• min-width : 웹 뷰포트의 최소 넓이

• max-width : 웹 뷰포트의 최대 넓이

---