[Part 10] Web Components — Shadow DOM 있는 것 vs 없는 것
Shadow DOM을 쓸 때와 안 쓸 때의 차이. Light DOM 컴포넌트 패턴, 언제 Shadow DOM을 쓰고 언제 쓰지 않아야 하는지 실전 기준으로 정리합니다.
카테고리
Frontend 22
[Part 11] Web Components — Props & State 패턴 + 네이밍 규칙
HTML 속성(Props)과 내부 상태(State) 패턴을 실전 코드로 정리하고, Web Components 개발 시 지켜야 할 프론트엔드 네이밍 규칙을 함께 다룹니다.
[Part 12] Web Components vs React — 실전 비교와 함께 쓰는 법
Web Components와 React의 핵심 차이를 정리하고, React 프로젝트에서 Web Components를 함께 사용하는 실전 패턴을 다룹니다.
AD
Part 1: CSS 선택자와 특정도 완전 이해하기
CSS 선택자와 특정도를 제대로 이해해야 나중에 네스팅과 스타일 충돌 문제를 해결할 수 있습니다. 점수 계산법과 상속, 캐스케이드까지 기초부터 정리했습니다.
Part 2: 커스텀 프로퍼티(Custom Properties) — 진짜 변수의 힘
Sass 변수와 완전히 다른 CSS 커스텀 프로퍼티의 개념과 활용법을 배웁니다. 런타임 변경, 상속, JavaScript 제어, 다크모드 구현까지 실전 예제를 중심으로 설명합니다.
Part 3:CSS 네스팅(Nesting)과 & 선택자
2026년 현재 모든 브라우저에서 지원되는 CSS 네스팅 문법과 & 선택자를 자세히 알아봅니다. Sass 네스팅과의 차이점과 실전 활용법까지 포함합니다.
AD