반응형 웹사이트 정리

웹사이트는 크게 적응형과 반응형으로 나눌 수 있습니다.

 

*적응형 웹사이트란?: 

두 개의 웹사이트 주소로 관리. 사용자에게 모바일, PC의 최적의 화면을 각각 제공함.

 

예) 네이버--> 사용자에게 PC와 모바일 서비스를 각각 달리하여 보여줍니다. 모바일: m.naver.com / PC: www.naver.com 

 

 

*반응형 웹사이트란?: 

하나의 웹사이트 소스로 관리. 화면의 브라우저 크기에 맞게 변경되는 최적화된 UI를 제공.

 

 

반응형 웹사이트를 만들기 위한 것들

 

1. meta 태그 & viewport

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

 

위의 메타 태그가 있어야 반응형 웹을 만들 준비가 된다.

 

- viewport : 웹페이지에서 사용자의 보이는 영역(viewport)을 말합니다.

- width= : 뷰포트의 가로크기, device-width: 기기의 스크린 너비에 맞추라는 뜻입니다.

*height=device-height 값으로 세로크기의 비율도 지정도 가능합니다.

 

- initial-scale: 페이지에 처음 접속했을 때 보여지 확대 배율입니다. 1.0으로 정했다면 CSS의 픽셀과 화면에 보일 픽셀이 1:1을 이룹니다, 이 값이 1보다 작다면 페이지는 축소되어 보이고, 1보다 크다면 확대되어 보입니다.

 

그 외에 뷰포트의 메타태그 종류에는,

 

- user-scalable: 사용자의 축소/ 확대 여부. 초기값은 yes이고 no로 확대 축소를 제한할 수 있습니다.

no값으로 설정할 경우, input영역 선택 시 확대되는 것을 막고, 사용자가 화면을 확대, 축소하는 것을 방지합니다.

- minimum-scale: 최소 줌 레벨 지정 (0-10)/ 기본값 1.6

- maximum-scale: 최대 줌 레벨지정 (0-10)/ 기본값: 0.25

 

2. vw / vh 단위의 사용. (IE9부터 지원하는 속성임.)

 

보통 픽셀을 많이 사용하는데, 픽셀은 고정값이기 때문에 화면의 크기에 대한 변경에 유연하게 대응하기가 어렵다.

%를 사용한다면 좀 더 유연하게 대응할 수 있다.

 

Viewport Width/ Viewport Height 뷰포트(보이는 영역)를 기준으로 한 단위.

보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위.

 

1vw= 뷰포트 너비의 1%.

800px 너비에서 뷰포트 1%는 8px

 

좀 더 좋은 코드로 작성하고 싶다면?  -> calc() CSS3속성과 함께 사용하기.

예를 들어 헤더 높이가 75px이고, 콘텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh-75px);을 지정해 주면됩니다. 

 

vh 와 %의 다른점?

'%' -> 해당 속성 값을 부여한 바로 위 부모 요소를 기준으로 계산합니다.

'vh' -> 전체 영역을 기준으로 계산. 뷰포트를 기준으로 한 단위임.

예) 뷰포트 놓이를 꽉 채우는 섹션이 있는 페이지를 만든다고 가정해보면, height: 100%를 지정하려면 부모에게도 height:100%를 지정해야 상속받아서 쓸 수 있습니다. 또한 가장 최상위인 body,html에도 height:100% 속성을 지정해야 합니다.

 

3. vmin / vmax 의 사용법.

 

vmin : vw와 vh 중 더 작은 것을 적용합니다.

vmax : vw와 vh 중 더 큰 것을 적용합니다.

 

예) 1900px*1000px의 뷰포트를 가정하면, 1vw=19px, 1vh=10px이 적용됩니다.

1vmin(최소)=1vh=10px이 됩니다. 10px < 19px이기 때문!

 

Q. 왜 vmin/vmax를 사용할까?

이것들을 사용하여 '언제든 화면에 보이는 요소'와 '언제든 화면을 꽉 채우는 요소'를 쉽게 만들 수 있기 때문!