[업데이트 일자]

 - 2012-06-25

 

[첨부파일]

  common.css

 

[기능설명]

메인상품의 진열갯수를 늘리고 싶다면, HTML과 CSS를 수정해 주셔야 합니다.

아래 내용이 적용된 CSS 파일을 첨부하니, 다운받아서 그대로 적용하셔도 됩니다.

한줄에 상품이 3개씩 나오도록 CSS가 작업되어있으니, 되도록이면 count=3의 배수로 나오게 하는 것이 좋습니다.

(예: 1줄 정렬일 경우: count = 3, 2줄 정렬일 경우: count = 6)

[HTML]
<section class="mPrdMain typeRecom" module="product_listmain_1">
<!--
$count = 3 
-->

[CSS]
* 기존 파일 수정 /mobile/css/common.css

- 1번째 (142줄)

[수정전]
.mPrdMain .inner { position:relative; height:150px; overflow:hidden; }
.mPrdMain ul { /* position:absolute; width:1195px; rolling */ }
.mPrdMain li { position:absolute; width:95px; left:50%; margin-left:-47px; }
.mPrdMain li:first-child { left:0; margin:0; }
.mPrdMain li:last-child { left:auto; right:0; margin:0; }

[수정후]
.mPrdMain .inner { position:relative; margin-left:-2%; }
.mPrdMain ul { min-width:300px; margin:0 auto; overflow:hidden; }
.mPrdMain li { float:left; width:31%; padding:0 0 10px 2%; }

* 한줄에 4개의 상품을 넣고싶다면?

한개의 상품의 폭은, 전체 폭을 100%로 했을때 3등분한 31% 입니다. 상품과 상품의 여백을 위해 padding 2%로 코딩했습니다. [(31%+2%)*3 = 99%]

만약, 상품진열을 한줄에 4개씩 하고 싶다면, width:22%; padding:0 0 10px 3%; 과 같이 수정해주시고, html 에서 count=4, count=8 과 같이 수정해주시면  됩니다.

- 2번째 (612줄) : 디바이스를 가로로 볼때 나오는 사이즈를 조절하는 부분입니다.

[수정전]
@media all and (orientation:landscape) {
/* rolling
.mPrdMain .inner { height:205px; }
.mPrdMain ul { }
.mPrdMain li { width:150px; }
.mPrdMain li span.prdImg img { width:100%; height:150px; }
*/
.mPrdMain .inner { height:205px; }
.mPrdMain li { width:150px; left:50%; margin-left:-75px; }
.mPrdMain li span.prdImg img { height:150px; }

#thumbType { width:463px; }
#thumbType li { width:150px; padding-left:6px; }
#thumbType li img { width:150px; height:150px; }
}

[수정후]
@media all and (orientation:landscape) {
.mPrdMain li span.prdImg img { height:150px; }
#thumbType { width:463px; }
#thumbType li { width:150px; padding-left:6px; }
#thumbType li img { width:150px; height:150px; }
}