PostCSS
PostCSS는 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구이다.[4&#…
 현자의 돌, PostCSS 로고 | |
| 개발자 | Andrey Sitnik, Ben Briggs, Bogdan Chadkin[1] |
|---|---|
| 발표일 | 2013년 11월 4일 |
| 안정화 버전 | 8.5.32[2] 
/ 2026년 10월 26일 |
| 저장소 | github.com/postcss/postcss |
| 프로그래밍 언어 | 자바스크립트 |
| 운영 체제 | 크로스 플랫폼 |
| 언어 | 영어 |
| 종류 | CSS 개발 도구 |
| 라이선스 | MIT 허가서[3] |
| 상태 | 개발 중 |
| 웹사이트 | postcss.org |
PostCSS는 일상적인 CSS 동작을 자동화하기 위해 자바스크립트 기반 플러그인을 사용하는 소프트웨어 개발 도구이다.[4] 이 도구는 위키백과,[5][6] 페이스북,[7] 깃허브의 코드를 개발하기 위해 사용되어 왔다.[8][9] PostCSS는 npm 사용자들 간에 가장 선호되는 CSS 도구이다.[10] Evil Martians의 프론트엔드 작업에서 아이디어를 가져와 Andrey Sitnik에 의해 설계되었다.[11]
동작 원리
구조
Sass와 Less와 달리 PostCSS는 CSS 컴파일 틀 언어가 아닌 CSS 도구 개발을 위한 프레임워크이다.[12] 그러나 Sass와 LESS와 같은 틀 언어를 개발하기 위해 사용할 수 있다.[13]
PostCSS 코어는 다음으로 구성된다:[14]
- CSS 파서: CSS 코드의 줄을 위한 객체 트리(AST)를 생성한다.
- 클래스의 집합: 트리를 구성한다.
- CSS 생성기: 객체 트리를 위한 CSS 줄을 생성한다.
- 코드 맵 생성기: CSS 변경을 위해 사용된다.
유용한 모든 기능은 플러그인을 통해 사용할 수 있다. 이 플러그인들은 객체 트리와 함께 동작하는 작은 프로그램들이다. 코어가 CSS 문자열을 객체 트리로 변환한 뒤 플러그인은 이 트리를 분석하고 변경한다. 이 때 PostCSS 코어는 플러그인 변경 트리를 위한 새로운 CSS 문자열을 생성한다.
사용법
PostCSS와 플러그인 모두 자바스크립트로 작성되어 있으며 npm을 통해 배포된다.
PostCSS는 저급 자바스크립트 조작을 위한 API를 제공한다:
// Load the core and plugins from npm
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')
// Indicate the plugins to use
const processor = postcss([autoprefixer, precss])
// Indicate the CSS code and the names of the input/output file
processor.process('a {}', { from: './app.css', to: './app.build.css' })
// Use Promise API in case there are asynchronous plugins
.then(result => {
// Get the post-processed CSS code displayed
console.log(result.css)
// Get the warning messages displayed
for ( let message of result.warnings() ) {
console.warn(message.toString())
}
})
각주
- ↑ Who can release PostCSS to npm
- ↑ “Release 8.5.32”. 2026년 10월 26일. 2026년 10월 27일에 확인함.
- ↑ License in PostCSS repo
- ↑ First article about PostCSS in Tuts+ course
- ↑ Adding PostCSS commit in Wikipedia repo
- ↑ Wikimedia Stylelint Config
- ↑ Improving CSS quality at Facebook and beyond
- ↑ PostCSS settings GitHub build tool
- ↑ Primer Stylelint Config
- ↑ CSS preprocessors downloads from npm
- ↑ Evil Martians commit in PostCSS repo
- ↑ What is PostCSS discussion
- ↑ PostCSS Deep Dive: Preprocessing with “PreCSS”
- ↑ Andrey Sitnik - PostCSS: The Future After Sass and LESS
외부 링크
- PostCSS
- 공식 웹사이트 - (영어) postcss - 깃허브
- Plugin list
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.