반응형 웹
나중에는 기술의 발전으로 데스크톱 뿐만 아니라 스마트폰, 태블릿 컴퓨터, 텔레비전 등 대부분의 전자기기에서 웹에 접속 할 수 있게 되었지만, 전자기기들의 화면의 크기가 다른 탓에 여러가지 버전의 웹페이지를 만들어야 했다. 이러한 불편함을 해결하기 위해 반응형 웹페이지가 탄생했다.
출처 : 나무위키
이 때, 반응형이라고 부르기 위해서는 하나의 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와 같다)
언뜻보면 %와 다를 바 없어 보이지만 %는 부모 요소의 크기에 영향을 받는 반면 뷰포트를 사용하는 단위는 부모 요소의 크기에 영향을 받지 않기 때문에 주의해야한다
