Coding
PromptBeginner5 minmarkdown
Markdown Converter
Agent skill for markdown-converter
7
이 문서는 프로젝트의 일관된 디자인을 유지하기 위한 상세 규칙을 정의합니다.
Sign in to like and favorite skills
이 문서는 프로젝트의 일관된 디자인을 유지하기 위한 상세 규칙을 정의합니다.
| 변수명 | 색상값 | 용도 |
|---|---|---|
| | 기본 배경 |
| | 보조 배경, 카드 배경 |
| | 호버 상태 |
| | 활성 상태 |
| | 선택된 항목 |
| | 기본 텍스트 |
| | 보조 텍스트 |
| | 흐린 텍스트, 플레이스홀더 |
| | 3차 텍스트 |
| | 기본 테두리 |
| | 연한 테두리 |
| 변수명 | 색상값 | 용도 |
|---|---|---|
| | 기본 배경 |
| | 보조 배경 |
| | 호버 상태 |
| | 활성 상태 |
| | 선택된 항목 |
| | 기본 텍스트 |
| | 보조 텍스트 |
| | 흐린 텍스트 |
| | 3차 텍스트 |
| | 기본 테두리 |
| | 연한 테두리 |
--accent: #FEE500 /* 카카오 노란색 - 주요 강조 색상 */ --accent-light: #FFF9CC /* 라이트모드: 연한 노란색 */ --accent-light: #3d3520 /* 다크모드: 어두운 노란색 */ --accent-text: #3C1E1E /* 라이트모드: 진한 갈색 */ --accent-text: #000000 /* 다크모드: 검정색 */
| 변수명 | 라이트 | 다크 | 용도 |
|---|---|---|---|
| | | 에러, 삭제 |
| | | 성공, 완료 |
| | | 경고, 주의 |
| | | 우선순위 별 |
노란색 배경(
, --accent
)을 사용하는 버튼은 반드시 검정색 또는 어두운 텍스트를 사용해야 합니다.#FEE500
/* ✅ 올바른 예시 */ .btn-accent { background: var(--accent); /* #FEE500 */ color: var(--accent-text); /* 라이트: #3C1E1E, 다크: #000000 */ border: none; } /* ❌ 잘못된 예시 - 절대 사용 금지 */ .btn-accent { background: var(--accent); color: white; /* 흰색 텍스트 금지! */ }
.btn-primary { background: var(--text); /* 검정/흰색 배경 */ color: var(--bg); /* 흰색/검정 텍스트 */ border: none; } .btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-hover); }
.btn-danger { background: var(--error); /* 빨간색 */ color: #ffffff; border: none; }
.btn-ghost { background: transparent; color: var(--text-secondary); border: none; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
| 크기 | 패딩 | 폰트 크기 | 용도 |
|---|---|---|---|
| Small | | | 인라인 액션 |
| Default | | | 일반 버튼 |
| Large | | | 주요 액션 |
.icon-btn { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: transparent; border: none; }
.fab { position: fixed; bottom: 24px; right: 24px; padding: 12px 20px; background: var(--text); color: var(--bg); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', monospace;
| 용도 | 크기 | 굵기 | 예시 |
|---|---|---|---|
| 제목 (H1) | | | 페이지 타이틀 |
| 제목 (H2) | | | 섹션 타이틀 |
| 제목 (H3) | | | 카드 타이틀 |
| 본문 | | | 일반 텍스트 |
| 버튼 | | | 버튼 레이블 |
| 라벨 | | | 입력 라벨, 메타 정보 |
| 작은 텍스트 | | | 태그, 배지 |
| 아주 작은 | | | 타임스탬프 |
1.51.31| 단위 | 값 | 용도 |
|---|---|---|
| | 아이콘-텍스트 간격 |
| | 요소 내부 간격 |
| | 요소 간 간격 |
| | 섹션 내부 패딩 |
| | 카드 패딩 |
| | 섹션 간 간격 |
| | 페이지 패딩 |
/* 버튼 */ button { padding: 8px 16px; } /* 입력 필드 */ input, textarea { padding: 10px 14px; } /* 리스트 아이템 */ .list-item { padding: 12px 16px; } /* 사이드바 아이템 */ .sidebar-item { padding: 10px 14px; } /* 카드 */ .card { padding: 20px; }
--radius: 6px; /* 기본 라운딩 */ --radius-lg: 10px; /* 큰 라운딩 (카드, 모달) */
| 컴포넌트 | 반경 |
|---|---|
| 버튼 | |
| 입력 필드 | |
| 카드 | |
| 태그 | |
| 배지 | (pill) |
| 아바타 | (원형) |
| 스크롤바 | |
/* 기본 테두리 */ border: 1px solid var(--border); /* 연한 테두리 */ border: 1px solid var(--border-light); /* 포커스 테두리 */ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light);
/* 기본 */ background: var(--bg-secondary); /* 호버 */ background: var(--bg-hover); /* 활성 (클릭 중) */ background: var(--bg-active); /* 선택됨 */ background: var(--bg-selected); /* 비활성 */ opacity: 0.5; cursor: default;
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card { background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-lg); /* 10px */ padding: 20px; margin-bottom: 12px; } .card-header { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 4px; border-radius: var(--radius); cursor: pointer; transition: background 0.1s ease; } .list-item:hover { background: var(--bg-hover); } .list-item.selected { background: var(--bg-selected); }
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 2px; font-size: 14px; border-radius: var(--radius); background: transparent; border: none; } .sidebar-item:hover { background: var(--bg-hover); } .sidebar-item.active { background: var(--bg-active); font-weight: 500; }
.tag { font-size: 11px; font-weight: 500; padding: 4px 10px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: 4px; }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; background: var(--text); color: var(--bg); border-radius: 10px; /* pill 형태 */ }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; } .status-success { color: var(--success); } .status-error { color: var(--error); } .status-warning { color: var(--warning); }
input, textarea, select { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; width: 100%; outline: none; transition: all 0.15s ease; } input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } textarea { resize: vertical; min-height: 100px; }
.divider { height: 1px; background: var(--border-light); margin: 8px 0; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); font-size: 14px; }
/* 기본 트랜지션 */ transition: all 0.15s ease; /* 빠른 트랜지션 */ transition: all 0.1s ease; /* 느린 트랜지션 */ transition: all 0.2s ease;
/* 로딩 스피너 */ @keyframes spin { to { transform: rotate(360deg); } } /* 페이드 인 */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
::selection { background: var(--accent); color: white; } /* 선택 가능 */ p, span, div, textarea, input { user-select: text; } /* 선택 불가 */ button, a, nav { user-select: none; }
| 이름 | 크기 | 용도 |
|---|---|---|
| | 모바일 |
| | 태블릿 |
| | 작은 데스크톱 |
| | 데스크톱 |
| 위젯 | 너비 | 높이 |
|---|---|---|
| 포스트잇 | | |
| 캘린더 | | |
| 타임블록 | | |
| 오목 | | |
| 정보창 | | |
outline: 2px solid var(--accent)44px × 44px (모바일)8px.code-block, code { font-family: var(--font-mono); font-size: 13px; background: var(--bg-secondary); border-radius: var(--radius); padding: 12px 16px; }
/* FAB 그림자 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* FAB 호버 그림자 */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* 일반적으로 그림자 사용을 최소화 */
새로운 컴포넌트 작성 시 확인사항: