최신 CSS? 10년 뒤에 쓰면 되나요?

@FEConf2025

Transcript

1. 최관수 gonasooc 최신 CSS? 10년 뒤에 쓰면 되나요?
2. 최신 CSS? 10년 뒤에 쓰면 되나요? 발표자 소개 최관수 gonasooc 블렌딩 Frontend Developer 라이브 스트리밍, 유통 플랫폼 등 웹개발 담당 IUUQTWFMPHJP!HPOBTPPD
3. 최신 CSS? 10년 뒤에 쓰면 되나요? 이야기 흐름 • 최신 CSS에 관심을 갖지 못하는 이유 • 최근 CSS 표준화 동향 • 최신 CSS 적용 사례
4. 최신 CSS에 관심을 갖지 못하는 이유
5. 최신 CSS? 10년 뒤에 쓰면 되나요? 최신 CSS에 관심을 갖지 못하는 이유 구글 IO에서의 CSS
6. 최신 CSS? 10년 뒤에 쓰면 되나요? 최신 CSS에 관심을 갖지 못하는 이유 10년 뒤에 써보는 게 기대돼요! I ll Look forward to using these features in 10 years time FPWD Baseline CSS Grid 2011 Flexbox 2009 CSS Variables 2012 * FPWD : 최초 공개 작업 초안 First Public Working Draft * Baseline: 주요 모던 브라우저에서 사용 가능한 시점
7. 최신 CSS? 10년 뒤에 쓰면 되나요? 최신 CSS에 관심을 갖지 못하는 이유 10년 뒤에 써보는 게 기대돼요! I ll Look forward to using these features in 10 years time FPWD Baseline CSS Grid 2011 2017 Flexbox 2009 2017 CSS Variables 2012 2017 * FPWD : 최초 공개 작업 초안 First Public Working Draft * Baseline: 주요 모던 브라우저에서 사용 가능한 시점
8. 최신 CSS? 10년 뒤에 쓰면 되나요? CSS가 표준이 되기까지 1. 작업 초안 Working Draft, WD Anchor Positioning, Functions and Mixins… 2. 후보 추천안 Candidate Recommendation, CR View Transitions API, Scroll Snap… 3. 제안 추천안 Proposed Recommendation, PR 4. 권고안 Recommendation, REC 최신 CSS에 관심을 갖지 못하는 이유
9. 최신 CSS? 10년 뒤에 쓰면 되나요? CSS가 표준이 되기까지 1. 작업 초안 Working Draft, WD Anchor Positioning, Functions and Mixins… 2. 후보 추천안 Candidate Recommendation, CR View Transitions API, Scroll Snap… 3. 제안 추천안 Proposed Recommendation, PR 4. 권고안 Recommendation, REC 최신 CSS에 관심을 갖지 못하는 이유 실제 구현 사례를 모으고 엣지 케이스를 포함, 모든 시나리오 테스트를 거치는 CR 문법이나 스펙이 바뀌면 후보 추천안 초안 Candidate Recommendation Draft, CRD 가 작성되기도
10. 최신 CSS? 10년 뒤에 쓰면 되나요? Container Queries 최신 CSS에 관심을 갖지 못하는 이유 * 몇몇 브라우저를 제외하고는 대응이 되는 Container Queries의 경우도 아직 WD
11. 최신 CSS? 10년 뒤에 쓰면 되나요? if , anchor positioning 최신 CSS에 관심을 갖지 못하는 이유 * 올 5월 업데이트된 Chrome 137에 추가된 if() * Chrome 125에 추가된 Anchor Positioning 역시 10년 뒤에나 써야 될까요?
12. 최근 CSS 표준화 동향
13. 최신 CSS? 10년 뒤에 쓰면 되나요? 이제 1년 뒤에 쓰세요! 최근 CSS 표준화 동향 * 최근 주요 기술의 Baseline 도달까지 걸린 시간 출처 : Google I/O What s new in web
14. 최신 CSS? 10년 뒤에 쓰면 되나요? RIP IE, 모던 브라우저의 협업 최근 CSS 표준화 동향
15. 최신 CSS? 10년 뒤에 쓰면 되나요? CSS로 대체되는 UI 요소의 장점 • JavaScript 의존성 감소 및 성능 향상 - 단순해지는 코드 베이스, 렌더링 최적화 • 시맨틱과 웹 접근성 향상 - 네이티브 기능을 그대로 사용 가능 최근 CSS 표준화 동향
16. 최신 CSS 적용 사례
17. 최신 CSS? 10년 뒤에 쓰면 되나요? 최신 CSS 소개 • Popover API : 잠시 잊어도 되는 z-index • Customizable Select: 디자이너와 화해하는 법 최신 CSS 적용 사례
18. Popover API : 잠시 잊어도 되는 z-index
19. 최신 CSS? 10년 뒤에 쓰면 되나요? Before: React로 구현한 Popover Popover API : 잠시 잊어도 되는 z-index • z-index 및 쌓임 맥락 관리 • 사용성 및 접근성을 고려한 포커스 관리
20. 최신 CSS? 10년 뒤에 쓰면 되나요? After: Popover API Popover API : 잠시 잊어도 되는 z-index • 최상위 레이어 Top layer 지원 • 닫기 기능 및 포커스 관리 지원 • Popover 요소에 특화된 Web API popovertarget과 popover 추가로 Popover API 적용 * 폴리필 polyfill 과 함께 실무에 적용하는 사례가 늘고 있음
21. Customizable Select: 디자이너와 화해하는 법
22. 최신 CSS? 10년 뒤에 쓰면 되나요? Before: 커스텀 요소 만들기 Customizable Select: 디자이너와 화해하는 법 • div와 ul 같은 태그로 커스텀 요소 만들기 • UI 라이브러리 사용
23. 최신 CSS? 10년 뒤에 쓰면 되나요? Before: 커스텀 요소 만들기 Customizable Select: 디자이너와 화해하는 법
24. 최신 CSS? 10년 뒤에 쓰면 되나요? After: Customizable Select Customizable Select: 디자이너와 화해하는 법 appearance: base-select; 를 추가하는 순간 HTML 파싱 방식 변경으로 select 하위 태그로 대부분의 태그를 허용 브라우저는 option 태그 안에 별도의 요소가 있더라도 UI 렌더링을 하지 않고 사용 중인 OS에 위임
25. 최신 CSS? 10년 뒤에 쓰면 되나요? After: Customizable Select Customizable Select: 디자이너와 화해하는 법 • ::checkmark와 :checked, ::picker(select) 같은 가상 선택자 제공 • select 태그의 네이티브 기능 유지로 접근성 및 키보드 탐색 구현
26. 진화하는 CSS
27. 최신 CSS? 10년 뒤에 쓰면 되나요? 지금 이 순간에도 진화하는 CSS 진화하는 CSS * 신규 CSS 기술 현황 출처 : Google I/O What s new in web UI
28. 최신 CSS? 10년 뒤에 쓰면 되나요? 이젠 질문을 바꾸자 진화하는 CSS 10년 뒤에 쓰면 되나요?
29. 최신 CSS? 10년 뒤에 쓰면 되나요? 이젠 질문을 바꾸자 진화하는 CSS 10년 뒤에 쓰면 되나요? 어떻게 서비스를 개선할 수 있을까요?
30. 조금 더 궁금하시다면 https://velog.io/ gonasooc/최신 - CSS - 10년 - 뒤에 - 쓰면 - 되나요 최관수 gonasooc