상품 상세페이지에서 이미지 간격 없애기 (코드, 초급)
아임웹에서는 상품 상세페이지에 삽입한 이미지를 한눈에 구분하기 쉽도록 약간의 간격을 두고 있어요.
하지만 연관된 이미지를 연속으로 배치할 때 이 간격이 디자인적으로 문제가 될 수 있습니다.
이 가이드에서는 간단한 CSS 스타일 속성을 사용하여 상품 상세페이지에 삽입된 이미지 간의 간격을 제거하는 방법을 살펴봅니다.
참고: 아임웹에서 제공하지 않는 기능을 코드로 해결하는 도움말입니다. 사용자가 임의로 변경한 부분에 대해 기술 및 고객지원은 불가하며, 향후 아임웹 업데이트에 따라 정상적으로 작동하지 않을 수 있습니다.
1단계: 상품 상세페이지에 코드 추가하기
1. [디자인 모드 > 왼쪽 상단의 메뉴 관리 ≡ > 상품 상세페이지]를 클릭합니다.
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 선택해 주세요.
TIP: 실제 방문자는 코드 위젯을 볼 수 없기 때문에 어느 곳에 있어도 상관없어요.
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. 완료되었습니다👏🏻
실제 사이트 페이지에 여백이 보이지 않는지 확인해 보세요.