PostCSS를 사용하여 웹 디자인을 정리하는 방법

 body p {
  color: orange;
}

body div {
  color: blue;
}

body {
  display: grid;
} 

본 CSS는 웹 페이지의 여러 요소의 색조를 조절하여 그리드 배열로 구성합니다. 대부분의 웹 브라우저에는 명시된 규칙을 쉽게 이해할 수 있는 기존 CSS 문법이 탑재되어 있습니다. 그러나 최신 문법에 익숙해지기를 원한다면 PostCSS를 워크플로에 통합해야 합니다.

Node.js 프로젝트 생성 및 PostCSS 설치

PostCSS를 사용하면 최신 CSS를 대부분의 웹 브라우저와 호환되는 형식으로 변환할 수 있으며, 이를 흔히 트랜스파일레이션이라고 합니다. 이 기능은 실험적이거나 틈새 시장과 같이 지원되지 않는 CSS 기능을 코드에 사용하려는 개발자에게 특히 유용합니다.

PostCSS는 CSS 최소화, 색상 관리, 코드 분석 등 다양한 기능을 용이하게 하기 위해 설치할 수 있는 광범위한 JavaScript 플러그인 컬렉션을 자랑합니다.

PostCSS를 활용하려면 다음 단계를 수행하여 새로운 Node.js 프로젝트를 시작해야 합니다:

 npm init -y 

주어진 명령은 애플리케이션에 대해 미리 설정된 매개변수가 포함된 `package.json` 아카이브를 생성합니다.

