| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- #쇼핑몰
- 해피CGI
- #happycgi
- 홈페이지
- 사이트제작
- javascript
- #해피CGI
- 게시판
- #업종별
- jquery
- 웹솔루션
- #홈페이지제작
- #cgimall
- #CSS
- #image
- #동영상
- #뉴스
- happycgi
- CSS
- 솔루션
- #이미지
- 해피씨지아이
- php
- #jQuery
- 이미지
- #솔루션
- CGIMALL
- 홈페이지제작
- #웹솔루션
- #홈페이지
- Today
- Total
목록2026/06/15 (1)
웹솔루션개발 26년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 스크롤 인터랙션 확장형 이미지 갤러리 UI
CSS Grid 기반으로 구성된 이미지 갤러리에서 특정 요소 hover 시 해당 영역이 확장되도록 구현된 인터랙션이다.:has() 선택자를 활용하여 부모 요소에서 자식 hover 상태를 감지하고 레이아웃을 동적으로 변경한다.이미지는 겹치는 grid 구조와 비율 변화를 통해 자연스럽게 확장되며 시각적인 몰입감을 제공한다.별도의 JavaScript 없이 순수 CSS만으로 구현된 구조로, 최신 브라우저 환경에서 활용 가능한 UI 패턴이다.HTML 구조div style="--bg-img:url(https://images.unsplash.com/photo-1518005020951-eccb494ad742?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxf..
웹프로그램밍 자료실/기타 자료
2026. 6. 15. 09:26