CSS 전처리기
- 편리한 문법을 이용해서 css를 작성하고 추후에 다시 순수 css로 변환해 주는 것
- 다시 말하면 프레임워크의 문법에 맞게 css를 작성하면 사용자에게 배포할 브라우저가 이해할 수 있는 css로 변환이 됨.
✅ 필요한 이유?
- 기본적인 CSS만으로는 중복적으로 작성해야됨
- 브라우저 호환성 위해 필요
- 중복되는 코드를 최소화하기 위해 필요
✅ 종류
PostCSS란?
- SASS와 LESS와 같은 프레임워크와 비슷하지만 SASS와 LESS는 제공이 한정적임.
하지만 POSTCSS는 플러그인이 다양함
create react app
을 할 때 기본적으로 PostCSS가 설치됨
- package.json or node_modules에서 확인 가능!
✅ autoprefix란?
prefix란?
- 브라우저 별 따로 놀던 CSS3 속성을 잡어주기 위해 사용되기 시작
- 마크업 시 CSS의 Class 앞에
-moz-, -webkit-, -o-, -ms-
와 같이 각 브라우저에서 판독 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것
만약 index.css에 아래와 같이 작성하고 빌드를 하면 (최종적으로 사용자에게 배포될 것) 빌드된 css가 생성됨
:fullscreen {
background-color: pink;
}
- 빌드된 css를 보면 자동적으로 prefix가 붙어있는 것을 볼 수 있음
- PostCSS의 autoprefix가 모든 prefix를 붙여줌.
- 현재 브라우저들의 시장 점유율과 호환성 문제를 자동으로 정보 수집해서 처리가 되는 것 (신뢰 가능!!)
참고