Young Blog

| CSS

PostCSS 안내서

원문 바로가기: An Introduction To PostCSS by Drew Minns

다른 개발 언어와 마찬가지로 CSS 역시 순환적인 발전 과정을 거칩니다. 매번 주요 배포 때마다 새로운 기능과 구문이 등장합니다. CSS 레벨 3에서 새로 배포된 기능 중 인터렉션과 관련된 것들은 예전에는 자바스크립트만을 사용하여 구현할 수 있었습니다. 하루가 멀다하고 새로운 툴이 등장하고, 그 덕분에 웹 페이지 스타일링 작업은 점점 더 쉬워지고 있습니다.

PostCSS는 비교적 새로 등장한 스타일 툴 중 하나입니다. PostCSS의 목표는 커스텀 플러그인과 툴로 이루어진 개발 환경을 도입하여 CSS 개발과정에 혁신을 일으키는 것입니다. PostCSS의 원칙은 Sass, LESS 같은 전처리기의 원칙과 마찬가지로 확장 구문 및 기능을 브라우저 친화적이고 현대적인 CSS로 변환하는 것입니다.

어떻게 하는지 궁금하다구요? 자바스크립트를 사용하는 것입니다.

자바스크립트는 다른 어떤 처리기보다 스타일 변환을 빠르게 할 수 있습니다. Gulp와 Grunt같은 태스크러너 도구를 사용하면 스타일 변환이 빌드 과정에서 이루어지는데, 이는 Sass와 Less의 컴파일 과정과 비슷합니다. React나 AngularJS와 같은 라이브러리 및 프레임워크를 사용한다면 CSS를 자바스크립트 코드에 직접 써 넣을 수 있으므로, 이를 통해 자바스크립트로 스타일 변환을 할 수 있는 길이 뚫리는 것입니다.

PostCSS의 역사

Autoprefixer를 개발한 안드레이(Andrey Sitnik)는 자바스크립트를 CSS 처리에 사용하고자 PostCSS를 만들었습니다. PostCS만 놓고 보자면 그 자체로는 하나의 API에 지나지 않으나, 이미 개발되어 있는 수많은 플러그인과 조합한다면 여러가지 강력한 기능을 사용할 수 있습니다. 디버깅을 손쉽게 할 수 있도록 소스맵을 생성하거나, 내장된 추상 구문 트리(abstract syntax tree, AST)로 코드가 어디서 어떤식으로 변환되는지 알아 볼 수 있습니다.

PostCSS는 Node.js 프레임워크를 사용하기 때문에, 사용자의 필요에 따라 손쉽게 기존 툴의 내부 코드를 수정하는 커스터마이징 과정을 거친 후 사용할 수도 있습니다. 이와는 대조적으로 Sass와 LESS같은 툴 시스템은 사용자들이 컴파일러 작성 시점의 메소드만을 사용하도록 제한이 걸려 있습니다.

PostCSS의 API 덕분에 사용자가 필요로 한다면 어떤 기능이든 플러그인이나 툴로 만들 수 있습니다. 모듈을 바탕으로 디자인된, 중립적인 성격을 띈 툴이기 때문에 프로젝트 요구사항에 따라 필요한 기능에 초점을 맞추어 작업할 수 있습니다. PostCSS는 어떤 특정 언어 형식에 종속되어 있지 않으며, 필요하다면 Sass와 LESS같은 전처리기의 구문 스타일을 사용할 수 있습니다.

모듈 단위 사고방식의 장점

대부분의 개발자들이 프로젝트를 맨땅에서 시작하는 경우는 드뭅니다. 많은 사람들이 변수, 믹스인, 함수 등이 이미 들어있는 Sass 보일러플레이트로 프로젝트를 시작합니다. 스타일 시트를 함수, 믹스인, 그리드 시스템에 따라 여러 파일로 분리하고 개발을 좀 더 손쉽게 진행할 수 있는 유용한 코드를 담은 파일도 따로 마련해 놓습니다. 이런 작업을 다 하고 나면 보통 10개 이상의 스타일 시트 파일이 생성되어 있을 것입니다.

