Html/CSS 반응형 레이아웃

모던 웹에서 사용하는 단위

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

반응형 웹에서 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; 
  } 
}

이런 방식을 breakpoint라고 한다.

1200px/992px/768px/576px
간편한 방법은 1200px, 768px로 디자인하는 것이다.