:has()
자바스크립트 0줄 CSS 인터랙션
해결하는 문제
간단한 펼치기·탭·슬라이드에도 자바스크립트를 써야 한다고 생각한다.
details, :has(), :target, scroll-snap 같은 CSS 기능만으로 아코디언, 탭, 슬라이더, 다크 모드를 만듭니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것사용자의 클릭·스크롤
브라우저가 하는 일CSS 선택자와 상태만으로 화면 변경
나오는 것스크립트 없는 인터랙션
쓰는 브라우저 기술
details/summary:has():targetscroll-snap@container
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- 전환 효과 시간
- 움직임 줄이기 설정 존중
자주 막히는 곳
- 구형 브라우저는 :has()를 지원하지 않는다
- 복잡한 상태 관리에는 한계가 있다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI에게 "JS 없이"라는 제약을 줘서 가벼운 코드 받기
웹 서비스
- 자주 묻는 질문, 탭 안내 페이지
피지컬 AI
- 저사양 키오스크 화면
넓히는 방법
- 보안이 엄격한 곳(스크립트 금지)에서도 동작하는 화면
- 이메일·문서용 인터랙션
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
자바스크립트를 한 줄도 쓰지 말고 CSS만으로 탭, 아코디언, 이미지 슬라이더, 다크 모드 전환이 되는 HTML을 만들어줘.
같은 분류의 능력
08 시각화·모션·인터랙션에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md