HTML_반응형 레이아웃

▶️ 모던 웹에서 사용하는 단위 정리

    .box {
      width : 16px; /* 기본 px 단위 */
      width : 1.5rem; /* html태그 혹은 기본 폰트사이즈의 1.5배 */
      width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */
      width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
      width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
    }

가끔 typography 디자인할 때 글자사이즈를 px 단위로 기억하기 귀찮고 힘들 때 폰트사이즈로 rem을 사용한다.
하지만 요즘은 ctrl + 마우스휠업 이렇게 줌인을 해서 쓰는 사람이 대부분이라 페이지를 폰트사이즈에 가변적으로 반응하는 사이트 만들 때 빼고는 그다지 유용한 속성은 아니다.

---

▶️ 반응형 웹을 만들 때 head 태그에 들어가야할 내용

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

해당 내용이 들어있어야 모바일에서도 예쁜 레이아웃을 만들 수 있다.

---

▶️ media query 사용하는 법

  @media screen and (max-width : 1200px) { 
    .box { 
      font-size : 40px; 
    } 
  } 

  @media screen and (max-width : 768px) { 
    .box { 
      font-size : 30px; 
    } 
  }

CSS 파일 최하단에 사용하며, 현재 브라우저의 폭이 ~~px 이하일 경우에 안에 있는 class를 적용해주세요~" 라는 뜻이다. 여러개 원하는 만큼 사용가능하다. 중복이 발생하면 더 밑에 있는 스타일을 적용한다.

---