Sass와 LESS 코드를 모아놓은 라이브러리를 관리하는 작업을 하다보면 서서히 힘에 부치는 것을 느끼기가 십상이고, 프로젝트의 규모 또한 불어난 채로 남을 수 있습니다. 많은 프로젝트에서 “만약을 대비한” 코드라는 명목하에 작서만 해놓고 사용하지 않는 믹스인이나 함수를 흔히 발견할 수 있습니다. PostCSS를 사용한다면 모듈을 손쉽게 설치가 가능한 플러그인의 형태로 만들 수 있어서, 프로젝트마다 현재의 요구사항에 따라 모듈을 바꾸어 끼면서 개발 과정을 유동적으로 변경할 수 있습니다.

PostCSS를 사용하면 개발이 진행되고 있는 스타일 시트에서 함수, 유틸리티, 믹스인을 구성하는 코드만을 따로 빼내어 플러그인으로 만들 수 있습니다. 이제는 개별 프로젝트마다 태스크 러너에 플러그인을 다르게 포함시켜서 필요한 툴만 골라서 사용할 수 있습니다.

PostCSS FontPath 플러그인 예시를 살펴보면 PostCSS의 막강한 능력을 알아볼 수 있습니다. 만약 Sass를 사용한다면, 파일 안에 사용자가 웹 폰트에 대한 설정을 할 수 있는 믹스인을 만들어 놓아야 하겠죠. 따라서 @font-face를 믹스인에 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-filename}.eot');
    src: url('#{$font-filename}.woff') format('woff'),
    url('#{$font-filename}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}
@include importfont('mission script', 'fonts/mission-script-webfont', 300);

프로젝트에서 PostCSS FontPath를 사용한다면 위의 코드처럼 믹스인을 써야 할 필요가 없습니다. 그저 아래와 같은 CSS만 작성해 놓으면 PostCSS가 이를 Grunt나 Gulp를 통해 최종 산출물로 변환할 것입니다.

1
2
3
4
5
6
@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;
}

이 포스팅을 쓰고 있는 현재 PostCSS 관련 플러그인의 갯수는 100개가 넘으며, 여기서 제공하는 기능을 사용하여 미래에 등장할 법한 CSS 구문이나 단축키, 툴, 언어 확장판 등을 만들어 볼 수 있습니다. PostCSS는 그저 “쿨하기만 한 툴”을 넘어서서 워드프레스, 구글, 트위터 개발팀을 유저층으로 포섭하는 데 성공한 툴입니다.

PostCSS를 개발 과정에 추가해 보자

PostCSS는 자바스크립트로 개발되었기 때문에 Gulp나 Grunt와 같은 태스크 러너를 돌려서 CSS를 변환할 수 있습니다. 아래의 튜토리얼은 PostCSS를 Gulp나 Grunt에서 사용하여 여러분의 개발 과정 안에 넣어보는 방법에 대해 설명합니다. Gulp나 Grunt 중 어떤 것을 사용할지는 개인 취향이나 프로젝트 성향에 따라 결정할 문제기 때문에 중요치 않습니다.

참고: GitHub에 PostCSS를 Gulp 혹은 Grunt에 적용한 소스 코드가 올라와 있으므로 프로젝트 시작 템플릿으로 가져가서 필요에 맞게 확장하여 자유롭게 쓰면 됩니다.

Gulp에서 PostCSS 설정하기

Gulp 사용법에 익숙하지 않다면, Callum Macrae가 쓴 Gulp 사용법을 먼저 읽으면서 툴 사용법을 익히기를 권장합니다.

프로젝트 내에 PostCSS 모듈을 설치하기 위해 다음과 같은 커맨드를 터미널에 입력합니다: npm i gulp-postcss -D

프로젝트 내의 Gulpfile.js에서 이미 설치한 PostCSS 모듈을 require한 다음 태스크를 작성합니다. 프로젝트 파일 및 산출물 폴더 경로를 올바르게 적어 놓았는지 확인하는 것 잊지마세요.

1
2
3
4
5
6
var postcss = require('gulp-postcss');
gulp.task('styles', function () {
    return gulp.src('path/to/dev/style.css')
        .pipe(postcss([]))
        .pipe(gulp.dest(path/to/prod))
});

태스크를 실행하려면 gulp styles를 커맨드 라인에 입력합니다.

Grunt에서 PostCSS 설정하기

