Record

목차

개념

POST CSS는 우리의 CSS를 조금더 현대적으로 바꿔주는 플러그인이다.
좀더 풀어 설명하자면 POST CSS 는 JS 플러그인을 사용하여 CSS를 변환시키는 툴 입니다.
POST CSS 는 언어가아니라 자동으로 신기술 CSS 를 호환가능하도록 변환시켜주는 플러그인일 뿐이다.
CSS에 문제가없는지 미리 확인해서 에러로그를 준다.
지금 발전중인 CSS의 현대기술들을 브라우저에 호환되도록 자동 변환해준다.
PostCSS 자체는 아무 일도 하지 않는다. 다만 다양한 플러그인과, 플러그인을 추가할 수 있는 환경을 제공할 뿐이다.

reset.css

• 기본 스타일링을 초기화하는 방식이다. 각 태그 별로 유용한 스타일도 모두 지워진다.

normalize.css

• 기본 스타일링에 대한 오염을 최소화하며 브라우저 간 스타일의 차이를 최소화하는 방식을 추구한다.

예제

• PostCSS 이용한다면 동일한 클래스명을 사용하더라고 간편하게 모듈화가 되어 서로다른 css가 적용이 된다.

// -----------in button1.jsx-----------
    import React, { Component } from 'react';
    import styles from './button1.module.css';

    class Button1 extends Component {
    render() {
        return (
        <div className={styles.button}>
            <span className={styles.text}>Button1</span>
        </div>
        );
    }
    }

    export default Button1;


    // -----------in button2.jsx-----------
    import React, { Component } from 'react';
    import styles from './button2.module.css';

    class Button2 extends Component {
    render() {
        return (
        <div className={styles.button}>
            <span className={styles.text}>Button1</span>
        </div>
        );
    }
    }

    export default Button2;