색·글꼴 손보기 (커스텀 CSS)

홈페이지의 색·글꼴·간격을 CSS로 직접 손보는 기능입니다. 유료 요금제부터 열립니다.

CSS를 모르시면 이 편은 건너뛰셔도 됩니다 — 기본 디자인 그대로 쓰시는 데 아무 문제가 없습니다.

어디서, 어떻게

관리자 → 커스텀 CSS. 저장하면 공개 화면에 바로 반영되고, 되돌리기와 전체 삭제가 있습니다.

쓸 수 있는 것은 겉모습 속성입니다 — 색, 글꼴, 간격, 정렬, 테두리, 그림자. 화면을 망가뜨리거나 보안에 걸리는 것(외부 주소 불러오기 등)은 자동으로 걸러지고, 걸러진 줄은 저장 후 목록으로 보여드립니다.

요소는 정해진 이름으로 잡으십시오

[data-zzanga-section="hero"] [data-zzanga-el="title"] { font-size: 34px; }

data-zzanga- 로 시작하는 이름이 짱가가 약속하고 유지하는 이름입니다. 개발자 도구에서 보이는 xxx-module__abc123 같은 이름은 잡지 마십시오 — 짱가가 내부를 고칠 때 함께 바뀌면서, 오류 없이 스타일만 조용히 사라집니다. 쓸 수 있는 이름 전체 목록이 필요하시면 문의 주십시오 — 보내드립니다.

특정 페이지에서만 바꾸려면 [data-zzanga-page="home"] 처럼 페이지 이름을 앞에 붙이십시오.

글꼴

짱가가 올려 둔 폰트만 쓸 수 있습니다 — 외부 폰트를 불러오는 통로는 막혀 있습니다.

h1, h2 { font-family: 'Paperozi', sans-serif; font-weight: 700; }

• 뒤에 sans-serif를 남기십시오 — 폰트가 늦어도 글자는 보입니다
• 쓰는 굵기만큼 손님이 내려받습니다. 두 굵기면 충분합니다

하지 마실 것 셋

1. 구조를 바꾸지 마십시오. 겉모습만 손보십시오 — 배치를 뒤집으면 휴대폰 화면에서 무너집니다
2. 글자색과 배경색은 함께 바꾸십시오. 한쪽만 바꾸면 안 읽히는 곳이 생깁니다
3. 저장한 뒤 휴대폰으로 한 번 보십시오. 손님 절반이 휴대폰입니다