[HTML/CSS] 반응형 레이아웃 만들기

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

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

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

<!-- 처음 로드될 때 배율 1.0, 사용자가 확대/축소 가능 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 사용자가 확대/축소 불가능 -->
<meta name="viewport" content="width=device-width, user-scalable=no">

💫 media query 사용하는 법

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

• CSS 파일 최하단에 사용
  → "현재 브라우저의 폭이 1200px 이하일 경우에 안에 있는 class를 적용"

💫 권장 Breakpoint

breakpoint : media query 문법 max-width 안에 넣는 브라우저 폭
- 많은 사람들이 사용하는 breakpoint : 1200px / 992px / 768px / 576px

💫 오늘의 숙제 : 반응형 레이아웃 만들기

• 1x : 모바일
• 0.5x : 태블릿
• 0.25x: 컴퓨터

See the Pen
반응형 레이아웃 숙제 by dozzs (@dozzs)
on CodePen.