Grunt 사용법에 익숙하지 않다면, Mike Cunsolo가 쓴 Grunt 사용법을 먼저 읽으면서 툴 사용법을 익히기를 권장합니다.

PostCSS 모듈을 프로젝트 내에 설치하기 위해, 다음 커맨드를 터미널에 입력합니다: npm i grunt-postcss -D

시스템상에 플러그인 설치를 마쳤다면, Gruntfile.js에 아래와 같은 코드를 작성하여 태스크를 만듭니다. cwd와 dest값이 프로젝트 구조와 일치하는지 확인하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    styles: {
      options: {
        processors: []
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'dev/',
          src: ['**/*.css'],
          dest: 'prod/'
        }]
      }
    }
  });
  // post-css를 불러들인다
  grunt.loadNpmTasks('grunt-postcss');
};

태스크를 실행하려면 커맨드 라인에 grunt styles를 입력합니다.

플러그인 설치하기

그냥 PostCSS만 사용 해서는 이 툴의 힘을 온전히 느낄 수 없고, 플러그인을 같이 사용해야 비로소 제대로 써봤다고 할 수 있습니다. 지금까지 본 Gulp와 Grunt 예제 코드 안에 있는 태스크 선언문에 빈 배열이 있는 것을 눈치 채셨을 것입니다. 이 배열 안에 PostCSS 커뮤니티에서 개발한 플러그인을 넣어서 원하는 기능을 툴에 넣을 수 있습니다.

PostCSS 깃허브 페이지를 보면 사용 가능한 PostCSS 플러그인 목록을 보실 수 있습니다. 모든 NPM 패키지와 마찬가지로 플러그인 역시 커맨드 라인에서 설치가 가능합니다. 많은 플러그인이 PostCSS를 통한 확장을 거쳐야지만 사용할 수 있으며, 태스크 러너 종류에는 구애받지 않습니다. 예시로 PostCSS Focus 플러그인을 설치하여 모든 hover 상태에 :foucs를 추가해 봅시다.

이후에 예시로 등장하는 플러그인 패키지를 프로젝트 내에 설치하려면 커맨드 라인과 NPM을 사용합니다.

PostCSS 플러그인 설치 예제

npm i postcss-focus -D

플러그인은 메소드로 직접 전달이 가능합니다. 하지만 코드를 좀 더 깔끔하게 작성하기 위해, 배열을 하나 생성하여 그 안에 플러그인을 넣고 인자로 넘기도록 해봅시다. 배열 안에 필요한 require 선언문을 작성하고 즉시 실행 함수로 만들어서 플러그인이 리턴된 후 바로 호출되도록 합시다. 해당 개념에 대해 더 자세히 알고싶다면, 라이언(Ryan Christiani)이 쓴 “자바스크립트의 함수는 일급 객체” 글을 참조하세요.

require('postcss-focus')()

새로 생성한 processorArray 배열을 사용하여 Grunt 코드를 다음과 같이 수정해 보았습니다.

1
2
3
4
5
6
7
8
9
10
11
12
var processorArray = [
    require('postcss-plugin')()
];
styles: {
      options: {
        processors: processorArray
      },
      dist: {
        src: 'path/to/dev/style.css',
        dest: 'path/to/prod/style.css'
      }
    }

수정한 Gulp 코드는 다음과 같습니다.

1
2
3
4
5
6
7
8
var processorArray = [
    require('postcss-plugin')()
];
gulp.task('styles', function () {
    gulp.src('path/to/dev/style.css')
        .pipe(postcss(processorArray))
        .pipe(gulp.dest('path/to/prod'))
});

플러그인

플러그인 설치 및 코드 컴파일을 위한 빌드 툴 준비를 마쳤다면, 이제 PostCSS와 플러그인 기능을 사용할 수 있습니다. 가장 먼저 해야할 일은 .css 확장자 파일을 개발 코드 폴더에 생성하는 것입니다.

“잠깐! CSS 파일이라구염?” 넴, CSS 파일 맞습니다. PostCSS가 변형하는 것은 CSS이기 때문에 다른 특별한 구문을 사용할 필요가 없습니다. 필요한 것은 오직 유서 깊은 CSS뿐입니다. 전처리기 사용에 익숙하다면 .sass, .scss, .styl, .less 파일을 거치지 않고 .css를 곧장 사용하기가 부자연스럽게 느껴질 수도 있습니다. 근데 실제로는 이러한 전처리기 사용 역시, 파일 자체를 다른 파일로 변환하는 것(convert)이 아니라, 안의 내용물인 코드만 바꾸는 것(transform) 뿐입니다.

새로 설치한 PostCSS 플러그인으로 스타일 변환을 진행하려면 grunt styles나 gulp styles를 입력하여 태스크 러너를 돌리면 됩니다. 이로써 우리가 개발한 CSS 파일은 PostCSS와 같이 사용된 플러그인을 통해 변환되어 미리 명시해 놓은 산출물 폴더 안에 배포 버전 CSS가 나오게 됩니다.

아래 플러그인 목록은 이제 막 PostCSS를 접한 분들을 위해 도움이 될 만한 것들을 모아놓은 것입니다. 플러그인 사용법과 설치 방법이 포함되어 있습니다.

Autoprefixer

CSS 작성시 골치 아픈 부분 중 하나는 브라우저와 기기 지원 범위가 방대하다는 것입니다. 브라우저 접두사가 붙어야지만 사용가능한 속성과 값을 계속해서 업데이트하는 것 또한 우리가 넘어야 할 산 중 하나입니다. 다행스럽게도, Autoprefixer(자동 접두사 명명기)가 언제 어디서 접두사를 붙여야하는지 우리에게 알려줄 수 있습니다. 이 플러그인을 사용한다면 최신 기능과 속성을 사용할 때 브라우저 접두사를 신경쓰지 않고 마음껏 CSS 작성이 가능합니다.

플러그인을 설치하려면 다음과 같은 커맨드 라인을 입력합니다

npm i autoprefixer -D

플러그인을 배열에 넣을 때, 프로젝트에서 지원할 브라우저에 대한 정보를 배열로 가지고 있는 객체를 생성할 수 있습니다. Browserlist Github Account에서 브라우저 옵션 목록을 확인할 수 있습니다.

앞서 만든 배열 변수에 Autoprefixer 플러그인을 추가해 봅시다.

1
2
3
var processorsArray = [
  require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20']  })
];

전달한 객체에 따라 적절한 벤더 접두사가 산출된 CSS 속성 및 속성값 앞에 놓일 것입니다.

다음은 개발시에 작성한 CSS입니다.

1
2
3
4
.item {
  display: flex;
  flex-flow: row wrap;
}

산출물은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
.item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

CSSNext로 새로 나올 구문 미리 사용하기

CSS4(역: CSS3 이후부터는 모듈 단위로 개발이 되기 때문에 CSS4는 정식 명칭이 아닙니다.)에서 새로나올 기능으로는 네이티브 변수, 사용자 정의 미디어 쿼리, 사용자 정의 선택자, 가상 링크등이 있습니다. 현재 시점에서는 브라우저 지원이 전무하고, 스펙이 통과 되면 그 후에 브라우저에서 구현이 될 예정입니다.

CSSNext는 새로 등장할 CSS 기능을 아직까지는 CSS3밖에 인식하지 못하는 브라우저에서 사용할 수 있도록 알맞게 변환해주는 툴입니다. 툴만 따로 사용하거나, PostCSS에서 플러그인으로써 사용하면 됩니다. 이 플러그인 역시 다른 PostCSS 플러그인과 마찬가지로 processorsArray에 넣어 주시면 됩니다.

CSSNext 플러그인은 다음과 같은 커맨드 라인을 입력하여 설치합니다.

npm i cssnext -D

설치한 후 플러그인을 추가합니다.

1
2
3
var processorsArray = [
  require('cssnext')()
];

이제 개발 코드 파일에서 CSS4 관련 기능을 사용하면 PostCSS가 태스크 러너를 통해 구문 변환을 해 줄겁니다. 그렇게 함으로써 미래에 등장할 구문을 미리 현재의 브라우저에서도 쓸 수 있게 되는 거죠. 기능에 대한 브라우저 지원이 이루어질 때 쯤에는 개발 코드에 반영을 하여 산출물을 변경하면 됩니다.

