[CSS] @viewport rule

 

 

[CSS] @viewport rule

 

지난 시간엔 meta viewport 태그를 배웠습니다

 

meta viewport (메타 뷰포트 태그) 사용법

 

 

head안에 사용하는 이런 것들 말이죠

 

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

 

잠깐 복습하면, 메타 뷰포트 태그(meta viewport)는 애플이 사파리 아이폰 브라우저를 위해 처음 개발했지만

이후 다른 브라우저들(오페라, 안드로이드, 페넥 브라우저)도 채택하여 사용하고 있습니다.

 

현재는 메타 뷰포트 태그가 널리 사용되고 있지만, 이 태그는 표준이 아니며, 

 

W3C에서 메타 뷰포트 태그의 기능들을

 

@viewport rule로 표준화하려는 시도를 하고 있습니다. (참조: CSS Device Adaptation )

 

 

@viewport rule는 현재 제안된 표준으로, 초안 단계입니다.

 

정식 표준이 되면 기존에 사용하는 메타 뷰포트 태그는 점차 폐지될 것으로 보입니다.

 

▶브라우저 지원: IE10과 Opera11에서만 지원하며 -ms-, -o- 업체별 접두어가 각각 필요함

 

브라우저 업체별 접두어(vendor prefix)

 

 

▶ @viewport rule 사용법

 

메타 뷰포트 태그는 html에 포함시켰다면 @viewport rule은 css 안에 포함시킵니다.

 

예:

<style type='text/css'>
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>

내용과 표현의 분리라는 측면에서, 뷰포트 설정은 표현에 관한 것이므로 css에 들어갈 필요가 있다는

 

것이죠.

 

이 페이지에서는 @viewport rule에 대한 대략적인 사용법을 살펴볼 텐데요.

 

 @viewport rule 은 정식 표준으로 발표된 것이 아니기에 내용이 변경될 수 있고,

 

제가 아직 이해하지 못한 측면도 있어서  보완해야 할 점이 많다는 점 주의 부탁드릴게요.

 

 

 

먼저, 메타 뷰포트 태그로 뷰포트를 설정할 때 가장 기본적으로 사용하는 코드는 다음과 같습니다.

 

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

 

*width=device-width    뷰포트 너비를 장치 너비로 설정

*initial-scale=1  초기 화면 배율(줌 레벨)을 1로 설정

 

@viewport rule로 옮기면 다음과 같습니다.

 

@viewport {
zoom: 1;
width: device-width;
}

 

다음 코드는 

 

<meta name="viewport" content="width=640" />

@viewport 로 하면 다음과 같습니다

 

@viewport {
    width: 640px;
}

 

 

아래 코드에서 user-scalable=1(사용자 크기 조절)은,

 

<meta name="viewport" content="width=480, initial-scale=2.0, user-scalable=1">

 

user-zoom: zoom으로 옮깁니다.

 

@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;}

 

 

최대 화면 배율은 max-zoom으로 옮깁니다. 

 

@viewport {
    width: 960px;
    zoom: 1;
    max-zoom: 3;
}

 

 

@viewport rule에서 유용한 속성 중 하나는 가로 모드와 세로 모드 설정을 고정하는 것입니다.

가로 모드는 landscape 세로 모드는 portrait 임

 

@viewport {
    orientation: landscape;
}

 

 

미디어 쿼리와 함께 사용할 수도 있습니다(예: 960px보다 큰 뷰포트는 960이하로)

 

@media screen and (min-width: 960px){
    @viewport {
        width: 960px;
    }
}

 

 

[주의]

CSS Device Adaptation 에서 2013년 발표된  편집자 초안은 device-width 키워드를 폐지합니다.

 

초안에 따르면  device-width 는 100vw로,  device-heigh 100vh로 옮깁니다.

 

아래 코드는

 

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

 

 

다음처럼 옮깁니다.

 

@viewport {
zoom: 1;
width: extend-to-zoom;
}

 

 

이러한 구문은 2013까지 제안된 것이 아닙니다.

 

그런데 IE10과 11은 이미 개발된 상태였던 터라, 마이크로소프트는 업체별 접두어를 만들었습니다(@-ms-viewport –)

 

 

@-ms-viewport-는  width, height 두 가지 속성만을 지원합니다.

 

하지만 %, px, 또는 vw. vh도 사용할 수 있음.

 

 

아래 코드는  윈도우 8 앱 윈도우에서 뷰포트를 올바르게 설정하기에 충분하지만,

 

@-ms-viewport {
width: 100%;
}

윈도우 폰은 100%을 장치에서 가능한 해상도의 100%로 번역합니다.

 

그래서 윈도우폰 IE10이 뷰포트를 올바로 표시하기 위해 아직까지는

 

다음처럼 옮길 수 있습니다.

 

@-ms-viewport {
width: device-width;
}

 

 

@viewport rule 에 들어갈  속성은 다음처럼 요약됩니다.

 

이미지 출처 :  CSS Device Adaptation

 

 

더 자세한 내용은 아래 링크 참조 부탁드려요

 

http://dev.w3.org/csswg/css-device-adapt/

 

http://www.webdesignerdepot.com/2013/08/how-to-build-standards-compliant-responsive-design-using-viewport/

 

Surveying the viewport

@-ms-viewport rule