크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

컨텐츠몰 10% 할인 기간연장!
그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
카페24 모바일 메인화면 제이쿼리?CSS? 상품리스트 서서히 등장하기

QA

SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

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

본문

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

 

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

 

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

 

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

 

<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 혹은 제이쿼리 어떻게 작업하는게 좋을지 선배님들의 조언 부탁드립니다. 

 

 

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 1

채택됨
답변을 작성하시기 전에 로그인 해주세요.
전체 94
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT