기본값을 활용하라: HTML과 CSS로 작업하라
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자(특히 액세스성과 JavaScript 최소화를 고려하는 경우)
- 난이도: 중간(HTML/CSS 기초 지식 필요)
핵심 요약
- HTML의 라디오 버튼과 CSS의
:checked
의사클래스를 활용해 JavaScript 없이 UI 상호작용 구현 가능 :has()
의사클래스를 사용해 라디오 버튼 상태에 따라 요소 표시/숨기기 가능- 액세스성 향상 및 JavaScript 의존도 감소를 통한 개발 효율성 향상
섹션별 세부 요약
1. 문제 상황
- 사용자가 지불 방식을 선택하는 인터페이스 구현 필요
- JavaScript로 이벤트 리스너 추가해 요소 스타일 변경하는 전통적 접근 방식 설명
- 하지만 라디오 버튼을 사용한 접근이 더 간단하고 액세스성 우수함
2. 라디오 버튼 활용 방안
- 라디오 버튼은 기본적으로 "선택 상태"를 지원하는 폼 요소
for
속성으로 라벨과 연결해 카드 형태로 스타일링 가능- CSS로
:checked
상태에서 테두리/그림자 변경해 시각 피드백 제공 - 예시 코드:
```css
.radio-card-input:checked + .radio-card {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .35);
}
```
3. `:has()` 의사클래스 활용
:has()
를 사용해 라디오 버튼 상태에 따라 요소 표시/숨기기- 예시: 온라인 지불 선택 시 인보이스 폼 표시
```css
.row:has(#payment_kind_payment_pending:checked) .invoice {
display: block;
}
```
:has()
의 브라우저 지원: Chrome 105+, Firefox 117+, Safari 15.4+ (2025년 기준 93% 이상)
결론
- HTML과 CSS 기능을 최대한 활용해 JavaScript 의존도를 줄이고 액세스성 향상
:has()
의사클래스를 사용해 상태에 따른 UI 변경 가능(지원 브라우저 확인 필요)- 라디오 버튼을 UI 요소로 재해석해 시각적 피드백과 기능성을 동시에 달성 가능