상품 상세페이지에서 이미지 간격 없애기 (코드, 초급)
아임웹에서는 상품 상세페이지에 삽입한 이미지를 한눈에 구분하기 쉽도록 약간의 간격을 두고 있어요.
하지만 연관된 이미지를 연속으로 배치할 때 이 간격이 디자인적으로 문제가 될 수 있습니다.
이 가이드에서는 간단한 CSS 스타일 속성을 사용하여 상품 상세페이지에 삽입된 이미지 간의 간격을 제거하는 방법을 살펴봅니다.
참고: 아임웹에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다.
1단계: 상품 상세페이지에 코드 추가하기
1. [디자인 모드 > 왼쪽 상단의 메뉴 관리 ≡ > 상품 상세페이지]를 클릭합니다.
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 선택해 주세요.
TIP: 실제 방문자는 코드 위젯을 볼 수 없기 때문에 어느 곳에 있어도 상관없어요.
3. 코드 위젯 마우스 우 클릭 - 설정을 클릭해 주세요.
4. 아래의 코드를 복사해서,
<style>
.fr-view img.fr-dib {margin: 0 auto;}
.fr-view img.fr-dii {margin: 0;}
p, img.fr-dib {margin: 0;}
</style>5. 코드 설정 빈 칸에 붙여 넣고 [저장]을 클릭합니다.
완료되었습니다👏🏻
실제 사이트 페이지에 여백이 보이지 않는지 확인해 보세요.