[html, css] 9. 반응형 레이아웃

모던 웹에서 사용하는 단위

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

 

media query 사용법

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

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

주로 css 파일 최하단에 작성한다.

위 코드는 현재 브라우저 폭이 1200px 이하일 경우 font-size: 40px을 적용하고, 768px 이하일 경우 font-size: 30px을 적용한다는 뜻이다.

참고로 class 밑에 font-size 속성을 하나 더 추가해주는 것인데, 스타일 중복이 발생하면 더 밑에 있는 스타일을 적용한다.

 

권장 Breakpoint

media query 문법 max-width 안에 넣는 브라우저 폭을 breakpoint라고 한다.

breakpoint는 원하는 만큼 여러개 넣을 수 있는데, 필요할 때 마다 사이즈를 임의로 넣는 것 보단 많은 사람들이 사용하는 breakpoint를 사용하는 것을 권장한다. 

 

주로 사용하는 breakpoint로는 1200px, 992px, 768px, 576px이 있다.