CSS Paint Worklet: 배경 이미지 사용자 지정
2025-05-26

이 예제는 CSS Paint Worklet을 사용하여 동적인 배경 이미지를 만드는 방법을 보여줍니다. 사용자 지정 속성 `--boxColor` 및 `--widthSubtractor`를 정의하고 CSS `nth-of-type` 선택기를 사용하여 목록 항목에 다양한 색상과 너비의 배경 이미지를 생성합니다. JavaScript 코드는 배경 이미지를 그리는 로직이 포함된 외부 Paint Worklet 스크립트 `boxbg.js`를 등록합니다. 최종 결과는 사용자 지정이 가능합니다. 개발자 도구에서 사용자 지정 속성 값을 변경하여 색상과 너비를 변경할 수 있습니다.
개발
사용자 지정 배경