티스토리 뷰

코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

반응형 웹 - 모바일 기기와 웹 디자인, 뷰포트

더불어숲2 2020. 9. 28. 11:03
반응형

반응형 웹 - 모바일 기기와 웹 디자인

반응형 웹 디자인

  • 노트북이나 데스트톱 PC보다 스마트폰에서 웹에 접속하는 경우가 많아지면서 데스크톱 PC용 브라우저를 기본으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시되는 문제가 생겼습니다.
  • 따라서 모바일 기기용 사이트를 따로 제작하는 포털 사이트나 쇼핑몰들이 생겼지만 스마트폰이나 태블릿, 스마트 TV등 브라우저 환경이 다양해지는데 그때마다 웹 사이트를 별도로 제작하는 것은 쉬운 일이 아닙니다.
  • 이런 필요에 의해 반응형 웹 디자인(responsive web design)이 개발되어 화면 요소들을 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현하게 되었습니다.
  • 여러 기기에 맞는 사이트를 별도로 제작하지 않고 화면 크기에 '반응'해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는 것이 바로 반응형 웹 디자인입니다.

 

반응형 웹의 장●단점

1. 모든 스마트 기기에서 접속 가능

  • 반응형 웹에서 사용하는 기술들은 W3C에서 웹 표준으로 지정한 HTML과 CSS로 이루어져 있기 때문에 스마트 위치 같은 웨어러블 기기뿐만 아니라 스마트 TV나 게임 콘솔 등 웹 표준을 지원하는 어떤 스마트 기기에서든 접속할 수 있습니다.

 

2. 가로 모드에 맞추어 레이아웃 변경 가능

  • 스마트폰이나 태블릿에서 가로 모드로 돌렸을 때 너비 값이 커지면 그에 맞추어 레이아웃을 바꾸어 보여줄 수도 있습니다. 이것은 CSS에서 조절하며 화면 크기에 맞추어 자유롭게 반응할 수 있습니다.

 

3. 사이트 유지●관리 용이

  • 사이트가 하나뿐이기 때문에 유지, 관리가 쉽습니다. 특히 반응형 웹에 사용되는 코드들은 서버쪽 코드가 없고 HTML과 CSS로만 되어 있어 복잡하지 않습니다.
  • 하지만 반응형 웹사이를 제작하기 위한 기술 중 미디어 쿼리와 플렉스 박스는 최신 웹 표준인 CSS3의 일부이기 때문에 최신 모던 브라우저에서만 지원됩니다. 따라서 하위 버전의 브라우저 사용자까지 고려할 수 없다는 단점도 있습니다.

 

모바일 기기를 위한 기본 다지기, 뷰포트

  • PC 화면에서 보이는 내용을 모바일 기기에서 그대로 볼 수 없는 이유는 PC화면과 모바일 화면의 픽셀 표현 방법이 다르기 때문인데 뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있습니다.
  • 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.
  • 모바일 기기에 적합한 사이트를 제작했더라도 정작 스마트폰 화면에서 내용을 확인하면 페이지의 글자들이 매우 작게 표시되는 것을 보게 됩니다. 이것은 웹키드(webkit)기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px이기 때문입니다. 다시 말해 웹 페이지 너비를 스마트폰용인 320px로 맞추어 웹 사이트를 제작하더라도 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문에 웹 페이지 너비를 무조건 980px로 표시하려고 합니다. 결국 스마트폰용으로 제작한 웹 페이지의 내용들은 위도와 달리 작은 글씨와 그림으로 표시되게 됩니다.

 

뷰포트 지정하기

  • 뷰포트는 <meta>태그를 이용해 <head>태그와 </head>태그 사이에 작성합니다.

 

기본형 : <meta name="viewport" content="<속성1=값>, <속성2=값2>, ...">

 

content안에서 사용하는 뷰포트 속성

속 성 설 명 사용 가능한 값 기본 값
width 뷰포트 너비 device-width 또는 크기 브라우저 기본 값
height 부포트 높이 device-height 또는 크기 브라우저 기본 값
user-scalable 확대/축소 가능 여부 yes 또는 no yes
initial-scale 초기 확대/축소 값 1~10 1
minimum-scale 최소 확대/축소 값 0~10 0.25
maximum-scale 최대 확대/축소 값 0~10 1.6

 

  • 웹 페이지 뷰포트의 너비를 스마트폰 화면 너비에 맞추고 초기 화면 배율을 1로 지정한 예
  • 가장 많이 사용하는 형태입니다.
사용 예)
<meta name="viewport" content="width=device-width, initial-scale=1">

 

 

참고 : HTML5 + CSS3 웹 표준의 정섟

반응형

UP NEXT : 코딩 배우기 - 코딩 첫걸음 - 코딩 기초/HTML

댓글
© 2019 Eun's