Form 통신을 위한 프론트엔드 (1) : 이미지 슬라이드 기능의 viewport

사이드 프로젝트로 django form와 templates 사용하여

서비스의 포털 홈페이지를 제작하고있다.

정말 기초적인 html css 지식으로 

간단한 페이지 라우팅까지 제작하다가

포털 홈페이지인만큼 회사 소개 및 서비스 소개를 위해

보편적으로 쓰이고 있는 디자인인 이미지 슬라이드를 구현하기로 했다.

튜토리얼이 예제가 아닌 실제 회사들은 어떻게 쓰이고 있나 궁금해서 찾아봤더니

item 컨텐츠 이외에 viewport class를 만들어 사용하고 있었고

이는 내가 알지 못했던 개념이라 정리함.

viewport 개념

현재 보고있는 웹 브라우저의 화면 영역.

크롬의 경우,

브라우저 탭, 주소 표시줄, 북마크바 아래의 문서 내용에 해당하는 영역을 의미한다.

기기 > 브라우저 창 > 뷰 포트

웹 viewport의 종류

크기(layout viewport) >= 크기(visual viewport)

visual viewport는 layout viewport에서 

Visual viewport는 Layout viewport에서 현재 보이는 부분임.

환경에 따라 visual viewport의 크기가 동적으로 변화할 수 있다.

당장 웹 브라우저에서 개발자 도구를 키면 동적으로 뷰포트가 재구성된다.

뷰포트가 적용되지 않은 화면에서 개발자 도구를 키면

개발자도구 창 아래에 컨텐츠 영역이 묻히게 된다.

데스크탑 환경에서 대부분의 경우,

viewport = 브라우저의 viewport

사용자가 브라우저의 크기를 조절하며 viewport의 크기도 조절 가능.

보편적인 스마트폰 모바일 환경의 경우, 

문자 입력시 키보드가 올라오기 때문에

visual viewport는 유지되고 layout viewport는 변경되지 않는다. 

상하좌우, 더블탭, 줌인-줌아웃 상호작용을 통해

viewport의 배율을 변경할 수 있음.

이미지 슬라이딩 기능에서 viewport의 역할

• viewport를 사용함으로서 원 이미지의 필요한 부분만 렌더링한다.
  
  
• viewport 범위를 밖의 item을 hidden 처리함으로써
  active 상태의 slide만 보여줄 수 있다.

• 슬라이딩에 참여하는 item은 이미지 뿐 아니라
  <div>로 감싸진 container 등 무엇이든 될 수 있음.

반응형 웹 페이지에서 viewport의 역할

• 다양한 기기에서 웹페이지를 열람할 때,
  데스크톱과 다른 문서의 비율 및 배율 문제로 가독성이 떨어지는데
  viewport를 활용해 이를 해결할 수 있다.