다음과 같이 개발 CSS 코드를 작성했다고 합시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 사용자 정의 변수
:root {
  --linkColour: purple;
}
a {
  color: var(--linkColour);
}
// 범위를 설정한 사용자 정의 미디어 쿼리
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
  /* 매체 뷰포트 스타일 */
}
// 사용자 정의 선택자
@custom-selector :--enter :hover, :focus;
@custom-selector :--input input, .input, .inputField;
a:--enter {
  /* Enter와 관련된 스타일이 들어갑니다. */
}
:--input {
  /* 인풋 필드와 관련된 스타일이 들어갑니다. */
}

변형된 결과물은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a {
  color: purple;
}
@media (min-width:500px) and (max-width:1200px){
  body{
    background:#00f;
  }
}
a:focus,a:hover{
  background:#00f;
}
.input, .inputField, input{
  background:red;
}

CSSNext의 기능에 대해 더 자세히 알아보고 싶다면, 해당 플러그인의 playground 페이지를 방문하여 CSSNext에서 지원하는 CSS4 기능을 미리 경험해 보세요.

Sass 구문

만약 여러분이 Sass에 전적으로 의존하고 있다해도 두려워하지 마세요. PostCSS에서도 Sass 구문과 관련 툴을 사용할 수 있습니다. 고전 CSS에서는 아직 변수, 코드 중첩 및 불러오기(import) 기능 지원이 안되지만, PreCSS 같은 플러그인을 연결한다면 CSS 파일에서도 이러한 기능과 Sass 문법을 사용할 수 있습니다.

커맨드 라인으로 해당 플러그인을 설치하고 배열에 플러그인을 넣어 두었다면, 이제 즉시 Sass 구문을 사용할 수 있습니다. Sass에서 PostCSS로 갈아탄다면 파일 확장자를 .css로 변경해주기만 하면 파일을 바로 태스크 러너의 파이프 인자로 넘길 수 있습니다.

다음과 같은 커맨드 라인을 입력하여 PreCSS 플러그인을 설치합니다.

npm i precss -D

설치를 마친 후 플러그인을 배열에 넣습니다.

1
2
3
var processorsArray = [
  require('precss')()
];

개발 중인 CSS가 다음과 같다고 합시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*변수*/
$blue: #0000ff;
$green: #00ff00;
$radius: 10px;
.square {
  background: $blue;
  border-radius: $radius;
}
/*Imports*/
@import "partials/_base.css";
/*Mixins*/
@define-mixin square $dimension {
    width: $dimension;
    height: $dimension;
}
/*Nesting, variables and mixins*/
.button {
  @mixin square 200px;
  background: $green;
  &:hover {
    background: $blue;
  }
}

변형을 거친 산출물은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
.square {
  background: #0000ff;
  border-radius: 10px;
}
.button {
  width: 200px;
  height: 200px;
  background: #00ff00;
}
.button:hover {
  background: #0000ff;
}

커뮤니티 플러그인으로 CSS 확장하기

플러그인을 사용하면 보다 효과적인 코드 작성이 가능하기 때문에, PostCSS의 진정한 힘은 커뮤니티 플러그인에 들어 있습니다. 플러그인 덕분에 좀 더 빠르게 CSS 작성이 가능하며, 설령 그러지 않더라도 최소한 창의적인 스타일문 작성을 좀 더 수월하게 할 수 있습니다. 플러그인 사용시 PostCSS API를 활용하면 커스텀 속성, 선택자 및 값을 프로젝트 내에서 사용할 수 있으며 코드 작성을 좀 더 효율적으로 할 수 있고 구글 검색량을 줄일 수 있습니다.

수량 질의문(Quantity Queries)

수량 질의문은 강력한 기능을 제공하는 플러그인입니다. 이 플러그인을 사용한다면 CSS로 요소 갯수를 셀 수 있으며 자손 요소의 갯수에 따라 스타일을 다르게 적용할 수 있습니다. 오늘날의 CSS에서 사용할 수 있는 몇몇 고급 CSS 선택자를 사용하기 때문에 선택자 사용이 조금 까다롭다고 느껴질 수도 있습니다. QQ와 같은 온라인 툴을 사용하면 수량 질의문을 조금이나마 수월하게 작성할 수도 있으나, 여기서는 이와 같은 툴은 건너뛰고 곧바로 PostCSS를 사용하여 커스텀 선택자를 활용해보도록 합시다.

