- 간단한 TODO 앱은 생성, 읽기, 업데이트, 삭제 기능을 포함하며 기본적인 UI 요소들을 다룬다. ➕
- HTML, CSS, JavaScript만 사용하여 TODO 앱을 만들고, 로컬 스토리지에 저장하여 새로고침 후에도 유지되도록 한다. 💾
- CSS 변수를 사용하여 사이트를 모듈화하고 디자인 시스템을 구축하며, OKLCH 값, min 함수, margin inline/block 등의 유용한 기능들을 활용한다. 🎨
- JavaScript를 사용하여 TODO를 렌더링하고, 커스텀 이벤트를 발생시켜 UI 렌더링과 데이터 로직을 분리한다. 🧩
- HTML의 ARIA 라벨을 사용하여 스크린 리더와 검색 엔진이 페이지의 각 섹션을 이해하도록 돕는다. 🗣️
- CSS에서 HSL 값을 사용하여 색상 투명도를 조절하고, 변수를 활용하여 전체 사이트의 스타일을 쉽게 변경할 수 있도록 한다. 🌈