CSS Academy · 강의

Autoprefixer 및 cssnano

Autoprefixer로 공급업체 접두사를 자동으로 추가하고 cssnano로 CSS 출력을 압축합니다.

Autoprefixer 및 cssnano은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Autoprefixer란 무엇입니까

Autoprefixer는 Can I Use의 데이터를 사용하여 지원해야 하는 브라우저를 기준으로 CSS 속성에 공급업체 접두사(-webkit-, -moz-, -ms-)를 자동으로 추가하는 PostCSS plugin입니다.

Autoprefixer 작동 방식

접두사 없이 표준 CSS를 작성합니다. Autoprefixer는 Browserslist 구성을 읽고, 빌드 과정에서 대상 브라우저에 필요한 접두사를 추가합니다.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist 구성

Autoprefixer는 Browserslist를 사용하여 대상 브라우저를 결정합니다. .browserslistrc 또는 package.json에 정의합니다.

# .browserslistrc
> 1%
last 2 versions
not dead

PostCSS에 Autoprefixer 추가

PostCSS 구성에 autoprefixer를 포함합니다.

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

cssnano란 무엇입니까

cssnano는 공백, 주석, 중복 선언을 제거하고 안전한 최적화를 적용하여 CSS를 축소하는 PostCSS plugin입니다. 그 결과 가능한 한 작은 CSS 파일이 생성됩니다.

cssnano 사전 설정

cssnano는 최적화 사전 설정을 제공합니다.

default: 안전한 축소(공백, 주석, 중복 제거)
advanced: 특이도를 변경할 수 있는 공격적인 최적화(주의해서 사용)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

cssnano가 수행하는 작업

cssnano의 최적화에는 다음이 포함됩니다.

공백과 주석 제거
색상을 가장 짧은 형식으로 변환(#ffffff → #fff)
동일한 규칙 병합
중복 속성 제거
0 값 단축(0px → 0)

구성에서 두 plugin 함께 사용하기

두 plugin을 모두 사용하는 프로덕션용 PostCSS 구성입니다.

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

축소와 함께 사용하는 소스 맵

개발 빌드에서 cssnano를 사용할 때는 항상 소스 맵을 생성합니다. 소스 맵은 축소된 출력을 소스 CSS에 다시 매핑하여 DevTools에서 디버깅할 수 있게 합니다.

cssnano의 대안

다른 CSS 축소 도구로는 clean-css, lightningcss(Rust 기반의 매우 빠른 도구), Vite의 내부 CSS 축소 도구(esbuild 사용)와 같은 빌드 도구 내장 축소 도구가 있습니다.

빠른 확인

Autoprefixer가 CSS에 추가하는 공급업체 접두사를 결정하는 것은 무엇입니까?

복습

Autoprefixer는 Browserslist의 대상 브라우저를 기준으로 공급업체 접두사를 자동으로 추가하므로 접두사를 직접 작성할 필요가 없습니다. cssnano는 공백과 주석을 제거하고 안전한 최적화를 적용하여 CSS를 축소합니다. 프로덕션 PostCSS 처리 파이프라인에서 두 도구를 함께 사용합니다. 최신 CSS에는 예전보다 접두사가 적게 필요하므로, 실제 대상 브라우저를 기준으로 확인해야 합니다.

자주 묻는 질문