LogoLogo
NHN커머스 메인개발자센터
  • 운영 가이드
    • 고도몰 시작하기
      • 관리자 화면 이해하기
      • 쇼핑몰 기본정보 입력하기
      • 도메인 등록 및 연결하기
      • 결제수단 연결하기
      • 배송비 조건 등록
      • 회원에 대한 조건 입력하기
      • 쇼핑몰 약관, 이용안내 입력하기
    • 기본 디자인 알아보기
      • 쇼핑몰 기본 꾸미기
        • 스킨 꾸미기
          • 메인 꾸미기
          • 상품 페이지 꾸미기
          • 검색 페이지 꾸미기
      • 디자인 관리
        • PC
        • 모바일
      • 배너 및 팝업창 관리
        • PC
        • 모바일
      • 쇼핑몰에 영상 추가하기
        • 앱 신청하기
        • 영상 업로드하기
        • 영상 추가하기
          • 메인 비쥬얼
          • 배너
      • 디자인 향상시키기
      • 무료스킨 디자인 수정 가이드
        • 🆙마이그릭(Mygreek)
          • 🖥️Mygreek_PC 스킨 가이드
          • 📱Mygreek_Mobile 스킨 가이드
        • 🆙바람숲(BaRamSoop)
          • 🖥️BaRamSoop_PC 스킨 가이드
          • 📱BaRamSoop_Mobile 스킨 가이드
        • 🆙위유위(Weyouwe)
          • 🖥️Weyouwe_PC 스킨 가이드
          • 📱Weyouwe_Mobile 스킨 가이드
        • 🆙소나루(Sonaru)
          • 🖥️Sonaru_PC 스킨 가이드
          • 📱Sonaru_Mobile 스킨 가이드
        • 🆙메이트앤코(Mate&Co)
          • 🖥️Mate&Co_PC 스킨 가이드
          • 📱Mate&Co_Mobile 스킨 가이드
        • 🆙퍼피레드(Puppyred)
          • 🖥️Puppyred_PC 스킨 가이드
          • 📱Puppyred_Mobile 스킨 가이드
        • 🆙글랜스(Glance)
          • 🖥️Glance_PC 스킨 가이드
          • 📱Glance_Mobile 스킨 가이드
        • 🆙케이스(Case)
          • 🖥️Case_PC 스킨 가이드
          • 📱Case_Mobile 스킨 가이드
        • 🆙아뜰리에(Atelier)
          • 🖥️Atelier_PC 스킨 가이드
          • 📱Atelier_Mobile 스킨 가이드
        • 🆙매치포인트(Matchpoint)
          • 🖥️Matchpoint_PC 스킨 가이드
          • 📱Matchpoint_Mobile 스킨 가이드
        • 🆙홍삶(Honglife)
          • 🖥️Honglife_PC 스킨 가이드
          • 📱Honglife_Mobile 스킨 가이드
        • 🆙베르데(Verde)
          • 🖥️Verde_PC 스킨 가이드
          • 📱Verde_Mobile 스킨 가이드
        • 🆙뽀끼(Bbokki)
          • 🖥️Bbokki_PC 스킨 가이드
          • 📱Bbokki_Mobile 스킨 가이드
        • 🆙쉐프초이스(Chef's Choice)
          • 🖥️Chef's Choice_PC 스킨 가이드
          • 📱Chef's Choice_Mobile 스킨 가이드
        • 🆙마카룸(Macaroom)
          • 🖥️Macaroom_PC 스킨 가이드
          • 📱Macaroom_Mobile 스킨 가이드
        • 🆙블리스(Bliss)
          • 🖥️Bliss_PC 스킨 가이드
          • 📱Bliss_Mobile 스킨 가이드
        • 🆙로스트리브(Roastrive)
          • 🖥️Roastrive_PC 스킨 가이드
          • 📱Roastrive_Mobile 스킨 가이드
        • 🆙띵(tting)
          • 🖥️tting_PC 스킨 가이드
          • 📱tting_Mobile 스킨 가이드
        • 🆙비키(Biki)
          • 🖥️Biki_PC 스킨 가이드
          • 📱Biki_Mobile 스킨 가이드
        • 🆙하나노떼(Hahanotte)
          • 🖥️Hahanotte_PC 스킨 가이드
          • 📱Hahanotte_Mobile 스킨 가이드
        • 🆙밥도둑
        • 🆙마이 플랜트(My Plant)
        • 🆙어반(URBAN)
        • 🆙어라운드(AROUND)
        • 럭스(Luxe)
        • 벤세르(VENCER)
        • 트렌디(TRENDY)
        • 해피애니멀(Happy Animall)
        • 니모(NIMO)
        • 클레마티스(clematis)
        • 어썸(Awesome)
        • 마임(MIME)
          • 🖥️MIME_PC 스킨 가이드
          • 📱MIME_Mobile 스킨 가이드
        • 투에이엠(2AM)
          • 🖥️2AM_PC 스킨 가이드
          • 📱2AM_Mobile 스킨 가이드
        • 해피키즈(Happy Kids)
          • 🖥️Happy Kids_PC 스킨 가이드
          • 📱Happy Kids_Mobile 스킨 가이드
        • 더 리빙(THE LIVING)
          • 🖥️THE LIVING_PC 스킨 가이드
          • 📱THE LIVING_Mobile 스킨 가이드
        • 퓨어(PURE)
          • 🖥️PURE_PC 스킨 가이드
          • 📱PURE_Mobile 스킨 가이드
        • 프레쉬(FRESH#)
          • 🖥️Fresh#_PC 스킨 가이드
          • 📱Fresh#_Mobile 스킨 가이드
        • 모먼트(Moment)
          • 🖥️Moment_PC 스킨 가이드
          • 📱Moment_Mobile 스킨 가이드
        • 스토리지(Storyg)
          • 🖥️Storyg_PC 스킨 가이드
          • 📱Storyg_Mobile 스킨 가이드
    • 상품 기본 관리
      • 상품 등록하기
      • 상품 진열하기
    • 주문/배송처리 알아보기
      • 주문/배송처리 과정 및 정책
    • 검색엔진 등록하기
      • 네이버 사이트 등록하기
      • 구글 사이트 등록하기
  • FAQ
    • 쇼핑몰 운영
      • 쇼핑몰 연장/복구
      • 쇼핑몰 해지
      • 소유권 이전
      • 트래픽
      • 디스크(스토리지) 용량 추가
      • 도메인 관리
        • 네임 서버
      • 패치&업그레이드
        • [23.12.06] 에디터 보안패치 이슈 케이스
        • [24.02.21] 상품등록/수정 성능(속도) 개선 건 패치 범위 안내
          • 자주 묻는 질문(FAQ)
      • 전자결제서비스
      • 이벤트 모니터링
      • 디자인센터
      • 튜닝센터
      • 쇼핑몰 기본정보
      • 부가서비스
    • 어드민 기능
      • 기본설정
        • 기본정책
        • 관리정책
        • 배송정책
        • 주문정책
        • 결제정책
        • 본인확인 인증서비스
        • 해외상점
        • 보안서버 관리
      • 상품관리
        • 상품 분류 관리
        • 상품 노출 형태 관리
      • 주문/배송
        • 주문관리
        • 취소/교환/반품/환불
        • 현금영수증
        • 세금계산서
        • 택배연동 서비스
        • 자동입금확인 서비스
      • 회원
        • 회원관리
        • 마일리지/예치금
        • 메일관리
        • SMS 관리
        • 간편로그인
          • 페이코 로그인 설정
          • 네이버 로그인 설정
          • 카카오 로그인 설정
          • 위메프 로그인 설정
        • 카카오 알림톡
        • CRM 그룹 관리
      • 게시판
      • 프로모션
        • 쿠폰관리
        • 페이퍼 쿠폰관리
        • 타임세일
        • SNS 관리
      • 디자인
        • 디자인 설정
        • 배너 관리
        • 팝업창 관리
      • 공급사
    • 신규창업
    • 쇼핑몰 이전
    • 커머스 회원/결제
  • 고도몰 성장 지원
  • 클래스
  • 고도몰 매뉴얼
  • NHN커머스 도움말
Powered by GitBook
LogoLogo

NHN COMMERCE

  • 공지사항
  • 회사소개

Partners

  • 서비스 제휴문의
  • 셀러어드민
  • 디자인 파트너

Developers

  • 스토어

©NHN COMMERCE Corp. All rights reserved.

On this page

Was this helpful?

  1. 운영 가이드
  2. 기본 디자인 알아보기
  3. 무료스킨 디자인 수정 가이드
  4. 아뜰리에(Atelier)

Atelier_PC 스킨 가이드

Previous아뜰리에(Atelier)NextAtelier_Mobile 스킨 가이드

Last updated 5 months ago

Was this helpful?

공통

포인트 컬러 일괄 변경하기
  1. Atelier 스킨에 적용되어 있는 기본 컬러 코드 #cb558f 입니다

  1. 관리자 > 디자인 메뉴 접속

  1. 스타일시트/CSS 변경 - 좌측 하단 폴더트리 내 스타일시트/CSS더블 클릭하여 아래와 같이 표시된 스타일 시트를 오픈합니다. - common.css를 더블 클릭 하여 common/common.css 파일을 엽니다.

  2. 화면 최상단에서 --primary-default의 값을 원하는 포인트 컬러 코드로 변경합니다.

:root {
	--primary-default: #cb558f; /* 포인트 색 */
	--primary-hover: #ad1b63; /* 포인트 색 hover */
	--secondary-default: #b1b5bb;/* 서브 색 */
	--neutrals-gray: #f0f0f0;
	--neutrals-dark: #000;
	--font-size: 14px; /* 기본 폰트 크기 */
	--font-family: 'Pretendard variable'; /* 기본 폰트 */
	--font-regular: 400;
	--font-medium: 500;
	--font-bold: 700;
	--min-width: 1450px;
	--max-width: 1680px;
}
  1. 사이트 전체 폰트 사이즈 변경 시 --font-size의 값 수정, 사이트 전체 서체 변경 시 --font-family 값을 변경합니다.

메뉴 변경하기

  1. 전체 메뉴의 background-color (배경색) 값을 변경할 수 있습니다.

css > layout/layout.css

.gnb_allmenu_wrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 400px;
	background: var(--neutrals-gray);
	z-index: 999;
}
  1. 전체 메뉴 hover background(배경색)을 변경할 수 있습니다.

.gnb_allmenu_wrap .gnb_allmenu_box li:hover,
.gnb_allmenu_wrap .gnb_allmenu_box li.is-open > button:hover {
	background-color: var(--primary-default);
}

3.전체 메뉴 color(폰트 색), font-size(폰트 크기)를 변경할 수 있습니다.

.gnb_allmenu_wrap .gnb_allmenu_box a,
.gnb_allmenu_wrap .gnb_allmenu_box button {
	color: var(--neutrals-dark);
	font-size: 24px;
	font-weight: 400;
	height: 64px;
	line-height: 64px;
	width: 100%;
	text-align: left;
	display: block;
}
  1. 장바구니 담긴상품 수량 폰트의 color(색상) 값을 변경할 수 있습니다. (현재는 기본 포인트 컬러 전역변수로 지정되어 있습니다.) css > layout/layout.css

.top_member_box > li strong {
	color: var(--primary-default);
}
검색창 폰트 변경하기
  1. 검색창 인풋박스 입력 폰트의 font-size(크기), color(폰트 색) 값을 추가해 변경할 수 있습니다.

css/layout/layout.css

.top_search input {
	flex: 1;
	border: none 0;
	vertical-align: top;
	/* 
	  color: #333;
	  font-size: 14px;
 	*/
}

2. 최근검색어 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다. css/layout/layout.css

.recent_box dt {
    font-size: 13px; /* 폰트 사이즈 변경 */
    margin-bottom: 10px;
    font-weight: bold;
}

3. 추천상품 폰트의 font-size(크기), font-weight(굵기), text-align(정렬) 값을 변경할 수 있습니다.

css/layout/layout.css

.recom_box dt {
    width: 100%;
    font-size: 13px; /* 폰트 사이즈 변경 */
    font-weight: var(--font-bold);
    line-height: 19px;
    text-align: center;
    margin-bottom: 10px;
}

푸터 변경하기 (폰트/컬러)

1. 푸터 메뉴 폰트의 color(색상) 값을 변경할 수 있습니다.

css/layout/layout.css

.footer__privacy a {
	color: #000;
	line-height: inherit;
}

2. 푸터 정보영역 폰트의 color(색상), background-color(푸터 배경색) 값을 변경할 수 있습니다.

css/layout/layout.css

.footer__item-content {
	line-height: 16px;
	font-weight: 300;
	font-size: calc(var(--font-size) - 2px);
}
웹폰트 적용하기

1. 관리자 페이지 > 디자인 메뉴에 접속합니다.

2. 좌측 하단 폴더트리 내 “스타일시트/CSS”를 더블 클릭하여 스타일시트 리스트 중 reset.css를 오픈하세요.

3. reset.css 스타일시트의 3번째 줄에 @import url(’외부 스타일시트 경로’)을 추가합니다.

css/reset.css

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 5번째줄에 추가 */

4. 13번째 줄의 font-family의 맑은 고딕으로 설정된 폰트를 "나눔고딕" 또는 Nanum Gothic(변경할 폰트명)으로 수정하세요. (한글 폰트 파일명의 경우 " "입력)

css/common/common.css

.:root {
    ...
    --font-family: 'Pretendard variable';
    ...
}
  1. common.css --font-family에서 변경된 폰트는 reset.css 에서 하위 코드에 적용 됩니다.

css/reset.css

.godo * {
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, sans-serif;
}

...

body,
th,
td,
input,
select,
textarea,
button {
	font-size: var(--font-size);
	line-height: 1.5;
	font-family: var(--font-family), Pretendard, -apple-system, BlinkMacSystemFont,
		system-ui, Roboto, Dotum, '돋움', sans-serif;
	color: #333;
}

※ 웹폰트 사용시 속도저하가 발생할 수 있어 권장하지 않습니다.

메인

최근 본 상품 변경하기

1. 타이틀 폰트의 color(색상) 값을 변경할 수 있습니다.

css/layout/layout.css

.scroll_right_cont {
	float: left;
	min-width: 72px;
	padding: 0px;
	background: none;
	color: #333;
}

3. 상품 가격 폰트의 color(색상) 값을 변경할 수 있습니다.

css/layout/layout.css

.scroll_right_cont .src_box strong {
    display: block;
    color: #0CC472;
}

5. 페이징 폰트의color(색상) 값을 변경할 수 있습니다.

css/layout/layout.css

.scroll_right_cont .scr_paging strong {
    padding: 0 2px 0 2px;
    color: #0CC472;
}
진열타입 타이틀 변경하기(폰트/컬러)

1. 타이틀 폰트의font-size(크기) 값을 변경할 수 있습니다.

css/goods/list.css

.goods_list_tit h3 {
    font-size:60px;
    font-weight: 400;
}

2. 타이틀 영역 하단의 border-bottom(선) 값을 변경할 수 있습니다.

css/goods/list.css

.goods_list_tit {
    padding:100px 0 10px 0;
    /* border-bottom:1px solid #ececec;*/ 
    line-height:1;
    position:relative;
}

3. 더보기 버튼의 font-size(크기), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

css/goods/list.css

.btn_goods_more .btn_goods_view_more {
    padding:2px 5px 3px 5px;
    font-size:14px;
    font-weight:400;
    border:0px solid #dbdbdb;
}
상품 리스트 변경하기

1. 상품명 color(색상) 값을 변경할 수 있습니다. (한줄 말줄임이 처리가 되어 있습니다.)

css/goods/list.css

.item_tit_box .item_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 0;
    font-size: 16px;
    text-overflow: ellipsis;
    font-weight: normal;
    overflow: hidden;
    line-height: 22px;
    color: var(--primary-default); /* color 추가 */
}

