카페24 하단 정보 - 주소, 연락처 등 바꾸기
카페24에서 자주 바꾸는 정보는 아니지만, 쇼핑몰 하단에 노출되는 배송지 주소, 반품 주소, 연락처 등이 변경해야할 경우가 있습니다. 관리자화면에서 쉽게 바꾸는 방법, html 파일을 수정하는 방법을 알려드립니다.
css
HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스
HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스를 공유합니다
테일윈드CSS 클래스명을 감춰주는 - Tailwind Fold
TailwindCSS는 편리하지만 클래스명이 지나치게 길어져 가독성이 떨어지는 단점이 있습니다. 하지만 Tailwind Fold 확장 프로그램을 사용하면 클래스명을 자동으로 감출 수 있어 가독성 문제를 해결할 수 있습니다. VS Code에서는 설정을 통해 자동 감추기와 클릭 시 펼치기 기능을 활성화할 수 있습니다.
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 쇼핑몰의 상세페이지에서 활용하여 사용자에게 더 편의를 제공하는 예시로 소개되었습니다.