반응형 웹과 뷰포트

배고픈메꾸리·2020년 11월 9일
0

인턴생활 

목록 보기
4/9

반응형 웹

나중에는 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 컴퓨터, 텔레비전 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었지만, 전자기기들의 화면의 크기가 다른 탓에 여러가지 버전의 웹페이지를 만들어야 했다. 이러한 불편함을 해결하기 위해 반응형 웹페이지가 탄생했다.

출처 : 나무위키

이 때, 반응형이라고 부르기 위해서는 하나의 HTML 소스와 하나의 URL 으로 나타내어야 한다.


_정보를 찾아보기 위해서 들어간 나무위키도 현재 진행하는 쇼핑몰 프로젝트와 같은 방식으로(측면에 광고) 구현되어 있었다.

뷰포트

간단하게 뷰포트란 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역이다.

뷰포트는 html에서 head 요소의 자식 요소인 meta 요소를 사용하여 설정할 수 있다. 아래는 현재 프로젝트에서 사용하고 있는 뷰포트 태그이다.

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

<meta> 는 뷰포트 요소로서 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 제공
initial-scale=1.0은 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정
user-scalable=no 은 사용자가 크기를 조절하지 못하도록 설정
maximum-scale=1 은 사용자가 극단적으로 크기를 확대하지 못하도록 방지함
width=device-width 은 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 함

뷰포트를 사용하기 위한 CSS 단위

vh (Viewport Height)

1vh는 뷰포트의 높이의 1%와 같다.

vw (Viewport Width)

1vw는 뷰포트의 너비의 1%와 같다.

vmin (Viewport Minimum)

뷰포트의 높이와 너비중 작은 쪽의 치수를 기초로 한다. (너비가 더 작을 경우 1vmin은 1vw와 같다)

vmax (Viewport Maximum)

뷰포트의 높이와 너비중 쪽의 치수를 기초로 한다. (높이가 더 클 경우 1vmax은 1vh와 같다)

언뜻보면 %와 다를 바 없어 보이지만 %는 부모 요소의 크기에 영향을 받는 반면 뷰포트를 사용하는 단위는 부모 요소의 크기에 영향을 받지 않기 때문에 주의해야한다

profile
FE 개발자가 되자

0개의 댓글