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

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

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

적용방법

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

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 글로벌 메뉴 항목에서 상품 상세페이지 메뉴를 클릭해 이동합니다.

  4. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
  5. 코드 위젯을 클릭합니다. (코드 위젯은 실제 방문자는 볼 수 없기 때문에 어느 곳에 있어도 무방합니다.)
  6. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  7. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

  8. 아래의 코드를 복사합니다. (단축키: CTRL + C) 
    <style> .fr-view img.fr-dib {margin: 0 auto;} .fr-view img.fr-dii {margin: 0;} img.fr-dib {margin: 0;} </style>
  9. 코드 설정 빈 칸에 붙여넣습니다. (단축키: CTRL + V)

  10. 저장 버튼을 클릭합니다.

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

  1. 내 사이트 관리자 페이지에 접속합니다.
  2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
  3. 상품 목록이 나오면 편집할 상품을 마우스로 클릭합니다.
  4. 상세설명 항목에서 이미지 첨부 아이콘을 클릭합니다.
    참고: 기존에 삽입한 이미지가 있다면 모두 삭제하고 다시 삽입하는 걸 추천합니다.

  5. 내 PC에서 이미지 파일을 선택해 올려줍니다.
  6. 모든 이미지가 삽입되면 텍스트 도구에서 코드보기 </> 아이콘을 클릭합니다.

  7. 이미지마다 <p> 와 </p> 태그로 감싸진 걸 확인할 수 있습니다. 첫 번째 <p> 태그의 <p  와 > 사이에 아래의 CSS 스타일 속성을 추가해 주세요. 
    style="margin: 0;"

  8. <p> 태그마다 margin CSS 스타일 속성을 추가하면 아래의 그림과 같이 작성됩니다.
    참고: 상품 상세설명에 첨부한 이미지의 개수에 따라 입력해야 할 CSS 스타일 속성 개수는 달라집니다. 아래 그림은 3개 이미지에 대하여 CSS 스타일 속성을 추가한 화면입니다.

  9. 텍스트 도구에서 코드보기 </> 아이콘을 다시 클릭해 편집한 코드를 적용합니다.
    중요: 반드시  코드보기 </> 아이콘을 다시 클릭해 주세요. 다시 클릭하지 않으면 모든 코드가 편집 전으로 초기화됩니다.
  10. 문제가 없다면 저장 버튼을 클릭하고 작업을 완료합니다.

3단계: 이미지 간격 설정여부 확인하기

  1. 관리자 페이지 왼쪽 상단에 사이트 바로가기를 클릭합니다.
  2. 편집한 상품 상세페이지로 이동합니다.
  3. 상세설명에 모든 이미지가 여백 없이 표시되는지 확인합니다.