콘텐츠로 건너뛰기

State of CSS 2024

CSS Usage

CSS를 어떻게 사용하든, 데이터는 여전히 모든 브라우저에서 코드가 작동하도록 하는 것이 중요한 문제임을 보여줍니다. 특히 :has() 선택자와 같은 새로운 기능에 대해서는 더욱 그렇습니다.

Testing Environments

접근성의 중요성이 커지고 있음을 나타내는 신호로, 스크린 리더 테스트가 전년 대비 16.6%에서 19%로 증가했습니다.

0%
20%
40%
60%
79%
99%
1

데스크톱

7,133
2

스마트폰

4,820
3

태블릿

3,108
4

데스크톱을 키보드로만 조작

2,027
5

테스트 도구 (Axe, Lighthouse, etc.)

1,907
6

피쳐폰

1,800
7

스크린 리더

1,330
8

프린터

685
9

변화된 시각 시뮬레이터 (색맹, etc.)

398
10

TV

138
11

스마트워치

34
12

게이밍 콘솔

28
13

Other Answers

57
0%
20%
40%
60%
79%
99%
% of question respondents
7,185
74%
Which form factors or environments do you test on?
💡
트위터, 페이스북 또는 이메일로 이 설문 조사를 공유하면 자바스크립트 성능이 최대 15% 향상된 것으로 과학적으로 입증되었습니다.

CSS Usage

이 데이터는 예상할 수 있는 내용이지만, CSS가 웹페이지 형식화 외에도 다양한 기능을 할 수 있다는 점을 상기시켜줍니다.

0%
17%
34%
51%
68%
85%
1

Web apps

6,036
2

Blogs or other text-heavy sites

3,394
3

Marketing sites & landing pages

3,221
4

Design systems

2,792
5

Desktop apps

1,862
6

Mobile apps

1,665
7

Emails

1,202
8

CSS art & illustrations

581
9

Printed documents

572
10

E-Commerce sites

11

Other Answers

107
0%
17%
34%
51%
68%
85%
% of question respondents
7,114
73%
What kind of project do you usually use CSS for?
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

2024년 나의 선택: linear()

linear() easing 함수는 인터랙션에 놀라운 마무리 효과를 더할 수 있게 해주었습니다.
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

Adam Argyle

Google

직종

이 설문조사의 데이터를 산업 분야별로 필터링할 수 있다는 것을 알고 계셨나요? 다른 차트에서 "필터 추가"를 클릭하세요!

0%
8%
16%
23%
31%
39%
1

프로그래밍 & 기술적 도구

2,447
2

컨설팅 & 서비스

1,394
3

전자상거래 & 소매업

1,235
4

마케팅/영업/분석 도구

846
5

교육

842
6

금융

731
7

엔터테인먼트

613
8

뉴스, 미디어 & 블로깅

583
9

의료

468
10

정부 관계자

444
0%
8%
16%
23%
31%
39%
% of question respondents
6,310
65%
어느 직종에서 일하고 있나요?

CSS Usage

웹사이트를 전문적으로 제작하든 취미로 다루든, CSS를 사용하는 데 옳고 그름은 없습니다!

0%
18%
36%
54%
72%
90%
1

직업으로써

6,384
2

학생으로써

186
3

취미로써

501
4

Other Answers

33
0%
18%
36%
54%
72%
90%
% of question respondents
7,061
73%
In what context do you primarily use CSS?

Design Methodology

많은 응답자들이 사전 디자인을 구현하기 위해 CSS를 사용하지만, 디자인 앱의 발전과 AI 도구가 아이디어에서 코드로 바로 전환할 수 있는 수준에 도달하면 이 상황이 어떻게 변할지 흥미롭게 지켜볼 만합니다.

0%
12%
24%
36%
48%
60%
1

I implement other people's designs

4,216
2

I create my own designs in design apps, and then implement them in CSS

1,004
3

I implement my own designs directly in CSS

1,765
4

Other Answers

127
0%
12%
24%
36%
48%
60%
% of question respondents
6,985
72%
Which of these best describes how you primarily design with CSS?

CSS vs JavaScript Balance

CSS 설문조사임에도 불구하고, 많은 응답자들이 여전히 JavaScript 생태계에서 대부분의 시간을 보내는 것으로 나타났습니다. CSS가 더 강력해지면서 이 역시 변할지 시간을 두고 지켜봐야 할 것 같습니다.

0%
5%
11%
16%
21%
27%
1

100% CSS

107
2

|

568
3

|

958
4

|

616
5

50%–50%

1,127
6

|

882
7

|

1,913
8

|

914
9

100% JS

40
0%
5%
11%
16%
21%
27%
% of question respondents
7,125
73%
4.4
5
How do you divide your time between writing CSS (including HTML markup) and JavaScript code?

Browser Incompatibilities

