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

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

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

적용방법

  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. 저장 버튼을 클릭합니다.
  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. 문제가 없다면 저장 버튼을 클릭하고 작업을 완료합니다.
  1. 관리자 페이지 왼쪽 상단에 사이트 바로가기를 클릭합니다.
  2. 편집한 상품 상세페이지로 이동합니다.
  3. 상세설명에 모든 이미지가 여백 없이 표시되는지 확인합니다.

관련 도움말

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
864.3K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
3.9K
전국 파트너/리셀러 수

아임웹과 함께하는 제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 이지페이, 엑심베이 공식파트너입니다.