반응형
모바일 친화적이란?
사이트가 모파일 친화적이라는 것은 간단하게 사용자가 모바일로 웹 페이지를 이동할 때 편하게 이용할수 있음을 뜻합니다.
사이트의 데스크톱 버전을 휴대기기에서 보거나 사용한다면 콘텐츠를 읽기위해 두 손가락으로 화면을 모으거나 확대할 수 있고 이는 사용환경을 번거롭게 느끼게 하므로 사용자가 사이트를 떠날 확률이 높기 때문에 모바일 친화적으로 만드는 것이 중요합니다.
ViewPort??
정의
모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 합니다.
즉 화면 Display상의 표시 영역을 뜻합니다.
모바일 Safari는 viewport meta 태그를 도입해 웹 개발자들이 viewport 크기와 scale을 조정할 수 있게 했고, 웹 표준은 아니지만 이제 대부분 모바일 브라우저들도 이를 지원합니다.
데스크탑과 모바일의 viewport는 다른점이 있습니다.
데스크탑의 viewport는 브라우저 창(visible area)의 viewport와 같고, 사용자가 브라우저 창의 크기를 조정하면서 viewport의 크기도 조절할 수 있습니다.
즉 웹페이지가 viewport보다 크면 스크롤을 하여 나머지 영역을 볼 수 있습니다.
반면에 모바일 viewport는 창보다 크거나 작을 수 있고 상하 좌우로 움직이거나, 더블탭, 줌인, 줌아웃 을 통해 viewport의 배율을 변경 할 수 있습니다. (크기가 아닙니다.)
Viewport가 필요한 이유?
모바일 브라우저에서 viewport가 중요한 이유는 모바일 브라우저가 웹 페이지를 브라우징 하는 특징에 있습니다.
현재 스마트폰 브라우저는 모바일 환경에서도 데스크탑 환경처럼 웹 페이지 전체를 자연스럽게 브라우징 할 수 있도록 풀 브라우징을 지원합니다.
이 때문에 데스크탑에 기반하여 설계된 웹페이지를 모바일에서 보면 기본 viewport가 980px이고 이로 인해 내용이 작게 보입니다.
(width가 980 이상인 컨텐츠가 있다면 좌우로 스크롤됨)
간단히 말하면 작은 화면의 모바일 단말기에 웹 페이지 모두를 표시하려고 하니 전체적인 페이지의 배율이 조정되는 것입니다.
결과적으로 모바일 화면에 맞도록 전체적인 페이지가 축소되어 보이지만 페이지의 컨텐츠는 배율 축소가 발생해 가독성이 떨어지게 됩니다.
바로 이때 viewport를 설정하면 다양한 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있습니다.
사용방법
head 태그 사이에 다음을 코드로 입력합니다.
기본적으로 데스크탑 브라우저에서는 viewport 메타 태그를 사용하지 않기 때문에 무시됩니다.
1. viewport의 속성
- width: viewport의 가로 크기를 조정합니다. 일반적인 숫자값이 들어 갈 수도 있고, device-width와 같은 특정한 값을 사용할 수도 있습니다. device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다.
- height : viewport의 세로 크기를 조정합니다.
- initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성합니다.
- minimum-scale : viewport의 최소 배율값, 기본값은 0.25입니다.
- maximum-scale : viewport의 최대 배율값, 기본값은 1.6입니다.
- user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes입니다.
2. 정의된 속성 값
- device-width : 기기의 가로 넓이 픽셀 값 (웹페이지의 가로(width) 값은 기기가 사용하는 가로 넓이 값(device-width) 만큼 적용하여 사용하라는 의미)
- device-height : 기기의 세로 높이 픽셀 값
3. 주의사항
- content 보다 작은 viewport width/height를 설정하면 무시됩니다.
- viewport에서 initial-scale을 설정하지 않고 width/height를 설정하면 전체 화면이 표시됩니다.
- viewport에서 initial-scale도 width/height를 설정하지 않으면 width=980px/height=1091px 이 됩니다.
- 표시 영역과 contents의 크기가 일치하지 않을때 initial-scale을 설정하면 의도하지 않은 layout이 발생합니다.
#적용
# 반응형 웹 디자인
패블릿, 태블릿, 데스크탑, 게임콘솔, 티비, 웨어러블 기기 등등 정말 다양한 화면 크기가 있습니다.
화면 크기는 언제나 변하기 때문에 사이트는 어떤 화면 크기에도 언제나 적응 가능하도록 설계되어야 합니다.
미디어 쿼리(@media)는 장치에 따라 각기 다른 레이아웃을 만들거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹 페이지를 작성할 때 사용합니다.
부트스트랩은 CSS 미디어 쿼리를 사용해 반응형으로 휴대폰에서부터 태블릿, 데스크탑까지 적용되는 사이트를 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크입니다.
저도 여러번 간단하게 사용했던 적이 있습니다.
적절한 렌더링과 확대/축소를 위해 부트스트랩 시작 페이지에서는 다음 코드를 <head>에 추가하라고 명시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
지금까지는 이유를 알지 못하고 추가했던 메타 태그였는데 이제는 그 이유를 알 수 있습니다.
width=device-width를 추가함으로써 전체적인 웹 페이지의 width가 설정되고 @media 에서 선언된 width의 범위에 따라 css가 적용되어 결과적으로 반응형 웹을 만들 수 있는것 입니다.
반응형
'웹 프론트 > 웹개발 용어 및 개념 정리' 카테고리의 다른 글
| HTTP 와 TCP의 Keep-Alive (0) | 2018.09.06 |
|---|---|
| Key-Frame 애니메이션이란? (0) | 2018.08.09 |
| SVG란? (0) | 2018.08.09 |
| 쿠키란? Cookie 개념 (0) | 2018.08.06 |
| 웹에서 forward와 redirect의 차이 (0) | 2018.08.02 |