HTML 편집 — 기본 CSS 찾기 · 고치기 · 화면별 CSS

CSS 파일은 어디 있나요

디자인 › HTML 편집 왼쪽 목록 «스타일» 아래에 있습니다.

• theme.css — 이 쇼핑몰의 테마 기본 CSS. 처음 열면 지금 적용된 기본 CSS 와 자주 쓰는 선택자 안내가 보입니다
• custom.css — 모든 화면에 마지막으로 덧씌우는 CSS (처음엔 비어 있음)
• index.css · product.css · cart.css … — 그 화면에서만 들어가는 화면별 CSS

기본 CSS 고치기

1. 1theme.css 를 엽니다
2. 2값을 고치고 [저장]합니다 (Ctrl+S)
3. 3[미리보기]로 확인한 뒤 [게시]하면 쇼핑몰에 반영됩니다
4. 4잘못 고쳤으면 위의 [기본값 불러오기]를 누르면 처음 상태로 돌아갑니다

특정 화면만 바꾸기

1. 1바꿀 화면의 HTML 파일(예: product.html — 상품 상세)을 엽니다
2. 2위의 [이 화면 CSS] 버튼을 누르면 그 화면 전용 CSS(product.css)가 열립니다
3. 3여기 쓴 CSS 는 그 화면을 열 때만 들어가서 다른 화면 모양은 바뀌지 않습니다

자주 쓰는 선택자

• [data-nc-store] — 쇼핑몰 전체
• [data-nc-region="header"] — 머리글, [data-nc-region="footer"] — 하단, [data-nc-region="page"] — 본문
• [data-nc-hero] — 메인 비주얼
• .nc-rich — 상품 상세 설명 글

알아 두세요

• 색 · 모서리 · 글꼴은 디자인 › 테마 편집에서 바꾸는 것이 가장 쉽습니다
• theme.css 를 고치면 이 쇼핑몰만의 사본이 됩니다. 운영 기본 CSS 나 다른 업체 디자인이 바뀌어도 영향이 없습니다
• 테마를 다른 테마로 바꾸면 새 테마 기본으로 시작합니다 (바꾸기 전에 내 디자인 보관함에 저장해 두세요)
• 스크립트 · 외부 CSS 불러오기(@import, 구글 폰트 제외)는 보안 때문에 자동으로 빠집니다
• 장바구니 · 결제 금액 계산과 사업자 정보는 모양만 바뀌고 기능은 그대로입니다