POSTCSS란?

wheezy·2022년 6월 27일
0
post-custom-banner

CSS 전처리기

  • 편리한 문법을 이용해서 css를 작성하고 추후에 다시 순수 css로 변환해 주는 것
  • 다시 말하면 프레임워크의 문법에 맞게 css를 작성하면 사용자에게 배포할 브라우저가 이해할 수 있는 css로 변환이 됨.

✅ 필요한 이유?

  • 기본적인 CSS만으로는 중복적으로 작성해야됨
  • 브라우저 호환성 위해 필요
  • 중복되는 코드를 최소화하기 위해 필요

✅ 종류

  • LESS
  • SASS
  • Stylus(스타일러스)

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를 붙여줌.
      • 현재 브라우저들의 시장 점유율과 호환성 문제를 자동으로 정보 수집해서 처리가 되는 것 (신뢰 가능!!)

참고

profile
🧀 개발을 하면서 도움이 되었던 부분을 기록하는 공간입니다 🧀
post-custom-banner

0개의 댓글