무엇을 도와드릴까요?

상품 상세페이지에서 이미지 간격 없애기 (코드, 초급)

아임웹에선 상품 상세설명에 삽입한 이미지의 구분을 위해 약간의 간격을 두게끔 설정되어 있습니다.

하지만 연관된 이미지를 연속으로 배치하는 경우, 이 간격이 문제가 될 수 있습니다. 이 도움말에서는 간단한 CSS 스타일 속성을 사용해 상품 상세설명에 삽입한 이미지간의 간격을 없애는 방법을 설명합니다.

디자인 모드에 접속합니다. 접속방법
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
글로벌 메뉴 항목에서 상품 상세페이지 메뉴를 클릭해 이동합니다.
중요: 쇼핑 기능을 사용 설정해 주세요. 쇼핑 기능을 활성화하지 않으면 상품 상세페이지, 마이페이지, 장바구니 메뉴가 노출되지 않습니다. 쇼핑 및 예약 사용 설정하기
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다. (코드 위젯은 실제 방문자는 볼 수 없기 때문에 어느 곳에 있어도 무방합니다.)
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

아래의 코드를 복사합니다. (단축키: CTRL + C)

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

내 사이트 관리자 페이지에 접속합니다. 접속방법
왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
상품 목록이 나오면 편집할 상품을 마우스로 클릭합니다.
상세설명 항목에서 이미지 첨부 아이콘을 클릭합니다.
참고: 기존에 삽입한 이미지가 있다면 모두 삭제하고 다시 삽입하는 걸 추천합니다.
내 PC에서 이미지 파일을 선택해 올려줍니다.
모든 이미지가 삽입되면 텍스트 도구에서 코드보기 </> 아이콘을 클릭합니다.
이미지마다  와  태그로 감싸진 걸 확인할 수 있습니다. 첫 번째 태그의 사이에 아래의 CSS 스타일 속성을 추가해 주세요.
```
style="margin: 0;"
```
태그마다 margin CSS 스타일 속성을 추가하면 아래의 그림과 같이 작성됩니다.
참고: 상품 상세설명에 첨부한 이미지의 개수에 따라 입력해야 할 CSS 스타일 속성 개수는 달라집니다. 아래 그림은 3개 이미지에 대하여 CSS 스타일 속성을 추가한 화면입니다.
텍스트 도구에서 코드보기 </> 아이콘을 다시 클릭해 편집한 코드를 적용합니다.
중요: 반드시 코드보기 </> 아이콘을 다시 클릭해 주세요. 다시 클릭하지 않으면 모든 코드가 편집 전으로 초기화됩니다.
문제가 없다면 저장 버튼을 클릭하고 작업을 완료합니다.