업그레이드소식
2012-09-03
[모바일쇼핑몰] 메인페이지의 상품을 3개이상 진열하는 방법
[업데이트 일자] - 2012-06-25 [첨부파일] common.css [기능설명]메인상품의 진열갯수를 늘리고 싶다면, HTML과 CSS를 수정해 주셔야 합니다.아래 내용이 적용된 CSS 파일을 첨부하니, 다운받아서 그대로 적용하셔도 됩니다.한줄에 상품이 3개씩 나오도록 CSS가 작업되어있으니, 되도록이면 count=3의 배수로 나오게 하는 것이 좋습니다. (예: 1줄 정렬일 경우: count = 3, 2줄 정렬일 경우: count = 6)[HTML][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; }}
Store
Store
