# State of CSS 2021 보고서

> Clean Markdown view of GeekNews topic #5563. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5563](https://news.hada.io/topic?id=5563)
- GeekNews Markdown: [https://news.hada.io/topic/5563.md](https://news.hada.io/topic/5563.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-12-17T09:10:01+09:00
- Updated: 2021-12-17T09:10:01+09:00
- Original source: [2021.stateofcss.com](https://2021.stateofcss.com/ko-KR/)
- Points: 15
- Comments: 1

## Topic Body

- 전세계 8714명 대상 설문조사

- CSS 신기능 도입

ㅤ→ Layout

ㅤㅤ⇨ CSS Grid : 83%가 사용 (>2020 73%)

ㅤㅤ⇨ Subgrid : 12.7%가 사용 (>2020 6.1%)

ㅤㅤ⇨ Flexbox : 98.7%

ㅤㅤ⇨ CSS Multi-column : 38.8% (>33.5%)

ㅤㅤ⇨ CSS Writing Modes : 15.4%

ㅤㅤ⇨ aspect-ratio : 37.1% (>22.4%)

ㅤ→ Shape & Graphics

ㅤㅤ⇨ object-fit : 69.2% (>60.5%)

ㅤㅤ⇨ clip-path : 56% (>49.1%)

ㅤ→ Interactions

ㅤㅤ⇨ CSS Scroll Snap : 30% (>21.1%)

ㅤㅤ⇨ pointer-events : 70.5%

ㅤ→ Typography

ㅤㅤ⇨ font-variant 20% / initial-letter 28.4% 는 줄어드는중

ㅤㅤ⇨ line-clamp : 29.5% (>20.3%)

ㅤ→ Accessbility

ㅤㅤ⇨ prefers-reduced-motion : 26.7% (>15.8%)

ㅤㅤ⇨ prefers-color-scheme : 28.6% (>18.8%)

ㅤ→ Other

ㅤㅤ⇨ CSS Varialbles : 84.4% (>74.7%)

ㅤㅤ⇨ @supports : 46% (>40.6%)

ㅤㅤ⇨ CSS Containment : 9.6% (>6.4%)

ㅤㅤ⇨ will-change : 33.5% (~28.8%)

ㅤㅤ⇨ CSS Comparison Functions min(), max(), clamp(): 62.5% (>47%)

- 선호기술

ㅤ→ 전/후 처리기 : PostCSS 91% > SaSS 84% > Stylus 35% > Less 34% > Assembler CSS 26%(신규 진입)

ㅤㅤ⇨ 그외 : Styled Components, Tailwind CSS, CSS-in-JS..

ㅤ→ CSS Framework : Tailwind 78% > PureCSS 70% > Ant Design 56% > Bulma 54% > Semantic UI 47%

ㅤ→ CSS-in-JS : vanilla-extract 87% > CSS Modules 86% > Windi CSS 84% > Styled Components 77% > Stitches 76%

- 그외 많이 쓰는 도구들

ㅤ→ Prettier , Autoprefixter, Stylelint, PurgeCSS, cssnano

ㅤ→ 브라우저 : 크롬 67.4% > Firefox 46.8% > 사파리 23.6 % > 사파리 iOS 16.8% > Edge 16.5% > 크롬 안드로이드 13.6% > Brave 8.8%

가장 많이 보는 블로그 : CSS-Tricks, Smashing magazine, dev.to, Medium

가장 많이 보는 사이트 : Stack Overflow, MDN, W3Schools

가장 많이 듣는 팟캐스트 : Syntax, Shop Talk Show, The CSS Podcast

올해의 대상

- 가장 많이 채택된 기능 : CSS Comparison Functions

- 가장 만족스런 기술 : PostCSS

- 가장 관심 많은 기술 : CSS Modules

조사한 대상 정보

- 영어 사용자가 72%, 스페인어 5.5%, 러시아어 5.3%

- 나이 : 24~34 37.8% > 35~44 21.9% > 18~24 7.8% > 45-54 5%

- 경력 : 5~10년 22.3% , 10~20년 22.3% > 2~5년 16.6% > 20년 이상 7%

- 회사크기 : 100~1000명 17.1% > 1000명 이상 12.4% > 20~50명 10.1% > 50~100명 > 8.5%

- 연봉 : $50~100K 22.7% > $30~50K 14.7% > $100K~$200K 13.6% > $10K~$30K 11.2% > $200K 이상 1.9%

- 젠더 : 남성 65.4%, 여성 8.3%

## Comments



### Comment 7943

- Author: xguru
- Created: 2021-12-17T09:11:01+09:00
- Points: 1

State of CSS 2020 보고서 https://news.hada.io/topic?id=3304