cafe24 솔루션 스마트디자인 목록이미지사이즈와 진열 갯수, 가로,세로배...

게시물 수정 , 삭제는 로그인 필요

 수정해야 할 부분은

 

main.html부분

 

<div module="product_listmain_2">
<!--@css(/css/module/product/listmain_2.css)-->
    <!--
    $count = 8
    -->
    <p><img src="/web/upload/shopdata/img/title-main-new.gif"></p>

    <ul class="prdList">
       
        <li>
            <a href="/product/detail.html{$param}" title="{$summary_desc}" class="prdImg"><img src="{$image_medium}" alt="{$product_name}" width="315"/></a>
            <span class="zoom"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_prd_zoom.gif" onclick="{$zoom_action}" alt="확대보기" /></span>
            <a href="/product/detail.html{$param}" class="name">{$product_name}</a>
            <span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</span>
            <strong class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
            <span class="btns">
                <span class="bag"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_bag.gif" alt="장바구니넣기" onclick='{$basket_action}' class="{$basket_display|display}" /></span>
                <span class="option"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_option.gif" alt="옵션보기" onclick="{$option_preview_open_action}" onmouseout="{$option_preview_close_action}" class="{$option_preview_display|display}" id="btn_preview_listmain{$product_no}"></span>
            </span>
        </li>
        <li>
            <a href="/product/detail.html{$param}" title="{$summary_desc}" class="prdImg"><img src="{$image_medium}" alt="{$product_name}" width="315" /></a>
            <span class="zoom"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_prd_zoom.gif" onclick="{$zoom_action}" alt="확대보기" /></span>
            <a href="/product/detail.html{$param}" class="name">{$product_name}</a>
            <span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</span>
            <strong class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
            <span class="btns">
                <span class="bag"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_bag.gif" alt="장바구니넣기" onclick='{$basket_action}' class="{$basket_display|display}" /></span>
                <span class="option"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_option.gif" alt="옵션보기" onclick="{$option_preview_open_action}" onmouseout="{$option_preview_close_action}" class="{$option_preview_display|display}" id="btn_preview_listmain{$product_no}"></span>
            </span>
        </li>
        <li>
            <a href="/product/detail.html{$param}" title="{$summary_desc}" class="prdImg"><img src="{$image_medium}" alt="{$product_name}" width="315" /></a>
            <span class="zoom"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_prd_zoom.gif" onclick="{$zoom_action}" alt="확대보기" /></span>
            <a href="/product/detail.html{$param}" class="name">{$product_name}</a>
            <span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</span>
            <strong class="price">{$price_unit_head}{$product_price}{$price_unit_tail}</strong>
            <span class="btns">
                <span class="bag"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_bag.gif" alt="장바구니넣기" onclick='{$basket_action}' class="{$basket_display|display}" /></span>
                <span class="option"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_option.gif" alt="옵션보기" onclick="{$option_preview_open_action}" onmouseout="{$option_preview_close_action}" class="{$option_preview_display|display}" id="btn_preview_listmain{$product_no}"></span>
            </span>
        </li>
    
    </ul>
</div>

 

 

 

랑

 

 

 

listmain_2.css 부분

 

.xans-product-2 { margin:30px 0;  }
#contents .xans-product-2 h2{  }
.xans-product-2 ul { clear:both; zoom:1; margin:50px 0 40px -20px; padding:0 0 40px 0; }
.xans-product-2 ul:after {content:""; display:block; clear:both; }
.xans-product-2 ul li { float:left; width:315px; padding:0 0 30px 46px; line-height:1.6em; }

.xans-product-2 ul .prdImg { display:block; }
.xans-product-2 ul .prdImg img { display:block; width:255x:height:385px }
.xans-product-2 ul .zoom { float:right; padding:7px 0 0; cursor:pointer; }
.xans-product-2 ul .name { float:left; width:255px; padding:8px 0; font-size:11px; line-height:16px; }
.xans-product-2 ul .icon { display:block; clear:both; }
.xans-product-2 ul .price {  display:block; clear:both; color:#7C7C83; }
.xans-product-2 ul .mileage { display:block; clear:both; }
.xans-product-2 ul .mileage img { vertical-align:middle; }
.xans-product-2 ul .btns { overflow:hidden; zoom:1; }
.xans-product-2 ul .btns img { cursor:pointer; margin:0 4px 0 0; }
.xans-product-2 ul .btns .bag { float:left; padding:7px 10px 0 0; }
.xans-product-2 ul .btns .option { float:left; padding:7px 0 0; }
.xans-product-2 ul .custom {text-decoration:line-through; }
.xans-product-2 ul .manu { display:block; }
.xans-product-2 ul .btn { display:block; text-align:center; }

#toolTipStyle { display:none; width:120px; height:167px; padding:36px 20px 0 18px; z-index:95; background:url(http://img.echosting.cafe24.com/design/skin/mono/product/bg_prdBalloon.gif) 0 0 no-repeat; }

 

 

이렇게 두 곳안에

목록이미지 사이즈와 가로 세로 배열 갯수를 설정 할 수 있는 모양입니다.

잘 모르니까 편법으로 우선은 main.html에서

임의로 사이즈를 줄이고

listmain_2.css에서 사이즈 좀 줄이고 이것저것 만져봤더니

사이즈 줄이고 4단배열까진 했는데

레이아웃 왼쪽 바깥으로 몇픽셀 삐져나가더군요;;

 

지금은 메인에

가로 3단 세로2줄

이미지 사이즈는 315*476

이렇게 되어있는데요

 

바꿀땐

가로4단 세로2줄

이미지 사이즈 255*385

로 바꾸고 싶어요.

도와주세요!