캠페이너스에선 상품 상세설명에 삽입한 이미지의 구분을 위해 약간의 간격을 두게끔 설정되어 있습니다.
하지만 연관된 이미지를 연속으로 배치하는 경우, 이 간격이 문제가 될 수 있습니다. 이 도움말에서는 간단한 CSS 스타일 속성을 사용해 상품 상세설명에 삽입한 이미지간의 간격을 없애는 방법을 설명합니다.
디자인 모드에 접속합니다.
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
글로벌 메뉴 항목에서 상품 상세페이지 메뉴를 클릭해 이동합니다.
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다. (코드 위젯은 실제 방문자는 볼 수 없기 때문에 어느 곳에 있어도 무방합니다.)
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
아래의 코드를 복사합니다. (단축키: CTRL + C)
JavaScript코드 설정 빈 칸에 붙여넣습니다. (단축키: CTRL + V)
저장 버튼을 클릭합니다.
내 사이트 관리자 페이지에 접속합니다.
왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
상품 목록이 나오면 편집할 상품을 마우스로 클릭합니다.
상세설명 항목에서 이미지 첨부 아이콘을 클릭합니다.
참고: 기존에 삽입한 이미지가 있다면 모두 삭제하고 다시 삽입하는 걸 추천합니다.
내 PC에서 이미지 파일을 선택해 올려줍니다.
모든 이미지가 삽입되면 텍스트 도구에서 코드보기 </> 아이콘을 클릭합니다.
이미지마다 <p> 와 </p> 태그로 감싸진 걸 확인할 수 있습니다. 첫 번째 <p> 태그의 <p 와 > 사이에 아래의 CSS 스타일 속성을 추가해 주세요.
<p> 태그마다 margin CSS 스타일 속성을 추가하면 아래의 그림과 같이 작성됩니다.
참고 : 상품 상세설명에 첨부한 이미지의 개수에 따라 입력해야 할 CSS 스타일 속성 개수는 달라집니다. 아래 그림은 3개 이미지에 대하여 CSS 스타일 속성을 추가한 화면입니다.
텍스트 도구에서 코드보기 </> 아이콘을 다시 클릭해 편집한 코드를 적용합니다.
중요 : 반드시 코드보기 </> 아이콘을 다시 클릭해 주세요. 다시 클릭하지 않으면 모든 코드가 편집 전으로 초기화됩니다.
문제가 없다면 저장 버튼을 클릭하고 작업을 완료합니다.
관리자 페이지 왼쪽 상단에 사이트 바로가기를 클릭합니다.
편집한 상품 상세페이지로 이동합니다.
상세설명에 모든 이미지가 여백 없이 표시되는지 확인합니다.