2. 할인가격 폰트의 font-size(크기), color(색상) 값을 변경할 수 있습니다.

css/goods/list.css

.item_money_box .item_price {
    /*display:block;*/
    padding:0px;
    font-size:16px;
    color:#000000;
    font-weight:bold;
}

상품상세

상품 상세 상단 변경하기(폰트)

1. 상품명 폰트의 font-size(크기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_detail_tit h3 {
    width:405px;
    font-size:18px;
    word-break: break-all;
}

2. 상품 정보 타이틀 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_detail_list dt {
    ffloat:left;
    width:80px;
    margin:0 10px 0 0;
    color:#888888;
    font-weight:normal;
    word-wrap:break-word;
}

3. 상품 가격 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_price dd {
    margin: -2px 0 0 0;
    font-size: 16px;
    font-weight: bold;
}

4. 총 합계금액 폰트의 font-size(크기), font-weight(굵기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_tatal_box .total_amount dt {
    font-size: 16px;
    font-weight: bold;
}

5. 총 합계금액 가격 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_tatal_box .total_amount dd {
    color:#0CC472;
    font-weight:bold;
}

6. 총 합계금액 가격 폰트의 font-size(크기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_tatal_box .total_amount dd strong {
    font-size: 20px;
}
상품 상세 상단 변경하기(버튼)

1. 공유하기 버튼의 background(배경), border(선) 값을 변경할 수 있습니다.

css/button.css

.btn_gray_list a, .btn_gray_list button {
    display:inline-block;
    padding:0 0 0 11px;
    border:1px solid #999;
    vertical-align:middle;
}

2. 조건별 배송 버튼의 font-size(크기), background(배경) 값을 변경할 수 있습니다.

css/button.css

.btn_gray_list .btn_gray_small {
    font-size:11px;
}

3. 장바구니 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경할 수 있습니다.

css/button.css

.btn_add_cart, .btn_add_wish {
    display:inline-block;
    width:152px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#3e3d3c;
    font-size:16px;
    border:1px solid #cccccc;
    background:#ffffff;
    text-align:center;
    font-weight:regular;
}

4. 바로구매 버튼의 color(색상), font-size(크기), border(선), background(배경), text-align(정렬), font-weight(굵기) 값을 변경할 수 있습니다.

css/button.css

.btn_add_order {
    display:inline-block;
    width:230px;
    height:52px;
    margin:0 0 0 6px;
    padding:0 10px 0 10px;
    color:#ffffff;
    font-size:16px;
    border:1px solid #0CC472;
    background:#0CC472;
    text-align:center;
    font-weight:regular;
}
상품 상세 상단 변경하기(라인)

1. 셀렉트 영역의 border(선), background(배경) 값을 변경할 수 있습니다.

css/layout/layout.css

.location_select {
    display:inline-block;
    position:relative;
    min-width:150px;
    margin:7px 0 0 0;
    border:1px solid #999999;
    background:#ffffff;
    z-index:50;
}

2. 상품명 아래 border-bottom(선) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_detail_tit {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbdbdb;
}

css/layout/layout.css

.item_detail_list + .item_choice_list table {
    width: 100%;
    border-bottom: 1px solid #999999;
}
  1. 선택한 옵션영역의 background(배경) 값을 변경할 수 있습니다.

css/layout/layout.css

.item_choice_list table {
    width: 100%;
    background: #f5f5f5;
}

css/goods/goods.css

.item_tatal_box .total_amount {
    margin: 15px 0 0 0;
    padding-top: 10px;
    border-top: 1px solid #dbdbd
상품 상세 탭 변경하기

1. 상품 상세 탭 선택시 color(색상), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_goods_tab li.on a {
	padding-top: 18px;
	margin-top: 8px;
	color: #333333;
	font-weight: bold;
	border-bottom: 2px solid #ffffff;
}

2. 글 등록 수량 폰트의 color(색상) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_goods_tab li a strong {
    color: #ab3e55;
}
상품 상세 상품문의 영역-리스트 변경하기

1. 상품 문의 타이틀 폰트의 font-size(크기) 값을 변경할 수 있습니다.

css/goods/goods.css

.item_goods_sec h3 {
    padding: 45px 0 10px 0;
    font-size: 18px;
}

2. 상품문의 전체보기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경할 수 있습니다.

css/button.css

.btn_reviews_more, .btn_qna_more {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ffffff;
    text-align: center;
}

3. 상품문의 글쓰기 버튼의 color(색상), font-weight(굵기), border(선), background(배경), text-align(정렬) 값을 변경할 수 있습니다.

css/button.css

.btn_reviews_write, .btn_qna_write {
    display: inline-block;
    min-width: 120px;
    padding: 10px 10px 10px 10px;
    color: #ffffff;
    font-weight: bold;
    border: 1px solid #ab3e55;
    background: #ab3e55;
    text-align: center;
}

4. 페이징 버튼의 color(색상), font-weight(굵기), border(선) 값을 변경할 수 있습니다.

css/button.css

.pagination .on {
    color: #ab3e55;
    font-weight: bold;
    border: 1px solid #ab3e55
상품 상세 상품문의 영역-리스트 내용 변경하기

1. 수정 버튼의 background(배경), border(선) 값을 변경할 수 있습니다.

css/button.css

.btn_gray_list a, .btn_gray_list button {
    display: inline-block;
    padding: 0 0 0 11px;
    background: url(../img/common/btn/btn_gray_bg.png) repeat-x;
    border: 1px solid #dbdbdb;
    vertical-align: middle;
}

2. 상품문의 내용 펼침 영역의 background(배경) 값을 변경할 수 있습니다.

css/goods/goods.css

.qna_new_box {
    text-align: left;
    background: #f8f8f8;
}

주문결제

장바구니 화면 변경하기

1. 장바구니 타이틀 폰트의 color(색상), font-size(크기), color(색상) 값을 변경할 수 있습니다.

css/order/order.css

.order_wrap .order_tit h2 {
    float: left;
    font-size: 28px;
    color: #222222;
}

2. 현재 스텝 표시 폰트의 color(색상), font-weight(굵기) 값을 변경할 수 있습니다.

css/order/order.css

.order_wrap .order_tit .page_on {
    color: #ab3e55;
    font-weight: bold;
}

3. 다음 진행 스텝 표시 폰트의 font-size(크기), color(색상) 값을 변경할 수 있습니다.

css/order/order.css

.order_wrap .order_tit ol li {
    float: left;
    font-size: 14px;
    color: #d1d1d1;
}

4. 장바구니 타이틀 폰트 하단의 border-bottom(선) 값을 변경할 수 있습니다.

css/order/order.css

.order_wrap .order_tit {
    overflow: hidden;
    border-bottom: 1px solid #dbdbdb;
}

5. 장바구니 상품금액/배송비/최종 결제금액의 color(색상), font-size(사이즈), font-weight(굵기) 값을 변경할 수 있습니다.

css/order/order.css

.price_sum_cont .price_sum_list dd {
    color:#000;
}
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}

6. 선택상품주문 버튼은 마우스 오버 전(.btn_order_choice_buy) 과 오버 시(.btn_order_choice_buy:hover)의 border(선), font-size(사이즈), color(색상) 값으로 각각 변경할 수 있습니다.

css/order/button.css

.btn_order_choice_buy { 
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#3e3d3c;
    font-weight:bold;
    font-size:14px;
    border:1px solid #cccccc;
    background:#fff;
    cursor:pointer;
}
.btn_order_choice_buy:hover {
    color:#333333;
    border:1px solid #bbbbbb;
}

7. 전체상품주문 버튼은 마우스 오버 전(.btn_order_whole_buy) 과 오버 시(.btn_order_whole_buy:hover) 의 background(배경) 컬러, border(선), color(색상), font-size(사이즈) 값으로 각각 변경할 수 있습니다.

css/button.css

.btn_order_whole_buy {
    min-width:190px;
    height:55px;
    padding:0 20px 0 20px;
    color:#ffffff;
    font-size:14px;
    border:1px solid #ab3e55;
    background:#0CC472;
    cursor:pointer;
    font-weight:bold;
}
.btn_order_whole_buy:hover {
    border:1px solid #02B666;
    background:#02B666;
}
주문서 작성/결제 화면 변경하기

주문서 금액 변경하기

- 상품금액/배송비/합계 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

css/order/order.css

.price_sum_cont .price_sum_list dd {
    color:#000;
}
.price_sum_cont .price_sum_list dd strong {
    font-weight:700;
    font-size:18px;
    color:#000;
}

최종결제금액, 결제하기 버튼 변경하기

1. 최종 결제 금액 폰트의 color(색상), font-size(사이즈) 값을 변경할 수 있습니다.

css/order/order.css

.payment_final_total dd {
    display:inline-block;
    font-size:30px;
    color:#0CC472;
}

2. 결제하기 버튼의 background(배경), border(선), color(색상), font-size(사이즈) 값을 각각 변경할 수 있습니다.

css/button.css

.btn_order_buy {
    display:inline-block;
    width:300px;
    height:61px;
    line-height:59px;
    color:#fff;
    font-size:20px;
    border:1px solid #0CC472;
    background:#0CC472;
    text-align:center;
}

3. 선택한 옵션 영역의 border-bottom(선) 값을 변경할 수 있습니다.

5. 총 합계금액 구분 영역의 border-top(선), font-color(폰트 색) 값을 변경할 수 있습니다.

🆙
🖥️