new-basic 테마 · Style Booster v1.21.14
관리자용 · 화면을 보면서 사이트 디자인을 직접 고치는 도구
Style Booster는 사이트 화면을 보면서 디자인을 바로 고치는 관리자 전용 도구입니다. 코드를 몰라도 다음을 할 수 있습니다.
| 하고 싶은 일 | 쓰는 곳 |
|---|---|
| 사이트 전체의 분위기(박스 모양)를 바꾸고 싶다 | 「전체 설정」 탭 → 스타일 |
| 배경 · 메뉴 · 푸터 · 포인트 색을 바꾸고 싶다 | 「전체 설정」 탭 → 색상 |
| 본문 · 사이드 · 카드의 안쪽 여백을 조절하고 싶다 | 「전체 설정」 탭 → 안쪽 여백 |
| 화면의 특정 글자 · 박스 · 버튼의 색, 크기, 위치, 여백을 바꾸고 싶다 | 「선택 영역」 탭 |
| 원하는 자리에 제목 · 글 · 이미지 · 버튼 · 카드 · 슬라이드 · 탭 · 아코디언을 직접 만들어 넣고 싶다 | 「선택 영역」 탭 → 박스 추가 |
| 게시판 최신글을 내가 디자인한 모양(목록형 · 갤러리형 · 슬라이드형 등)으로 보여 주고 싶다 | 「최신글」 탭 |
| 만든 설정을 이름 붙여 보관하고, 다른 사이트에도 옮기고 싶다 | 「프리셋」 탭 |
| 만든 박스를 파일로 내보내고, 다른 페이지 · 다른 사이트에 다시 놓고 싶다 | 「선택 영역」 탭 → 저장된 영역 |
참고 패널을 닫아도 아직 저장하지 않은 변경은 화면에 그대로 미리 보입니다. 저장하지 않고 페이지를 떠나면 사라지니, 마음에 들면 꼭 「적용」을 누르세요.
위에서 아래로 다음과 같이 되어 있습니다.
┌─────────────────────────────┐
│ Style Booster 관리자 전용 ✕│ ← 제목줄
├─────────────────────────────┤
│ [ PC ] [ 태블릿 ] [ 모바일 ] │ ← 화면 크기 버튼
├─────────────────────────────┤
│ 전체 설정│선택 영역│최신글│프리셋│ ← 탭 4개
├─────────────────────────────┤
│ │
│ (선택한 탭의 내용) │ ← 위아래로 스크롤
│ │
├─────────────────────────────┤
│ [ 되돌리기 ] [ 적용 ] │ ← 항상 아래에 고정
└─────────────────────────────┘| 영역 | 설명 |
|---|---|
| 화면 크기 버튼 | PC / 태블릿 / 모바일. 지금 어느 화면 크기를 편집하는지 정합니다. |
| 탭 4개 | 「전체 설정」 「선택 영역」 「최신글」 「프리셋」. 하는 일에 따라 고릅니다. |
| 「되돌리기」 | 마지막으로 저장한 상태로 되돌립니다. (저장 전 변경을 모두 버림) |
| 「적용」 | 지금 상태를 저장합니다. 바꾼 것이 없으면 눌러지지 않습니다(회색). |
패널의 대부분의 설정은 같은 모양으로 되어 있습니다.
패널 위쪽의 PC / 태블릿 / 모바일 버튼은 두 가지 일을 합니다.
| 버튼 | 미리보기 크기 | 이 값이 적용되는 방문자 화면 |
|---|---|---|
| PC | 지금 보고 있는 화면 그대로 | 모든 화면 (기본값) |
| 태블릿 | 폭 820px × 높이 1180px | 폭 1024px 이하 |
| 모바일 | 폭 390px × 높이 844px | 폭 768px 이하 |
모바일 · 390px · 85% 축소처럼 크기와 축소 비율이 표시됩니다.Esc 키를 눌러도 PC로 돌아옵니다.참고 패널에서 고른 스타일 · 색 · 여백은 열려 있는 작은 화면에도 곧바로 같이 반영됩니다. 모바일 화면을 열어 둔 채 색을 바꿔 보세요.
주의 화면 크기를 바꾸면 선택하고 있던 요소는 풀립니다. (같은 요소를 새 화면에서 다시 찾아 주기는 하지만, 못 찾으면 다시 눌러 고르세요.)
사이트 전체의 기본 분위기를 정하는 탭입니다. 위에서부터 스타일 → 색상 → 안쪽 여백 → 초기화 순서입니다. 패널 맨 위에는 "선택하면 바로 미리 보입니다. 「적용」을 누르면 이 테마를 쓰는 모든 도메인에 저장됩니다."라는 안내가 있습니다.
사이트 곳곳의 박스(게시판 목록, 위젯, 카드 등)와 배경이 어떤 느낌으로 보일지 세 가지 중 하나를 고릅니다.
| 스타일 | 설명 | 이런 분께 |
|---|---|---|
| 플랫 라인 | 얇은 선과 각진 박스. 기본 디자인입니다. | 깔끔하고 단정한 느낌 |
| 채움 카드 | 배경을 살짝 깔고, 박스는 흰 카드로 구분합니다. | 박스가 또렷하게 떠 보이길 원할 때 |
| 소프트 라운드 | 둥근 모서리와 부드러운 면 구분. | 친근하고 부드러운 느낌 |
사용 방법
참고 스타일을 바꾸면 아래 색상 · 여백의 "기본값"도 그 스타일의 기본값으로 바뀝니다. 내가 따로 정한 색 · 여백은 스타일을 바꿔도 그대로 유지됩니다.
사이트의 주요 색을 9가지로 나누어 바꿉니다. 이 설정은 라이트 모드(밝은 화면) 전용이며, 비워 두면 스타일의 기본색이 쓰입니다. 다크 모드는 사이트의 다크 모드 기능이 따로 처리합니다.
| 묶음 | 항목 | 어디에 쓰이나 |
|---|---|---|
| 페이지 · 박스 | 배경 | 사이트 전체 바탕색 |
| 박스 배경 | 게시판 · 위젯 · 카드 등 박스 안쪽 색 | |
| 박스 선 | 박스의 테두리 · 구분선 색 | |
| 헤더(메뉴) | 메뉴(헤더) 배경 | 맨 위 메뉴 영역의 바탕색 |
| 메뉴(헤더) 글자 | 메뉴 글자색 | |
| 푸터 | 푸터 배경 | 맨 아래 영역의 바탕색 |
| 푸터 글자 | 푸터 글자색 | |
| 포인트 | 포인트색 (Lv·활성·강조 버튼) | 레벨 배지, 선택된 메뉴, 강조 버튼 등 눈에 띄는 곳 |
| 배지색 (N·알림 개수) | 새 글 N 표시, 알림 개수 동그라미 |
주의 색상은 라이트 모드 기준입니다. 어두운 배경색을 지정하면 라이트 모드에서도 어두운 화면으로 보이지만, 방문자가 다크 모드를 켜면 다크 모드 규칙이 따로 적용됩니다. 중요한 색은 다크 모드를 켠 상태에서도 한 번 확인하세요.
박스 안쪽의 여백(글자와 테두리 사이의 거리)을 슬라이더로 조절합니다. 단위는 px이고 0 ~ 64px를 2px 단위로 움직입니다. 값을 정하지 않으면 스타일 기본값이며, 슬라이더 오른쪽에 「기본」 이라고 표시됩니다.
| 묶음 | 항목 | 설명 |
|---|---|---|
| PC · 태블릿 | 본문 안쪽 여백 | 본문(글 목록 · 글 보기 등) 박스의 안쪽 여백 |
| 사이드 안쪽 여백 | 오른쪽(또는 왼쪽) 사이드 영역 박스의 안쪽 여백 | |
| 위젯 · 카드 안쪽 여백 | 위젯, 카드 모양 박스의 안쪽 여백 | |
| 모바일 (768px 이하) | 본문 / 사이드 / 위젯 · 카드 | 모바일에서만 다르게 하고 싶을 때. 비우면 위의 PC 값을 그대로 따릅니다. |
사용 방법
참고 모바일은 화면이 좁아서 PC와 같은 여백이면 글이 답답해 보이는 경우가 많습니다. 모바일 묶음을 PC보다 작게 주면 훨씬 시원해집니다.
「전체 설정」 탭 맨 아래의 「전체 초기화」 버튼은 지금까지 정한 모든 설정을 지웁니다.
무엇이 지워지나
지워지지 않는 것
사용 방법
화면에 보이는 글자 · 박스 · 버튼 · 메뉴 등을 직접 눌러서 골라 그 모양을 바꿉니다. 「전체 설정」이 "사이트 전체"를 다룬다면, 「선택 영역」은 "이 부분만"을 다룹니다.
탭 안에는 위에서부터 다음 카드가 있습니다.
「요소 선택」 카드의 큰 버튼 「화면에서 요소 선택」 이 켜져 있어야(강조 색) 화면의 요소를 고를 수 있습니다. 「선택 영역」 탭을 열면 기본으로 켜집니다.
버튼 옆의 눈 모양 버튼은 「적용된 모습 보기」 입니다. 누르면 파란/주황 선택 표시와 편집 표시를 숨겨서, 방문자에게 보일 진짜 모습을 확인할 수 있습니다. 다시 누르면 표시가 돌아옵니다.
요소 이름 가로×세로 라벨이 보입니다.같은 값을 여러 요소에 한 번에 적용하고 싶을 때 씁니다.
Ctrl(또는 Shift) + 클릭: 이미 고른 요소에 추가합니다. 이미 고른 요소를 다시 Ctrl+클릭 하면 선택이 해제됩니다.Ctrl을 함께 누르면 기존 선택에 더해집니다.[3개 함께 선택]처럼 개수가 표시되고, 이때 바꾼 값은 고른 요소 모두에 적용됩니다.참고 여러 개를 골랐을 때는 「상위 / 하위」 버튼이 꺼집니다. 하나만 골라서 쓰는 기능이기 때문입니다.
요소를 고르면 나타납니다. 맨 위에 지금 고른 요소의 이름과 「편집 중: PC / 태블릿 · 1024px 이하 / 모바일 · 768px 이하」 가 보입니다. 값을 바꾸기 전에 아래 세 가지를 확인하세요.
클릭한 곳이 너무 안쪽(작은 글자 조각) 이거나 너무 바깥일 수 있습니다. 이때 범위를 옮깁니다.
| 선택 | 의미 | 예 |
|---|---|---|
| 같은 종류 모두 | 같은 종류로 만들어진 요소를 전부 바꿉니다. | "모든 게시판 제목 글자" |
| 이 요소만 | 내가 클릭한 딱 그 요소 하나만 바꿉니다. | "이 메뉴의 이 버튼만" |
값이 어느 페이지에서 보일지 정합니다. 칩(버튼) 5개를 켜고 끌 수 있고, 여러 개를 함께 켤 수 있습니다.
| 칩 | 의미 |
|---|---|
| 전체 | 모든 페이지에 적용 (아무것도 안 켠 상태가 "전체") |
| 메인 | 메인(홈) 페이지에만 |
| 서브 | 메인이 아닌 모든 서브 페이지에만 |
| 이 페이지 | 지금 보고 있는 이 주소 한 곳에만 |
| 모바일 | 화면 크기가 모바일(768px 이하) 일 때의 값. 위의 PC·태블릿·모바일 버튼과 같은 것입니다. |
조합 예시
패널의 한 줄 안내(예: 지금 보는 화면: 서브 · 서브 + 페이지 /free에 적용 · 모바일(768px 이하) 값)가 지금 값이 어디에 적용되는지를 항상 알려 줍니다.
중요 값을 바꾸면 선택한 범위 모두에 같은 값이 저장됩니다. 한 범위를 끄면 그 범위의 설정만 지워지고 나머지는 남습니다.
참고 — 다른 페이지를 함께 고르려면 「이 페이지」는 지금 보고 있는 페이지만 추가합니다. 다른 페이지를 함께 넣으려면 그 페이지로 이동해서 「이 페이지」를 한 번 더 켜세요. 이전에 고른 페이지는 새로고침 전까지 유지됩니다.
| 항목 | 의미 | 범위 |
|---|---|---|
| 안쪽 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 안쪽, 글자와 테두리 사이의 거리 | 0 ~ 120px |
| 바깥 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 바깥, 이웃 요소와의 거리 | −60 ~ 200px (음수면 이웃 쪽으로 당겨짐) |
숫자 칸 4개(위·오른쪽·아래·왼쪽)에 값을 넣으면 즉시 반영됩니다. 한 방향만 정해도 됩니다.
요소를 눈에 보이는 위치만 옮깁니다. 주변 요소의 자리는 그대로이고, 옮긴 요소만 이동합니다.
세 가지 방법이 있습니다.
Shift+방향키는 10px씩 움직입니다. (입력칸에 글자를 쓰고 있을 때는 방향키가 입력칸에서 동작합니다.)「원래 자리로」 를 누르면 이동값이 0이 되어 제자리로 돌아갑니다.
참고 위치 이동도 화면 크기별로 따로 저장됩니다. PC에서 옮긴 값이 모바일에서 어색하면, 모바일 화면에서 따로 조정하세요.
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 요소의 바탕색 | 색 고르기 |
| 글자색 | 요소 안 글자 색 | 색 고르기 |
| 테두리 색 | 테두리 선 색 | 색 고르기 |
| 테두리 굵기 | 테두리 두께 (0이면 테두리 없음) | 0 ~ 10px |
| 모서리 둥글기 | 모서리를 얼마나 둥글게 할지 | 0 ~ 80px |
| 구분 | 항목 | 설명 | 범위 |
|---|---|---|---|
| 크기 | 너비 | 요소 가로 크기 | 0 ~ 1600px |
| 최대 너비 | 이보다 커지지 않게 제한 | 0 ~ 1600px | |
| 최소 높이 | 이보다 작아지지 않게 | 0 ~ 800px | |
| 안쪽 간격(gap) | 안에 나열된 요소들 사이의 간격 | 0 ~ 80px | |
| 글자 | 글자 크기 | 글자 크기 | 8 ~ 80px |
| 자간 | 글자와 글자 사이 | −10 ~ 40px | |
| 행간 (%) | 줄과 줄 사이. 100 = 글자 크기와 같은 줄 높이 | 80 ~ 300% | |
| 글자 정렬 | 기본 / 왼쪽 / 가운데 / 오른쪽 | — |
선택한 요소에 정한 값을 전부 한꺼번에 지우고 원래 디자인으로 돌립니다. 줄마다 있는 ↺ 는 "그 항목만" 지우고, 이 버튼은 "이 요소의 모든 설정"을 지웁니다.
「선택 영역」 탭 아래쪽에 지금까지 만든 것이 목록으로 나옵니다. 눌러서 선택하고 바로 고칠 수 있습니다.
b1 · 부품 박스처럼 박스 번호와 종류, 그리고 어디에 보이는지(/free, 모든 페이지, 홈, 게시판 전체)가 표시됩니다.
[메인], [서브], [/경로] 같은 범위 표시와 함께 나열됩니다.
박스는 내가 원하는 자리에 직접 만들어 넣는 새 영역입니다. 제목 · 글 · 이미지 · 버튼 같은 부품을 쌓아서 안내문, 배너, 카드 목록, 슬라이드, 탭, FAQ 같은 것을 코드 없이 만들 수 있습니다.
「선택 영역」 탭의 「박스 추가」 카드를 씁니다. 두 가지 방법이 있습니다.
박스라고 적힌 작은 알약이 따라다닙니다.Esc 를 누르면 취소됩니다.| 버튼 | 박스가 놓이는 곳 |
|---|---|
| 앞에 | 선택한 요소 바로 앞(위) |
| 뒤에 | 선택한 요소 바로 뒤(아래) |
| 안 맨앞 | 선택한 요소 안쪽의 맨 처음 |
| 안 맨끝 | 선택한 요소 안쪽의 맨 마지막 |
body 의 앞·뒤에는 넣을 수 없습니다. 안 맨앞/맨끝을 쓰세요. → 페이지 최상위 요소를 골랐을 때입니다. 「안 맨앞」「안 맨끝」을 쓰세요.이 요소는 위치를 정할 수 없습니다. 다른 요소를 선택하세요. → 다른 요소를 골라 다시 하세요.박스는 최대 30개까지입니다. → 안 쓰는 박스를 지우세요.새 박스는 빈 박스로 시작하고, 자동으로 선택됩니다. 이제 패널에서 부품을 채우면 됩니다.
박스를 선택하면 「선택 영역」 탭에 박스 전용 카드가 나타납니다.
| 카드 | 하는 일 |
|---|---|
| 부품 추가 | 부품 11종 중 하나를 눌러 박스에 넣습니다. |
| 구성 | 지금 들어 있는 부품 목록. 눌러서 선택, 순서 바꾸기, 복제, 삭제. |
| ○○ 속성 | 선택한 부품의 세부 설정 (글자, 주소, 모양 등). |
| 표시 · 위치 | 어느 페이지에 보일지, 박스 삭제. |
그 아래 여백 · 위치 이동 · 색 · 테두리 · 크기 · 글자 카드로 박스 자체의 모양(배경색, 테두리, 모서리, 여백 등)도 꾸밀 수 있습니다. 사용법은 5장과 같습니다.
| 동작 | 방법 |
|---|---|
| 부품 선택 | 목록의 부품 줄을 누릅니다. 화면의 해당 부품이 선택되고, 아래에 「○○ 속성」 카드가 나타납니다. 화면에서 부품을 직접 눌러도 됩니다. |
| 순서 바꾸기 | 줄 오른쪽의 ↑, ↓ 버튼 |
| 복제 | 복제 아이콘 — 같은 설정의 부품이 바로 아래에 하나 더 생깁니다. |
| 삭제 | ✕ 버튼 |
참고 부품은 박스 안에서 위에서 아래로 차례로 쌓입니다. 가로로 나란히 놓고 싶다면 「카드 열」 부품(2~4열)을 쓰세요.
부품을 선택하면 「○○ 속성」 카드에서 아래 항목을 설정합니다. 모든 항목은 바꾸는 즉시 화면에 반영됩니다.
| 항목 | 설명 |
|---|---|
| 글자 | 제목 문구 |
| 크기 | 크게(큰 제목) / 보통 / 작게 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
처음에는 제목이라는 글자가 들어갑니다. 글자색 · 정확한 크기는 아래 「색 · 테두리」「크기 · 글자」 카드로 고칠 수 있습니다.
| 항목 | 설명 |
|---|---|
| 내용 | 본문. 5줄 높이의 입력칸입니다. 줄을 바꾸면 문단이 나뉩니다. |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
| 항목 | 설명 |
|---|---|
| 이미지 주소 |
https://… 또는 /경로 형식. 바로 아래의 「그림 올리기」 버튼으로 내 컴퓨터의 그림을 올릴 수도 있습니다. (6-6) |
| 설명 (대체 글자) | 그림이 안 보일 때 · 화면 낭독기가 읽는 글. 접근성과 검색에 좋으니 적어 두세요. |
| 누르면 이동할 주소 | 그림을 눌렀을 때 이동할 주소. 비우면 이동하지 않습니다. |
| 모서리 | 각지게 / 조금 둥글게 / 둥글게 / 원형 |
| 항목 | 설명 |
|---|---|
| 글자 | 버튼에 적힐 문구 (기본 버튼) |
| 이동할 주소 | 누르면 이동할 주소 |
| 모양 | 채움(색이 꽉 찬 버튼) / 테두리(선만 있는 버튼) |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
가로 줄 하나입니다. 별도 속성은 없고, 굵기 · 색은 「선택 영역」의 「색 · 테두리」 카드로 정합니다.
부품 사이를 띄우는 빈 공간입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 4 ~ 300px (처음 24px) |
직접 HTML을 쓰는 부품입니다. (높은 자유도, 신중하게)
| 항목 | 설명 |
|---|---|
| HTML | 8줄 높이의 입력칸 |
주의 보안을 위해
<script>,<iframe>,on…속성(onclick 등)은 저장할 때 자동으로 지워집니다. 일반적인 글 · 이미지 · 표 · 링크 정도만 안전하게 쓸 수 있습니다.
이미지 + 제목 + 내용으로 된 카드를 가로로 나란히 놓습니다. 화면 폭이 720px 이하(모바일)가 되면 자동으로 1열로 쌓입니다.
| 항목 | 설명 |
|---|---|
| 열 수 | 2열 / 3열 / 4열 |
각 카드(항목) 마다 다음을 적습니다.
| 항목 | 설명 |
|---|---|
| 이미지 주소 | 카드 위쪽 그림 (비워도 됨) |
| 제목 | 카드 제목 |
| 내용 | 카드 설명 |
| 이동할 주소 | 주소를 넣으면 카드 전체가 링크가 됩니다. |
이미지 · 제목 · 설명이 담긴 가로로 넘기는 슬라이드입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 슬라이드 높이 120 ~ 800px (처음 320px) |
| 자동 넘김 (초 · 0 이면 끔) | 0 ~ 30초. 처음 4초. |
| 좌우 화살표 | 체크하면 양옆에 ‹ › 버튼이 나옵니다. |
| 아래 점 표시 | 체크하면 아래에 현재 위치 점이 나옵니다. |
각 슬라이드(항목) 에는 이미지 주소 / 제목 / 설명 / 이동할 주소를 적습니다. 처음엔 2장이며 「슬라이드 추가」 로 늘립니다. 최대 12장.
눌러서 내용을 바꿔 보는 탭 메뉴입니다.
| 항목 | 설명 |
|---|---|
| (부품 속성 없음) | 항목 추가/정렬만 합니다. |
각 탭(항목) 에는 탭 제목 / 내용을 적습니다. 처음엔 2개, 「탭 추가」 로 늘립니다. 최대 8개. 방문자가 탭 제목을 누르면 그 내용이 보입니다.
질문을 누르면 답이 펼쳐지는 FAQ 형식입니다.
| 항목 | 설명 |
|---|---|
| 처음 열어 둘 항목 번호 (0 = 모두 닫음) | 0 ~ 12. 처음에는 1(첫째 항목이 열림). |
각 항목에는 제목 / 내용을 적습니다. 처음엔 2개, 「항목 추가」 로 늘립니다. 최대 12개.
패널 입력칸 없이, 화면 위의 글자를 바로 고칠 수 있습니다.
Enter 를 누릅니다.Esc 를 누릅니다. 원래 글자로 돌아갑니다.참고 「글」 부품이나 카드의 「내용」처럼 여러 줄 글에서는
Enter가 줄바꿈입니다. 이때는 바깥을 클릭하면 저장됩니다.
「이미지 주소」 칸이 있는 곳(이미지 부품, 카드 · 슬라이드 항목)에는 칸 바로 아래에 「그림 올리기 (WebP로 저장)」 버튼이 있습니다.
사용 방법
올리는 중…이 보이다가, 끝나면 이미지 주소 칸에 주소가 자동으로 채워지고 화면에 그림이 나타납니다.어떻게 저장되나
| 항목 | 내용 |
|---|---|
| 올릴 수 있는 형식 | JPG · PNG · GIF · WebP |
| 용량 | 최대 12MB (서버 자체 제한이 더 작으면 그 제한이 먼저 적용됩니다) |
| 자동 변환 | 올린 그림은 WebP로 변환되어 저장됩니다. 파일이 작아져 사이트가 빨라집니다. |
| 크기 줄임 | 가로가 2400px을 넘으면 2400px로 줄입니다. PNG의 투명 배경은 유지됩니다. |
| 움직이는 GIF | WebP로 바꾸면 움직임이 사라지므로 원본 그대로 저장하고, 안내 문구로 알려 줍니다. |
| 저장 위치 | 사이트의 업로드 폴더 안 nb-box/년월/
|
| 제한 | 관리자만 올릴 수 있습니다. SVG 등 다른 형식은 거부됩니다. |
안내 문구는 버튼 아래에 나타납니다. 예: WebP로 변환해 저장했습니다. / 움직이는 GIF는 원본 그대로 저장했습니다. / JPG · PNG · GIF · WebP 그림만 올릴 수 있습니다.
참고 올린 그림은 「적용」을 누르기 전에도 이미 서버에 저장됩니다. 다만 박스에 연결된 주소는 「적용」을 눌러야 방문자에게 보입니다.
주의 서버에서 WebP 변환을 지원하지 않는 환경이라면 원본 형식 그대로 저장하고 그 사실을 안내합니다.
박스를 선택했을 때 맨 아래 「표시 · 위치」 카드에서 정합니다.
| 항목 | 의미 |
|---|---|
| 표시 범위 | 박스가 어느 페이지에 보일지 |
| — 현재 주소만 | 지금 보고 있는 이 주소 한 곳에만 (기본값) |
| — 모든 페이지 | 사이트의 모든 페이지 |
| — 홈만 | 메인(홈) 페이지에만 |
| — 게시판 전체 | 모든 게시판 페이지(목록 · 글 보기 등)에 |
| 위치 안내 |
위치 · 앞 · … 처럼 박스가 놓인 자리(앞 / 뒤 / 안 맨앞 / 안 맨끝)와 기준 요소를 알려 줍니다. |
참고 박스를 놓는 기준 요소는 해당 페이지의 화면 구조 안에서 찾습니다. 기준 요소가 없는 다른 페이지에서는 「모든 페이지」로 해도 박스가 나타나지 않을 수 있습니다. 이럴 때는 7장의 저장된 영역으로 페이지마다 따로 놓으세요.
내가 만든 박스를 보관해 두었다가 다른 페이지에 끌어다 쓰는 기능입니다. 박스의 내용을 JSON 파일로 내보내고 불러올 수도 있어서, 다른 사이트로 옮기거나 백업할 때도 씁니다.
| 이름 | 어디에 있나 | 설명 |
|---|---|---|
| 적용된 영역 | 「선택 영역」 탭 | 이 사이트에 이미 놓여 있는 박스와 모양 설정 목록 |
| 저장된 영역 | 「선택 영역」 탭 | 놓여 있지 않고 보관만 해 둔 박스 묶음. 끌어다 놓으면 새 박스가 됩니다. |
| 방법 | 어떻게 |
|---|---|
| ① 박스 위 도구줄의 「저장」 | 박스 위에 마우스를 올리면 나오는 도구줄에서 「저장」 (7-5) |
| ② 「선택한 박스를 저장된 영역에 저장」 버튼 | 박스를 선택한 상태에서 누릅니다. |
| ③ 「적용된 영역」 목록의 책갈피 버튼(책갈피) | 박스 줄 오른쪽의 책갈피 버튼 |
| ④ JSON 파일 불러오기 | 7-4 참고 |
담으면 "○○"을(를) 저장된 영역에 담았습니다. 다른 페이지에도 끌어다 놓을 수 있습니다. 라고 안내됩니다. 이름은 박스 안의 첫 제목 글자로 자동으로 정해지고, 나중에 바꿀 수 있습니다.
참고 박스 안의 박스를 담으면 안에 든 박스와, 그 박스들에 준 모양 설정, 최신글 박스가 쓰는 스킨도 함께 담깁니다.
Esc로 취소할 수 있습니다.놓일 때 자동으로 처리되는 것
박스는 최대 30개까지입니다. 로 안내되고 놓이지 않습니다.| 어디서 | 내보내는 범위 |
|---|---|
| 박스 위 도구줄의 「내보내기」 | 그 박스 하나 (안의 박스 포함) |
| 「박스 전체 JSON 내보내기」 버튼 | 이 사이트에 놓인 모든 박스 |
| 저장된 영역 목록의 파일 내보내기 아이콘 | 그 보관함 항목 하나 |
dx-boxes-날짜-시분.json (보관함에서 내보내면 dx-boxes-x번호.json) 형태로 내려받아집니다.박스 1개 · 모양 0개를 내보냈습니다.
"○○"을(를) 저장된 영역에 추가했습니다. 끌어서 원하는 자리에 놓으세요.
불러올 때 규칙
이 테마에서 내보낸 박스 파일이 아닙니다. / JSON이 아니면 JSON 형식이 아닙니다. 가 뜹니다.(형식이 맞지 않는 N개는 제외)로 알려 줍니다.왜 바로 화면에 안 놓나요? 박스는 "어떤 페이지의 어떤 요소 앞/뒤"라는 위치 정보를 가지는데, 다른 페이지나 다른 사이트에서는 그 위치가 없을 수 있습니다. 그래서 파일은 먼저 보관함에 담고, 내가 원하는 자리에 직접 놓도록 했습니다.
항목 줄 오른쪽 버튼으로 관리합니다.
| 버튼 | 동작 |
|---|---|
| 파일 내보내기 아이콘 | 이 항목을 JSON 파일로 저장 |
| 연필 (이름 바꾸기) | 이름 칸으로 바뀝니다. Enter로 저장, Esc 로 취소, 다른 곳을 누르면 저장 (최대 40자) |
| ✕ | 보관함에서 삭제 (이미 화면에 놓은 박스에는 영향 없음) |
「요소 선택」 모드가 켜진 상태에서, 화면의 박스 위에 마우스를 올리면 박스 왼쪽 위에 어두운 알약 모양의 도구줄이 나타납니다.
| 버튼 | 하는 일 |
|---|---|
| 불러오기 | JSON 파일을 골라, 이 박스를 파일의 첫 번째 박스 내용으로 바꿉니다. 박스가 놓인 위치 · 표시 범위는 그대로 유지됩니다. |
| 내보내기 | 이 박스를 JSON 파일로 저장합니다. |
| 저장 | 이 박스를 「저장된 영역」에 담습니다. |
박스를 불러온 내용으로 바꿨습니다. 이어서 「적용」을 눌러야 저장됩니다. 마음에 안 들면 「되돌리기」.시나리오 ① 같은 안내 박스를 여러 페이지에 쓰고 싶을 때
시나리오 ② 다른 사이트에서 만든 박스를 가져오고 싶을 때
시나리오 ③ 박스 디자인을 백업해 두고 싶을 때
관리자의 「페이지 관리」에서 만든 빈 페이지(pages/aaa.php 처럼 내용이 비어 있는 페이지)를 Style Booster로 꾸밀 때 가장 편한 방법입니다. 끌어서 놓을 필요 없이, JSON 파일 하나를 그 페이지에 바로 올립니다.
올리기
/aaa)로 이동합니다.주의 이 페이지에 이미 놓인 박스는 올린 파일의 내용으로 통째로 바뀝니다. 아직 「적용」하지 않은 변경이 있으면 확인창이 먼저 뜹니다.
받기: 「이 페이지 박스 JSON 받기」 를 누르면 이 페이지의 박스만 담긴 JSON 파일이 내려받아집니다. 다른 페이지에 올리거나 백업으로 쓰세요.
어디에 저장되나요?
data/stylebooster/ 폴더에 페이지 주소별 파일로 저장됩니다. 예: /aaa → data/stylebooster/aaa.json, /guide/start → guide__start.json, 홈(/) → _root.json
이 페이지 주소: /aaa · 등록됨 · 이 페이지 박스 N개 로 확인할 수 있습니다..htaccess, web.config)이 함께 만들어집니다.data 폴더에 쓸 수 없는 환경이면 예전처럼 DB에 저장하고, 올리기는 폴더 권한을 확인해 주세요 라고 알려 줍니다.알아 두세요
ChatGPT · Claude 같은 AI에게 부탁해서 받은 HTML 파일을 페이지에 바로 올리는 기능입니다. 7-7의 JSON 올리기와 같은 자리에 있습니다.
올리기
.html)을 고릅니다.주의 이 페이지에 이미 놓인 박스는 올린 HTML로 통째로 바뀝니다. 아직 「적용」하지 않은 변경이 있으면 먼저 확인창이 뜹니다.
어떻게 바뀌나요
<style> 디자인은 이 박스 안에서만 적용됩니다. 사이트의 다른 부분(머리글, 메뉴 등)은 영향을 받지 않습니다.@media (max-width: …px))도 그대로 따라옵니다.그대로 따라오는 것: 색 · 글꼴 크기 · 여백 · 테두리 · 모서리 · 그라데이션 배경 · flex/grid 배치 · 표 · 목록 · 링크 · 이미지(주소가 있는 것) · 마우스를 올렸을 때(:hover) 변화 · CSS 변수
빠지는 것 (보안상 막혀 있습니다)
| 요소 | 이유 |
|---|---|
<script> (움직이는 탭 · 슬라이더 등), onclick 같은 이벤트 속성 |
웹에서는 실행 코드를 올릴 수 없습니다. 움직임이 필요하면 7-9의 FTP 방식으로 스크립트 파일을 따로 올리거나, 박스의 탭 · 슬라이더 부품을 쓰세요. |
<iframe> (유튜브 삽입 등), <video>, <canvas>
|
외부 · 실행 요소입니다. |
<svg> 인라인 그림 |
이미지 파일(PNG · WebP)로 올려서 <img> 로 쓰세요. |
<form>, 입력 칸 |
양식은 허용하지 않습니다. |
외부 CSS 파일(<link rel="stylesheet">), 웹폰트 |
파일 안에 직접 쓴 <style> 만 가져옵니다. |
그림자(box-shadow), 필터, 애니메이션(@keyframes) |
지원하지 않습니다. |
position: fixed, url() 배경 이미지 |
화면 전체를 덮거나 외부를 불러오는 데 쓰이므로 막습니다. 배경은 색과 그라데이션만 가능합니다. |
AI에게 이렇게 부탁하세요
"하나의 HTML 파일로,
<style>은 파일 안에 직접 쓰고, JavaScript · 외부 CSS · 웹폰트 · SVG · 그림자는 쓰지 말아 주세요. 배치는 flex/grid로, 모바일은@media (max-width: 700px)로 대응해 주세요. 이미지는https://주소의<img>만 써 주세요."
한도: 파일 2MB 이하, CSS 36KB 이하, 맨 바깥 태그 하나가 140KB 이하(여러 덩어리로 나뉘면 합계는 더 커도 됩니다), 부품 29개 이내.
AI가 만든 HTML에 움직임(탭 · 아코디언 · 슬라이더 · 숫자 올리기 등)이 있으면 그 동작은 스크립트(JavaScript) 파일에 들어 있습니다. 스크립트는 방문자 모두의 브라우저에서 실행되는 코드라서, 웹 화면에서는 올릴 수 없고 FTP로만 올립니다. 관리자 계정이 해킹되어도 코드를 심을 수 없게 하려는 안전 장치입니다.
준비: 폴더 확인
사이트의 assets/stylebooster/js/ 폴더에 올립니다. 테마 zip에 이 폴더(보호 파일 포함)가 들어 있습니다. 없으면 FTP에서 만들어 주세요.
순서
.js 파일로 내려받게 해 줍니다./vvv (현재 페이지 주소가 미리 채워져 있습니다.)vvv.php, 하위 폴더가 있으면 폴더/vvv.php
assets/stylebooster/js/vvv.js
.js 파일의 이름을 그 경로의 파일명으로 바꿔 FTP로 올립니다.파일 이름 규칙
| pages 안의 파일 | 스크립트 파일 |
|---|---|
vvv.php |
assets/stylebooster/js/vvv.js |
intro/team.php |
assets/stylebooster/js/intro__team.js (폴더 구분은 __) |
지켜야 할 것
onclick="…" 같은 이벤트 속성은 제거됩니다. 스크립트 파일 안에서 addEventListener로 연결해야 합니다.id는 다른 부분과 겹치지 않게 앞에 nbx-가 붙습니다. getElementById('이름')은 그대로 찾아 주지만, querySelector('#이름')은 찾지 못하니 class로 선택하세요.AI에게 이렇게 부탁하세요
"하나의 HTML 파일로,
<style>과<script>는 파일 안에 직접 써 주세요. 외부 라이브러리(CDN)는 쓰지 말고,onclick대신addEventListener를, 요소 선택은id가 아닌 class나data-속성으로 해 주세요."
게시판의 최신 글 목록을 내가 디자인한 모양으로 사이트에 보여 주는 기능입니다. 목록형 · 갤러리형 · 이미지 위에 글자를 얹은 형 · 가로 슬라이드형 등 원하는 모양을 직접 디자인합니다. 디자인한 모양을 스킨이라 부르고, 그 스킨을 사이트에 놓은 것을 최신글 박스라고 합니다.
| 용어 | 뜻 |
|---|---|
| 스킨 | 최신글 글 한 칸의 디자인(제목 · 썸네일 · 날짜 등을 어디에 어떻게 놓을지)과, 목록 전체를 감싸는 바깥 틀(머리글 · 열 수 · 간격)을 합친 디자인 틀 |
| 부품 | 스킨 안에 놓는 하나하나의 조각 — 제목, 썸네일, 날짜, 글쓴이 등 |
| 최신글 박스 | 저장해 둔 스킨을 페이지 위에 놓은 것. 실제 게시판의 최신 글이 스킨 디자인대로 채워집니다. |
전체 흐름
① 새 스킨 만들기 (모양 고르기)
↓
② 편집기에서 부품을 놓고 디자인 → 「스킨 저장」 (저장 즉시 서버에 보관)
↓
③ 「저장된 스킨」을 화면으로 끌어서 원하는 자리에 놓기 → 최신글 박스
↓
④ 박스별로 게시판 · 글 수 · 너비 조정
↓
⑤ 「적용」 (박스를 놓은 위치를 저장)같은 스킨을 쓰는 박스는 전부 같이 바뀝니다. 스킨 디자인을 고치고 저장하면, 그 스킨을 쓰는 모든 최신글 박스가 한꺼번에 새 모양이 됩니다. 게시판 · 글 수 · 너비만 박스마다 따로 정할 수 있습니다.
탭을 열면 두 개의 카드가 보입니다.
다섯 가지 시작 모양 중 하나를 눌러 편집을 시작합니다. 고른 모양에서 출발해 마음대로 바꿀 수 있습니다.
| 시작 모양 | 설명 |
|---|---|
| 빈 스킨 | 아무 부품도 없는 상태에서 처음부터 만듭니다. |
| 목록형 | 번호 · 제목 · 댓글 수 · 글쓴이 · 날짜가 한 줄씩 나열되는 게시판 목록 모양. 줄 사이에 얇은 구분선이 있습니다. |
| 갤러리형 | 썸네일(대표 이미지)이 위에, 제목 · 글쓴이 · 날짜가 아래에 있는 카드를 여러 열로 보여 줍니다. |
| 글자 얹기 | 썸네일 이미지 위에 반투명 검은 바탕을 깔고 제목 · 날짜 · 글쓴이를 얹은 모양 (3열). |
| 슬라이드 | 가로로 넘기는 카드 형태. 썸네일 + NEW 표시 + 제목 + 날짜. |
참고 처음에는 시작 모양 중 가장 비슷한 것을 고르세요. 빈 스킨보다 훨씬 빨리 끝납니다.
지금까지 저장한 스킨 목록입니다. 한 줄에 스킨 이름과 한 줄씩 · 5개 부품 / 3열 · … / 가로 슬라이드 · … 같은 요약이 보입니다.
| 버튼 | 동작 |
|---|---|
| 이름 칸(그립 아이콘) | 마우스로 끌어서 화면에 놓으면 최신글 박스가 생깁니다. (8-9) |
| 연필 (편집) | 편집기를 열어 디자인을 고칩니다. |
| 복제 | 같은 디자인의 복사본을 만듭니다. 이름은 원래 이름 복사가 됩니다. 비슷한 스킨을 하나 더 만들 때 편합니다. |
| 휴지통 (삭제) | 스킨을 지웁니다. 확인창이 뜨고, 이 스킨을 쓰는 박스가 있으면 "방문자 화면에서 사라집니다" 라고 개수를 알려 줍니다. |
아직 스킨이 없으면 저장된 스킨이 아직 없습니다. 위에서 모양을 골라 만들어 보세요. 라고 표시됩니다. 스킨은 최대 40개까지 만들 수 있습니다.
시작 모양을 고르거나 연필을 누르면 편집기가 열립니다.
┌──────── 왼쪽: 패널 ────────┐ ┌─────────── 가운데: 편집 무대 ───────────┐
│ 부품 추가 │ │ [PC][모바일] 상태 안내 [스킨 저장][닫기] │
│ 선택한 부품 │ │ 첫 번째 칸만 편집됩니다…(안내) │
│ 부품 목록 │ │ ┌─────────────────────────────┐ │
│ 스킨 정보 │ │ │ 글 한 칸 (이 칸만 편집) │ │
│ 글 한 칸 │ │ │ 나머지 칸은 흐리게 보임 │ │
│ 배치 │ │ └─────────────────────────────┘ │
│ 바깥 틀 │ │ │
└─────────────────────────────┘ └───────────────────────────────────────┘무대(가운데)
게시판에 글이 없어 샘플 글로 보여 줍니다. / 게시판을 고르면 실제 글이 보입니다. 지금은 샘플 글입니다. 라고 알려 줍니다.패널(왼쪽)
위에서부터 부품 추가 → 선택한 부품 → 부품 목록 → 스킨 정보 → 글 한 칸 → 배치 → 바깥 틀 카드가 있습니다. 각 설정 줄은 2-3의 규칙과 같습니다(값 비우면 기본, ↺로 되돌리기).
「부품 추가」 카드(눌러서 넣기 · 끌어서 원하는 자리에 놓기)에서 부품을 고릅니다.
부품은 24개까지 넣을 수 있습니다. 라고 안내됩니다.| 부품 | 무엇을 보여 주나 |
|---|---|
| 썸네일 | 글의 대표 이미지(글에 올린 첫 이미지 등). 이미지 맞춤: 「꽉 채우기(잘림)」/「전체 보이기」 |
| 제목 | 글 제목. 최대 줄 수(1~6)를 넘으면 …으로 줄여 보여 줍니다. |
| 요약 | 글 내용의 앞부분. 길이는 「스킨 정보」의 요약 글자 수로 정합니다. |
| 글쓴이 | 작성자 이름 |
| 날짜 | 작성일. 짧게(10.30) / 길게(2026-10-30 …) 선택 |
| 조회수 | 조회 수. 앞 글자에 조회 , 뒤 글자에 회 같은 문구를 붙일 수 있습니다. |
| 댓글 수 | 댓글 개수. [ ] 를 앞뒤에 붙인 모양이 기본. 「0 이면 숨김」 옵션 있음 |
| 번호 | 목록의 순번 |
| NEW |
24시간 이내에 올라온 새 글에만 나타나는 표시. 글자 내용을 바꿀 수 있습니다(예: NEW → 신규). |
| 글자 | 고정 문구. 모든 칸에 같은 글자가 들어갑니다. (예: "자세히 보기", 구분용 기호) |
| 네모 | 색이 있는 사각형 면. 반투명 처리하면 이미지 위의 어두운 바탕으로 쓸 수 있습니다. |
| 줄 | 가는 구분선 (높이 1px, 색 지정) |
참고 부품은 모두 위치를 자유롭게 정할 수 있고 서로 겹칠 수 있습니다. 겹침 순서는 「층」으로 정합니다. (아래 「앞으로 / 뒤로」)
| 하고 싶은 일 | 방법 |
|---|---|
| 선택 | 무대의 첫 번째 칸에서 부품을 클릭합니다. 주황색 테두리와 부품이름 · 너비% × 높이px 라벨, 손잡이 8개가 나타납니다. 패널의 「부품 목록」에서 눌러도 됩니다. |
| 이동 | 부품을 끌어서 옮깁니다. |
| 크기 조절 | 테두리의 손잡이(네 모서리 · 네 변) 를 끕니다. |
| 정밀 이동 | 부품을 선택한 상태에서 방향키 = 1px, Shift+방향키 = 10px
|
| 삭제 |
Delete 또는 Backspace
|
| 복제 | Ctrl+D |
| 선택 해제 |
Esc, 또는 부품이 없는 빈 곳 클릭 |
| 스킨 저장 | Ctrl+S |
부품을 선택하면 이 카드에 부품 이름과 PC 값 편집 중 / 모바일 값 편집 중이 표시됩니다. 항목은 부품 종류에 따라 일부만 나옵니다.
| 항목 | 설명 |
|---|---|
| 가로 % | 칸의 왼쪽 끝에서 얼마나 떨어질지 (칸 폭에 대한 %) |
| 세로 px | 칸의 위쪽 끝에서 얼마나 떨어질지 |
| 너비 % | 부품 너비 (1~100%) |
| 높이 px | 부품 높이 |
| 항목 | 설명 | 범위 |
|---|---|---|
| 크기 (px) | 글자 크기 (비우면 기본) | 8 ~ 120 |
| 글자색 | 색 고르기 | |
| 굵기 | 기본 / 보통 / 중간 / 굵게 / 아주 굵게 / 가장 굵게 | — |
| 폰트 | 사이트 기본 / 고딕 / 명조 / 둥근 고딕 / 손글씨 / 굵은 제목체 / 고정폭 | — |
| 가로 정렬 | 왼쪽 / 가운데 / 오른쪽 | — |
| 세로 정렬 | 위 / 가운데 / 아래 | — |
| 자간 (px) | −10 ~ 40 | |
| 행간 (%) | 80 ~ 300 | |
| 최대 줄 수 | 제목 · 요약 · 글자 부품. 넘치면 줄임표 | 1 ~ 6 |
| 내용 | NEW · 글자 부품의 문구 | 최대 60자 |
| 앞 글자 / 뒤 글자 | 그 외 부품 앞뒤에 붙일 문구. 예: 조회수 조회 + 회
|
각 최대 12자 |
| 날짜 형식 | 날짜 부품: 짧게 / 길게 | — |
| 0 이면 숨김 | 댓글 수 부품: 댓글이 0개면 표시 안 함 | 체크 |
참고 폰트는 방문자 기기나 사이트에 해당 글꼴이 있어야 보입니다. 없으면 기본 글꼴로 보입니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 부품 뒤 바탕색 | 색 고르기 |
| 모서리 (px) | 둥글기 | 0 ~ 200 |
| 투명도 (%) | 0 = 완전 투명, 100 = 불투명 | 0 ~ 100 |
| 테두리 굵기 | 0 ~ 6 | |
| 테두리 색 | 색 고르기 |
카드 맨 아래 버튼 4개입니다.
| 버튼 | 동작 |
|---|---|
| 앞으로 | 한 겹 앞으로 (다른 부품 위에 보임) |
| 뒤로 | 한 겹 뒤로 |
| 복제 | 같은 설정의 부품을 하나 더 만듭니다. |
| 삭제 | 부품을 지웁니다. |
편집기 위쪽의 「PC」「모바일」 버튼으로 어느 화면의 값을 고칠지 정합니다.
모바일 값 편집 중이 표시되고, 값을 바꾼 부품에는 모바일 별도 값 있음이 붙습니다.모바일 전용 옵션 (모바일 값 편집 중일 때만 나타남)
| 옵션 | 설명 |
|---|---|
| 모바일에서 숨기기 | 이 부품을 모바일 화면에서만 감춥니다. (예: 요약, 글쓴이) |
| PC 값과 같게 (모바일 별도 값 지우기) | 모바일에서 따로 정한 값을 지우고 PC 값을 따르게 합니다. |
「부품 목록」에는 모바일에서 숨긴 부품에 · 모바일 숨김이 붙어 확인할 수 있습니다.
팁 PC에서 완성한 뒤 모바일로 바꿔서 제목 폭을 넓히고, 요약 · 글쓴이는 숨기고, 날짜를 오른쪽 끝으로 옮기는 식으로 정리하면 모바일 목록이 훨씬 깔끔해집니다.
지금 스킨에 들어 있는 부품이 나열됩니다. 한 줄에 이름 · 가로% · 세로px · 층 번호가 보입니다. 줄을 누르면 그 부품이 선택되고, 줄 오른쪽 ✕ 로 삭제할 수 있습니다. 부품이 없으면 아직 부품이 없습니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 스킨 이름 | 목록에서 구분할 이름 (필수) | 최대 40자 |
| 게시판 | 미리보기용 기본 게시판. 화면에 놓을 때 박스마다 바꿀 수 있습니다. | 게시판 목록에서 고름 |
| 글 수 | 한 번에 보여 줄 글 개수 | 1 ~ 30 |
| 제목 글자 수 | 제목을 몇 글자까지 보여 줄지 (넘으면 줄임) | 0 ~ 120 |
| 요약 글자 수 | 요약을 몇 글자까지 보여 줄지 | 0 ~ 300 |
| 항목 | 설명 | 범위 |
|---|---|---|
| 높이 PC (px) | 글 한 칸의 높이 | 20 ~ 800 |
| 높이 모바일 | 모바일에서의 높이. 비우면 PC와 같게 | 20 ~ 800 |
| 배경색 | 칸 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 칸 테두리 | 굵기 0 ~ 6 |
| 모서리 (px) | 칸 둥글기 | 0 ~ 60 |
| 마우스를 올리면 | 변화 없음 / 위로 살짝 뜸 / 배경색 바뀜 | — |
| 올렸을 때 배경색 | 「배경색 바뀜」을 골랐을 때의 색 | 색 고르기 |
| 썸네일 확대 | 체크하면 마우스를 올릴 때 썸네일이 살짝 커집니다. | 체크 |
주의 칸의 높이를 먼저 정하세요. 부품의 세로 위치는 이 높이 안에서 잡기 때문에, 나중에 높이를 바꾸면 부품이 어긋나 보일 수 있습니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 격자 (열) / 가로 슬라이드 | 글 칸을 격자(여러 열) 로 놓을지, 가로로 넘기는 슬라이드로 놓을지 | 둘 중 택1 |
| 열 수 PC | 격자일 때 PC에서 몇 열인지 (1이면 한 줄씩) | 1 ~ 6 |
| 열 수 모바일 | 모바일에서 몇 열인지 | 1 ~ 3 |
| 칸 간격 (px) | 칸과 칸 사이 | 0 ~ 60 |
| 슬라이드 칸 너비 | 「가로 슬라이드」일 때 한 칸의 너비 | 120 ~ 600 |
목록 전체를 감싸는 상자의 설정입니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 머리글 보이기 | 상자 위쪽의 제목줄 표시 여부 | 체크 |
| 머리글 제목 | 비우면 게시판 이름이 표시됩니다. | 최대 60자 |
| 영문 라벨 | 제목 옆의 작은 영문 라벨 (예: NOTICE, UPDATE) |
최대 40자 |
| "전체 보기" 링크 | 머리글 오른쪽에 게시판으로 가는 링크 표시 | 체크 |
| 링크 문구 | 링크 글자 (기본 전체 보기) |
최대 20자 |
| 머리글 글자색 / 크기 | 크기 10 ~ 40 | |
| 바탕색 | 상자 전체 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 굵기 0 ~ 6 | |
| 모서리 (px) | 상자 둥글기 | 0 ~ 60 |
| 안쪽 여백 (px) | 상자 안쪽 여백 | 0 ~ 80 |
| 최대 너비 (px) | 비우면 꽉 채움 | 0 ~ 1600 |
다크 모드 참고 바탕색 · 배경색을 직접 정한 스킨은 다크 모드에서도 정한 색이 뒤집히지 않고 그대로 보이며, 그 위의 글자색도 고정됩니다. 어두운 배경에는 밝은 글자색을, 밝은 배경에는 어두운 글자색을 직접 지정해 주세요.
Ctrl+S 를 누릅니다.저장하는 중… → 저장했습니다. "최신글" 탭 목록에서 끌어다 화면에 놓으세요.
스킨 이름을 입력해 주세요., 40개를 넘으면 스킨은 40개까지 만들 수 있습니다. 라고 나옵니다.| 항목 | 설명 |
|---|---|
| 스킨 | 이 박스가 사용할 스킨. 다른 스킨으로 바꿔 끼울 수 있습니다. |
| 게시판 | 어느 게시판의 글을 보여 줄지. 「스킨 기본」 이면 스킨에 정해 둔 게시판을 씁니다. |
| 글 수 | 이 박스에서만 보여 줄 글 개수 (1~30). 비우면 스킨 값. |
| 최대 너비 | 이 박스만의 최대 너비 (0~1600px). 비우면 스킨 값 또는 꽉 채움. |
| 「이 스킨 디자인 편집」 | 편집기로 이동해 스킨 디자인을 고칩니다. |
같은 스킨을 여러 곳에 쓰기: 한 스킨을 홈의 위쪽과 사이드에 놓고, 박스마다 게시판 · 글 수 · 너비만 다르게 하면 "공지 5개", "갤러리 6개"처럼 한 디자인으로 여러 목록을 만들 수 있습니다.
지금 정한 디자인 전체를 이름 붙여 보관해 두었다가, 나중에 한 번에 불러오거나, 다른 사이트로 옮길 때 씁니다.
스타일 · 색상 · 안쪽 여백 · 「선택 영역」에서 정한 모양 설정 · 박스 가 함께 저장됩니다.
담기지 않는 것: 「최신글」 탭의 스킨과 「저장된 영역」의 보관함은 프리셋과 별개로 저장됩니다. 최신글 박스가 들어 있는 프리셋을 다른 사이트에 옮기려면, 스킨이 그 사이트에 있어야 박스가 제대로 보입니다.
「이름」 을(를) 저장했습니다. 라고 나오고 아래 목록에 추가됩니다.「이름」 을(를) 덮어썼습니다.)이름을 입력해 주세요. 가 나옵니다. 프리셋은 최대 30개입니다.참고 프리셋 저장은 「적용」과 별개로 즉시 서버에 보관됩니다. 저장하지 않은(「적용」 전의) 변경도 지금 상태 그대로 프리셋에 담깁니다.
각 프리셋 줄에는 이름과 요약(· 박스 · 색 · 여백 · 영역 개수)이 보이고, 오른쪽에 네 개의 버튼이 있습니다.
| 버튼 | 동작 |
|---|---|
| 불러오기 (내려받기 아이콘) | 그 프리셋의 설정으로 화면을 바꿉니다. 안내: 「이름」 을(를) 불러왔습니다. 화면을 확인하고 「적용」을 눌러야 저장됩니다.
|
| 파일로 내보내기 | 그 프리셋을 JSON 파일로 저장합니다. |
| 복사 (복사 아이콘) | 프리셋 내용을 클립보드에 복사합니다. 복사했습니다. (복사가 안 되는 환경이면 아래 칸에 내용을 넣어 줍니다.) |
| 삭제 (휴지통) | 보관함에서 삭제합니다. 삭제했습니다.
|
주의 「불러오기」는 지금 화면의 설정을 통째로 덮어씁니다. 아직 저장하지 않은 작업이 있다면 먼저 프리셋으로 저장해 두세요. 불러온 뒤에도 「되돌리기」로 취소할 수 있습니다.
「현재 상태 내보내기」 줄의 두 버튼으로 지금 화면 상태를 밖으로 꺼냅니다.
| 버튼 | 동작 |
|---|---|
| 파일로 | 현재 상태를 JSON 파일로 저장 |
| 복사 | 현재 상태를 클립보드에 복사 (이메일 · 메신저로 붙여넣어 보낼 때 편리) |
받은 프리셋을 내 사이트에 들여옵니다. 두 가지 방법이 있습니다.
가져오면 가져온 프리셋 목록에 추가되고 N개를 가져왔습니다. 허용되지 않는 값은 자동으로 정리됩니다. 라고 나옵니다. 이후 9-3처럼 불러오기로 적용하세요.
오류 안내: JSON 형식이 아닙니다. / new-basic 프리셋 파일이 아닙니다. / 파일이 너무 큽니다. (1MB 이하) / 붙여넣은 내용이 없습니다. / 프리셋은 최대 30개까지 저장할 수 있습니다.
안전 장치 가져온 내용 중 허용되지 않는 값은 자동으로 정리됩니다. 누군가에게 받은 파일이라도 사이트가 망가지지 않도록 걸러서 들여옵니다.
이 부분이 가장 헷갈리기 쉬우니 꼭 확인하세요.
| 작업 | 저장되는 시점 |
|---|---|
| 스타일 · 색상 · 안쪽 여백 | 「적용」을 눌러야 저장 |
| 「선택 영역」의 모양 설정 (색, 여백, 크기, 위치 이동 등) | 「적용」을 눌러야 저장 |
| 박스 만들기 · 부품 편집 · 박스 삭제 · 박스 놓기(보관함에서 끌어 놓기 포함) | 「적용」을 눌러야 저장 |
| 프리셋 불러오기 (화면에 반영) | 「적용」을 눌러야 저장 |
| 「전체 초기화」 | 「적용」을 눌러야 저장 |
| 최신글 스킨 저장 · 복제 · 삭제 | 바로 저장 |
| 「저장된 영역」(박스 보관함) 담기 · 이름 바꾸기 · 삭제 · JSON 불러오기 | 바로 저장 |
| 프리셋 저장 · 삭제 · 가져오기 | 바로 저장 |
| 이 페이지에 JSON 올리기 (7-7) | 바로 저장 (페이지가 자동 새로고침됨) |
| 이 페이지에 HTML 올리기 (7-8) | 바로 저장 (페이지가 자동 새로고침됨) |
| 박스에 그림 올리기 | 그림 파일은 바로 서버에 저장, 박스에 연결된 주소는 「적용」 후 반영 |
저장하는 중 → 캐시 정리 완료 → 스타일 적용하는 중 → 적용 완료로 진행됩니다. 몇 초면 끝납니다.아직 「적용」하지 않은 모든 변경(스타일 · 색 · 여백 · 선택 영역 설정 · 박스)을 마지막으로 저장한 상태로 되돌립니다. 이미 「적용」한 것은 되돌려지지 않습니다.
참고 「되돌리기」는 바로 저장되는 것들(최신글 스킨, 저장된 영역, 프리셋, 올린 그림)에는 영향이 없습니다.
4-4 참고. 두 번 눌러야 동작하고, 「적용」 전까지는 「되돌리기」로 취소할 수 있습니다.
「적용」하지 않은 변경은 사라집니다. 페이지를 새로고침하거나 이동하기 전에 「적용」 또는 프리셋 저장을 하세요.
처음부터 끝까지 그대로 따라 하면 되는 순서입니다.
| 항목 | 한도 |
|---|---|
| 박스 (사이트 전체) | 30개 |
| 박스 하나의 부품 | 30개 |
| 카드 / 슬라이드 / 아코디언 항목 | 각 12개 |
| 탭 항목 | 8개 |
| 저장된 영역(보관함) | 40개 (한 항목 박스 12개 이하) |
| 최신글 스킨 | 40개 |
| 스킨 하나의 부품 | 24개 |
| 스킨 글 수 | 1~30 |
| 프리셋 | 30개 |
| 프리셋 파일 | 1MB |
| 이름 길이 | 프리셋 · 스킨 40자 |
| 그림 올리기 | 자동 WebP 변환. SVG는 올릴 수 없음 |
| 페이지 HTML · JSON 올리기 | 파일 2MB 이하 |
| 페이지 전용 스크립트(FTP) | 파일 2MB 이하, 등록 100개 |
Q. 바꿨는데 방문자 화면에는 그대로예요. 「적용」을 눌렀는지 확인하세요. 브라우저 캐시 때문이면 새로고침(Ctrl+F5)을 해 보세요. 최신글은 새 글이 최대 1분 뒤 반영됩니다.
Q. 선택 모드에서 링크를 눌러도 이동하지 않아요. 정상입니다. 선택 모드에서는 클릭이 "선택"으로 동작합니다. 선택 모드를 끄면 평소처럼 이동합니다.
Q. 박스를 불러왔는데 보이지 않아요. 표시 범위(페이지)와 기준 요소가 그 페이지에 있는지 확인하세요. 「저장된 영역」으로 직접 끌어 놓으면 가장 확실합니다.
Q. 최신글 박스가 비어 있어요. 게시판에 글이 없거나, 방문자에게 읽기 권한이 없는 게시판일 수 있습니다. 박스의 게시판 선택도 확인하세요.
Q. 스킨을 지웠더니 박스가 사라졌어요. 스킨을 쓰는 박스는 스킨이 없으면 방문자에게 보이지 않습니다. 같은 모양의 스킨을 다시 만들어 박스에서 스킨을 선택하세요.
Q. 실수로 「불러오기」를 눌렀어요. 「되돌리기」를 누르면 마지막 저장 상태로 돌아갑니다.
Q. 이미지 올리기가 실패해요. SVG는 올릴 수 없습니다. 서버의 업로드 용량 제한을 넘는 큰 파일도 실패할 수 있으니 줄여서 올려 보세요.
Q. 모바일에서만 이상해요. 화면 크기 전환을 모바일로 바꿔 모바일 값을 따로 확인하세요. 최신글 스킨은 모바일 열 수와 숨김 설정을 확인하세요.
| 키 | 동작 |
|---|---|
| 방향키 | 부품 1px 이동 |
| Shift + 방향키 | 부품 10px 이동 |
| Delete / Backspace | 부품 삭제 |
| Ctrl + D | 부품 복제 |
| Ctrl + S | 스킨 저장 |
| Esc | 선택 해제 |
| 용어 | 뜻 |
|---|---|
| 적용 | 바꾼 설정을 서버에 저장하는 동작 |
| 선택 영역 | 화면에서 요소를 골라 모양을 바꾸는 기능 |
| 박스 | 직접 만들어 화면에 놓는 영역 |
| 부품 | 박스 · 스킨 안의 조각 |
| 저장된 영역 | 박스를 담아 두는 보관함 |
| 스킨 | 최신글 한 칸과 바깥 틀의 디자인 |
| 프리셋 | 설정 전체를 이름 붙여 저장한 것 |
new-basic 테마 · Style Booster v1.21.17
관리자용 · 화면을 보면서 사이트 디자인을 직접 고치는 도구
Style Booster는 사이트 화면을 보면서 디자인을 바로 고치는 관리자 전용 도구입니다. 코드를 몰라도 다음을 할 수 있습니다.
| 하고 싶은 일 | 쓰는 곳 |
|---|---|
| 사이트 전체의 분위기(박스 모양)를 바꾸고 싶다 | 「전체 설정」 탭 → 스타일 |
| 배경 · 메뉴 · 푸터 · 포인트 색을 바꾸고 싶다 | 「전체 설정」 탭 → 색상 |
| 본문 · 사이드 · 카드의 안쪽 여백을 조절하고 싶다 | 「전체 설정」 탭 → 안쪽 여백 |
| 화면의 특정 글자 · 박스 · 버튼의 색, 크기, 위치, 여백을 바꾸고 싶다 | 「선택 영역」 탭 |
| 원하는 자리에 제목 · 글 · 이미지 · 버튼 · 카드 · 슬라이드 · 탭 · 아코디언을 직접 만들어 넣고 싶다 | 「선택 영역」 탭 → 박스 추가 |
| 게시판 최신글을 내가 디자인한 모양(목록형 · 갤러리형 · 슬라이드형 등)으로 보여 주고 싶다 | 「최신글」 탭 |
| 만든 설정을 이름 붙여 보관하고, 다른 사이트에도 옮기고 싶다 | 「프리셋」 탭 |
| 만든 박스를 파일로 내보내고, 다른 페이지 · 다른 사이트에 다시 놓고 싶다 | 「선택 영역」 탭 → 저장된 영역 |
참고 패널을 닫아도 아직 저장하지 않은 변경은 화면에 그대로 미리 보입니다. 저장하지 않고 페이지를 떠나면 사라지니, 마음에 들면 꼭 「적용」을 누르세요.
위에서 아래로 다음과 같이 되어 있습니다.
┌─────────────────────────────┐
│ Style Booster 관리자 전용 ✕│ ← 제목줄
├─────────────────────────────┤
│ [ PC ] [ 태블릿 ] [ 모바일 ] │ ← 화면 크기 버튼
├─────────────────────────────┤
│ 전체 설정│선택 영역│최신글│프리셋│ ← 탭 4개
├─────────────────────────────┤
│ │
│ (선택한 탭의 내용) │ ← 위아래로 스크롤
│ │
├─────────────────────────────┤
│ [ 되돌리기 ] [ 적용 ] │ ← 항상 아래에 고정
└─────────────────────────────┘| 영역 | 설명 |
|---|---|
| 화면 크기 버튼 | PC / 태블릿 / 모바일. 지금 어느 화면 크기를 편집하는지 정합니다. |
| 탭 4개 | 「전체 설정」 「선택 영역」 「최신글」 「프리셋」. 하는 일에 따라 고릅니다. |
| 「되돌리기」 | 마지막으로 저장한 상태로 되돌립니다. (저장 전 변경을 모두 버림) |
| 「적용」 | 지금 상태를 저장합니다. 바꾼 것이 없으면 눌러지지 않습니다(회색). |
패널의 대부분의 설정은 같은 모양으로 되어 있습니다.
패널 위쪽의 PC / 태블릿 / 모바일 버튼은 두 가지 일을 합니다.
| 버튼 | 미리보기 크기 | 이 값이 적용되는 방문자 화면 |
|---|---|---|
| PC | 지금 보고 있는 화면 그대로 | 모든 화면 (기본값) |
| 태블릿 | 폭 820px × 높이 1180px | 폭 1024px 이하 |
| 모바일 | 폭 390px × 높이 844px | 폭 768px 이하 |
모바일 · 390px · 85% 축소처럼 크기와 축소 비율이 표시됩니다.Esc 키를 눌러도 PC로 돌아옵니다.참고 패널에서 고른 스타일 · 색 · 여백은 열려 있는 작은 화면에도 곧바로 같이 반영됩니다. 모바일 화면을 열어 둔 채 색을 바꿔 보세요.
주의 화면 크기를 바꾸면 선택하고 있던 요소는 풀립니다. (같은 요소를 새 화면에서 다시 찾아 주기는 하지만, 못 찾으면 다시 눌러 고르세요.)
사이트 전체의 기본 분위기를 정하는 탭입니다. 위에서부터 스타일 → 색상 → 안쪽 여백 → 초기화 순서입니다. 패널 맨 위에는 "선택하면 바로 미리 보입니다. 「적용」을 누르면 이 테마를 쓰는 모든 도메인에 저장됩니다."라는 안내가 있습니다.
사이트 곳곳의 박스(게시판 목록, 위젯, 카드 등)와 배경이 어떤 느낌으로 보일지 세 가지 중 하나를 고릅니다.
| 스타일 | 설명 | 이런 분께 |
|---|---|---|
| 플랫 라인 | 얇은 선과 각진 박스. 기본 디자인입니다. | 깔끔하고 단정한 느낌 |
| 채움 카드 | 배경을 살짝 깔고, 박스는 흰 카드로 구분합니다. | 박스가 또렷하게 떠 보이길 원할 때 |
| 소프트 라운드 | 둥근 모서리와 부드러운 면 구분. | 친근하고 부드러운 느낌 |
사용 방법
참고 스타일을 바꾸면 아래 색상 · 여백의 "기본값"도 그 스타일의 기본값으로 바뀝니다. 내가 따로 정한 색 · 여백은 스타일을 바꿔도 그대로 유지됩니다.
사이트의 주요 색을 9가지로 나누어 바꿉니다. 이 설정은 라이트 모드(밝은 화면) 전용이며, 비워 두면 스타일의 기본색이 쓰입니다. 다크 모드는 사이트의 다크 모드 기능이 따로 처리합니다.
| 묶음 | 항목 | 어디에 쓰이나 |
|---|---|---|
| 페이지 · 박스 | 배경 | 사이트 전체 바탕색 |
| 박스 배경 | 게시판 · 위젯 · 카드 등 박스 안쪽 색 | |
| 박스 선 | 박스의 테두리 · 구분선 색 | |
| 헤더(메뉴) | 메뉴(헤더) 배경 | 맨 위 메뉴 영역의 바탕색 |
| 메뉴(헤더) 글자 | 메뉴 글자색 | |
| 푸터 | 푸터 배경 | 맨 아래 영역의 바탕색 |
| 푸터 글자 | 푸터 글자색 | |
| 포인트 | 포인트색 (Lv·활성·강조 버튼) | 레벨 배지, 선택된 메뉴, 강조 버튼 등 눈에 띄는 곳 |
| 배지색 (N·알림 개수) | 새 글 N 표시, 알림 개수 동그라미 |
주의 색상은 라이트 모드 기준입니다. 어두운 배경색을 지정하면 라이트 모드에서도 어두운 화면으로 보이지만, 방문자가 다크 모드를 켜면 다크 모드 규칙이 따로 적용됩니다. 중요한 색은 다크 모드를 켠 상태에서도 한 번 확인하세요.
박스 안쪽의 여백(글자와 테두리 사이의 거리)을 슬라이더로 조절합니다. 단위는 px이고 0 ~ 64px를 2px 단위로 움직입니다. 값을 정하지 않으면 스타일 기본값이며, 슬라이더 오른쪽에 「기본」 이라고 표시됩니다.
| 묶음 | 항목 | 설명 |
|---|---|---|
| PC · 태블릿 | 본문 안쪽 여백 | 본문(글 목록 · 글 보기 등) 박스의 안쪽 여백 |
| 사이드 안쪽 여백 | 오른쪽(또는 왼쪽) 사이드 영역 박스의 안쪽 여백 | |
| 위젯 · 카드 안쪽 여백 | 위젯, 카드 모양 박스의 안쪽 여백 | |
| 모바일 (768px 이하) | 본문 / 사이드 / 위젯 · 카드 | 모바일에서만 다르게 하고 싶을 때. 비우면 위의 PC 값을 그대로 따릅니다. |
사용 방법
참고 모바일은 화면이 좁아서 PC와 같은 여백이면 글이 답답해 보이는 경우가 많습니다. 모바일 묶음을 PC보다 작게 주면 훨씬 시원해집니다.
「전체 설정」 탭 맨 아래의 「전체 초기화」 버튼은 지금까지 정한 모든 설정을 지웁니다.
무엇이 지워지나
지워지지 않는 것
사용 방법
화면에 보이는 글자 · 박스 · 버튼 · 메뉴 등을 직접 눌러서 골라 그 모양을 바꿉니다. 「전체 설정」이 "사이트 전체"를 다룬다면, 「선택 영역」은 "이 부분만"을 다룹니다.
탭 안에는 위에서부터 다음 카드가 있습니다.
「요소 선택」 카드의 큰 버튼 「화면에서 요소 선택」 이 켜져 있어야(강조 색) 화면의 요소를 고를 수 있습니다. 「선택 영역」 탭을 열면 기본으로 켜집니다.
버튼 옆의 눈 모양 버튼은 「적용된 모습 보기」 입니다. 누르면 파란/주황 선택 표시와 편집 표시를 숨겨서, 방문자에게 보일 진짜 모습을 확인할 수 있습니다. 다시 누르면 표시가 돌아옵니다.
요소 이름 가로×세로 라벨이 보입니다.같은 값을 여러 요소에 한 번에 적용하고 싶을 때 씁니다.
Ctrl(또는 Shift) + 클릭: 이미 고른 요소에 추가합니다. 이미 고른 요소를 다시 Ctrl+클릭 하면 선택이 해제됩니다.Ctrl을 함께 누르면 기존 선택에 더해집니다.[3개 함께 선택]처럼 개수가 표시되고, 이때 바꾼 값은 고른 요소 모두에 적용됩니다.참고 여러 개를 골랐을 때는 「상위 / 하위」 버튼이 꺼집니다. 하나만 골라서 쓰는 기능이기 때문입니다.
요소를 고르면 나타납니다. 맨 위에 지금 고른 요소의 이름과 「편집 중: PC / 태블릿 · 1024px 이하 / 모바일 · 768px 이하」 가 보입니다. 값을 바꾸기 전에 아래 세 가지를 확인하세요.
클릭한 곳이 너무 안쪽(작은 글자 조각) 이거나 너무 바깥일 수 있습니다. 이때 범위를 옮깁니다.
| 선택 | 의미 | 예 |
|---|---|---|
| 같은 종류 모두 | 같은 종류로 만들어진 요소를 전부 바꿉니다. | "모든 게시판 제목 글자" |
| 이 요소만 | 내가 클릭한 딱 그 요소 하나만 바꿉니다. | "이 메뉴의 이 버튼만" |
값이 어느 페이지에서 보일지 정합니다. 칩(버튼) 5개를 켜고 끌 수 있고, 여러 개를 함께 켤 수 있습니다.
| 칩 | 의미 |
|---|---|
| 전체 | 모든 페이지에 적용 (아무것도 안 켠 상태가 "전체") |
| 메인 | 메인(홈) 페이지에만 |
| 서브 | 메인이 아닌 모든 서브 페이지에만 |
| 이 페이지 | 지금 보고 있는 이 주소 한 곳에만 |
| 모바일 | 화면 크기가 모바일(768px 이하) 일 때의 값. 위의 PC·태블릿·모바일 버튼과 같은 것입니다. |
조합 예시
패널의 한 줄 안내(예: 지금 보는 화면: 서브 · 서브 + 페이지 /free에 적용 · 모바일(768px 이하) 값)가 지금 값이 어디에 적용되는지를 항상 알려 줍니다.
중요 값을 바꾸면 선택한 범위 모두에 같은 값이 저장됩니다. 한 범위를 끄면 그 범위의 설정만 지워지고 나머지는 남습니다.
참고 — 다른 페이지를 함께 고르려면 「이 페이지」는 지금 보고 있는 페이지만 추가합니다. 다른 페이지를 함께 넣으려면 그 페이지로 이동해서 「이 페이지」를 한 번 더 켜세요. 이전에 고른 페이지는 새로고침 전까지 유지됩니다.
| 항목 | 의미 | 범위 |
|---|---|---|
| 안쪽 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 안쪽, 글자와 테두리 사이의 거리 | 0 ~ 120px |
| 바깥 여백 (위 / 오른쪽 / 아래 / 왼쪽) | 요소 바깥, 이웃 요소와의 거리 | −60 ~ 200px (음수면 이웃 쪽으로 당겨짐) |
숫자 칸 4개(위·오른쪽·아래·왼쪽)에 값을 넣으면 즉시 반영됩니다. 한 방향만 정해도 됩니다.
요소를 눈에 보이는 위치만 옮깁니다. 주변 요소의 자리는 그대로이고, 옮긴 요소만 이동합니다.
세 가지 방법이 있습니다.
Shift+방향키는 10px씩 움직입니다. (입력칸에 글자를 쓰고 있을 때는 방향키가 입력칸에서 동작합니다.)「원래 자리로」 를 누르면 이동값이 0이 되어 제자리로 돌아갑니다.
참고 위치 이동도 화면 크기별로 따로 저장됩니다. PC에서 옮긴 값이 모바일에서 어색하면, 모바일 화면에서 따로 조정하세요.
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 요소의 바탕색 | 색 고르기 |
| 글자색 | 요소 안 글자 색 | 색 고르기 |
| 테두리 색 | 테두리 선 색 | 색 고르기 |
| 테두리 굵기 | 테두리 두께 (0이면 테두리 없음) | 0 ~ 10px |
| 모서리 둥글기 | 모서리를 얼마나 둥글게 할지 | 0 ~ 80px |
| 구분 | 항목 | 설명 | 범위 |
|---|---|---|---|
| 크기 | 너비 | 요소 가로 크기 | 0 ~ 1600px |
| 최대 너비 | 이보다 커지지 않게 제한 | 0 ~ 1600px | |
| 최소 높이 | 이보다 작아지지 않게 | 0 ~ 800px | |
| 안쪽 간격(gap) | 안에 나열된 요소들 사이의 간격 | 0 ~ 80px | |
| 글자 | 글자 크기 | 글자 크기 | 8 ~ 80px |
| 자간 | 글자와 글자 사이 | −10 ~ 40px | |
| 행간 (%) | 줄과 줄 사이. 100 = 글자 크기와 같은 줄 높이 | 80 ~ 300% | |
| 글자 정렬 | 기본 / 왼쪽 / 가운데 / 오른쪽 | — |
선택한 요소에 정한 값을 전부 한꺼번에 지우고 원래 디자인으로 돌립니다. 줄마다 있는 ↺ 는 "그 항목만" 지우고, 이 버튼은 "이 요소의 모든 설정"을 지웁니다.
「선택 영역」 탭 아래쪽에 지금까지 만든 것이 목록으로 나옵니다. 눌러서 선택하고 바로 고칠 수 있습니다.
b1 · 부품 박스처럼 박스 번호와 종류, 그리고 어디에 보이는지(/free, 모든 페이지, 홈, 게시판 전체)가 표시됩니다.
[메인], [서브], [/경로] 같은 범위 표시와 함께 나열됩니다.
박스는 내가 원하는 자리에 직접 만들어 넣는 새 영역입니다. 제목 · 글 · 이미지 · 버튼 같은 부품을 쌓아서 안내문, 배너, 카드 목록, 슬라이드, 탭, FAQ 같은 것을 코드 없이 만들 수 있습니다.
「선택 영역」 탭의 「박스 추가」 카드를 씁니다. 두 가지 방법이 있습니다.
박스라고 적힌 작은 알약이 따라다닙니다.Esc 를 누르면 취소됩니다.| 버튼 | 박스가 놓이는 곳 |
|---|---|
| 앞에 | 선택한 요소 바로 앞(위) |
| 뒤에 | 선택한 요소 바로 뒤(아래) |
| 안 맨앞 | 선택한 요소 안쪽의 맨 처음 |
| 안 맨끝 | 선택한 요소 안쪽의 맨 마지막 |
body 의 앞·뒤에는 넣을 수 없습니다. 안 맨앞/맨끝을 쓰세요. → 페이지 최상위 요소를 골랐을 때입니다. 「안 맨앞」「안 맨끝」을 쓰세요.이 요소는 위치를 정할 수 없습니다. 다른 요소를 선택하세요. → 다른 요소를 골라 다시 하세요.박스는 최대 30개까지입니다. → 안 쓰는 박스를 지우세요.새 박스는 빈 박스로 시작하고, 자동으로 선택됩니다. 이제 패널에서 부품을 채우면 됩니다.
박스를 선택하면 「선택 영역」 탭에 박스 전용 카드가 나타납니다.
| 카드 | 하는 일 |
|---|---|
| 부품 추가 | 부품 14종 중 하나를 눌러 박스에 넣습니다. |
| 구성 | 지금 들어 있는 부품 목록. 눌러서 선택, 순서 바꾸기, 복제, 삭제. |
| ○○ 속성 | 선택한 부품의 세부 설정 (글자, 주소, 모양 등). |
| 표시 · 위치 | 어느 페이지에 보일지, 박스 삭제. |
그 아래 여백 · 위치 이동 · 색 · 테두리 · 크기 · 글자 카드로 박스 자체의 모양(배경색, 테두리, 모서리, 여백 등)도 꾸밀 수 있습니다. 사용법은 5장과 같습니다.
| 동작 | 방법 |
|---|---|
| 부품 선택 | 목록의 부품 줄을 누릅니다. 화면의 해당 부품이 선택되고, 아래에 「○○ 속성」 카드가 나타납니다. 화면에서 부품을 직접 눌러도 됩니다. |
| 순서 바꾸기 | 줄 오른쪽의 ↑, ↓ 버튼 |
| 복제 | 복제 아이콘 — 같은 설정의 부품이 바로 아래에 하나 더 생깁니다. |
| 삭제 | ✕ 버튼 |
참고 부품은 박스 안에서 위에서 아래로 차례로 쌓입니다. 가로로 나란히 놓고 싶다면 「카드 열」 부품(2~4열)을 쓰세요.
부품을 선택하면 「○○ 속성」 카드에서 아래 항목을 설정합니다. 모든 항목은 바꾸는 즉시 화면에 반영됩니다.
| 항목 | 설명 |
|---|---|
| 글자 | 제목 문구 |
| 크기 | 크게(큰 제목) / 보통 / 작게 |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
처음에는 제목이라는 글자가 들어갑니다. 글자색 · 정확한 크기는 아래 「색 · 테두리」「크기 · 글자」 카드로 고칠 수 있습니다.
| 항목 | 설명 |
|---|---|
| 내용 | 본문. 5줄 높이의 입력칸입니다. 줄을 바꾸면 문단이 나뉩니다. |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
| 항목 | 설명 |
|---|---|
| 이미지 주소 |
https://… 또는 /경로 형식. 바로 아래의 「그림 올리기」 버튼으로 내 컴퓨터의 그림을 올릴 수도 있습니다. (6-6) |
| 설명 (대체 글자) | 그림이 안 보일 때 · 화면 낭독기가 읽는 글. 접근성과 검색에 좋으니 적어 두세요. |
| 누르면 이동할 주소 | 그림을 눌렀을 때 이동할 주소. 비우면 이동하지 않습니다. |
| 열기 (타겟) | 자동 / 새 창 / 현재 창 (주소를 넣었을 때만 쓰임) |
| 모서리 | 각지게 / 조금 둥글게 / 둥글게 / 원형 |
| 항목 | 설명 |
|---|---|
| 글자 | 버튼에 적힐 문구 (기본 버튼) |
| 이동할 주소 | 누르면 이동할 주소 |
| 열기 (타겟) | 자동(바깥 주소는 새 창, 내 사이트 주소는 현재 창) / 새 창 / 현재 창 |
| 모양 | 채움(색이 꽉 찬 버튼) / 테두리(선만 있는 버튼) |
| 정렬 | 왼쪽 / 가운데 / 오른쪽 |
가로 줄 하나입니다. 별도 속성은 없고, 굵기 · 색은 「선택 영역」의 「색 · 테두리」 카드로 정합니다.
부품 사이를 띄우는 빈 공간입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 4 ~ 300px (처음 24px) |
직접 HTML을 쓰는 부품입니다. (높은 자유도, 신중하게)
| 항목 | 설명 |
|---|---|
| HTML | 8줄 높이의 입력칸 |
주의 보안을 위해
<script>,on…속성(onclick 등)은 저장할 때 자동으로 지워집니다. (<iframe>은 유튜브 영상만 안전한 플레이어로 바꿔 남기고, 다른 사이트의 iframe 은 지워집니다.) 일반적인 글 · 이미지 · 표 · 링크 정도만 안전하게 쓸 수 있습니다.
이미지 + 제목 + 내용으로 된 카드를 가로로 나란히 놓습니다. 화면 폭이 720px 이하(모바일)가 되면 자동으로 1열로 쌓입니다.
| 항목 | 설명 |
|---|---|
| 열 수 | 2열 / 3열 / 4열 |
각 카드(항목) 마다 다음을 적습니다.
| 항목 | 설명 |
|---|---|
| 이미지 주소 | 카드 위쪽 그림 (비워도 됨) |
| 제목 | 카드 제목 |
| 내용 | 카드 설명 |
| 이동할 주소 | 주소를 넣으면 카드 전체가 링크가 됩니다. |
이미지 · 제목 · 설명이 담긴 가로로 넘기는 슬라이드입니다.
| 항목 | 설명 |
|---|---|
| 높이 (px) | 슬라이드 높이 120 ~ 800px (처음 320px) |
| 자동 넘김 (초 · 0 이면 끔) | 0 ~ 30초. 처음 4초. |
| 좌우 화살표 | 체크하면 양옆에 ‹ › 버튼이 나옵니다. |
| 아래 점 표시 | 체크하면 아래에 현재 위치 점이 나옵니다. |
각 슬라이드(항목) 에는 이미지 주소 / 제목 / 설명 / 이동할 주소를 적습니다. 처음엔 2장이며 「슬라이드 추가」 로 늘립니다. 최대 12장.
눌러서 내용을 바꿔 보는 탭 메뉴입니다.
| 항목 | 설명 |
|---|---|
| (부품 속성 없음) | 항목 추가/정렬만 합니다. |
각 탭(항목) 에는 탭 제목 / 내용을 적습니다. 처음엔 2개, 「탭 추가」 로 늘립니다. 최대 8개. 방문자가 탭 제목을 누르면 그 내용이 보입니다.
질문을 누르면 답이 펼쳐지는 FAQ 형식입니다.
| 항목 | 설명 |
|---|---|
| 처음 열어 둘 항목 번호 (0 = 모두 닫음) | 0 ~ 12. 처음에는 1(첫째 항목이 열림). |
각 항목에는 제목 / 내용을 적습니다. 처음엔 2개, 「항목 추가」 로 늘립니다. 최대 12개.
바깥 주소를 글자 링크, 버튼, 카드(미리보기) 로 보여 줍니다. 카드는 블로그 · 뉴스 링크를 붙였을 때 나오는 그 미리보기(제목 · 설명 · 대표 이미지)입니다.
| 항목 | 설명 |
|---|---|
| 링크 주소 |
https://… 또는 /내사이트주소. mailto: · tel: 은 쓸 수 없습니다. |
| 보여주는 방식 | 글자 링크 / 버튼 / 카드(가로) / 카드(세로 · 큰 이미지) |
| 열기 (타겟) | 새 창(기본) / 현재 창. 새 창은 rel="noopener" 가 자동으로 붙습니다. |
| 검색엔진에 전달 안 함 | 켜면 rel="nofollow" 가 붙습니다. |
| 제목 · 글자 | 비우면 사이트 주소(도메인)가 대신 나옵니다. |
| 설명 · 이미지 주소 · 사이트 이름 | 카드에만 쓰입니다. |
| 정렬 | 글자 링크 · 버튼일 때 |
「링크 정보 가져오기」 를 누르면 서버가 그 주소를 읽어 제목 · 설명 · 대표 이미지 · 사이트 이름을 채웁니다. 가져온 값은 저장된 글자이므로 방문자 화면에서는 외부 사이트를 다시 읽지 않고(느려지지 않음), 언제든 직접 고칠 수 있습니다. 읽어 오는 일은 관리자가 이 버튼을 눌렀을 때만 일어납니다.
유튜브 영상 하나를 넣습니다. 처음에는 그림(썸네일) + 재생 버튼 만 보이고, 누르는 순간에만 플레이어가 열립니다. 보기만 해서는 유튜브로 아무 요청도 가지 않고, 페이지도 가볍습니다. 박스 안 재생은 개인정보 보호 모드(youtube-nocookie)를 씁니다. 썸네일이 필요 없으면 「처음 모습」을 「썸네일 없이 바로 플레이어」 로 바꾸세요. (이 경우 페이지를 열 때부터 유튜브 플레이어가 함께 불러와집니다.)
| 항목 | 설명 |
|---|---|
| 유튜브 링크 또는 영상 번호 |
watch?v=… · youtu.be/… · shorts/… · embed/… · 재생목록(list=…) · 11자리 영상 번호 모두 가능. 주소의 t=90 · t=1m30s 는 시작 시간으로 쓰입니다. |
| 화면 비율 | 16:9 / 4:3 / 1:1 / 9:16(쇼츠) / 21:9 |
| 처음 모습 | 썸네일 + 재생 버튼(누르면 재생 · 기본) / 썸네일 없이 바로 플레이어(처음부터 유튜브 플레이어가 보임) |
| 누르면 | 박스 안에서 재생 / 유튜브를 새 창으로 열기 / 현재 창으로 열기 (타겟) |
| 최대 너비 | px. 0이면 칸 너비에 꽉 참(가운데 정렬) |
| 아래 설명 글 | 선택. 「영상 제목을 설명 글로 가져오기」 로 채울 수 있습니다. |
큰 플레이어 하나와 영상 목록(최대 12개)을 함께 보여 줍니다. 목록의 영상을 누르면 위 플레이어가 그 영상으로 바뀝니다.
| 항목 | 설명 |
|---|---|
| 목록 위치 | 오른쪽(칸이 좁으면 자동으로 아래) / 아래(가로로 넘겨 보기) |
| 화면 비율 | 플레이어 비율 |
| 처음 모습 | 위 큰 화면을 썸네일로 둘지 / 바로 플레이어로 둘지 |
| 목록을 누르면 | 위 플레이어에서 재생 / 유튜브 새 창 / 현재 창 (타겟) |
각 영상에는 유튜브 링크 + 제목 을 적습니다. 처음엔 2개, 「영상 추가」 로 늘립니다. 제목을 비워 두었다면 「비어 있는 영상 제목 가져오기」 가 유튜브에서 제목을 채워 줍니다. 목록 맨 위 영상이 처음 플레이어에 나옵니다.
이미지 부품에도 열기 (타겟) 이 있습니다. 버튼 · 이미지 · 링크 · 유튜브 · 플레이어 모두 새 창 / 현재 창을 고를 수 있습니다.
패널 입력칸 없이, 화면 위의 글자를 바로 고칠 수 있습니다.
Enter 를 누릅니다.Esc 를 누릅니다. 원래 글자로 돌아갑니다.참고 「글」 부품이나 카드의 「내용」처럼 여러 줄 글에서는
Enter가 줄바꿈입니다. 이때는 바깥을 클릭하면 저장됩니다.
「이미지 주소」 칸이 있는 곳(이미지 부품, 카드 · 슬라이드 항목)에는 칸 바로 아래에 「그림 올리기 (WebP로 저장)」 버튼이 있습니다.
사용 방법
올리는 중…이 보이다가, 끝나면 이미지 주소 칸에 주소가 자동으로 채워지고 화면에 그림이 나타납니다.어떻게 저장되나
| 항목 | 내용 |
|---|---|
| 올릴 수 있는 형식 | JPG · PNG · GIF · WebP |
| 용량 | 최대 12MB (서버 자체 제한이 더 작으면 그 제한이 먼저 적용됩니다) |
| 자동 변환 | 올린 그림은 WebP로 변환되어 저장됩니다. 파일이 작아져 사이트가 빨라집니다. |
| 크기 줄임 | 가로가 2400px을 넘으면 2400px로 줄입니다. PNG의 투명 배경은 유지됩니다. |
| 움직이는 GIF | WebP로 바꾸면 움직임이 사라지므로 원본 그대로 저장하고, 안내 문구로 알려 줍니다. |
| 저장 위치 | 사이트의 업로드 폴더 안 nb-box/년월/
|
| 제한 | 관리자만 올릴 수 있습니다. SVG 등 다른 형식은 거부됩니다. |
안내 문구는 버튼 아래에 나타납니다. 예: WebP로 변환해 저장했습니다. / 움직이는 GIF는 원본 그대로 저장했습니다. / JPG · PNG · GIF · WebP 그림만 올릴 수 있습니다.
참고 올린 그림은 「적용」을 누르기 전에도 이미 서버에 저장됩니다. 다만 박스에 연결된 주소는 「적용」을 눌러야 방문자에게 보입니다.
주의 서버에서 WebP 변환을 지원하지 않는 환경이라면 원본 형식 그대로 저장하고 그 사실을 안내합니다.
박스를 선택했을 때 맨 아래 「표시 · 위치」 카드에서 정합니다.
| 항목 | 의미 |
|---|---|
| 표시 범위 | 박스가 어느 페이지에 보일지 |
| — 현재 주소만 | 지금 보고 있는 이 주소 한 곳에만 (기본값) |
| — 모든 페이지 | 사이트의 모든 페이지 |
| — 홈만 | 메인(홈) 페이지에만 |
| — 게시판 전체 | 모든 게시판 페이지(목록 · 글 보기 등)에 |
| 위치 안내 |
위치 · 앞 · … 처럼 박스가 놓인 자리(앞 / 뒤 / 안 맨앞 / 안 맨끝)와 기준 요소를 알려 줍니다. |
참고 박스를 놓는 기준 요소는 해당 페이지의 화면 구조 안에서 찾습니다. 기준 요소가 없는 다른 페이지에서는 「모든 페이지」로 해도 박스가 나타나지 않을 수 있습니다. 이럴 때는 7장의 저장된 영역으로 페이지마다 따로 놓으세요.
내가 만든 박스를 보관해 두었다가 다른 페이지에 끌어다 쓰는 기능입니다. 박스의 내용을 JSON 파일로 내보내고 불러올 수도 있어서, 다른 사이트로 옮기거나 백업할 때도 씁니다.
| 이름 | 어디에 있나 | 설명 |
|---|---|---|
| 적용된 영역 | 「선택 영역」 탭 | 이 사이트에 이미 놓여 있는 박스와 모양 설정 목록 |
| 저장된 영역 | 「선택 영역」 탭 | 놓여 있지 않고 보관만 해 둔 박스 묶음. 끌어다 놓으면 새 박스가 됩니다. |
| 방법 | 어떻게 |
|---|---|
| ① 박스 위 도구줄의 「저장」 | 박스 위에 마우스를 올리면 나오는 도구줄에서 「저장」 (7-5) |
| ② 「선택한 박스를 저장된 영역에 저장」 버튼 | 박스를 선택한 상태에서 누릅니다. |
| ③ 「적용된 영역」 목록의 책갈피 버튼(책갈피) | 박스 줄 오른쪽의 책갈피 버튼 |
| ④ JSON 파일 불러오기 | 7-4 참고 |
담으면 "○○"을(를) 저장된 영역에 담았습니다. 다른 페이지에도 끌어다 놓을 수 있습니다. 라고 안내됩니다. 이름은 박스 안의 첫 제목 글자로 자동으로 정해지고, 나중에 바꿀 수 있습니다.
참고 박스 안의 박스를 담으면 안에 든 박스와, 그 박스들에 준 모양 설정, 최신글 박스가 쓰는 스킨도 함께 담깁니다.
Esc로 취소할 수 있습니다.놓일 때 자동으로 처리되는 것
박스는 최대 30개까지입니다. 로 안내되고 놓이지 않습니다.| 어디서 | 내보내는 범위 |
|---|---|
| 박스 위 도구줄의 「내보내기」 | 그 박스 하나 (안의 박스 포함) |
| 「박스 전체 JSON 내보내기」 버튼 | 이 사이트에 놓인 모든 박스 |
| 저장된 영역 목록의 파일 내보내기 아이콘 | 그 보관함 항목 하나 |
dx-boxes-날짜-시분.json (보관함에서 내보내면 dx-boxes-x번호.json) 형태로 내려받아집니다.박스 1개 · 모양 0개를 내보냈습니다.
"○○"을(를) 저장된 영역에 추가했습니다. 끌어서 원하는 자리에 놓으세요.
불러올 때 규칙
이 테마에서 내보낸 박스 파일이 아닙니다. / JSON이 아니면 JSON 형식이 아닙니다. 가 뜹니다.(형식이 맞지 않는 N개는 제외)로 알려 줍니다.왜 바로 화면에 안 놓나요? 박스는 "어떤 페이지의 어떤 요소 앞/뒤"라는 위치 정보를 가지는데, 다른 페이지나 다른 사이트에서는 그 위치가 없을 수 있습니다. 그래서 파일은 먼저 보관함에 담고, 내가 원하는 자리에 직접 놓도록 했습니다.
항목 줄 오른쪽 버튼으로 관리합니다.
| 버튼 | 동작 |
|---|---|
| 파일 내보내기 아이콘 | 이 항목을 JSON 파일로 저장 |
| 연필 (이름 바꾸기) | 이름 칸으로 바뀝니다. Enter로 저장, Esc 로 취소, 다른 곳을 누르면 저장 (최대 40자) |
| ✕ | 보관함에서 삭제 (이미 화면에 놓은 박스에는 영향 없음) |
「요소 선택」 모드가 켜진 상태에서, 화면의 박스 위에 마우스를 올리면 박스 왼쪽 위에 어두운 알약 모양의 도구줄이 나타납니다.
| 버튼 | 하는 일 |
|---|---|
| 불러오기 | JSON 파일을 골라, 이 박스를 파일의 첫 번째 박스 내용으로 바꿉니다. 박스가 놓인 위치 · 표시 범위는 그대로 유지됩니다. |
| HTML | AI로 만든 HTML 파일을 골라, 이 박스 안의 내용만 그 디자인으로 바꿉니다. 박스가 놓인 위치 · 표시 범위는 그대로이고, 페이지의 다른 부분은 영향을 받지 않습니다. (7-8 참고) |
| 내보내기 | 이 박스를 JSON 파일로 저장합니다. |
| 저장 | 이 박스를 「저장된 영역」에 담습니다. |
박스를 불러온 내용으로 바꿨습니다. 이어서 「적용」을 눌러야 저장됩니다. 마음에 안 들면 「되돌리기」.시나리오 ① 같은 안내 박스를 여러 페이지에 쓰고 싶을 때
시나리오 ② 다른 사이트에서 만든 박스를 가져오고 싶을 때
시나리오 ③ 박스 디자인을 백업해 두고 싶을 때
관리자의 「페이지 관리」에서 만든 빈 페이지(pages/aaa.php 처럼 내용이 비어 있는 페이지)를 Style Booster로 꾸밀 때 가장 편한 방법입니다. 끌어서 놓을 필요 없이, JSON 파일 하나를 그 페이지에 바로 올립니다.
올리기
/aaa)로 이동합니다.주의 이 페이지에 이미 놓인 박스는 올린 파일의 내용으로 통째로 바뀝니다. 아직 「적용」하지 않은 변경이 있으면 확인창이 먼저 뜹니다.
받기: 「이 페이지 박스 JSON 받기」 를 누르면 이 페이지의 박스만 담긴 JSON 파일이 내려받아집니다. 다른 페이지에 올리거나 백업으로 쓰세요.
어디에 저장되나요?
data/stylebooster/ 폴더에 페이지 주소별 파일로 저장됩니다. 예: /aaa → data/stylebooster/aaa.json, /guide/start → guide__start.json, 홈(/) → _root.json
이 페이지 주소: /aaa · 등록됨 · 이 페이지 박스 N개 로 확인할 수 있습니다..htaccess, web.config)이 함께 만들어집니다.data 폴더에 쓸 수 없는 환경이면 예전처럼 DB에 저장하고, 올리기는 폴더 권한을 확인해 주세요 라고 알려 줍니다.알아 두세요
ChatGPT · Claude 같은 AI에게 부탁해서 받은 HTML 파일을 페이지에 바로 올리는 기능입니다. 7-7의 JSON 올리기와 같은 자리에 있습니다.
두 가지 방법이 있습니다. ① 이 페이지 전체를 올린 HTML로 만들기(아래 「이 페이지에 HTML 올리기」), ② 박스 하나의 안쪽만 올린 HTML로 만들기(박스에 마우스를 올려 도구줄의 HTML 버튼, 7-5). 페이지 일부만 디자인하려면 ②를 쓰세요.
올리기
.html)을 고릅니다.주의 이 페이지에 이미 놓인 박스는 올린 HTML로 통째로 바뀝니다. 아직 「적용」하지 않은 변경이 있으면 먼저 확인창이 뜹니다.
어떻게 바뀌나요
<style> 디자인은 이 박스 안에서만 적용됩니다. 사이트의 다른 부분(머리글, 메뉴 등)은 영향을 받지 않습니다.@media (max-width: …px))도 그대로 따라옵니다.그대로 따라오는 것: 색 · 글꼴 크기 · 여백 · 테두리 · 모서리 · 그라데이션 배경 · flex/grid 배치 · 표 · 목록 · 링크 · 이미지(주소가 있는 것) · 마우스를 올렸을 때(:hover) 변화 · CSS 변수
빠지는 것 (보안상 막혀 있습니다)
| 요소 | 이유 |
|---|---|
<script> (움직이는 탭 · 슬라이더 등), onclick 같은 이벤트 속성 |
웹에서는 실행 코드를 올릴 수 없습니다. 움직임이 필요하면 7-9의 FTP 방식으로 스크립트 파일을 따로 올리거나, 박스의 탭 · 슬라이더 부품을 쓰세요. |
유튜브가 아닌 <iframe>, <video>, <canvas>
|
외부 · 실행 요소입니다. 유튜브 <iframe> 은 예외로, 주소만 읽어 안전한 유튜브 플레이어(개인정보 보호 모드)로 다시 만들어 남깁니다. 가로 · 세로 크기(width · height)를 보고 16:9 / 4:3 / 1:1 / 9:16 비율을 정하며, 칸 너비에 맞게 줄어듭니다. |
<svg> 인라인 그림 |
이미지 파일(PNG · WebP)로 올려서 <img> 로 쓰세요. |
<form>, 입력 칸 |
양식은 허용하지 않습니다. |
외부 CSS 파일(<link rel="stylesheet">), 웹폰트 |
파일 안에 직접 쓴 <style> 만 가져옵니다. |
그림자(box-shadow), 필터, 애니메이션(@keyframes) |
지원하지 않습니다. |
position: fixed, url() 배경 이미지 |
화면 전체를 덮거나 외부를 불러오는 데 쓰이므로 막습니다. 배경은 색과 그라데이션만 가능합니다. |
AI에게 이렇게 부탁하세요
"하나의 HTML 파일로,
<style>은 파일 안에 직접 쓰고, JavaScript · 외부 CSS · 웹폰트 · SVG · 그림자는 쓰지 말아 주세요. 배치는 flex/grid로, 모바일은@media (max-width: 700px)로 대응해 주세요. 이미지는https://주소의<img>만 써 주세요."
한도: 파일 2MB 이하, CSS 36KB 이하, 맨 바깥 태그 하나가 140KB 이하(여러 덩어리로 나뉘면 합계는 더 커도 됩니다), 부품 29개 이내.
AI가 만든 HTML에 움직임(탭 · 아코디언 · 슬라이더 · 숫자 올리기 등)이 있으면 그 동작은 스크립트(JavaScript) 파일에 들어 있습니다. 스크립트는 방문자 모두의 브라우저에서 실행되는 코드라서, 웹 화면에서는 올릴 수 없고 FTP로만 올립니다. 관리자 계정이 해킹되어도 코드를 심을 수 없게 하려는 안전 장치입니다.
준비: 폴더 확인
사이트의 assets/stylebooster/js/ 폴더에 올립니다. 테마 zip에 이 폴더(보호 파일 포함)가 들어 있습니다. 없으면 FTP에서 만들어 주세요.
순서
.js 파일로 내려받게 해 줍니다./vvv (현재 페이지 주소가 미리 채워져 있습니다.)vvv.php, 하위 폴더가 있으면 폴더/vvv.php
assets/stylebooster/js/vvv.js
.js 파일의 이름을 그 경로의 파일명으로 바꿔 FTP로 올립니다.파일 이름 규칙
| pages 안의 파일 | 스크립트 파일 |
|---|---|
vvv.php |
assets/stylebooster/js/vvv.js |
intro/team.php |
assets/stylebooster/js/intro__team.js (폴더 구분은 __) |
지켜야 할 것
onclick="…" 같은 이벤트 속성은 제거됩니다. 스크립트 파일 안에서 addEventListener로 연결해야 합니다.id는 다른 부분과 겹치지 않게 앞에 nbx-가 붙습니다. getElementById('이름')은 그대로 찾아 주지만, querySelector('#이름')은 찾지 못하니 class로 선택하세요.AI에게 이렇게 부탁하세요
"하나의 HTML 파일로,
<style>과<script>는 파일 안에 직접 써 주세요. 외부 라이브러리(CDN)는 쓰지 말고,onclick대신addEventListener를, 요소 선택은id가 아닌 class나data-속성으로 해 주세요."
게시판의 최신 글 목록을 내가 디자인한 모양으로 사이트에 보여 주는 기능입니다. 목록형 · 갤러리형 · 이미지 위에 글자를 얹은 형 · 가로 슬라이드형 등 원하는 모양을 직접 디자인합니다. 디자인한 모양을 스킨이라 부르고, 그 스킨을 사이트에 놓은 것을 최신글 박스라고 합니다.
| 용어 | 뜻 |
|---|---|
| 스킨 | 최신글 글 한 칸의 디자인(제목 · 썸네일 · 날짜 등을 어디에 어떻게 놓을지)과, 목록 전체를 감싸는 바깥 틀(머리글 · 열 수 · 간격)을 합친 디자인 틀 |
| 부품 | 스킨 안에 놓는 하나하나의 조각 — 제목, 썸네일, 날짜, 글쓴이 등 |
| 최신글 박스 | 저장해 둔 스킨을 페이지 위에 놓은 것. 실제 게시판의 최신 글이 스킨 디자인대로 채워집니다. |
전체 흐름
① 새 스킨 만들기 (모양 고르기)
↓
② 편집기에서 부품을 놓고 디자인 → 「스킨 저장」 (저장 즉시 서버에 보관)
↓
③ 「저장된 스킨」을 화면으로 끌어서 원하는 자리에 놓기 → 최신글 박스
↓
④ 박스별로 게시판 · 글 수 · 너비 조정
↓
⑤ 「적용」 (박스를 놓은 위치를 저장)같은 스킨을 쓰는 박스는 전부 같이 바뀝니다. 스킨 디자인을 고치고 저장하면, 그 스킨을 쓰는 모든 최신글 박스가 한꺼번에 새 모양이 됩니다. 게시판 · 글 수 · 너비만 박스마다 따로 정할 수 있습니다.
탭을 열면 두 개의 카드가 보입니다.
다섯 가지 시작 모양 중 하나를 눌러 편집을 시작합니다. 고른 모양에서 출발해 마음대로 바꿀 수 있습니다.
| 시작 모양 | 설명 |
|---|---|
| 빈 스킨 | 아무 부품도 없는 상태에서 처음부터 만듭니다. |
| 목록형 | 번호 · 제목 · 댓글 수 · 글쓴이 · 날짜가 한 줄씩 나열되는 게시판 목록 모양. 줄 사이에 얇은 구분선이 있습니다. |
| 갤러리형 | 썸네일(대표 이미지)이 위에, 제목 · 글쓴이 · 날짜가 아래에 있는 카드를 여러 열로 보여 줍니다. |
| 글자 얹기 | 썸네일 이미지 위에 반투명 검은 바탕을 깔고 제목 · 날짜 · 글쓴이를 얹은 모양 (3열). |
| 슬라이드 | 가로로 넘기는 카드 형태. 썸네일 + NEW 표시 + 제목 + 날짜. |
참고 처음에는 시작 모양 중 가장 비슷한 것을 고르세요. 빈 스킨보다 훨씬 빨리 끝납니다.
지금까지 저장한 스킨 목록입니다. 한 줄에 스킨 이름과 한 줄씩 · 5개 부품 / 3열 · … / 가로 슬라이드 · … 같은 요약이 보입니다.
| 버튼 | 동작 |
|---|---|
| 이름 칸(그립 아이콘) | 마우스로 끌어서 화면에 놓으면 최신글 박스가 생깁니다. (8-9) |
| 연필 (편집) | 편집기를 열어 디자인을 고칩니다. |
| 복제 | 같은 디자인의 복사본을 만듭니다. 이름은 원래 이름 복사가 됩니다. 비슷한 스킨을 하나 더 만들 때 편합니다. |
| 휴지통 (삭제) | 스킨을 지웁니다. 확인창이 뜨고, 이 스킨을 쓰는 박스가 있으면 "방문자 화면에서 사라집니다" 라고 개수를 알려 줍니다. |
아직 스킨이 없으면 저장된 스킨이 아직 없습니다. 위에서 모양을 골라 만들어 보세요. 라고 표시됩니다. 스킨은 최대 40개까지 만들 수 있습니다.
시작 모양을 고르거나 연필을 누르면 편집기가 열립니다.
┌──────── 왼쪽: 패널 ────────┐ ┌─────────── 가운데: 편집 무대 ───────────┐
│ 부품 추가 │ │ [PC][모바일] 상태 안내 [스킨 저장][닫기] │
│ 선택한 부품 │ │ 첫 번째 칸만 편집됩니다…(안내) │
│ 부품 목록 │ │ ┌─────────────────────────────┐ │
│ 스킨 정보 │ │ │ 글 한 칸 (이 칸만 편집) │ │
│ 글 한 칸 │ │ │ 나머지 칸은 흐리게 보임 │ │
│ 배치 │ │ └─────────────────────────────┘ │
│ 바깥 틀 │ │ │
└─────────────────────────────┘ └───────────────────────────────────────┘무대(가운데)
게시판에 글이 없어 샘플 글로 보여 줍니다. / 게시판을 고르면 실제 글이 보입니다. 지금은 샘플 글입니다. 라고 알려 줍니다.패널(왼쪽)
위에서부터 부품 추가 → 선택한 부품 → 부품 목록 → 스킨 정보 → 글 한 칸 → 배치 → 바깥 틀 카드가 있습니다. 각 설정 줄은 2-3의 규칙과 같습니다(값 비우면 기본, ↺로 되돌리기).
「부품 추가」 카드(눌러서 넣기 · 끌어서 원하는 자리에 놓기)에서 부품을 고릅니다.
부품은 24개까지 넣을 수 있습니다. 라고 안내됩니다.| 부품 | 무엇을 보여 주나 |
|---|---|
| 썸네일 | 글의 대표 이미지(글에 올린 첫 이미지 등). 이미지 맞춤: 「꽉 채우기(잘림)」/「전체 보이기」 |
| 제목 | 글 제목. 최대 줄 수(1~6)를 넘으면 …으로 줄여 보여 줍니다. |
| 요약 | 글 내용의 앞부분. 길이는 「스킨 정보」의 요약 글자 수로 정합니다. |
| 글쓴이 | 작성자 이름 |
| 날짜 | 작성일. 짧게(10.30) / 길게(2026-10-30 …) 선택 |
| 조회수 | 조회 수. 앞 글자에 조회 , 뒤 글자에 회 같은 문구를 붙일 수 있습니다. |
| 댓글 수 | 댓글 개수. [ ] 를 앞뒤에 붙인 모양이 기본. 「0 이면 숨김」 옵션 있음 |
| 번호 | 목록의 순번 |
| NEW |
24시간 이내에 올라온 새 글에만 나타나는 표시. 글자 내용을 바꿀 수 있습니다(예: NEW → 신규). |
| 글자 | 고정 문구. 모든 칸에 같은 글자가 들어갑니다. (예: "자세히 보기", 구분용 기호) |
| 네모 | 색이 있는 사각형 면. 반투명 처리하면 이미지 위의 어두운 바탕으로 쓸 수 있습니다. |
| 줄 | 가는 구분선 (높이 1px, 색 지정) |
참고 부품은 모두 위치를 자유롭게 정할 수 있고 서로 겹칠 수 있습니다. 겹침 순서는 「층」으로 정합니다. (아래 「앞으로 / 뒤로」)
| 하고 싶은 일 | 방법 |
|---|---|
| 선택 | 무대의 첫 번째 칸에서 부품을 클릭합니다. 주황색 테두리와 부품이름 · 너비% × 높이px 라벨, 손잡이 8개가 나타납니다. 패널의 「부품 목록」에서 눌러도 됩니다. |
| 이동 | 부품을 끌어서 옮깁니다. |
| 크기 조절 | 테두리의 손잡이(네 모서리 · 네 변) 를 끕니다. |
| 정밀 이동 | 부품을 선택한 상태에서 방향키 = 1px, Shift+방향키 = 10px
|
| 삭제 |
Delete 또는 Backspace
|
| 복제 | Ctrl+D |
| 선택 해제 |
Esc, 또는 부품이 없는 빈 곳 클릭 |
| 스킨 저장 | Ctrl+S |
부품을 선택하면 이 카드에 부품 이름과 PC 값 편집 중 / 모바일 값 편집 중이 표시됩니다. 항목은 부품 종류에 따라 일부만 나옵니다.
| 항목 | 설명 |
|---|---|
| 가로 % | 칸의 왼쪽 끝에서 얼마나 떨어질지 (칸 폭에 대한 %) |
| 세로 px | 칸의 위쪽 끝에서 얼마나 떨어질지 |
| 너비 % | 부품 너비 (1~100%) |
| 높이 px | 부품 높이 |
| 항목 | 설명 | 범위 |
|---|---|---|
| 크기 (px) | 글자 크기 (비우면 기본) | 8 ~ 120 |
| 글자색 | 색 고르기 | |
| 굵기 | 기본 / 보통 / 중간 / 굵게 / 아주 굵게 / 가장 굵게 | — |
| 폰트 | 사이트 기본 / 고딕 / 명조 / 둥근 고딕 / 손글씨 / 굵은 제목체 / 고정폭 | — |
| 가로 정렬 | 왼쪽 / 가운데 / 오른쪽 | — |
| 세로 정렬 | 위 / 가운데 / 아래 | — |
| 자간 (px) | −10 ~ 40 | |
| 행간 (%) | 80 ~ 300 | |
| 최대 줄 수 | 제목 · 요약 · 글자 부품. 넘치면 줄임표 | 1 ~ 6 |
| 내용 | NEW · 글자 부품의 문구 | 최대 60자 |
| 앞 글자 / 뒤 글자 | 그 외 부품 앞뒤에 붙일 문구. 예: 조회수 조회 + 회
|
각 최대 12자 |
| 날짜 형식 | 날짜 부품: 짧게 / 길게 | — |
| 0 이면 숨김 | 댓글 수 부품: 댓글이 0개면 표시 안 함 | 체크 |
참고 폰트는 방문자 기기나 사이트에 해당 글꼴이 있어야 보입니다. 없으면 기본 글꼴로 보입니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 배경색 | 부품 뒤 바탕색 | 색 고르기 |
| 모서리 (px) | 둥글기 | 0 ~ 200 |
| 투명도 (%) | 0 = 완전 투명, 100 = 불투명 | 0 ~ 100 |
| 테두리 굵기 | 0 ~ 6 | |
| 테두리 색 | 색 고르기 |
카드 맨 아래 버튼 4개입니다.
| 버튼 | 동작 |
|---|---|
| 앞으로 | 한 겹 앞으로 (다른 부품 위에 보임) |
| 뒤로 | 한 겹 뒤로 |
| 복제 | 같은 설정의 부품을 하나 더 만듭니다. |
| 삭제 | 부품을 지웁니다. |
편집기 위쪽의 「PC」「모바일」 버튼으로 어느 화면의 값을 고칠지 정합니다.
모바일 값 편집 중이 표시되고, 값을 바꾼 부품에는 모바일 별도 값 있음이 붙습니다.모바일 전용 옵션 (모바일 값 편집 중일 때만 나타남)
| 옵션 | 설명 |
|---|---|
| 모바일에서 숨기기 | 이 부품을 모바일 화면에서만 감춥니다. (예: 요약, 글쓴이) |
| PC 값과 같게 (모바일 별도 값 지우기) | 모바일에서 따로 정한 값을 지우고 PC 값을 따르게 합니다. |
「부품 목록」에는 모바일에서 숨긴 부품에 · 모바일 숨김이 붙어 확인할 수 있습니다.
팁 PC에서 완성한 뒤 모바일로 바꿔서 제목 폭을 넓히고, 요약 · 글쓴이는 숨기고, 날짜를 오른쪽 끝으로 옮기는 식으로 정리하면 모바일 목록이 훨씬 깔끔해집니다.
지금 스킨에 들어 있는 부품이 나열됩니다. 한 줄에 이름 · 가로% · 세로px · 층 번호가 보입니다. 줄을 누르면 그 부품이 선택되고, 줄 오른쪽 ✕ 로 삭제할 수 있습니다. 부품이 없으면 아직 부품이 없습니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 스킨 이름 | 목록에서 구분할 이름 (필수) | 최대 40자 |
| 게시판 | 미리보기용 기본 게시판. 화면에 놓을 때 박스마다 바꿀 수 있습니다. | 게시판 목록에서 고름 |
| 글 수 | 한 번에 보여 줄 글 개수 | 1 ~ 30 |
| 제목 글자 수 | 제목을 몇 글자까지 보여 줄지 (넘으면 줄임) | 0 ~ 120 |
| 요약 글자 수 | 요약을 몇 글자까지 보여 줄지 | 0 ~ 300 |
| 항목 | 설명 | 범위 |
|---|---|---|
| 높이 PC (px) | 글 한 칸의 높이 | 20 ~ 800 |
| 높이 모바일 | 모바일에서의 높이. 비우면 PC와 같게 | 20 ~ 800 |
| 배경색 | 칸 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 칸 테두리 | 굵기 0 ~ 6 |
| 모서리 (px) | 칸 둥글기 | 0 ~ 60 |
| 마우스를 올리면 | 변화 없음 / 위로 살짝 뜸 / 배경색 바뀜 | — |
| 올렸을 때 배경색 | 「배경색 바뀜」을 골랐을 때의 색 | 색 고르기 |
| 썸네일 확대 | 체크하면 마우스를 올릴 때 썸네일이 살짝 커집니다. | 체크 |
주의 칸의 높이를 먼저 정하세요. 부품의 세로 위치는 이 높이 안에서 잡기 때문에, 나중에 높이를 바꾸면 부품이 어긋나 보일 수 있습니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 격자 (열) / 가로 슬라이드 | 글 칸을 격자(여러 열) 로 놓을지, 가로로 넘기는 슬라이드로 놓을지 | 둘 중 택1 |
| 열 수 PC | 격자일 때 PC에서 몇 열인지 (1이면 한 줄씩) | 1 ~ 6 |
| 열 수 모바일 | 모바일에서 몇 열인지 | 1 ~ 3 |
| 칸 간격 (px) | 칸과 칸 사이 | 0 ~ 60 |
| 슬라이드 칸 너비 | 「가로 슬라이드」일 때 한 칸의 너비 | 120 ~ 600 |
목록 전체를 감싸는 상자의 설정입니다.
| 항목 | 설명 | 범위 |
|---|---|---|
| 머리글 보이기 | 상자 위쪽의 제목줄 표시 여부 | 체크 |
| 머리글 제목 | 비우면 게시판 이름이 표시됩니다. | 최대 60자 |
| 영문 라벨 | 제목 옆의 작은 영문 라벨 (예: NOTICE, UPDATE) |
최대 40자 |
| "전체 보기" 링크 | 머리글 오른쪽에 게시판으로 가는 링크 표시 | 체크 |
| 링크 문구 | 링크 글자 (기본 전체 보기) |
최대 20자 |
| 머리글 글자색 / 크기 | 크기 10 ~ 40 | |
| 바탕색 | 상자 전체 바탕색 | 색 고르기 |
| 테두리 색 / 굵기 | 굵기 0 ~ 6 | |
| 모서리 (px) | 상자 둥글기 | 0 ~ 60 |
| 안쪽 여백 (px) | 상자 안쪽 여백 | 0 ~ 80 |
| 최대 너비 (px) | 비우면 꽉 채움 | 0 ~ 1600 |
다크 모드 참고 바탕색 · 배경색을 직접 정한 스킨은 다크 모드에서도 정한 색이 뒤집히지 않고 그대로 보이며, 그 위의 글자색도 고정됩니다. 어두운 배경에는 밝은 글자색을, 밝은 배경에는 어두운 글자색을 직접 지정해 주세요.
Ctrl+S 를 누릅니다.저장하는 중… → 저장했습니다. "최신글" 탭 목록에서 끌어다 화면에 놓으세요.
스킨 이름을 입력해 주세요., 40개를 넘으면 스킨은 40개까지 만들 수 있습니다. 라고 나옵니다.| 항목 | 설명 |
|---|---|
| 스킨 | 이 박스가 사용할 스킨. 다른 스킨으로 바꿔 끼울 수 있습니다. |
| 게시판 | 어느 게시판의 글을 보여 줄지. 「스킨 기본」 이면 스킨에 정해 둔 게시판을 씁니다. |
| 글 수 | 이 박스에서만 보여 줄 글 개수 (1~30). 비우면 스킨 값. |
| 최대 너비 | 이 박스만의 최대 너비 (0~1600px). 비우면 스킨 값 또는 꽉 채움. |
| 「이 스킨 디자인 편집」 | 편집기로 이동해 스킨 디자인을 고칩니다. |
같은 스킨을 여러 곳에 쓰기: 한 스킨을 홈의 위쪽과 사이드에 놓고, 박스마다 게시판 · 글 수 · 너비만 다르게 하면 "공지 5개", "갤러리 6개"처럼 한 디자인으로 여러 목록을 만들 수 있습니다.
지금 정한 디자인 전체를 이름 붙여 보관해 두었다가, 나중에 한 번에 불러오거나, 다른 사이트로 옮길 때 씁니다.
스타일 · 색상 · 안쪽 여백 · 「선택 영역」에서 정한 모양 설정 · 박스 가 함께 저장됩니다.
담기지 않는 것: 「최신글」 탭의 스킨과 「저장된 영역」의 보관함은 프리셋과 별개로 저장됩니다. 최신글 박스가 들어 있는 프리셋을 다른 사이트에 옮기려면, 스킨이 그 사이트에 있어야 박스가 제대로 보입니다.
「이름」 을(를) 저장했습니다. 라고 나오고 아래 목록에 추가됩니다.「이름」 을(를) 덮어썼습니다.)이름을 입력해 주세요. 가 나옵니다. 프리셋은 최대 30개입니다.참고 프리셋 저장은 「적용」과 별개로 즉시 서버에 보관됩니다. 저장하지 않은(「적용」 전의) 변경도 지금 상태 그대로 프리셋에 담깁니다.
각 프리셋 줄에는 이름과 요약(· 박스 · 색 · 여백 · 영역 개수)이 보이고, 오른쪽에 네 개의 버튼이 있습니다.
| 버튼 | 동작 |
|---|---|
| 불러오기 (내려받기 아이콘) | 그 프리셋의 설정으로 화면을 바꿉니다. 안내: 「이름」 을(를) 불러왔습니다. 화면을 확인하고 「적용」을 눌러야 저장됩니다.
|
| 파일로 내보내기 | 그 프리셋을 JSON 파일로 저장합니다. |
| 복사 (복사 아이콘) | 프리셋 내용을 클립보드에 복사합니다. 복사했습니다. (복사가 안 되는 환경이면 아래 칸에 내용을 넣어 줍니다.) |
| 삭제 (휴지통) | 보관함에서 삭제합니다. 삭제했습니다.
|
주의 「불러오기」는 지금 화면의 설정을 통째로 덮어씁니다. 아직 저장하지 않은 작업이 있다면 먼저 프리셋으로 저장해 두세요. 불러온 뒤에도 「되돌리기」로 취소할 수 있습니다.
「현재 상태 내보내기」 줄의 두 버튼으로 지금 화면 상태를 밖으로 꺼냅니다.
| 버튼 | 동작 |
|---|---|
| 파일로 | 현재 상태를 JSON 파일로 저장 |
| 복사 | 현재 상태를 클립보드에 복사 (이메일 · 메신저로 붙여넣어 보낼 때 편리) |
받은 프리셋을 내 사이트에 들여옵니다. 두 가지 방법이 있습니다.
가져오면 가져온 프리셋 목록에 추가되고 N개를 가져왔습니다. 허용되지 않는 값은 자동으로 정리됩니다. 라고 나옵니다. 이후 9-3처럼 불러오기로 적용하세요.
오류 안내: JSON 형식이 아닙니다. / new-basic 프리셋 파일이 아닙니다. / 파일이 너무 큽니다. (1MB 이하) / 붙여넣은 내용이 없습니다. / 프리셋은 최대 30개까지 저장할 수 있습니다.
안전 장치 가져온 내용 중 허용되지 않는 값은 자동으로 정리됩니다. 누군가에게 받은 파일이라도 사이트가 망가지지 않도록 걸러서 들여옵니다.
이 부분이 가장 헷갈리기 쉬우니 꼭 확인하세요.
| 작업 | 저장되는 시점 |
|---|---|
| 스타일 · 색상 · 안쪽 여백 | 「적용」을 눌러야 저장 |
| 「선택 영역」의 모양 설정 (색, 여백, 크기, 위치 이동 등) | 「적용」을 눌러야 저장 |
| 박스 만들기 · 부품 편집 · 박스 삭제 · 박스 놓기(보관함에서 끌어 놓기 포함) | 「적용」을 눌러야 저장 |
| 프리셋 불러오기 (화면에 반영) | 「적용」을 눌러야 저장 |
| 「전체 초기화」 | 「적용」을 눌러야 저장 |
| 최신글 스킨 저장 · 복제 · 삭제 | 바로 저장 |
| 「저장된 영역」(박스 보관함) 담기 · 이름 바꾸기 · 삭제 · JSON 불러오기 | 바로 저장 |
| 프리셋 저장 · 삭제 · 가져오기 | 바로 저장 |
| 이 페이지에 JSON 올리기 (7-7) | 바로 저장 (페이지가 자동 새로고침됨) |
| 이 페이지에 HTML 올리기 (7-8) | 바로 저장 (페이지가 자동 새로고침됨) |
| 박스에 그림 올리기 | 그림 파일은 바로 서버에 저장, 박스에 연결된 주소는 「적용」 후 반영 |
저장하는 중 → 캐시 정리 완료 → 스타일 적용하는 중 → 적용 완료로 진행됩니다. 몇 초면 끝납니다.아직 「적용」하지 않은 모든 변경(스타일 · 색 · 여백 · 선택 영역 설정 · 박스)을 마지막으로 저장한 상태로 되돌립니다. 이미 「적용」한 것은 되돌려지지 않습니다.
참고 「되돌리기」는 바로 저장되는 것들(최신글 스킨, 저장된 영역, 프리셋, 올린 그림)에는 영향이 없습니다.
4-4 참고. 두 번 눌러야 동작하고, 「적용」 전까지는 「되돌리기」로 취소할 수 있습니다.
「적용」하지 않은 변경은 사라집니다. 페이지를 새로고침하거나 이동하기 전에 「적용」 또는 프리셋 저장을 하세요.
처음부터 끝까지 그대로 따라 하면 되는 순서입니다.
| 항목 | 한도 |
|---|---|
| 박스 (사이트 전체) | 30개 |
| 박스 하나의 부품 | 30개 |
| 카드 / 슬라이드 / 아코디언 항목 | 각 12개 |
| 탭 항목 | 8개 |
| 저장된 영역(보관함) | 40개 (한 항목 박스 12개 이하) |
| 최신글 스킨 | 40개 |
| 스킨 하나의 부품 | 24개 |
| 스킨 글 수 | 1~30 |
| 프리셋 | 30개 |
| 프리셋 파일 | 1MB |
| 이름 길이 | 프리셋 · 스킨 40자 |
| 그림 올리기 | 자동 WebP 변환. SVG는 올릴 수 없음 |
| 페이지 HTML · JSON 올리기 | 파일 2MB 이하 |
| 페이지 전용 스크립트(FTP) | 파일 2MB 이하, 등록 100개 |
Q. 바꿨는데 방문자 화면에는 그대로예요. 「적용」을 눌렀는지 확인하세요. 브라우저 캐시 때문이면 새로고침(Ctrl+F5)을 해 보세요. 최신글은 새 글이 최대 1분 뒤 반영됩니다.
Q. 선택 모드에서 링크를 눌러도 이동하지 않아요. 정상입니다. 선택 모드에서는 클릭이 "선택"으로 동작합니다. 선택 모드를 끄면 평소처럼 이동합니다.
Q. 박스를 불러왔는데 보이지 않아요. 표시 범위(페이지)와 기준 요소가 그 페이지에 있는지 확인하세요. 「저장된 영역」으로 직접 끌어 놓으면 가장 확실합니다.
Q. 최신글 박스가 비어 있어요. 게시판에 글이 없거나, 방문자에게 읽기 권한이 없는 게시판일 수 있습니다. 박스의 게시판 선택도 확인하세요.
Q. 스킨을 지웠더니 박스가 사라졌어요. 스킨을 쓰는 박스는 스킨이 없으면 방문자에게 보이지 않습니다. 같은 모양의 스킨을 다시 만들어 박스에서 스킨을 선택하세요.
Q. 실수로 「불러오기」를 눌렀어요. 「되돌리기」를 누르면 마지막 저장 상태로 돌아갑니다.
Q. 이미지 올리기가 실패해요. SVG는 올릴 수 없습니다. 서버의 업로드 용량 제한을 넘는 큰 파일도 실패할 수 있으니 줄여서 올려 보세요.
Q. 모바일에서만 이상해요. 화면 크기 전환을 모바일로 바꿔 모바일 값을 따로 확인하세요. 최신글 스킨은 모바일 열 수와 숨김 설정을 확인하세요.
| 키 | 동작 |
|---|---|
| 방향키 | 부품 1px 이동 |
| Shift + 방향키 | 부품 10px 이동 |
| Delete / Backspace | 부품 삭제 |
| Ctrl + D | 부품 복제 |
| Ctrl + S | 스킨 저장 |
| Esc | 선택 해제 |
| 용어 | 뜻 |
|---|---|
| 적용 | 바꾼 설정을 서버에 저장하는 동작 |
| 선택 영역 | 화면에서 요소를 골라 모양을 바꾸는 기능 |
| 박스 | 직접 만들어 화면에 놓는 영역 |
| 부품 | 박스 · 스킨 안의 조각 |
| 저장된 영역 | 박스를 담아 두는 보관함 |
| 스킨 | 최신글 한 칸과 바깥 틀의 디자인 |
| 프리셋 | 설정 전체를 이름 붙여 저장한 것 |