미디어쿼리 min-width와 max-width

미디어쿼리란

지정한 규칙이 장치 환경과 일치하는 경우만 CSS를 적용하게 할 수 있는 기능

예제 소스 및 설명

브라우저의 뷰포트 너비가 868px 이하인 경우에만 스타일 적용

@media (max-width: 868px) {

}

브라우저의 뷰포트 너비가 868px 이상인 경우에만 스타일 적용

@media (min-width: 868px) {

}

참고

https://developer.mozilla.org/ko/docs/Web/CSS/@media
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C