수량 질의문을 사용하기 위해, Quantity Queries 플러그인을 프로젝트에 설치합니다. 다음과 같은 커맨드 라인을 입력해주세요.

npm i postcss-quantity-queries -D

설치 후에 플러그인을 추가합니다.

1
2
3
var processors = [
  require('postcss-quantity-queries')()
];

이제 설치를 마쳤으니 커스텀 선택자를 사용하여 매칭되는 요소에 스타일을 적용할 수 있으나, 오직 플러그인을 통해서만 사용이 가능합니다.

개발 중인 CSS가 다음과 같다고 해봅시다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 자식 요소 갯수가 최소한 x개 이상 존재한다면 해당 스타일을 적용합니다.
.container > .item:at-least(5) {
  background: blue;
}
// 자식 요소의 갯수가 최대 x개 존재한다면 해당 스타일을 적용합니다.
.item > a:at-most(10) {
  color: green;
}
// 자식 요소의 갯수가 `between`의 인자로 넘긴 두 인자 사이에 해당하면 스타일을 적용합니다.
.gallery > img:between(4, 7) {
  width: 25%;
}
// 해당 요소의 갯수가 정확히 x개이면 스타일을 적용합니다.
.profiles:exactly(4) {
  flex: 1 0 50%;
}

변환된 결과는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 자식 요소 갯수가 최소한 x개 이상 존재한다면 해당 스타일을 적용합니다.
.container > .item:nth-last-child(n+5), .container > .item:nth-last-child(n+5) ~ .item {
  background: blue;
}
// 자식 요소의 갯수가 최대 x개 존재한다면 해당 스타일을 적용합니다.
.item > a:nth-last-child(-n+10):first-child, .item > a:nth-last-child(-n+10):first-child ~ a {
  color: green;
}
// 자식 요소의 갯수가 `between`의 인자로 넘긴 두 인자 사이에 해당하면 스타일을 적용합니다.
.gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child, .gallery > img:nth-last-child(n+4):nth-last-child(-n+7):first-child ~ img {
  width: 25%;
}
// 해당 요소의 갯수가 정확히 x개이면 스타일을 적용합니다.
.profiles:nth-last-child(4):first-child, .profiles:nth-last-child(4):first-child ~ .profiles {
      flex: 1 0 50%;
}

Short 플러그인을 사용한 확장 단축 속성 표기법

CSS에서 특정 속성값을 작성하다보면 “이것보다 짧게 적을수도 있을 텐데”라고 느낀 적이 있을 겁니다. 운 좋게도 마침 Short 플러그인으로 더 짧은 속성값 작성이 가능하네요. CSS 작성을 좀 더 논리정연하게 할 수 있습니다. position, size와 같은 속성값을 background, font 속성값 작성시와 비슷하게 축약하여 하나의 선언문으로 쓸 수 있습니다.

단축 선언문은 PostCSS API를 통해 브라우저가 읽을 수 있는 스타일문으로 변환이 되기 때문에 좀 더 깔끔한 개발용 스타일 시트 작성이 가능하며 산출물 스타일 시트의 관리 역시 용이해집니다.

다음과 같은 명령문을 입력하여 플러그인을 설치합니다: npm i postcss-short -D

그런 후 플러그인을 배열에 추가합니다.

1
2
3
var processors = [
  require('postcss-short')()
];

text 속성은 다음과 같은 타이포그래피 관련 속성을 포함합니다: color, font-style, font-variant, font-weight, font-stretch, text-decoration, text-align, text-rendering, text-transform, white-space, font-size, line-height, letter-spacing, word-spacing, font-family.

개발용 CSS가 다음과 같다고 해봅시다.

1
2
3
p {
  text: 300 uppercase dimgrey center 1.6rem 1.7 .05em;
}

그렇다면 산출물은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
p {
  color: dimgrey;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  font-size: 25px;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: .05em;
}

position속성값은 top, left, right, bottom값을 선언문에 넣을 수 있습니다. 값 작성 순서는 시계 방향이며, 구문에 넣을 수 있는 값의 갯수는 1개부터 4개입니다. 만약 제외해야 할 값이 있다면 그 자리에 *을 써 넣으세요.

