카페24 모바일 메인화면 제이쿼리?CSS? 상품리스트 서서히 등장하기
본문
안녕하세요. 항상 선배님들에게 많은 도움을 받고있는 웹디자이너입니다.
제가 자사 쇼핑몰 모바일 메인화면을 작업하고 있습니다. HRML/CSS는 잡은 상태이고 아래의 예시 사이트와 같이 상품리스트가 천천히 등장하게 하고 싶어서 이렇게 글을 남깁니다.
ex: https://m.r-bn.co.kr/index.html
<style>
.xans-photoslide2 .sliderPaging > button{background:#fff !important;}
.mthum{width:100%; margin:0 auto; text-align:center; padding:5% 3%; box-sizing:border-box;}
.mthum img{width:100%; box-shadow: 0px 2px 4px 0px #e5e5e5;}
.thum_tit{font-size: 1.4em; padding:4% 0 2%;}
.thum_prc{font-size: 1.4em; color:#db0000; text-decoration:none;}
.thum_prc span{font-size: 0.8em; color:#b5b5b5; text-decoration:line-through;}
.mbrand{width:100%; margin:0 auto; padding: 10% 0 0;}
.mbrand img{width:100%;}
.minsta{width:100%; margin:0 auto;}
.minsta img{width:100%;}
</style>
<div style="padding:10% 3% 5%" class="mthum">
<img onclick="location.href='/product/detail.html?product_no=176&cate_no=58&display_group=1';" alt="장이대장 메인썸네일" src="/img/m/mthum_01.jpg"></a><div onclick="location.href='/product/detail.html?product_no=176&cate_no=58&display_group=1';" class="thum_tit">장이대장 1박스(10일분)</div><div class="thum_prc">18,000원 <span>20,000원</span></div>
</div>
<div class="mthum">
<img onclick="location.href='/product/detail.html?product_no=179&cate_no=58&display_group=1';" alt="밸런스포도당 메인썸네일" src="/img/m/mthum_02.jpg"><div onclick="location.href='/product/detail.html?product_no=179&cate_no=58&display_group=1';" class="thum_tit">밸런스포도당 1박스(10일분)</div><div class="thum_prc">23,000원 <span>30,000원</span></div>
</div>
<div class="mthum">
<img onclick="location.href='/product/detail.html?product_no=182&cate_no=59&display_group=1';" alt="여신몸매패치 복부 메인썸네일" src="/img/m/mthum_03.jpg"><div onclick="location.href='/product/detail.html?product_no=182&cate_no=59&display_group=1';" class="thum_tit">여신몸매패치 1박스(복부/옆구리)</div><div class="thum_prc">27,900원 <span>42,000원</span></div>
</div>
<div class="mthum">
<img onclick="location.href='/product/detail.html?product_no=184&cate_no=59&display_group=1';" alt="여신몸매패치 허벅지 메인썸네일" src="/img/m/mthum_04.jpg"><div onclick="location.href='/product/detail.html?product_no=184&cate_no=59&display_group=1';" class="thum_tit">여신몸매패치 1박스(허벅지/종아리)</div><div class="thum_prc">24,900원 <span>40,000원</span></div>
</div>
<div class="mbrand">
<a href="/shopinfo/company.html"><img alt="여신몸매패치 허벅지 메인썸네일" src="/img/m/mbrand.jpg"></a>
</div>
<div class="minsta">
<img alt="비오트릿 인스타그램" src="/img/m/minsta.jpg"></a>
</div>
html과css 내용입니다. css 혹은 제이쿼리 어떻게 작업하는게 좋을지 선배님들의 조언 부탁드립니다.
답변을 작성하시기 전에 로그인 해주세요.