# 메인 상품목록

- 위의 캡쳐 기준으로 RANKING 목록소스 수정 설명드립니다.

- 메인에서 동일한 한목을 같이 수정해주세요.

 

<style>
.magic-shop-_91090_ {padding:4px;}
.magic-shop-_91090_ .magic-list {margin:0; padding:0; list-style:none;}
.magic-shop-_91090_ .magic-item {
    display:inline-block; width:{$item_width_m}%; padding:4px; vertical-align:top;
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.magic-shop-_91090_ .magic-item img {vertical-align:middle;}
.magic-shop-_91090_ .magic-item > div {display:block; position:relative; border:1px solid #eaeaea; background:#fff;border-radius:20px;}
.magic-shop-_91090_ .magic-item > div figure {border-bottom:1px solid #eaeaea;border-radius:20px 20px 0px 0px;}
.magic-shop-_91090_ .magic-item > div figure img {width:100%; vertical-align:top;border-radius:20px 20px 0px 0px;}
.magic-shop-_91090_ .magic-item > div div {padding:4px;}
.magic-shop-_91090_ .magic-item > div div p {margin:0;}
.magic-shop-_91090_ .magic-item > div div p a {float:left;}
.magic-shop-_91090_ .magic-item > div div span {display:inline-block; padding:2px; line-height:1.2em;}
.magic-shop-_91090_ .magic-item > div div .subject {font-size:8px; color:#1a1717; font-weight:normal;}
.magic-shop-_91090_ .magic-item > div div .subject img {margin:2px;}
.magic-shop-_91090_ .empty {width:100%; font-size:8px; line-height:100px; text-align:center;}
.magic-shop-_91090_ .magic-item > div div .sijung_price {float:right; padding:4px 2px 0; font-size:11px; color:#888; text-decoration:line-through;}
.magic-shop-_91090_ .magic-item > div div .price {float:right; padding:4px 2px 0; font-size:11px;color:#e8262c;}
.magic-shop-_91090_ .magic-item > div div .soldout {float:right; padding:4px 2px 0; font-size:11px; color:#B1B1B1;}
.magic-shop-_91090_ .magic-item > div div p:after {content:''; display:block; clear:both;}

@media (min-width:768px){
    .magic-shop-_91090_ {padding:12px;}
    .magic-shop-_91090_ .magic-item {width:{$item_width_t}%; padding:8px;}
    .magic-shop-_91090_ .magic-item > div div {padding:20px;}
    .magic-shop-_91090_ .magic-item > div div .subject {font-size:15px;}
}

@media (min-width:102*px){
    .magic-shop-_91090_ .magic-item {width:{$item_width_pc}%; padding:6px;}
    .magic-shop-_91090_ .magic-item > div div {padding:10px;}
    .magic-shop-_91090_ .magic-item > div div .subject {font-size:12px; text-align:left;}
      .magic-shop-_91090_ .magic-item > div div .sijung_price {font-size:12px; text-align:left;}
      .magic-shop-_91090_ .magic-item > div div .price {font-size:12px; text-align:left;}
}
</style>

 

 

 

 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

 

 

# 상품목록

 

- 상품목록 페이지는 다음 위치에 있습니다.

 

[디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]

> [쇼핑몰] 상품 관련

> 상품목록 :: 분류 1 기준

 

 

 

 

- 해당 페이지에서 상품제목에 해당하는 소스는 다음과 같습니다.

            <li class="magic-item">
                <div>
                    <figure><a href="{$v[read_url]}"><img src="{$v[img1_url]}" alt="{$v[goods_name]}"></a></figure>
                    <div>
                        <p>
                            <span class="glores-A-subject"><img src="/img_up/shop_pds/jungle/design/img/icon_airplane.png" cond="$v[add_column2]"> <label><!--input name="goods_idx_arr" type="checkbox" value="{$v[idx]}"--> {$v[goods_name]}</label></span>
                        </p>
                        <p>
                            <span class="brand"><font size="1.8em"><b>{$v[brand_name]}</b></font></span>
                        </p>

 

 

 

 

- 제목부분에 적용되는 css 는 페이지 상단을 확인하면 알 수 있습니다.

 

<load target="/img_up/shop_pds/jungle/src_css/global_responsive_a_shop_mobile.css">

 

 

 

 

- 해당 파일은 다음 위치에 있습니다.

 

[디자인관리 > 고급 디자인 관리 > CSS 파일관리]

> 다국어 반응형 A 쇼핑몰 - 모바일 화면

 

 

 

 

- 해당 소스에서 제목부분을 찾습니다.

 

/* 상품 리스트 */
.glores-A-goods-list {
    ul {
        @extend %ul;
        @extend %clear;
        li {
            width:50%; padding:6px;
            @extend %border-box;
            > div {
                padding:0; border-radius:20px; border:1px solid #eaeaea; overflow:hidden;
                > figure {
                    margin:0; padding:0; border-radius:20px 20px 0px 0px;
                    img {display:block; width:100%; height:auto;border-radius:20px 20px 0px 0px;}
                }
                > div {padding:10px;}
                p {
                    margin:0;
                    &:after {content:''; display:block; clear:both;}
                    a {float:left; padding:2px;}
                }
                span {
                    display:inline-block; margin:0; padding:2px; font-size:13px; line-height:1.6em; text-align:left;
                    &.glores-A-subject {
                        margin-bottom:5px; color:#2a2a2a; font-weight:normal;
                        input[type=checkbox] {vertical-align:middle;}
                        img {margin:2px;}
                    }
                    &.glores-A-sijung-price {float:right; padding:4px 2px 0; color:#7b7b7b; text-decoration:line-through;}
                    &.glores-A-price {float:right; padding:4px 2px 0; color:#cd1449;}
                    &.glores-A-goods-info {display:none;}
                    &.glores-A-event-icon {display:block; margin-top:5px;}
                    &.glores-A-sold-out {float:right; color:#0064cb}
                }
            }
            .glores-A-text {margin:3em 0; text-align:center;}
        }
        .clear2n {clear:left;}
        .glores-A-empty {width:100% !important; color:#363636; font-size:14px; text-align:center; line-height:300px;}
    }
    img {vertical-align:middle;}
}
 

 

 

glores-A-subject 에 적용된 font-size 가 없으므로, 바로위의 span 에 적용된 font-size:13px 가 적용되고 있습니다.

 

상품목록은 정상적인 크기로 확인됩니다.