Help Center
카페24 소식
[모바일쇼핑몰] 상품진열 디자인 개선 (디바이스별 가변넓이 적용 ①~⑥)
2013-01-24
안녕하세요, 카페24 운영도우미 입니다.
모바일쇼핑몰의 가로 넓이가 모바일 기기 별로 맞춰질 수 있도록
고정으로 잡았던 부분을 %로 계산하여 가변넓이가 적용되었습니다.
아래의 CSS파일 수정 및 관련링크 ①~⑥의 HTML 파일을 모두 수정하시면
정상적으로 적용되오니 각 안내페이지를 확인하시어 작업해주시기 바랍니다.
자세한 내용은 아래를 참조해 주세요.
[CSS 수정]
아래의 내용과 같이 공통 CSS 파일을 수정해주시기 바랍니다.
(편집창 각 페이지 별 '최신소스' 가져오기를 사용하시면 좀 더 쉽게 적용이 가능합니다.)
■ 공통 CSS
- 수정파일 : /css/common.css
1) 수정
- 수정전 : .gPrdAddition { margin:0 -10px; }
- 수정후 : .gPrdAddition { margin:0 -7px; }
2) 제거
/* main */
.mPrdMain { position:relative; padding:10px 0; font-size:11px; line-height:1.2em; }
.mPrdMain h2 { padding:0 0 5px 15px; font-size:13px; line-height:15px; }
.mPrdMain p.btn { position:absolute; top:10px; right:0; text-align:right; }
.mPrdMain p.btn a { overflow:hidden; display:inline-block; width:12px; height:12px; background:url(http://img.echosting.cafe24.com/mobileWeb/common/ico_main.png) 0 0 no-repeat; background-size:12px 36px; }
.mPrdMain p.btn a.selected { background-position:0 bottom; }
.mPrdMain p.btn a span { display:block; text-indent:100%; }
.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%; }
.mPrdMain li a { color:rgb(99,102,110); }
.mPrdMain li span { display:block; }
.mPrdMain li span.prdImg { text-align:center; }
.mPrdMain li span.prdImg img { width:100%; height:95px; }
.mPrdMain li span.prdName { margin:5px 0 5px; }
.mPrdMain li span.price em,
.mPrdMain li span.price strong { color:rgb(255,102,0); font-weight:bold; }
.mPrdList { font-size:12px; }
.mPrdList li { overflow:hidden; position:relative; min-height:85px; }
.mPrdList li .prdImg { position:absolute; left:0; top:10px; }
.mPrdList li .descriptions { padding:0 0 0 100px; }
.mPrdList li .descriptions span { display:block; min-height:65px; }
.mPrdList li .descriptions .price { display:block; color:rgb(255,102,0); }
.mPrdList li .descriptions a { color:rgb(99,102,110); }
#descType li { padding:10px 10px 10px 0; }
#thumbType { overflow:hidden; width:299px; margin:5px auto 0; }
#thumbType ul { margin:0 0 0 -7px; }
#thumbType li { float:left; width:95px; padding:3px 0 4px 7px; }
#thumbType li img { display:block; }
.mPrdMain li span.prdImg img { height:150px; }
#thumbType { width:463px; }
#thumbType li { width:150px; padding-left:6px; }
#thumbType li img { width:150px; height:150px; }
3) 추가
/* 상품리스트(갤러리) */
.mPrdList.typeThumb { margin:10px -4px 0; }
.mPrdList.typeThumb:first-child h2 { border-top:0; }
.mPrdList.typeThumb h2 { margin:0 4px 0; padding:10px 0 0 15px; font-size:13px; line-height:15px; background:url("http://img.echosting.cafe24.com/mobileWeb/gray/bg_member.png") 0 -80px no-repeat; background-size:20px 120px; }
.mPrdList.typeThumb ul { display:table; table-layout:fixed; width:100%; font-size:0; line-height:0; }
.mPrdList.typeThumb img { max-width:100%; }
.mPrdList.typeThumb li { position:relative; display:inline-block; padding:7px 0; text-align:center; vertical-align:top; }
.mPrdList.typeThumb .thumbnail { margin:0 4px; }
.mPrdList.typeThumb .thumbnail img { width:100%; }
.mPrdList.typeThumb .name { margin:8px 4px 0; font-size:12px; line-height:1.25; word-wrap:break-word; }
.mPrdList.typeThumb .name a { color:#1D2B6D; }
.mPrdList.typeThumb .price { margin:0 4px; color:#FF6600; font-family:Tahoma; font-weight:bold; font-size:12px; line-height:1.25; letter-spacing:-1px; word-wrap:break-word; }
.mPrdList.typeThumb .price span { margin: 0 0.3em; color:#434446; }
.mPrdList.typeThumb .more_view { margin:7px 4px 0; }
.mPrdList.typeThumb .more_view a { display:block; padding:0 0 0 0; background:#d4d4d6; }
.mPrdList.typeThumb .more_view a span { overflow:hidden; display:block; width:100%; height:30px; text-indent:-9999px; background:url("http://img.echosting.cafe24.com/mobileWeb/common/ico_toggle_arow_down.png") no-repeat 50% 50%; background-size:8px 7px; }
.mPrdList.typeThumb .grid3 li { width:33.333%; }
.mPrdList.typeThumb .grid4 li { width:25%; }
/* 상품리스트(설명) */
.mPrdList.typeDesc { margin:10px 0 0; font-size:12px; }
.mPrdList.typeDesc > ul > li { overflow:hidden; position:relative; padding:10px 10px 10px 0; }
.mPrdList.typeDesc .thumbnail { position:absolute; left:0; top:10px; }
.mPrdList.typeDesc .description { min-height:85px; padding:0 0 0 100px; }
.mPrdList.typeDesc .name a { display:block; color:#63666E; }
.mPrdList.typeDesc .price { color:#FF6600; font-weight:bold; }
.mPrdList.typeDesc .delete { position:absolute; top:10px; right:10px; overflow:hidden; text-indent:-999px; width:21px; height:20px; border:0; cursor:pointer; background:url("http://img.echosting.cafe24.com/mobileWeb/common/btn_delete.png") no-repeat 0 0; background-size:100% 100%; }
.mPrdList.typeDesc .button { padding:5px 0; }
.mPrdList.typeDesc .button:after { content:""; display:block; clear:both; }
.mPrdList.typeDesc .button .tButton.type2 { float:right; }
.mPrdList.typeDesc .option li { margin:3px 0 0; padding:0 0 0 8px; font-size:11px; border-bottom:0; background:url("http://img.echosting.cafe24.com/mobileWeb/common/bg_rowType2Th.png") 0 7px no-repeat; background-size:3px 7px; }
※ 설정하신 스킨의 색상에 따라 아래의 CSS를 선택하여 추가해서 사용해보세요~
■ 스킨 CSS (black 타입)
- 수정파일 : /css/black.css
1) 수정
- 수정전
.gMember a { color:rgb(33,37,48); background:url(http://img.echosting.cafe24.com/mobileWeb/black/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
- 수정후
.gMember a { color:#212530; background:url(http://img.echosting.cafe24.com/mobileWeb/black/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
2) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(0,0,0); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/black/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(161,161,163); }
#thumbType { border-bottom:1px dashed rgb(0,0,0); }
#resultType li { border-bottom:1px dashed rgb(0,0,0); }
3) 추가
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed rgb(0,0,0); }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed #A1A1A3; }
■ 스킨 CSS (brown 타입)
- 수정파일 : /css/brown.css
1) 수정
- 수정전
.gMember a { color:rgb(33,37,48); background:url(http://img.echosting.cafe24.com/mobileWeb/brown/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
- 수정후
.gMember a { color:#212530; background:url(http://img.echosting.cafe24.com/mobileWeb/brown/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
2) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(173,158,150); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/brown/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(161,161,163); }
#thumbType { border-bottom:1px dashed rgb(161,161,163); }
#resultType li { border-bottom:1px dashed rgb(161,161,163); }
3) 추가
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed rgb(173,158,150); }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed rgb(173,158,150);
■ 스킨 CSS (custom 타입)
- 수정파일 : /css/custom.css
1) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(105,106,110); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/gray/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(161,161,163); }
#thumbType { border-bottom:1px dashed rgb(161,161,163); }
#resultType li { border-bottom:1px dashed rgb(161,161,163); }
2) 추가
/* order */
.mGift { border-bottom:1px solid rgb(0,0,0); }
/* 갤러리형 게시판 추가 */
.mGallery .notice { border-bottom:1px solid rgb(0,0,0); }
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed rgb(0,0,0); }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed #A1A1A3; }
■ 스킨 CSS (gray 타입)
- 수정파일 : /css/gray.css
1) 수정
- 수정전
.gMember a { color:rgb(33,37,48); background:url(http://img.echosting.cafe24.com/mobileWeb/gray/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
- 수정후
.gMember a { color:#212530; background:url(http://img.echosting.cafe24.com/mobileWeb/gray/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
2) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(105,106,110); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/gray/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(161,161,163); }
#thumbType { border-bottom:1px dashed rgb(161,161,163); }
#resultType li { border-bottom:1px dashed rgb(161,161,163); }
3) 추가
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed #A1A1A3; }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed #A1A1A3; }
■ 스킨 CSS (pink 타입)
- /css/pink.css
1) 수정
- 수정전
.gMember a { color:rgb(33,37,48); background:url(http://img.echosting.cafe24.com/mobileWeb/pink/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
- 수정후
.gMember a { color:#212530; background:url(http://img.echosting.cafe24.com/mobileWeb/pink/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
2) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(202,0,104); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/pink/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(202,0,104); }
#thumbType { border-bottom:1px dashed rgb(202,0,104); }
#resultType li { border-bottom:1px dashed rgb(202,0,104); }
3) 추가
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed rgb(202,0,104); }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed rgb(202,0,104); }
■ 스킨 CSS (red 타입)
- 수정파일 : /css/red.css
1) 수정
- 수정전
.gMember a { color:rgb(33,37,48); background:url(http://img.echosting.cafe24.com/mobileWeb/red/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
- 수정후
.gMember a { color:#212530; background:url(http://img.echosting.cafe24.com/mobileWeb/red/bg_member.png) 0 0 no-repeat; background-size:20px 120px;}
2) 제거
/* main */
.mPrdMain { border-bottom:1px dashed rgb(140,6,6); }
.mPrdMain h2 { background:url(http://img.echosting.cafe24.com/mobileWeb/red/bg_member.png) 0 -90px no-repeat; background-size:20px 120px; }
#descType li { border-bottom:1px dashed rgb(197,130,130); }
#thumbType { border-bottom:1px dashed rgb(140,6,6); }
#resultType li { border-bottom:1px dashed rgb(140,6,6); }
/* 상품리스트 */
.mPrdList.typeThumb h2 { border-top:1px dashed rgb(140,6,6); }
.mPrdList.typeDesc > ul > li { border-bottom:1px dashed #C58282; }
[관련링크 - HTML 수정]
아래의 모든 페이지들이 변경 되었으니 해당 페이지별 수정내용을 적용해주세요.
각 페이지 별로 편집창에서 [ 최신소스 ] 기능을 이용하여 업데이트 받으셔도 됩니다.
① 메인페이지 - [바로가기]
② 카테고리 리스트 - [바로가기]
③ 카테고리 리스트(썸네일형) - [바로가기]
④ 검색 - [바로가기]
⑤ 최근 본 상품 - [바로가기]
⑥ 관심상품 - [바로가기]
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]