[CSS -11] 반응형 웹과 뷰포트 단위

반응형 웹과 뷰포트 단위

반응형 웹

• 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며 반응하는 웹문서 또는 이를 위해 사용하는 기법

뷰포트

• 현재 화면에 보여지고 있는 영역
• 기기 별로 뷰포트가 다르기 때문에 기기에 따라 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 발생
• 뷰포트 설정하기 
• <meta name='viewport" content='width=device-width, initial-scale=1.0" >
• 뷰포트 크기를 기반으로 값을 계산하여 크기 결정 단위

  단위	설명
  vm	뷰포트 너비의 100분의 1
  vh	뷰포트 높이의 100분의 1
  vmin	뷰포트 너비와 높이 중 작은 쪽의 100분의 1
  vmax	뷰포트 너 피 봐 높이 중 큰 쪽의 100분의 1

  → 작업이 까다로워질 위험도가 있으므로 꼭 필요할 때만 사용