📱Verde_Mobile 스킨 가이드
공통
HEADER 스타일 변경하기
파일명 : css/gd_layout.css
상단 레이아웃의 스타일을 변경할 수 있다.
#header_wrap header {
width: 100%;
min-width: 320px;
background: #fff;
z-index: 300;
}햄버거 메뉴 아이콘을 변경할 수 있다.
#header_wrap header .header_box .side_menu span {
display: inline-block;
width: 24px;
height: 24px;
font-size: 0;
background: url('../img/icon/icon_menu.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}검색 아이콘 이미지를 변경할 수 있다.
#header_wrap header .header_box .top_search span {
display: inline-block;
width: 18px;
height: 17px;
font-size: 0;
background: url('../img/icon/icon_search.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}마이페이지 이미지를 변경할 수 있다.
#header_wrap header .header_box .mypage span {
display: inline-block;
width: 21px;
height: 21px;
font-size: 0;
background: url('../img/icon/icon_mypage.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}장바구니 이미지를 변경할 수 있다.
#header_wrap header .header_box .cart span {
display: inline-block;
width: 24px;
height: 24px;
font-size: 0;
background: url('../img/icon/icon_cart.png') no-repeat center;
background-size: 100%;
vertical-align: top;
}장바구니 카운트 스타일을 변경할 수 있다.
#header_wrap header .header_box .cart_count {
position: absolute;
top: 8px;
right: 0;
display: block;
padding: 0px 4px;
line-height: 15px;
border-radius: 10px;
min-width: 15px;
color: #fff;
background: var(--primary-default);
font-size: 10px;
text-align: center;
}사이드 메뉴 스타일 변경하기
파일명 : css/gd_layout.css
언어 타이틀 스타일을 수정할 수 있다.
.nav_language .tit {
display: table-cell;
width: 30%;
font-size: 15px;
padding: 13px 15px 13px 15px;
color: #262626;
font-weight: bold;
box-sizing: border-box;
}[Q&A], [최근본상품], [찜리스트] 아이콘과 텍스트 스타일을 변경할 수 있다.
/* 텍스트 */
.nav_link ul li a {
display: block;
padding: 36px 0 0 0;
font-size: 13px;
color: #888;
}
/* Q&A */
.nav_link ul li:nth-child(1) a {
background: url(../img/icon/icon_qna.svg) no-repeat center 3px;
background-size: 33px 30px;
}
/* 최근본상품 */
.nav_link ul li:nth-child(2) a {
background: url(../img/icon/icon_prd_latest.svg) no-repeat center 4px;
background-size: 33px 30px;
}
/* 찜리스트 */
.nav_link ul li:nth-child(3) a {
background: url(../img/icon/icon_lnb_heart.svg) no-repeat center 4px;
background-size: 33px 30px;
}[카테고리], [브랜드] 버튼의 스타일을 변경할 수 있다.
/* 버튼 기본 스타일 */
.nav_tabmenu_box .nav_tabmenu li span {
display: block;
padding: 10px 0 10px 0;
background: #e8e8e8;
color: #acacac;
}
/* 활성화된 상태일 때 */
.nav_tabmenu_box .nav_tabmenu li.on span {
background: var(--primary-default);
color: #fff;
font-weight: bold;
}카테고리 트리 메뉴 아이템의 스타일을 변경할 수 있다.
.category_side > li a {
position: relative;
display: block;
padding: 12px 0 12px 0;
font-size: 16px;
color: #262626;
}[커뮤니티] 타이틀과 공통 게시판 링크 스타일을 변경할 수 있다.
/* 커뮤니티 타이틀 */
.nav_community_box .comm_tit {
padding: 10px 0 10px 10px;
margin: 0 10px 0 6px;
font-size: 18px;
color: #272727;
font-weight: bold;
border-bottom: 0px solid #000000;
}
/* 공통 게시판 링크 */
.nav_community_box .board_cate li a {
display: block;
padding: 6px 0;
font-size: 14px;
color: #1c1c1c;
}사이드 메뉴 닫기 버튼의 스타일을 지정할 수 있다.
#wrap nav .left_close {
position: fixed;
top: 20px;
left: 310px;
width: 29px;
height: 29px;
background: url(../img/icon/icon_left_x.png) no-repeat center;
background-size: 100%;
z-index: 1002;
}푸터(하단 공통) 스타일 변경하기
파일명 : css/gd_layout.css
푸터 메뉴의 스타일을 변경할 수 있다.
#footer footer .ft_menu li a {
display: block;
font-size: 12px;
font-weight: 700;
}[고객센터], [은행계좌 안내] 타이틀의 스타일을 변경할 수 있다.
.main_info dl dt > span {
font-weight: 700;
font-size: 12px;
}푸터 정보 영역과 카피라이트 텍스트의 스타일을 변경할 수 있습니다.
/* 푸터 정보 */
#footer footer .ft_info2_box .ft_address {
padding: 0px;
text-align: left;
font-size: 12px;
word-break: keep-all;
}
/* 카피라이트 */
#footer footer .ft_copy {
font-size: 9px;
text-align: left;
font-style: normal;
margin-block: 24px;
}메인
상품 진열 타이틀 변경하기
상품 진열 타이틀의 스타일을 수정할 수 있다.
/* css/main/main.css 코드 추가 */
._goods_display_main h3 {
margin-top: 0;
font-size: 32px;
font-weight: 800;
line-height: 38px;
}더보기 버튼 스타일을 수정할 수 있다.
/* 하단 더보기 버튼 */
.main_more_btn {
display: block;
width: calc(100%);
padding: 12px 8px;
margin: 0 auto;
text-align: center;
background: #000;
font-size: 14px;
/* border: 1px solid #9f9f9f; */
color: #fff;
box-sizing: border-box;
}
/* 상단 더보기 버튼 */
.main_more_btn2 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
block-size: 20px;
inline-size: auto;
background-color: #343434;
border-radius: 10px;
gap: 5px;
font-size: 10px;
font-weight: var(--font-medium);
}상품 상세
상품 정보 스타일 변경하기
파일명 : css/goods/goods.css
브랜드 스타일을 변경할 수 있다.
상품명 스타일을 변경할 수 있다.
가격 정보 스타일을 변경할 수 있다.
[공유하기], [찜하기] 버튼 스타일을 수정할 수 있다.
상품 상세 - 상품후기 탭 컨텐츠 스타일 변경하기
파일명 : css/goods/goods.css
평가, 리뷰수 정보의 스타일을 변경할 수 있다.
플러스 리뷰 > [리뷰등록], [나와 비슷한 리뷰 보기] 버튼 스타일을 변경할 수 있다.
[후기 작성], [더보기 n/n] 버튼 스타일을 변경할 수 있다.
주문 결제
Last updated
Was this helpful?