새로운 기능이 문제를 완벽하게 해결해줄 것 같으면서도 브라우저 지원 부족으로 인해 사용할 수 없다는 점만큼 실망스러운 일은 없습니다. 이는 Anchor Positioning에 해당하는데, 이는 유망한 새 기능이지만 아직 폭넓게 지원되지는 않습니다. 반면에 Container Queries는 기본 수준에서 사용 가능하며, 많은 응답자의 답변에도 불구하고 사용 준비가 되어 있습니다!

0%
15%
30%
46%
61%
76%
1

2

3

4

5

6

7

8

Scrollbar styling

9

Browser support

10

Animate on Scroll

0%
15%
30%
46%
61%
76%
% of question respondents
1,547
16%
Are there any existing CSS features that you have difficulties using (or avoid altogether) because of lack of support, or differences between browsers?
(자유 형식 질문)
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

2024년 나의 선택: 막히는 부분: position:sticky가 실패할 수 있는 모든 방식

CSS를 다룬 여러 해 동안 position: sticky는 가장 짜증나는 기능 중 하나였지만, 동시에 매우 유용하기도 했습니다. 항상 이를 도와줄 가이드를 쓰고 싶었지만 다행히도 그럴 필요가 없었습니다. Kilian이 이 부분을 완벽히 해결해 주었기 때문입니다.
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

Andy Bell

Piccalilli와 Set Studio의 설립자이자 디자이너, 개발자.

Missing Features

마법의 지팡이로 원하는 CSS 기능을 모두 만들어낼 수는 없지만, 이 데이터를 통해 브라우저 공급업체들이 올바른 방향으로 나아갈 수 있기를 바랍니다!

좋은 소식: 조건부 논리, 믹스인, 메이슨리 레이아웃이 현재 어느 정도 작업 중입니다!

0%
20%
39%
59%
79%
99%
1

Mixins

2

Conditional Logic

3

Masonry Layout

4

Parent Selector

5

6

CSS Functions

7

For Loops

8

Better Animations

9

Browser Support

10

Scrollbar Styling

0%
20%
39%
59%
79%
99%
% of question respondents
1,223
13%
What features do you feel are currently missing from CSS altogether?
(자유 형식 질문)

Other CSS Pain Points

브라우저 지원은 여전히 CSS의 영원한 고충으로 남아 있지만, Tailwind CSS는 일부 사용자에게 좌절감을 주고 있는 반면, 다른 이들은 사용이 충분하지 않다고 불평하고 있습니다!

0%
19%
38%
57%
77%
96%
1

Browser support

2

3

Excessive complexity

4

Safari

5

Conditional Logic

6

7

8

Debugging

9

Animations

10

Layout & positioning

0%
19%
38%
57%
77%
96%
% of question respondents
1,088
11%
Any other pain points related to writing CSS?
(자유 형식 질문)

Favorite New Feature

오랫동안 기다려온 기능, 합리적인 구현, 좋은 브라우저 지원: :has() 선택자는 모든 조건을 갖추고 2024년 최고의 새로운 CSS 기능 순위에서 1위를 차지했습니다!

0%
10%
20%
30%
40%
51%
1

2

3

4

5

6

7

8

9

10

0%
10%
20%
30%
40%
51%
% of question respondents
2,428
25%
What are your favorite new CSS features that you started using this year?
(자유 형식 질문)
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

2024년 나의 선택: 스크롤 기반 애니메이션

이는 모든 주요 브라우저에서 곧 지원될 획기적인 기능입니다. 예전에는 많은 JavaScript가 필요했던 작업을 이제는 단 몇 줄의 CSS로 구현할 수 있다는 점이 놀랍습니다.
우리는 CSS 커뮤니티의 멤버들에게 그들의 "올해의 선택"을 공유해달라고 요청했습니다.

Ahmad Shadeed

Debugging CSS의 저자이자 디자인 엔지니어

State of Web Technologies

우리는 현재 상태에 대해 불평하는 것을 좋아하지만, 실제로는 행복 수준이 몇 년간 놀라울 정도로 일정하게 유지되어 왔습니다.

0
1
2
3
4
2020
2021
2022
2023
2024
0
1
2
3
4
Average
7,100
73%
2.9
3
How happy are you with the general state of web technologies?

State of CSS

CSS에 대해 약간의 상승세가 보이고 있으며, 이는 브라우저 공급업체, 워킹 그룹 및 전체 CSS 커뮤니티의 노력이 인정받고 있음을 증명하는 것입니다!

0
1
2
3
4
2024
0
1
2
3
4
Average
7,107
73%
3.1
3
How happy are you with the general state of CSS?

추천하는 리소스

SVG Essentials & Animation, v2
Sarah Drasner
Netlify

SVG Essentials & Animation, v2

In this course, you'll learn to create immersive graphics and make them alive with animations!
Design for Developers
Sarah Drasner
Netlify

Design for Developers

Learn how to become self-sufficient for the entire process of execution from concept to design to implementation.
우리를 지원해 준 파트너들께 감사 드립니다! 더 알아보기.