1. CSS Framework의 역사

1. HTML의 탄생, 1990년
   • HTML은 콘텐츠에 의미를 부여하는 태그를 붙여주어 서식을 꾸미는 방식
2. inline-style : 태그에 직접 style을 지정하는 방식
   • 코드가 너무 비대해지거나 가독성이 떨어지고 유지 보수가 어려움
3. CSS : inline-style의 중복을 제거
4. Sass(2006) : Syntactically Awesome Style Shets, selector를 세분화
   • CSS의 단점을 보완하기 위해 만든 CSS 전처리기
   • CSS의 단순 반복되는 부분을 해결
5. Ajax의 등장과 HTML 편집권의 변화
   • 백엔드에서 HTML을 제외한 데이터만 전달할 수 있게되면서 HTML의 편집권은 백엔드에서 프론트엔드로 내려오게 됨
   • CSS를 복잡하게 하는 것보다 HTML을 복잡하게 하는 것이 더 낫다는 것을 알게 됨 (CSS에서 복잡한 Selector를 쓰기 보다는 HTML에서 미리 잘 지어둔 class명이 더 좋음)
6. BEM(2013) 방식 : Block_Element_Modiflier로 구성하여 이름을 짓는 방법
7. CSS Modules(2015) : CSS의 문제인 Global Scope를 막기 위해 Component 단위에서 사용되는 CSS에 hash를 추가하여 CSS가 더 이상 global하지 않도록 하는 방식
   • class명에 hash값을 붙여 다시 생성하여 모듈로 내보내 사용
   • CSS-in-JS의 등장 : styled component, emotion
8. Atomic CSS : class명에 해당하는 태그의 스타일을 작성하면 됨

2. CSS Framework

0. 순위

1. 부동의 1위, bootstrap
2. 놀라운 tailwindcss의 성장세

1. CSS Pre-processor : CSS 전처리기

1) Sass(Syntactically Awesome Style Sheet)

• CSS를 로직이 있는 언어로 접근하여 재사용성을 높임