반응형 레이아웃

@media를 사용하여 미디어 별로 스타일을 지정하는 것을 미디어쿼리라 한다.

Usage

Mobile First Method

/* 768px ~ */
@media only screen and (min-width : 768px) {

}
/* 992px ~ */
@media only screen and (min-width : 992px) {

}
/* 1200px ~ */
@media only screen and (min-width : 1200px) {

}

Non-Mobile First Method

/* ~ 1200px */
@media only screen and (max-width : 1200px) {

}
/* ~ 992px */
@media only screen and (max-width : 992px) {

}
/* ~ 768px */
@media only screen and (max-width : 768px) {

}

🔖 breakpoint - 변하는 기준점