13.9.1 기준점 설정하기
CSS에서 반응형 코드를 적용하려면 미디어 쿼리(media query)를 사용해야 합니다. 미디어 쿼리는 해상도를 기준으로 서로 다른 CSS를 적용할 때 사용합니다. 따라서 기준이 되는 해상도를 먼저 정해야 합니다. 최종 프로젝트는 container 클래스에 1140px 크기를 지정했으므로 기준 해상도를 1140px부터 시작합니다.
13/end/css/media.css - 기준 해상도 잡기
/* 화면 너비가 1140px 이하일 때 */
@media screen and (max-width:1140px){}
/* 화면 너비가 992px 이하일 때 */
@media screen and (max-width:992px){}
/* 화면 너비가 768px 이하일 때 */
@media screen and (max-width:768px){}
/* 화면 너비가 576px 이하일 때 */
@media screen and (max-width:576px){}
/* 화면 너비가 400px 이하일 때 */
@media screen and (max-width:400px){}
최종 프로젝트에서는 이와 같이 기준 해상도를 설정합니다. 기준 해상도는 공식이나 정해져 있는 너비가 따로 없기 때문에 진행하는 프로젝트 디자인에 맞춰 설정하면 됩니다.