반응형 페이지 만들기 - 뷰포트(Viewport)와 미디어쿼리(Media Query)

반응형 페이지를 제작하려면 뷰포트(Viewport)와 미디어쿼리(Media Query)가 필요합니다.
뷰포트 설정을 통해 웹 페이지가 모바일 기기의 화면에 맞게 조정되도록 할 수 있습니다. 뷰포트는 pc 화면 비율을 모바일 비율로 바꾸어 주고
미디어쿼리는 화면 크기에 따라 CSS를 설정합니다.

---

1. 뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width :

이 설정은 뷰포트의 너비를 기기의 화면 너비로 설정합니다.
즉, 기기의 실제 화면 너비에 맞춰 웹 페이지의 너비를 조정합니다.
이것은 모바일 기기에서 웹 페이지가 너비를 제대로 표시하고 사용자가 좌우로 스크롤할 필요가 없도록 도와줍니다.

initial-scale=1.0:

페이지가 처음 로드될 때 초기 확대/축소 비율을 1.0으로 설정합니다.
즉, 초기 화면 배율을 100%로 유지합니다.
이것은 모바일 기기에서 웹 페이지가 로드될 때 확대되거나 축소되지 않고 원래 크기로 보여지도록 합니다.

뷰포트 설정을 통해 모바일 기기의 화면 크기에 따라 웹 페이지가 올바르게 조정되고 확대/축소가 잘 되도록 합니다.

---

2. 미디어쿼리 설정

• 문법
  @media(생략불가)
  [only/not](생략가능)
  [media type](생략가능)
  [and/ ,](생략가능)
  (조건문){
  실행문
  }(생략불가)
  
  예시1) 화면 너비가 800px 이하이고 screen 미디어 타입에만 적용되는 미디어쿼리 예문을 생략 가능한 부분을 모두 생략하지 않고 작성
  @media only screen and (max-width: 800px) {
      /* 실행문 */
  }
  
  예시2) 화면 너비가 800px 이하이고 screen 미디어 타입에만 적용되는 미디어쿼리 예문을 생략 가능한 부분을 모두 생략하고 작성
  @media (max-width: 800px) {
      /* 실행문 */
  }
  
  
• 분기점 추천
  /* pc */
  @media(max-width:1290px) {}
  
  /* 노트북과 태블릿 가로 */
  @media(max-width:1024px) {}
  
  /* 테블릿 가로 */
  @media(max-width:960px) {}
  
  /* 모바일 가로 & 태블릿 세로 */
  @media(max-width:768px) {}
  
  /* 모바일 */
  @media(max-width:480px) {}
  
  /* 모바일 */
  @media(max-width:320px) {}