실제 구현한 인터랙티브 섹션과 프론트엔드 작업물을 확인하세요.
자식 요소가 자기 클래스가 아니라 부모에 심어둔 커스텀 속성 값(--tone)을 보고 색과 아이콘을 스스로 바꿉니다. 한 곳의 값 하나만 갈면 그 아래가 전부 따라옵니다.
검은 부분은 보이고 투명한 부분은 잘리는 마스크로 가장자리 페이드, 스포트라이트, 별 모양 컷아웃을 CSS만으로 만듭니다.
CSS 커스텀 속성에 '타입'을 등록하면, 원래 툭 점프하던 그라데이션 각도/숫자도 부드럽게 흐릅니다. JS 상태 없이 CSS만으로 숫자 카운트업까지.
clamp(min, preferred, max) 한 줄로 화면 폭에 맞춰 글자 크기와 여백이 최솟값과 최댓값 사이에서 연속으로 커지고 작아집니다. 미디어쿼리 단계를 쌓을 필요가 없어요.
가로 스크롤 영역에 CSS 몇 줄만 주면 손을 떼는 순간 카드가 자석처럼 달라붙어요. 캐러셀 라이브러리 없이 터치/트랙패드/드래그 관성까지 공짜로 따라옵니다.
offset-path로 따라갈 곡선을 한 번 정의하면 offset-distance만 0%에서 100%로 바꿔 요소가 그 길을 따라 이동합니다. x/y 키프레임이나 JS 좌표 계산 없이 곡선 모션을 만들 수 있어요.
자식 그리드가 부모의 행/열 선을 그대로 물려받아, 제목 길이가 제각각인 카드들의 본문과 버튼 줄을 같은 높이에 딱 맞춰 정렬합니다.
text-wrap: balance로 제목 줄 길이를 비슷하게 맞추고, pretty로 본문 마지막 줄에 단어가 외롭게 남는 걸 줄입니다. 수동 줄바꿈이나 JS 없이 CSS 한 줄로.
기본 색 하나만 정하면 밝은색/어두운색/hover/테두리/반투명까지 브라우저가 계산합니다. light-dark()로 라이트/다크 색을 한 규칙에 담아요.
@starting-style 와 transition-behavior: allow-discrete 한 묶음이면 display:none에서 나타나거나 사라지는 요소도 라이브러리 없이 부드럽게 움직여요. React는 boolean 하나만 뒤집어요.
같은 카드가 좁은 칸에선 세로로, 넓은 칸에선 가로로 자동 전환됩니다. 미디어 쿼리(화면 크기 기준) 없이 컴포넌트가 자기가 담긴 칸 너비만 보고 모양을 바꿔요.
입력이 맞으면 칸이 초록, 다 체크하면 카드가 완료 색, 이미지가 있으면 레이아웃이 바뀝니다. 전부 JS 없이 CSS :has() 한 줄로 처리해요.
textarea/input/select에 field-sizing: content 한 줄만 주면 입력 내용 길이에 맞춰 높이/너비가 자동으로 늘어납니다. JS로 scrollHeight를 재서 높이를 맞추던 코드를 CSS가 대체해요.
그리드/플렉스의 gap 한가운데에 column-rule, row-rule로 구분선을 그립니다. border나 가짜 요소로 우회하던 칸 사이 선을, 레이아웃을 1px도 밀지 않는 순수 시각 효과로 해결합니다.
열고 닫히는 네이티브 요소들의 지금 열렸는가를 단 하나의 CSS 가상클래스로 통일. 색/회전/백드롭이 전부 :open 으로 그려집니다.
행을 손가락으로 밀어 숨은 액션을 꺼내고, 끝까지 밀면 바로 삭제. 드래그 중 리렌더 없이 ref로 직접 움직이는 Pointer Events 스와이프 리스트입니다.
ECMAScript 2025 Set 메서드 시각화 + 미지원 환경 폴백
보내면 즉시 표시(전송 중) 후 저장 완료 시 확정 - form action과 결합
PlainDate/Duration/ZonedDateTime으로 더하기, 차이, 타임존을 명확하게
popover 속성과 popovertarget으로 light dismiss, Esc 닫힘, 최상위 레이어
document.startViewTransition + view-transition-name으로 SPA 라우터 없이 모핑
anchor-name / anchor() / position-try-fallbacks로 위치 계산 라이브러리 없이 툴팁/팝오버 만들기
왼쪽엔 연락 정보·소셜, 오른쪽엔 검증 들어간 문의 폼. 모바일에선 자연스럽게 한 줄로 쌓이는 2분할 Contact 섹션.
가상 가계부 앱 'Moneit'의 풀 랜딩 - hero 폰 목업부터 기능·단계·통계·다운로드 CTA까지, 스크롤하면 섹션이 떠오르는 밝은 톤 앱 소개 페이지.
별이 화면 중심에서 바깥으로 가속하며 흘러나가는 hyperspace 효과. 3D 좌표를 원근 투영해 canvas 2D로 그린 풀스크린 앰비언트 배경입니다.
트랙 위 핸들을 오른쪽 끝까지 드래그하면 초록으로 채워지며 인증 완료. 도중에 놓으면 스프링백으로 처음으로 돌아갑니다.
"둘러보기 시작"을 누르면 대상만 환하게 비추고 나머지는 어둡게 가린 채, 옆의 말풍선으로 한 단계씩 기능을 설명하는 온보딩 투어입니다.
실수 클릭으로 삭제되는 사고를 막는 press-and-hold 버튼. 누르고 있으면 링이 차오르고, 끝까지 채워야 실행됩니다.
Fullscreen API를 감싼 커스텀 훅. ref 엘리먼트(없으면 문서 전체)를 전체화면으로 토글하고, 사용자가 ESC로 빠져나와도 상태가 어긋나지 않습니다.
링크에 마우스를 올리면 밑줄이 슬라이드·펼침·교체·차오름·물결로 나타나는 hover 밑줄 6종 갤러리. JavaScript 없이 순수 CSS만으로.
