테스트 사이트 - 개발 중인 베타 버전입니다

카페24 모바일 메인화면 제이쿼리?CSS? 상품리스트 서서히 등장하기 채택완료

jeonru 6년 전 조회 4,745

안녕하세요. 항상 선배님들에게 많은 도움을 받고있는 웹디자이너입니다. 

 

제가 자사 쇼핑몰 모바일 메인화면을 작업하고 있습니다. HRML/CSS는 잡은 상태이고 아래의 예시 사이트와 같이 상품리스트가 천천히 등장하게 하고 싶어서 이렇게 글을 남깁니다. 

 

ex: https://m.r-bn.co.kr/index.html">https://m.r-bn.co.kr/index.html

 

자사: http://m.biotreat.kr/">http://m.biotreat.kr/

 

</p>

<p><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></p>

<p>

<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></p>

<p><div class="mbrand">

    <a href="/shopinfo/company.html"><img alt="여신몸매패치 허벅지 메인썸네일" src="/img/m/mbrand.jpg"></a>

</div></p>

<p><div class="minsta">

    <img alt="비오트릿 인스타그램" src="/img/m/minsta.jpg"></a>

</div></p>

<p>

 

html과css 내용입니다. css 혹은 제이쿼리 어떻게 작업하는게 좋을지 선배님들의 조언 부탁드립니다. 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
오경민
6년 전

wow 플러그인 쓰시면 손쉽게 해결되실것같내용

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인