상품리스트에서 아이콘과 상품명 사이 간격 조절하기
디자인 관리 > 스마트디자인 편집창 > 메인(index.html), 상품분류(list.html) > 각 목록에서 사용하고 있는 html이나 css를 수정합니다.
편집창 > 메인(index.html), 상품분류(list.html) 에는 상품명과 아이콘을 노출하는 코드가 있습니다.
아래의 각각의 경우에 따른 코드를 참고하여 간격을 조절합니다.
margin이나 padding은 여백을 조절할 수 있는 속성으로, margin-top, margin-right, margin-bottom, margin-left 다음과 같이 4면의 여백을 설정할 수 있습니다.
* padding 속성 자세히 보기 : CLICK!
* margin 속성 자세히 보기 : CLICK!
1. 아이콘 사이의 간격 조절하기
아이콘사이의 간격을 넓히고 싶을 경우에는 아래의 코드와 같이 아이콘 사이에 공백 코드( & nbsp; )를 추가합니다.
아래의 코드 예시에서 &과 n사이의 여백을 삭제해야 합니다.
<div class="icon">{$soldout_icon}& nbsp;& nbsp;{$stock_icon}& nbsp;& nbsp;{$recommend_icon}& nbsp;& nbsp;{$new_icon}& nbsp;& nbsp;{$product_icons}& nbsp;& nbsp;{$benefit_icons}</div>
2. 상품명과 아이콘 좌우 여백을 조절하기
상품명과 아이콘사이의 간격을 넓히고 싶을 경우에는 아래의 코드와 같이 상품명에 ( style="margin-right:4px;" )를 추가합니다.
간격은 원하는 만큼 조절할 수 있습니다.
<p class="name" style="margin-right:4px;"><strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong></p>
<div class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
3. 상품명과 아이콘의 상하 여백 조절하기
상품명과 아이콘사이의 간격을 넓히고 싶을 경우에는 아래의 코드와 같이 상품명에 ( style="margin-bottom:5px; )를 추가합니다.
간격은 원하는 만큼 조절할 수 있습니다.
<p class="name" style="margin-bottom:5px;"><strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong></p>
<div class="icon">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
4. CSS를 통해 여백 조절하기
CSS를 사용하는 3가지 방법을 참고하여 다양하게 여백을 조절할 수 있습니다.
