1. 펼치기 (details)

소화기는 어디에 있나요?

각 층 복도와 회의실 입구에 있습니다.

집결지는 어디인가요?

1층 주차장입니다.

2. 탭 (radio + :checked)

계단으로 대피하고 자세를 낮춥니다.
책상 아래로 몸을 숨기고 머리를 보호합니다.
손전등을 켜고 전열기 플러그를 뽑습니다.

3. 넘겨 보는 슬라이드 (scroll-snap)

1. 안전핀 뽑기
2. 밑동 조준
3. 손잡이 누르기
4. 좌우로 쓸기

4. 밝기 전환 (:has)

상자 안의 체크 상태를 :has()로 읽어 배경을 바꿉니다.

5. 별점 (radio + 형제 선택자)

6. 완료 표시 (:has + checkbox)

완료

7. 위치 강조 (:target)

비상구 A 보기 · 비상구 B 보기

비상구 A: 서쪽 계단

비상구 B: 동쪽 계단

68

자바스크립트 0줄 인터랙션

능력 사전
CSS만details · :has() · :target · scroll-snap설치 없음

자바스크립트 0줄 인터랙션

아래 상자들의 동작에는 자바스크립트가 한 줄도 쓰이지 않았습니다. 펼치기, 탭, 슬라이드, 다크 모드 전환, 별점이 모두 CSS 선택자와 HTML 기본 요소만으로 움직입니다. 스크립트가 막힌 환경에서도 동작하는 화면을 만들 때 쓰는 방법입니다.