[반응형웹] ViewPort 반응형 웹에 대한 이해

반응형 웹이란 이렇게 다양한 종류의 디바이스기기가 생겨나면서 그 기기 화면에 맞춰 화면이 보여지는 것을 반응형 웹이라고 합니다.

---

1. 뷰포트ViewPort

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

(조건문)

@media (min-width:320px){실행문}

@media (min-width:320px) and (max-width:768px){실행문}

뷰포트속성

속성명	속성값	속성설명
width	device-width, 양수	뷰포트의 너비를 지정합니다.
height	device-height. 양수	뷰포트의 높이를 지정합니다.
inital-scale	양수	뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하여 축소된 페이지를 표시하고, 1보다 큰 값을 사용하여 확대된 페이지를 표시합니다.
user-scalable	yes, no	뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes이며 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다.
minimum-scale	양수	뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25입니다.
maximum-scale	양수	뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0입니다.

---

2. 미디어쿼리 MedaiQuery

미디어쿼리의 기본문법

@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}

ex) @media only screen and (max-width:786px){width:100%}

미디어쿼리 적용방법

1. <link rel="stylesheet" href="style.css" />

2. <link rel="stylesheet" media="all and (min-width:320px)" href="style.css" />

3. @import url(style.css) all and (min-width:320px);

미디어쿼리 작성시 주의사항

1. min을 사용할때는 반드시 작은 순서대로 작성 (min은 최소 또는 그이상이라 는 뜻으로, 점차 커지는 것을 의미하기 때문에)

@media (min-width:320px){실행문} << 스마트폰 / 모바일 핸드폰

@media (min-width:768px){실행문} << 테블릿 PC

@media (min-width:1024px){실행문} << PC 컴퓨터, 노트북

2. max 사용시 큰순서대로 작성 (max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)

@media (max-width:1600px){실행문}

@media (max-width:1024px){실행문}

@media (max-width:768px){실행문}

<html태그>

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

이렇게 heade태그에 선언해주어야 한다.

<CSS>

@media 미디어 쿼리

그다음은 제일 중요한 것들 중 하나인 CSS 미디어 쿼리에요.

아래와 같이 미디어 쿼리를 사용하여 창의 width, height 등에 따라 스타일을 다르게 지정할 수 있어요.

@media (max-width: 720px) { /* 720px 이하 */ .element { ... } } @media (min-width: 720px) { /* 720px 이상 */ .element { ... } }