메뉴 건너뛰기

프로그램언어

2017.04.14 20:46

viewport 정리

조회 수 3462 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

소개

스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다.
viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다.
viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다.

 

사용법

사용법은 의외로 간단합니다.
<meta name=’viewport” content=””/>를 head사이에 추가해 주면 됩니다.

 

content안에는 아래와 같은 내용이 들어갈 수 있습니다.

속성초기값특징
width<viewport-length>{1,2}독자적 속성에 따름.device-width라는 값을 넣는 것이 가능하다.
height<viewport-length>{1,2}독자적 속성에 따름device-height라는 값을 넣는 것이 가능하다.
user-scalableno 또는 yesyes사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의.
initial-scale1부터 101초기 확대값
minimum-scale0부터 10.25최소 확소값
initial-scale0부터 101.6최대 확대값

p.s) <viewport-length> = auto | device-width | device-height | <length> | <percentage>

 

위의 table을 활용해서 만든 간단한 viewport예제입니다.

<meta name="viewport" content="initial-scale=1, width=device-width"/> 

 

user-scalable속성은 되도록이면 yes를 유지하도록 하는 것이 좋습니다.
예전에 user-scalable속성을 아이폰에서 landscape모드가 되면 폰트가 커지는 문제로 no로 지정하는 경우가 많았는데,
-webkit-text-size-adjust라는 CSS 속성을 사용하면 폰트 사이즈를 고정 하는 것이 가능합니다.
확대 축소는 사용성에 크게 영향을 미칠 수 있기 때문에 되도록이면 막는 것을 지양하는 것이 좋습니다.
-webkit-text-size-adjust는 아래와 같이 사용할 수 있습니다. 

 

 

body { -webkit-text-size-adjust : none } /* 폰트의 사이즈를 늘어나지 않도록 한다 */
body { -webkit-text-size-adjust : auto } /* 기존과 똑같이 작동하도록 한다 */
body { -webkit-text-size-adjust : 120% } /* 폰트를 기존 사이즈와 동일하게 한다 */

 

css-device-adaption

css-device-adaption라는 명세서가 있습니다.
viewport는 ‘표현’의 영역에 가깝기 때문에, W3C CSS WG에서는 viewport를 css-device-adapt명세에서 정의해주고 있습니다.
링크는 아래와 같습니다.
http://www.w3.org/TR/css-device-adapt

 

그럼 meta의 값에 있던 viewport를 어떻게 하면 CSS에서 표현하는 것이 가능할까요.
일단 지원하는 속성에 대한 테이블부터 살펴보겠습니다.

 

css-device-adaption viewport 속성 테이블
PropertyValuesInitialApplies toInh.PercentagesMedia
width<viewport-length>{1,2}See individual propertiesN/AN/A독자 속성을 따름visual, continuous
height<viewport-length>{1,2}See individual propertiesN/AN/A독자 속성을 따름visual, continuous
min-width<viewport-length>autoN/AN/A초기 viewport의 width를 참조visual, continuous
max-width<viewport-length>autoN/AN/A초기 viewport의 width를 참조visual, continuous
min-height<viewport-length>autoN/AN/A초기 viewport의 height를 참조visual, continuous
max-height<viewport-length>autoN/AN/A초기 viewport의 height를 참조visual, continuous
zoomauto | <number> | <percentage>autoN/AN/A디바이스 별 확대량visual, continuous
user-zoomzoom | fixedzoomN/AN/AN/Avisual, continuous
min-zoomauto | <number> | <percentage>autoN/AN/A디바이스별 확대량visual, continuous
max-zoomauto | <number> | <percentage>autoN/AN/A디바이스별 확대량visual, continuous
orientationauto | portrait | landscapeautoN/AN/AN/Avisual, continuous
resolutionauto | device | <resolution>autoN/AN/AN/Avisual, continuous

 

위의 테이블은 현재 번역하지 않은 상태입니다.
대충 눈치 채신 분들도 있을 거라 생각합니다만, meta viewport에 있던 scale에 관련된 속성이 모두 사라졌습니다.
대신 그 속성들은 zoom이라는 속성이 대신 합니다.

그럼 위의 meta를 css로 수정해보겠습니다.

 

<meta name="viewport" content="initial-scale=1, width=device-width"/> 

 

@viewport {
    width : device-width;
}

 

 

initial-scale이 1인 경우 해당 값은 기본 값으로 반환되기 때문에 굳이 적어줄 필요가 없습니다.
외의 예제는 모두 명세에 올라와있으니 명세를 참고하시기 바랍니다.

 

마무리

스마트기기 상에서 웹페이지를 만들 때 당연히 쓰이고 있던 viewport지만 의외로 어려운 부분이 있습니다.
css-device-adaption 명세서를 살펴보며 조금 더 상세하게 이해할 수 있을 것이라 생각됩니다. 


List of Articles
번호 제목 날짜 조회 수
» viewport 정리 2017.04.14 3462
1 특수문자, 특수문자표, 특수문자 하트, 예쁜 특수문자 2016.12.06 43226
Board Pagination Prev 1 2 Next
/ 2

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved