Viewport(반응형 웹)

조아라·2022년 12월 19일
0

CSS

목록 보기
1/1
post-thumbnail

이제 웹 브라우저는 단순 PC에서 벗어나 모바일, 태블릿 등 여러 디스플레이에서 보여줘야 하는 시대입니다. 웹 페이지를 개발할 때 데스크탑 뿐만이 아니라 웹 컨텐츠를 보여줄 수 있는 모든 기기에서 동등한 서비스를 할 줄 알아야 합니다.

또한, 더 이상 데스크탑에서 고정된 크기로 보여줘야 하는 것이 아니라 여러 디스플레이에서 똑같은 콘텐츠를 보여줘야 하는 데 불편함이 없어야 합니다.

그렇다고 여러 디스플레이의 웹을 고려해서 프론트를 일일히 작성할 수는 없을 노릇입니다.

그래서 나온 것이 반응형 웹 디자인(Responsive Web Design) 입니다.

반응형 웹 디자인은 디바이스 종류에 따라 웹페이지의 크기가 자동으로 재조정되는 것을 말합니다.

가장 큰 장점은 디스플레이의 크기에 맞는 가장 읽기 쉬운 레이아웃의 페이지를 여러 버전의 사이트를 만들지 않고 사용자에게 제공할 수 있다는 점입니다.

<meta name="viewport" content="width=device-width" />

HTML5 에서 소개된 meta 태그의 viewport를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트 크기를 조절 할 수 있습니다.

meta태그는 웹페이지의 부가 내용을 전달하는 태그이며 head 영역에 들어갑니다. 여기서 viewport는 브라우저 화면을 나타냅니다.

content 속성은 브라우저 창의 폭을 디스플레이 너비와 일치시킵니다.

저 두 속성을 이용하게 되면 브라우저 화면을 축소하는 대신 브라우저 화면의 너비를 디스플레이의 실제 너비와 일치시킵니다.

  • width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다.

  • initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다.

반응형 웹을 만들기 위해서는 뷰포트 메타 태그를 사용하는 것부터가 시작입니다.

0개의 댓글