CSS 미디어쿼리 스플리팅

MediaQuery 플러그인

특정 미디어를 구분해 스타일링 하는 CSS 미디어쿼리 구문이 포함된 CSS 파일이, 모바일 또는 데스크톱 사용자 환경에서 모두 읽히는 것은 비 효율적입니다. 모바일 사용자는 모바일 스타일만, 데스크톱 사용자는 데스크톱 스타일만 적용되어야 하지 않을까요?

그렇게 생각한다면 MediaQueryPlugin 플러그인을 사용해보세요. 이 플러그인을 사용하면 작성된 CSS 코드에서 미디어쿼리를 추출해 비동기(Async) 로드 할 수 있도록 만들어 줍니다.

예를 들어 다음과 같은 스타일 코드를 작성했을 때 모바일 환경에서 미디어쿼리 구문은 필요하지 않습니다.

.sentence { color: #2e2d10; }

@media (min-width: 64em) {
  .sentence { color: #26cb7c; }
}

.context { font-size: 1.2rem; }

모바일 환경에 최적화 된 스타일 코드는 아래처럼 작성되어야 합니다.

.sentence { color: #2e2d10; }
.context { font-size: 1.2rem; }

반면 데스크톱 환경에서 접속했다면? 다음 코드를 비동기 방식으로 가져오면 효과적일 것입니다.

@media (min-width: 64em) {
  .sentence { color: #26cb7c; }
}

패키지 설치 & 로더 구성

media-query-plugin 패키지를 설치한 후, Webpack 구성 파일을 열어 로더, 플러그인 구성을 설정합니다.

플러그인에 의해 추출된 CSS를 가져 올 경우(동적 가져오기), Webpack은 동적으로 가져오기를 시도하고 파일이 없으면 오류를 발생시킵니다. 그러므로 Webpack을 실행하기 전에 해당 파일을 손수 만들어야 합니다. (빈 파일, 코드 자동 생성)

앞서 언급했듯이 생성할 파일 이름은 구성 파일에 등록된 패턴을 따라야 합니다.

CSSMQPacker 플러그인

CSSMQPackerPluginPostCSS를 사용하여 동일한 CSS 미디어쿼리(Media Query) 규칙을 하나로 압축하는 Webpack 플러그인입니다.

미디어 쿼리 병합을 테스트 할 간단한 스타일 코드를 준비합니다. 실습 파일(sass, scss) 파일을 테스트 해봅니다.

빌드 명령을 실행하여 출력한 결과를 살펴보면, 동일한 미디어쿼리 구문이 병합 되었음을 확인할 수 있습니다.

참고

Last updated