다음 단계에 따라 PostCSS 및 PostCSS CLI 설치를 진행하세요: 1. 다음 명령어로 npm 또는 yarn 패키지 관리자를 실행하여 PostCSS를 설치합니다: ‘npm install postcss` 또는 `yarn add postcss`. 그러면 PostCSS에 필요한 파일이 다운로드되어 설치됩니다.

 npm i --save-dev postcss postcss-cli 

“–save-dev” 플래그를 사용하면 두 npm 패키지를 개발자 종속성으로 설치할 수 있으며, 이는 PostCSS 및 해당 플러그인을 활용하여 개발하는 동안 CSS 코드를 처리하기 위한 용도로만 사용됩니다.

명령줄 인터페이스를 통해 PostCSS를 활용하려면 패키지.json 파일로 이동하여 PostCSS로 트랜스파일링할 목적으로 간단한 build:css 명령을 설정해야 합니다.

 "scripts": {
  "build:css": "postcss src/styles.css --dir dest -w"
} 

앞서 언급한 프로세스는 트랜스파일러를 사용하여 “src/styles.css”에 저장된 소스 CSS 파일을 웹 브라우저와 호환되는 형식으로 변환하는 과정을 포함합니다. 이 작업은 최종 패키지의 필수 부분으로 “dest” 디렉토리에 배치되는 CSS 코드의 컴파일된 버전을 생성합니다. “npm run build:css” 명령은 “dest” 폴더를 생성하고 트랜스파일된 “styles.css” 파일로 이 폴더를 채웁니다.

CSS 코드를 HTML 문서에 올바르게 통합하려면 PostCSS가 처리하는 소스 폴더가 아닌 다른 디렉터리에서 CSS를 가져오는 것이 중요합니다. 이 시나리오에서는 “src” 폴더가 아닌 “dist” 폴더에서 CSS를 가져오는 것을 의미합니다.

브라우저에서 웹사이트를 열면 CSS가 여전히 액세스되고 있는 것을 확인할 수 있습니다. 소스 파일이 변경될 때마다 PostCSS는 코드를 다시 컴파일하여 업데이트된 변경 사항이 웹 페이지에 표시됩니다.

PostCSS 플러그인 사용

접두사, 린팅, 새로운 구문 지원 및 기타 수십 가지 기능을 PostCSS에 추가하기 위한 수백 개의 PostCSS 플러그인이 있습니다. PostCSS 플러그인을 설치한 후에는 PostCSS에 대한 모든 구성을 설정하는 데 사용할 수 있는 JavaScript 파일인 postcss.config.js 파일 내에서 플러그인을 활성화합니다.

다음 명령으로 cssnano PostCSS 플러그인을 설치합니다:

 npm i --save-dev cssnano 

이러한 종속성을 개발 종속성으로 포함하는 것도 중요하지만 배포 목적에는 필요하지 않다는 점에 유의해야 합니다. 따라서 웹사이트가 프로덕션에 푸시된 후에는 PostCSS 또는 해당 플러그인이 필요하지 않습니다.

최근에 설치된 CSSNano 플러그인을 활용하려면 postcss.config.js 파일 내에 다음 스니펫을 포함해야 합니다:

 const cssnano = require("cssnano")

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

인터페이스 내에서 구성 명령 실행을 복원하면 출력 캐스케이딩 스타일 시트(CSS)의 최적화가 시작되어 전체 크기가 기능을 유지하면서 사람이 이해할 수 있는 가장 작은 수준으로 축소됩니다.이 프로세스는 웹사이트를 공개 액세스에 적합한 환경에 배포하기 위한 준비 과정에서 수행됩니다.

중첩과 같은 최신 기능 사용

소스 코드 파일 “src/styles.css” 내의 원래 단락 블록이 삼중 해시 기호(###) 집합으로 둘러싸인 중첩 스타일 블록이라는 새로운 구문으로 대체되었습니다.

 body {
  & p {
    color: orange;
  }
} 

앞서 언급한 코드는 시작 코드에서 찾은 코드와 동일합니다. 그러나 이 반복은 새롭기 때문에 구문 오류가 발생할 수 있으며 많은 웹 브라우저에서 아직 지원하지 않습니다. 이 문제를 해결하려면 선호하는 웹 브라우저에서 이 구문과의 호환성을 활성화하는 postcss-preset-env 플러그인을 설치하면 됩니다.

현재로서는 주어진 문장이 기술적인 설명인 것 같아서 유창한 영어로 대체 표현을 제공할 수 없습니다.

현재 환경 유틸리티는 기본적으로 2단계 기능을 사용하며, 가까운 시일 내에 CSS에 통합될 예정입니다. 그러나 특정 요구 사항에 맞게 구성 파일에서 단계 설정을 변경할 수 있습니다.

플러그인을 설정하려면 다음 명령어를 실행하세요:

 npm i --save-dev postcss-preset-env 

PostCSS의 구성 파일, 즉 `postcss.config.js`에서 플러그인을 가져와서 사용할 수 있도록 등록하여 플러그인을 통합해야 합니다.

 const cssnano = require("cssnano")
const postcssPresetEnv = require("postcss-preset-env")

module.exports = {
  plugins: [
    cssnano({
      preset: 'defaults'
    }),
    postcssPresetEnv({ stage: 1})
  ]
} 

문제의 새로운 CSS 코드의 유용성이 적절히 입증될 때까지는 그 이상의 구현을 자제하는 것이 좋습니다. 이 특별한 사례에서는 해당 코드가 ‘중첩’과 같은 고급 기능의 활용과 관련된 수준의 복잡성을 수반한다고 가정해 보겠습니다. 앞서 언급한 빌드 명령을 실행하고 선호하는 웹 브라우저에서 결과 출력을 검사하면 앞서 언급한 코드의 수수께끼 같은 구문이 웹 개발의 확립된 표준을 준수하는 접근 가능한 형태의 CSS로 변환된 것을 확인할 수 있습니다.

프레임워크와 함께 PostCSS 사용

Vite, Snowpack, Parcel과 같은 최신 프레임워크에 PostCSS를 통합하는 것은 CSS 파일 관리의 편의성으로 인해 표준 관행이 되었습니다. 또한 이미 포함되어 있는지 여부에 관계없이 이러한 프레임워크 내에서 PostCSS 지원을 손쉽게 구현할 수 있습니다.

Vite를 비롯한 대다수의 번들러는 CommonJS가 아닌 ES6 모듈 시스템을 사용한다는 점을 염두에 두어야 합니다. 이를 우회하기 위해서는 postcssconfig.js 파일 내에서 require() 함수 대신 import 문을 사용해야 합니다.

 import cssnano from "cssnano"

// Configuration code goes here 

필요한 플러그인이 있으면 모든 구성 요소의 원활한 작동을 기대할 수 있습니다.

SaSS에 대해 자세히 알아보기

PostCSS는 현재 이용할 수 있는 수많은 옵션 중 하나인 CSS용 전처리기입니다. 이러한 대안 중에는 구문적으로 멋진 스타일 시트라고도 알려진 SaSS가 있으며, 인상적인 구문 기능을 자랑합니다.

추가로 저명한 전처리기에 능숙하면

에 유리한 것으로 밝혀졌습니다.