Javascript - 그리드 레이아웃 이미지 교체 효과 핀터레스트에서 영감을 받아 3x3 그리드 레이아웃에서 이미지를 순차적으로 교체하는 웹 효과를 자바스크립트로 구현한 예시입니다. 더미 데이터는 photo.json에 저장되어 있습니다.자바스크립트에서는 이미지를 순차적으로 교체하는 스크립트를 구현했습니다.
Bento Grid Layout - css로 벤토 그리드를 만들어보자 Bento(도시락) 레이아웃 예제는 HTML의 간단한 구조로, display: grid와 grid-row, grid-column을 이용하여 화면을 배치합니다. JavaScript를 사용하여 순차적인 애니메이션을 추가하였으며,CodePen에서 확인 가능합니다.
HTML, CSS로 간단하게 구현하는 Sticky Header Sticky Header는 스크롤 시 특정 요소가 화면 상단에 고정되는 기능을 말합니다. CSS의 추가된 기능으로 간편하게 구현 가능합니다. 카페24 쇼핑몰의 상세페이지에서 활용하여 사용자에게 더 편의를 제공하는 예시로 소개되었습니다.