희도의 놀이터

쇼핑몰에서 등록하는 상품 사진에는 다른 상품들도 같이 포함될 수 있다. 이런 경우 각 상품 정보를 편리하게 확인할 수 있도록 돕는 기능이다: 각 상품 영역에 마우스 오버 시 간단한 설명이 포함된 상자를 표시한다. 각 상품 영역 또는 상자 내용 클릭 시 그 상품 링크로 이동한다. 예제 코드 링크: Codepen 주의사항: 기능은 간단하지만 사진 업로드 시 약간의 작업이 요구된다. 사진마다 상품 영역을 지정해주고, 일정 규칙대로 코드를 수정해줘야 한다. 1. 공통 코드 추가 마우스오버 상자 및 링크 연결을 위한 공통 코드를 추가한다. 추가한 공통 코드: SHOP NOW 2. 이미지 영역 설정 및 업로드 2-1. 이미지 업로드 먼저 이미지를 업로드해서 이미지 링크를 획득한다. 2-2. 이미지 영역 설정 이미지..