[HTML/CSS] 중급모듈(2)

반응형 레이아웃 만들기

---

• 단위
  • vw(viewport width): 현재 브라우저 폭에 비례
  • vh
  • rem: 기본 폰트 사이즈(16px)에 비례
  • em: 내(해당 요소) 폰트 사이즈에 비례
• 반응형 레이아웃
  • 작은 화면에서 font-size를 줄이기
  • media query 문법 사용. 여러 개 사용 가능. 큰 사이즈 ⟶ 작은 사이즈 순으로 작성
  • media query 문법은 항상 파일 맨 밑에 있어야 기능

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

  • breakpoint는 1200px(태블릿), 992px, 768px(모바일), 576px 등

반응형 레이아웃 숙제 : 가로정렬 레이아웃

---