블로그 프로필 이미지

SMALL




요즘 모바일웹 제작은 스마트폰의 사양이 많이 좋아졌기 때문에 일반 PC웹을 제작하는것과 별반 차이가 없다. 단지 모바일웹에서 아직 지원되지 않는 기능을 없애거나, 적용가능한 방법을 찾아서 제작하는 것 밖에는 다른점이 없다. 그리고 모바일웹제작시 꼭 필요한 설정이 있는데, 바로 viewport 이다. 


viewport 는 스마트폰의 웹화면영역을 확대/축소 해주는 기능을 한다. 물론 웹이 모바일크기에 맞게 제작되어야 한다. 보통 모바일웹을 제작할땐 레이아웃의 크기를 % 로 맞추기 때문에, viewport 를 설정하면 확대된 화면으로 볼 수가 있다. 일반적인 설정법은 아래와 같다.


 viewport 의 기본 사용 법


<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">


위의 소스코드는 html 에서 head 요소 안에 넣어야한다. meta 요소의 name 속성을 사용하면 문서의 정보를 나타낼 수 있다. 여기서는 name 속성값으로 viewport 를 설정하였다. 


아래는 viewport 설정시 content 속성에 지정 할 수 있는 값들의 정보이다. 값이 여러개일경우 ,(콤마) 로 분류해 주면된다.


 viewport 설정시 content 속성에 지정할 수 있는 값들의 정보


width  기기의 가로크기

  • 범위 : 200~10000px
  • device-width : 기기의 가로폭에 맞춤
  • 기본값 : 980px


height  기기의 세로크기

  • 범위 : 223~10000px
  • device-height : 기기의 세로폭에 맞춤
  • 기본값 : auto


initial-scale  처음 페이지를 읽을때 확대 배

  • 범위 : 0~10
  • 기본값 : 1.0


minimum-scale  축소 배율 값 

  • 범위 : 0~10
  • 기본값 : 0.25


maximum-scale  확대 배율 값

  • 범위 : 0~10
  • 기본값 : 1.0


user-scalable  사용자의 의한 확대/축소 설정 사용유무

  • 범위 : yes 또는 no
  • yes : 사용한다.
  • no : 사용하지 않는다.
  • 기본값 : yes




LIST