[반응형 웹] viewport와 media query - 01

뷰포트와 미디어 쿼리에 대한 개념을 익히기 전에 우선 반응형 웹에 대한 개념을 확실히 잡고 가는 것이 중요합니다 !!!

- 반응형 웹이란?

기기(device)의 종류에 따라 디스플레이의 크기가 자동으로 변하는 웹페이지를 의미합니다!

 

- 반응형 웹이 필요한 이유?

기기의 종류는 점점 더 빠르게 늘어나는 추세이기 때문에, 기기 화면의 크기에 따라 코드가 개별적으로 존재했던 과거의 방식을 유지할 수 없게 되었습니다.

 

따라서, 화면의 움직임에 반응하여 자동으로 페이지가 재배열되도록 코드를 설계하여 효율성을 극대화시킬 수 있었습니다.

 

자, 반응형 웹에 대해 이해하셨다면 이제 뷰포트와 미디어 쿼리의 개념에 대해 살펴봅시다 !

 

- Viewport이란 ?

현재 사용자에게 보여지고 있는 화면 디스플레이에 표시되는 영역을 의미합니다.

<meta name="viewport" content="width=360">

해당 코드는 현재 사용자에게 보여지고 있는 화면 디스플레이가 360의 크기만큼이라는 뜻이죠!

이러한 방식을 뷰포트 메타태그라고 부릅니다!

 

뷰포트 메타태그란 뷰포트 영역을 이만큼으로 정의하겠다고 지정할 때 쓰이는데, 여기에서 추가적으로 알아둬야할 개념은

Initial-scale : 최초 페이지 로드 시에 얼마나 줌이 되어있는 지를 설정

User-scale : 페이지가 확대/축소 될 수 있는 지를 설정(yes, no, 1, 0)

입니다!

 

이는 웹 접근성과 관련이 있는데, ios에서는 접근성 향상을 위해 언제나 화면 확대/축소가 가능한 핀치줌을 지원한다는 것도 알아두세요!

 

다음으로,

- 미디어 쿼리란? @media

반응형 웹의 "꽃"이라고 생각하시면 됩니다!

어떻게 여러 레이아웃의 화면을 보여줄 것인가? 를 고민할 때에 사용할 개념입니다! 움직임에 따라 화면에 변동을 주는 것이죠!

스타일을 선택적으로 지정할 때 사용되는 개념이므로, 반응형 웹 개발에 있어서 키포인트가 되는 기능입니다 !!

 

(반드시 모든 상황에 필요한 것은 아님 cf. 때에 따라 flexible 등의 기능이 있기에)

적절하게 사용한다면, 스타일 코드의 유지보수에 유용하게 활용이 가능합니다 !

 

media 타입은

- print : 프린트 하는 경우

- screen : 디스플레이에 보여지는 경우

- all : 위의 두 경우 모두

로 나누어져 있습니다!

 

이를 사용할 때에는 여러가지 media feature rules를 적용할 수 있습니다!

예를 들면, 뷰포트의 눕힘 상태를 지정하는 orientation은 landscape와 portrait 두 가지가 있습니다.

 

코드를 통해 설명드리자면,

타입이 스크린이고 최소 넓이가 620px이며 방향이 세로인 미디어 쿼리는

@media screen and (min-width:620px) and (orientation:portrait){
...
}

이런식으로 나타납니다!

 

알게 된 개념들을 확실하게 이해하기 위해서는 코드를 통해 실습하는 것이 최고죠!

 

https://github.com/zooooss/ResponsiveWeb.git

GitHub - zooooss/ResponsiveWeb

 

태블릿 화면 크기와 모바일 화면 크기 두 가지로 구분하여,

 

정해둔 뷰포트 경계 범위를 넘나들때마다 미디어쿼리를 활용해 화면 구성이 바뀌는 해당 코드로

 

뷰포트와 미디어쿼리의 개념을 확실하게 이해할 수 있었습니다!