css 반응형웹
HTML - viewport 속성
viewport 속성은 스마트폰이나 테블릿과 같은 모바일 환경을 위한 속성입니다. PC 에서 보여지는 화면이 모바일에서 보여지는 화면과 많이 다르고, 컨텐츠 전체가 작게 보인다거나 너무 커 보이면 보기 힘들어집니다.
이럴 때 meta 정보에 viewport 를 정의합니다.
형식은 다음과 같습니다.
이럴 때 meta 정보에 viewport 를 정의합니다.
<meta> 뷰포트
속 성 | 설 명 |
---|---|
width | 기기의 가로 크기. 기본값: 980px auto | <백분율> | device-width 중 하나. 값이 device-width 이면 기기의 가로 폭에 자동으로 맞춤. |
height | 기기의 세로 크기; 기본값: auto auto | <백분율> | device-height 중 하나. 값이 device-height 이면 기기의 세로 폭에 자동으로 맞춤. |
initial-scale | 처음 페이지에 접속했을 때의 화면 확대 배율. 기본값: 1 0 ~10 사이의 값. 값이 클수록 확대된 화면을 보여줌. |
user-scalable | 사용자에 의한 확대, 축소 허용 여부. 기본값: yes yes | no 중 하나. no 이면 사용자가 확대, 축소할 수 없음. |
minimum-scale | 축소율 최소값. 기본값: 0.25 0 ~10 사이의 값. 기기에서 zoom out 할 때 화면을 줄일 수 있는 배율. 값이 0.5이면 실제 페이지의 50%까지 더 축소 가능함. 1이면 축소가 안됨. |
maximum-scale | 확대율 최대값. 기본값: 1.6 0 ~ 10 사이의 값. 기기에서 zoom in 할 때 화면을 키울 수 있는 배율. 값이 1.5이면 실제 페이지의 1.5배까지 확대가 가능함. 1이면 확대가 안됨. |
형식은 다음과 같습니다.
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="viewport" content="width=600, height=900"/>
<meta name="viewport" content="width=device-width,
minimum-scale=0.8, maximum-scale=3, user-scalable=no"/>
CSS 뷰포트
스타일시트에서 사용할 수 있는 속성은 다음 표를 사용할 수 있으며, 이 방식은 웹표준으로 정의되어 있습니다.속 성 | 설 명 |
---|---|
width | 의 width 와 동일. <고정 값> | <최소값, 최대값> 중 하나의 형식 |
height | 의 height 와 동일. <고정 값> | <최소값, 최대값> 중 하나의 형식 |
zoom | initial-scale 과 동일. auto | <길이> | <백분율> 중 하나. |
user-zoom | user-scalable 과 동일 zoom | fixed 중 하나. fixed 이면 확대, 축소할 수 없음. |
min-zoom | minimum-scale 과 동일. |
max-zoom | maximum-scale 과 동일. |
orientation | 장치를 기울일 때 방향이 변경되는 장치의 경우 방향이 변경되는 것을 제어함.
|
<style>
@viewport {
width: 300px 960px;
height: device-height;
min-zoom: 1;
max-zoom: 1;
user-zoom: fixed;
}
</style>
<style>
@viewport {
width: 600px auto;
min-zoom: 0.25;
max-zoom: 5;
}
</style>
0 댓글