티스토리 뷰

[CSS] 반응형 웹 - 뷰 포트 (View Port)

JoonPyo-Hong 2021. 7. 26. 15:57
반응형

반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿  PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다.

 

뷰 포트(View Port)는 작은 화면의 스마트폰에서 PC의 웹 페이지 표시할 때 전체적인 페이지의 배율을 조정해준다.

 

반응형 웹에서 페이지의 배율이 아닌 CSS 스타일을 변경하고 싶다면 - 미디어 쿼리 (Media Query)

<head>태그와 </head>태그 사이에  아래의<meta>태그를 추가한다.

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

뷰 포트 설정

  • width=device-width : 페이지의 가로 길이를 기기의 스크린 가로 길이로 설정한다.
  • height=device-height : 페이지의 세로 길이를 기기의 스크린 세로 길이로 설정한다.
  • initial-scale : 페이지 로드 시 줌 레벨을 조정한다.
  • minimum-scale : 줄일 수 있는 최소 크기를 지정한다. (기본값 = 0.25)
  • maximum-scale : 늘릴 수 있는 최대 크기를 지정한다. (기본값 = 1.6)
  • user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정한다. (기본값 = yes)



 

 

반응형
저작자표시

'[CSS]' 카테고리의 다른 글

[CSS] 투명도 설정 하는법 - opacity와 rgba 차이점  (10) 2021.08.10
[CSS] 반응형 웹 미디어 쿼리 (Media Query)  (0) 2021.07.26
댓글
반응형