반응형 웹이란 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 혹은 기법을 뜻한다.
한 웹사이트를 pc에서 보는 것과 모바일에서 볼 때 구성과 디자인이 달라지는 것을 생각하면 된다.
브라우저의 크기가 달라지는 것은 뷰포트(viewport)를 기준으로 판단하게 된다.
뷰포트란 현재 화면에 보여지고 있는 영역을 의미하며 기기별로 다 다른 뷰포트에 맞춰 반응형 웹을 만들게 되는 것이다.
뷰포트 크기의 단위는 여러가지가 있다.
- vw: 뷰포트 너비의 100분의 1
- vh: 뷰포트 높이의 100분의 1
- vmin: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
- vmax: 뷰포트 너비와 높이 중 큰 쪽의 100분의 1
위의 단위를 사용하는 이유는 뷰포트 크기에 따라 웹 요소 크기의 상대적인 조절을 위해서이다.
뷰포트 화면이 커지면 그 안의 웹 요소도 잘 보이려면 같이 커져야 하고 그 반대의 경우도 마찬가지기 때문이다.
코드 예시
p{
margin: 0;
font-size: 10vh;
}위와 같이 일반적인 웹 요소에 사용하면 된다.
hyohyo