개발용 CSS가 다음과 같다고 해봅시다.

1
2
3
4
5
6
7
8
9
section {
  position: absolute 10px * *;
}
.topNav {
  position: fixed 0 * * 0;
}
.modal {
  position: fixed 40% 25%;
}

변형된 산출물은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
section {
  position: absolute;
  top: 10px;
}
.topNav {
  position: fixed;
  top: 0;
  left: 0;
}
.modal {
  position: fixed;
  top: 40%;
  right: 25%;
  bottom: 40%;
  left: 25%;
}

오늘날 프론트 엔드 개발 분야에서 PostCSS의 존재 의의는?

이제 우리는 개발 환경에 PostCSS를 적용하여 장점을 최대한 활용해 낼 수 있습니다. Sass와 LESS를 컴파일하는 과정과 유사하게 태스크 러너를 수정하여 PostCSS를 처리하도록 워크 플로우를 구성할 수 있습니다. PreCSS와 같은 플러그인을 결합하여 이미 존재하는 Sass 프로젝트를 아무런 구문 변환 없이 PostCSS에서 사용할 수 있습니다.

현재 개발용 CSS 파일을 어디에 놓으면 적절할지에 대한 논의가 진행중입니다. React와 같은 라이브러리의 인지도가 상승함에 따라, 컴포넌트 단위의 스타일 작성법에 대한 관심 또한 점점 더 높아지고 있습니다. 이러한 라이브러리에서는 컴파일 과정에서 자바스크립트를 사용한 스타일 변환이 가능합니다. 변환 방법을 놓고서도 이런 저런 의견이 나오는 중인데, PostCSS를 사용하여 스타일을 변환하는 것 역시 이러한 방법 중 하나에 속합니다.

프론트 엔드 분야에서 집중을 받고 있는 또 다른 프로젝트는 바로 CSS Module로써, 로컬 파일 내의 스타일에 대한 스코프를 생성하고 필요할 때만 이를 불러서 쓸 수 있는 기능을 제공합니다. 자바스크립트 개발자들 사이에서는 이미 널리 알려진 개념입니다. 또한 React와 JSX의 관계처럼 프론트 엔드 언어 사이의 경계가 점점 더 희미해지고 있는 만큼, CSS와 자바스크립트가 결합함으로써 발생할 수 있는 위력을 더 이상 무시하고 넘어가기가 힘들어졌습니다.

PostCSS는 사용자 정의 구문과 속성을 사용하여 CSS를 새로운 방식으로 확장하는 데 기여했지만, 자바스크립트와 그 내부의 복잡성에 대해 이제 막 알아가기 시작하는 초심자들이 접하기에는 어려울 수도 있습니다. 만약 여러분이 새내기 개발자와 프로젝트에서 PostCSS를 사용해야 하는 상황이라면 자바스크립트 언어를 깊게 이해할 수 있도록, 그리고 PostCSS가 Sass만큼 스타일을 효율적으로 작성하는 데 도움이 되는 생산 도구임을 이해할 수 있도록 도와주시길 바랍니다.

현재 작업에 PostCSS를 적용하기

다음 몇 년 동안은 CSS를 작성하는 방법이 매우 다양하게 분화될 것입니다. 각 프로젝트마다 요구사항이 다르기 때문에 우리의 개발 방식을 이에 맞추어 그때마다 변화시켜야 할 필요가 있습니다. PostCSS와 같은 모듈을 바탕으로 한 환경 위에서 개발이 이루어진다면 프로젝트에 필요한 기능을 직접 골라서 적용할 수 있습니다.

PostCSS와 같이 쓸 수 있는 플러그인의 세계에 대해 좀 더 알아보기를 권합니다. 커뮤니티 단위로 프로젝트가 진행되고 있기 때문에, PostCSS의 생태계는 오직 사람들이 플러그인을 사용하고 만들 때에만 계속 발전할 수 있습니다. 플러그인에 대해 더 알아보고 싶으면, NPM 사이트에서 사용 가능한 패키지 목록을 보거나 PostCSS 놀이터에서 기능을 테스트를 해보세요.

Comments