HELLOPANDA MANUAL
웹사이트 색상 변경
2024.07.01 부터
이 메뉴얼은 사용되지 않습니다.
사용자 정의 관리 기능이 추가된 후 웹사이트 크기 변경은 이제 아래의 메뉴얼로 대체되는 점 참고하시길 바랍니다.
THEME COLOR
블록 테마 컬러
수정 시 유의 사항
블록 테마는 한개의 JSON 파일에서 모든 컬러 속성을 담고 있습니다. 때문에 수정을 하는 방법 자체는 어렵지 않습니다. 다만 Primary, Secondary 등 색상의 기본 속성들에 대한 이해를 분명히 해야 정확히 어떤 부분을 어떻게 수정해야 할 지 찾기가 쉽습니다.
base ( 배경색 )
contrast ( 글자색 )
primary ( 강조색 )
secondary ( 강조 대비색 )
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
base color
베이스 코드는 웹사이트 전체의 배경 컬러를 의미 합니다. Hellopanda 테마는 흰색이 아닌 옅은 회색을 채택했으며, 포스트 강조형 컬러를 사용하고 있습니다.
contrast color
콘트라스트 코드는 웹사이트 전체의 텍스트 색을 의미합니다. base 코드와 완전히 반대되는 코드라고 이해하면 됩니다. 배경, 글자 관계 이므로 큰 대비를 이루는 색을 선택해야 합니다.
primary color
프라이머리 컬러는 웹사이트에서 사용되는 메인 색상입니다. 많은 테마에서 보통 메인 색상을 여러개로 가져가지만 Hellopanda 테마에서는 메인 색상은 한개로 채택했습니다. 때문에 반응형 코드에서 큰 장점이 있습니다.
secondary color
세컨더리 색상은 일반적인 테마에서는 두번째 색상을 의미하지만, Hellopanda 테마에서는 primary 컬러의 대비색으로 사용하고 있습니다. 이 색상의 관계는 매우 중요하니 반드시 참고하시길 바랍니다.
01
기본 JSON 파일 수정
hellopanda WP manual
/wp-content/themes/hellopanda-theme/
theme.json
"palette": [
{ "color": "#fffffd", "name": "흰색", "slug": "white" },
{ "color": "#000000", "name": "검정색", "slug": "black" },
{ "color": "#f0f0f0", "name": "배경색 (반응형) (background)", "slug": "base" },
{ "color": "#37474F", "name": "전경색 (반응형) (text)", "slug": "contrast" },
{ "color": "#c34468", "name": "강조색 (반응형)", "slug": "primary" },
{ "color": "#fffffe", "name": "보조색 (반응형) (강조색 위 글자색)", "slug": "secondary" },
{ "color": "#ffffff", "name": "스탭 - 1 (반응형)", "slug": "step-1" },
{ "color": "#f4f5f5", "name": "스탭 - 2 (반응형)", "slug": "step-2" },
{ "color": "#eaebec", "name": "스탭 - 3 (반응형)", "slug": "step-3" },
{ "color": "#dfe1e2", "name": "스탭 - 4 (반응형)", "slug": "step-4" },
{ "color": "#d4d7d9", "name": "스탭 - 5 (반응형)", "slug": "step-5" },
{ "color": "#c9cdcf", "name": "스탭 - 6 (반응형)", "slug": "step-6" },
{ "color": "#bfc3c6", "name": "스탭 - 7 (반응형)", "slug": "step-7" },
{ "color": "#b4b9bc", "name": "스탭 - 8 (반응형)", "slug": "step-8" },
{ "color": "#a9afb3", "name": "스탭 - 9 (반응형)", "slug": "step-9" },
{ "color": "#9ea5a9", "name": "스탭 - 10 (반응형)", "slug": "step-10" },
{ "color": "#949ca0", "name": "스탭 - 11 (반응형)", "slug": "step-11" },
{ "color": "#899296", "name": "스탭 - 12 (반응형)", "slug": "step-12" },
{ "color": "#7e888c", "name": "스탭 - 13 (반응형)", "slug": "step-13" },
{ "color": "#737e83", "name": "스탭 - 14 (반응형)", "slug": "step-14" },
{ "color": "#697479", "name": "스탭 - 15 (반응형)", "slug": "step-15" },
{ "color": "#5e6a70", "name": "스탭 - 16 (반응형)", "slug": "step-16" },
{ "color": "#536066", "name": "스탭 - 17 (반응형)", "slug": "step-17" },
{ "color": "#48565d", "name": "스탭 - 18 (반응형)", "slug": "step-18" },
{ "color": "#3e4c53", "name": "스탭 - 19 (반응형)", "slug": "step-19" },
{ "color": "#33424a", "name": "스탭 - 20 (반응형)", "slug": "step-20" }
],- 흰색, 검정색은 반응하지 않는 고정색 입니다.
- base, contrast, primary, secondary 색은 반응형 색상입니다. 다크 모드에서는 다크모드 json 에 등록된 컬러가 보여집니다.
- step 1 ~ 20 까지의 색상은 모두 반응형 색상입니다. base -> contrast 까지 색을 나누어 저장하는게 가장 좋습니다. ( 물론 자유롭게 구성하셔도 됩니다. )
- duotone, gradients 색상도 이 파일에서 수정이 가능합니다. 물론 필요할때만 하시면 됩니다. ( 저희가 대부분 만들어 놨습니다. )
02
다크모드 JSON 파일 수정
hellopanda WP manual
/wp-content/themes/hellopanda-theme/styles/
dark.json
"palette": [
{ "color": "#fffffd", "name": "흰색", "slug": "white" },
{ "color": "#000000", "name": "검정색", "slug": "black" },
{ "color": "#263238", "name": "배경색 (background)", "slug": "base" },
{ "color": "#B0BEC5", "name": "전경색 (text)", "slug": "contrast" },
{ "color": "#FDD835", "name": "강조색", "slug": "primary" },
{ "color": "#3a3007", "name": "보조색", "slug": "secondary" },
{ "color": "#172329", "name": "스탭 - 1 (반응형)", "slug": "step-1" },
{ "color": "#1f2c32", "name": "스탭 - 2 (반응형)", "slug": "step-2" },
{ "color": "#28343a", "name": "스탭 - 3 (반응형)", "slug": "step-3" },
{ "color": "#303d43", "name": "스탭 - 4 (반응형)", "slug": "step-4" },
{ "color": "#39454b", "name": "스탭 - 5 (반응형)", "slug": "step-5" },
{ "color": "#414e54", "name": "스탭 - 6 (반응형)", "slug": "step-6" },
{ "color": "#49565c", "name": "스탭 - 7 (반응형)", "slug": "step-7" },
{ "color": "#525f65", "name": "스탭 - 8 (반응형)", "slug": "step-8" },
{ "color": "#5a676d", "name": "스탭 - 9 (반응형)", "slug": "step-9" },
{ "color": "#637076", "name": "스탭 - 10 (반응형)", "slug": "step-10" },
{ "color": "#6b787f", "name": "스탭 - 11 (반응형)", "slug": "step-11" },
{ "color": "#738187", "name": "스탭 - 12 (반응형)", "slug": "step-12" },
{ "color": "#7c8990", "name": "스탭 - 13 (반응형)", "slug": "step-13" },
{ "color": "#849298", "name": "스탭 - 14 (반응형)", "slug": "step-14" },
{ "color": "#8d9aa1", "name": "스탭 - 15 (반응형)", "slug": "step-15" },
{ "color": "#95a3a9", "name": "스탭 - 16 (반응형)", "slug": "step-16" },
{ "color": "#9dabb2", "name": "스탭 - 17 (반응형)", "slug": "step-17" },
{ "color": "#a6b4ba", "name": "스탭 - 18 (반응형)", "slug": "step-18" },
{ "color": "#aebcc3", "name": "스탭 - 19 (반응형)", "slug": "step-19" },
{ "color": "#b7c5cb", "name": "스탭 - 20 (반응형)", "slug": "step-20" }
]- 흰색, 검정색은 반응하지 않는 고정색 입니다.
- base, contrast, primary, secondary 색은 반응형 색상입니다. 다크 모드에서는 다크모드 json 에 등록된 컬러가 보여집니다.
- step 1 ~ 20 까지의 색상은 모두 반응형 색상입니다. base -> contrast 까지 색을 나누어 저장하는게 가장 좋습니다. ( 물론 자유롭게 구성하셔도 됩니다. )
- /wp-content/themes/hellopanda-theme/styles/ 이 경로에 등록된 json 규칙은 블록테마에서 “색상” 으로 사용하는 폴더 입니다.