반응형 레이아웃 만들기

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

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

예전에는 rem 단위를 사용하긴 했다. 모든 div의 사이즈, margin, padding, button 사이즈 등등 기본 사이즈의 비례하여 조작하고 싶을 때는 rem을 사용했다. 하지만 요즘은 ctrl + 줌인을 이용하기에 유용한 속성은 아니다.

가끔 typograph에서 종종 사용하긴 한다.

반응형 웹을 만들기 위해 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 파일 최하단에 사용한다. 저 말은 브라우저가 1200px 이하일 경우에 font-size를 40px로 또, 브라우저의 사이즈가 768px 이하라면 font-size를 30px로 보여달라는 뜻이다.

권장 break point

breakpoint는 임의로 만들 수 있지만 대게 일반적으로 사용하는 규격에 맞춰 사용하는 것이 용이하다. 1200px, 992px, 768px, 576px.

하지만 4개 다 쓰면 스타일을 관리하기 불편하기에 1200px, 768px 두개만 골라서 1200px 이하는 테블릿, 768px 이하는 모바일로 디자인하자.