아임웹에서는 상품 상세페이지에 삽입한 이미지를 한눈에 구분하기 쉽도록 약간의 간격을 두고 있어요.
하지만 연관된 이미지를 연속으로 배치할 때 이 간격이 디자인적으로 문제가 될 수 있습니다.

이 가이드에서는 간단한 CSS 스타일 속성을 사용하여 상품 상세페이지에 삽입된 이미지 간의 간격을 제거하는 방법을 살펴봅니다.

1단계: 상품 상세페이지에 코드 추가하기

1. [디자인 모드 > 왼쪽 상단의 메뉴 관리 ≡ > 상품 상세페이지]를 클릭합니다.

2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 선택해 주세요.

3. 코드 위젯 마우스 우 클릭 - 설정을 클릭해 주세요.

4. 아래의 코드를 복사해서,

<style>
.fr-view img.fr-dib {margin: 0 auto;}
.fr-view img.fr-dii {margin: 0;}
img.fr-dib {margin: 0;}
</style>

5. 코드 설정 빈 칸에 붙여 넣고 [저장]을 클릭합니다.

2단계: 상세설명 이미지 삽입하고 CSS 추가하기

1. [관리자 페이지 > 쇼핑 > 상품]에서 수정이 필요한 상품의 상세페이지를 수정해 주세요.

2. 상세설명 항목에서 이미지 첨부 아이콘을 클릭해서 이미지 파일을 업로드 해주세요.

3. 모든 이미지가 삽입되면 텍스트 도구에서 코드보기 </> 아이콘을 클릭해요.

4. 이미지마다 <p> 와 </p> 태그로 감싸진 걸 확인할 수 있는데요.
첫 번째 <p> 태그의 <p 와 > 사이에 아래의 CSS 스타일 속성을 추가해 주세요.

style="margin: 0;"

5. 텍스트 도구에서 코드보기 </> 아이콘을 다시 클릭해 편집한 코드를 적용해요.

6. 문제가 없다면 [저장]을 클릭해 주세요.

7. 완료되었습니다👏🏻
실제 사이트 페이지에 여백이 보이지 않는지 확인해 보세요.