다음은 첨부된 화면의 요약 분석입니다:
이미지를 분석하여 “Excel AI Prompt Generator” 웹 애플리케이션의 HTML 구조를 제공하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel AI Prompt Generator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
color: #ffffff;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.logo {
font-size: 14px;
color: #a8a8ff;
}
.user-info {
display: flex;
align-items: center;
gap: 20px;
}
.user-email {
font-size: 14px;
color: #cccccc;
}
.license-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
/* Main Title */
.main-title {
text-align: center;
margin: 40px 0;
}
.main-title h1 {
font-size: 48px;
background: linear-gradient(90deg, #7c5cff 0%, #5c8cff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.main-title p {
font-size: 16px;
color: #aaaaaa;
}
/* Content Layout */
.content {
display: grid;
grid-template-columns: 280px 1fr;
gap: 30px;
margin-top: 40px;
}
/* Sidebar */
.sidebar {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 30px 20px;
}
.sidebar-title {
font-size: 12px;
color: #888;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.version-btn {
width: 100%;
padding: 15px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.08);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.version-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.version-365 {
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
font-weight: bold;
}
.capture-guide {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Main Panel */
.main-panel {
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 40px;
}
.form-section {
margin-bottom: 30px;
}
.form-section label {
display: block;
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
color: #ffffff;
}
.dropdown {
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
color: white;
font-size: 15px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
}
.data-preview {
margin-top: 15px;
}
.data-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.data-preview-header span {
font-size: 13px;
color: #888;
}
.markdown-link {
color: #6c5ce7;
text-decoration: none;
font-size: 13px;
}
.data-table-container {
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 15px;
max-height: 200px;
overflow-y: auto;
}
.data-table {
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.6;
color: #ffffff;
white-space: pre;
}
.analysis-section {
margin-top: 30px;
}
.analysis-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.analysis-buttons {
display: flex;
gap: 15px;
}
.analysis-btn {
flex: 1;
padding: 50px 20px;
background: rgba(255, 255, 255, 0.05);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: #888;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s;
}
.analysis-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.3);
}
.analysis-btn svg {
width: 24px;
height: 24px;
}
/* Scrollbar Styling */
.data-table-container::-webkit-scrollbar {
width: 8px;
}
.data-table-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.data-table-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.data-table-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<header>
<div class="logo">AI로 풀어보는 엑셀 데이터 인사이트</div>
<div class="user-info">
<span class="user-email">제작자 : 김철(bomism@gmail.com)</span>
<button class="license-btn">라이선스 정보</button>
</div>
</header>
<div class="container">
<div class="main-title">
<h1>Excel AI Prompt Generator</h1>
<p>최적의 프롬프트로 엑셀 관문에 대한 최고의 답변을 얻으세요.</p>
</div>
<div class="content">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-title">OFFICE VERSION</div>
<button class="version-btn">2019</button>
<button class="version-btn">2021</button>
<button class="version-btn">2024</button>
<button class="version-btn version-365">365</button>
<div class="capture-guide">
<div class="sidebar-title">CAPTURE GUIDE</div>
</div>
</aside>
<!-- Main Panel -->
<main class="main-panel">
<!-- Pivot Table Selection -->
<div class="form-section">
<label>답변의 종류를 선택하세요</label>
<select class="dropdown">
<option>피벗 테이블</option>
<option>차트 분석</option>
<option>수식 작성</option>
<option>데이터 정리</option>
</select>
</div>
<!-- Answer Style -->
<div class="form-section">
<label>답변 스타일 (Persona)</label>
<select class="dropdown">
<option>기본 (교정 전문 답변)</option>
<option>초보자 친화적</option>
<option>전문가 수준</option>
<option>간결한 설명</option>
</select>
</div>
<!-- Data Preview -->
<div class="form-section">
<label>데이터 구조 (엑셀 형식/문맥형식)</label>
<div class="data-preview">
<div class="data-preview-header">
<span>*Markdown 표 자동 변환</span>
</div>
<div class="data-table-container">
<pre class="data-table">수량 단가 금액
1 53700 53700
1 67800 67800
2 58000 100000</pre>
</div>
</div>
</div>
<!-- Analysis Method -->
<div class="analysis-section">
<div class="analysis-title">분석할 원본 데이터 방법</div>
<div class="analysis-buttons">
<button class="analysis-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</button>
<button class="analysis-btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</button>
</div>
</div>
</main>
</div>
</div>
<script>
// 드롭다운 인터랙션
document.querySelectorAll('.dropdown').forEach(dropdown => {
dropdown.addEventListener('change', function() {
console.log('선택된 값:', this.value);
});
});
// 버전 선택 버튼
document.querySelectorAll('.version-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.version-btn').forEach(b => {
b.classList.remove('version-365');
});
this.classList.add('version-365');
});
});
// 분석 방법 버튼
document.querySelectorAll('.analysis-btn').forEach(btn => {
btn.addEventListener('click', function() {
alert('파일 업로드 또는 음성 입력 기능이 실행됩니다.');
});
});
</script>
</body>
</html>
이 HTML 코드는 다음과 같은 기능을 구현합니다:
주요 특징:
- 다크 테마 디자인 - 그라디언트 배경과 반투명 효과
- 반응형 레이아웃 - Grid 시스템을 사용한 사이드바/메인 패널 구조
- Office 버전 선택 - 2019, 2021, 2024, 365 버전 선택 버튼
- 드롭다운 메뉴 - 답변 종류 및 스타일 선택
- 데이터 프리뷰 - Markdown 표 형식의 데이터 표시
- 분석 방법 선택 - 음성 입력 및 이미지 업로드 버튼
- 인터랙티브 요소 - 호버 효과 및 클릭 이벤트
코드를 복사하여 .html 파일로 저장하면 바로 실행할 수 있습니다!
🔍 화면 개요
Excel AI Prompt Generator라는 웹 애플리케이션의 메인 화면으로 보입니다.
엑셀 데이터를 기반으로 **AI에게 최적화된 질문(프롬프트)**을 생성해주는 도구입니다.
🧩 주요 구성 요소 분석
1️⃣ 상단 헤더
타이틀: Excel AI Prompt Generator
부제: “최적의 프롬프트로 엑셀 질문에 대한 최고의 답변을 얻으세요.”
우측 상단
제작자 정보:
김철 (bomism@gmail.com)버튼:
라이선스 정보
2️⃣ 좌측 패널 – Office 버전 선택
사용 중인 Excel 버전을 선택하는 영역:
2019
2021
2024
365 (선택됨, 강조 표시됨)
➡️ 선택한 버전에 따라 AI 답변 스타일이나 함수 호환성이 달라질 가능성 있음
3️⃣ 중앙 메인 영역
✅ 답변 종류 선택
현재 선택: 피벗 테이블
→ 사용자가 원하는 Excel 작업 유형 선택
✅ 답변 스타일 (Persona)
선택값: 기본 (균형 잡힌 답변)
→ 향후 “초보자용 / 전문가용” 등 확장 가능해 보임
4️⃣ 데이터 입력 영역
📌 데이터 구조 (엑셀 복사/붙여넣기)
Markdown 자동 변환 지원
입력된 예시 데이터:
| 수량 | 단가 | 금액 |
|---|---|---|
| 1 | 53,700 | 53,700 |
| 1 | 67,800 | 67,800 |
| 2 | 50,000 | 100,000 |
➡️ 실제 엑셀 데이터를 붙여넣어 분석 요청 가능
➡️ 피벗테이블 생성, 합계 분석 등에 활용될 구조
5️⃣ 추가 요소
🎤 음성 입력 버튼
🖼 이미지 업로드 버튼
스크롤 가능한 입력창
다크 테마 기반의 모던 UI
🧠 전체적인 목적 요약
✅ 이 화면은
“엑셀 데이터를 AI가 이해할 수 있도록 정리해서, 피벗 테이블이나 분석 질문을 자동으로 만들어주는 도구”
로 보입니다.
주요 활용 시나리오
엑셀 데이터 분석 자동화
피벗 테이블 생성 질문 만들기
Excel 함수 추천
비전문가도 AI로 데이터 분석 가능
✨ 인상적인 점
✔ Excel 버전별 대응
✔ Markdown 기반 데이터 입력
✔ 실무 친화적인 UI
✔ 프롬프트 생성 특화
원하시면 다음도 도와드릴 수 있어요:
📌 이 화면을 기준으로 UX 개선 제안
📌 실제 사용 예시 프롬프트 작성
📌 React / Vue 기반 구현 구조 추정
📌 이 서비스 소개 문구 작성
어떤 방향으로 더 볼까요?
다음은 첨부된 화면의 요약 분석입니다:
🔍 화면 개요
Excel AI Prompt Generator라는 웹 애플리케이션의 메인 화면으로 보입니다.
엑셀 데이터를 기반으로 **AI에게 최적화된 질문(프롬프트)**을 생성해주는 도구입니다.
🧩 주요 구성 요소 분석
1️⃣ 상단 헤더
타이틀: Excel AI Prompt Generator
부제: “최적의 프롬프트로 엑셀 질문에 대한 최고의 답변을 얻으세요.”
우측 상단
제작자 정보:
김철 (bomism@gmail.com)버튼:
라이선스 정보
2️⃣ 좌측 패널 – Office 버전 선택
사용 중인 Excel 버전을 선택하는 영역:
2019
2021
2024
365 (선택됨, 강조 표시됨)
➡️ 선택한 버전에 따라 AI 답변 스타일이나 함수 호환성이 달라질 가능성 있음
3️⃣ 중앙 메인 영역
✅ 답변 종류 선택
현재 선택: 피벗 테이블
→ 사용자가 원하는 Excel 작업 유형 선택
✅ 답변 스타일 (Persona)
선택값: 기본 (균형 잡힌 답변)
→ 향후 “초보자용 / 전문가용” 등 확장 가능해 보임
4️⃣ 데이터 입력 영역
📌 데이터 구조 (엑셀 복사/붙여넣기)
Markdown 자동 변환 지원
입력된 예시 데이터:
| 수량 | 단가 | 금액 |
|---|---|---|
| 1 | 53,700 | 53,700 |
| 1 | 67,800 | 67,800 |
| 2 | 50,000 | 100,000 |
➡️ 실제 엑셀 데이터를 붙여넣어 분석 요청 가능
➡️ 피벗테이블 생성, 합계 분석 등에 활용될 구조
5️⃣ 추가 요소
🎤 음성 입력 버튼
🖼 이미지 업로드 버튼
스크롤 가능한 입력창
다크 테마 기반의 모던 UI
🧠 전체적인 목적 요약
✅ 이 화면은
“엑셀 데이터를 AI가 이해할 수 있도록 정리해서, 피벗 테이블이나 분석 질문을 자동으로 만들어주는 도구”
로 보입니다.
주요 활용 시나리오
엑셀 데이터 분석 자동화
피벗 테이블 생성 질문 만들기
Excel 함수 추천
비전문가도 AI로 데이터 분석 가능
✨ 인상적인 점
✔ Excel 버전별 대응
✔ Markdown 기반 데이터 입력
✔ 실무 친화적인 UI
✔ 프롬프트 생성 특화
원하시면 다음도 도와드릴 수 있어요:
📌 이 화면을 기준으로 UX 개선 제안
📌 실제 사용 예시 프롬프트 작성
📌 React / Vue 기반 구현 구조 추정
📌 이 서비스 소개 문구 작성
어떤 방향으로 더 볼까요?
좋아요. 지금 화면(Excel AI Prompt Generator)이 하는 일을 기준으로, “이 앱이 내부에서 어떤 알고리즘(흐름) 으로 프롬프트를 만들면 좋은지”를 소개해볼게요. (정확한 구현 코드는 화면만으로는 알 수 있어서, 합리적인 설계 알고리즘 형태로 설명합니다.)
Excel AI Prompt Generator용 프롬프트 생성 알고리즘
1) 입력 수집
Excel 버전(2019/2021/2024/365)
답변 종류(예: 피벗 테이블)
답변 스타일(Persona: 기본/초보/전문가 등)
데이터(복사/붙여넣기 표 형태 or Markdown)
2) 데이터 파싱 & 정규화
목표: “붙여넣기 데이터”를 AI가 이해 가능한 구조로 바꿈
구분자 탐지(탭/콤마/공백/파이프 등)
헤더 유무 판별(첫 줄이 문자열 비중 높으면 헤더로 추정)
열 개수/행 개수 검증(깨진 행 제외/경고)
숫자 정리(53,700 → 53700 / 공백 제거)
결측치 처리(빈칸 → null)
결과: 표준화된 테이블(2차원 배열) + 메타데이터(열 이름, 타입)
3) 스키마 추론(컬럼 타입 & 의미 추정)
각 컬럼에 대해:
타입 추정: Number / Text / Date / Category
통계 요약: min/max, 고유값 수, 상위 빈도값
의미 추정(휴리스틱):
수량은 measure(측정값)단가,금액은 measure만약
지점,카테고리,상품명같은 열이 있으면 dimension(분류축)
결과:
Dimension 후보(행/열로 둘 만한 항목)
Measure 후보(값 영역에 둘 항목)
4) 작업 템플릿 선택 (Task Template Routing)
사용자가 고른 “답변 종류”에 따라 프롬프트 템플릿을 고름.
예: 피벗 테이블이면 보통 이런 요구가 많음
“행/열/값/필터에 무엇을 놓을지 추천”
“원하는 분석 목표에 맞는 피벗 구성”
“365면 Power Pivot / 동적 배열 함수까지 가능”
➡️ Excel 버전별 기능 제약도 함께 반영
2019: 최신 함수 제한(LET, LAMBDA 등 미지원 가능)
365: 동적 배열, 최신 함수, 파워쿼리 활용 안내 가능
5) 프롬프트 구성 (Prompt Assembly)
프롬프트는 보통 4덩어리로 안정적입니다:
역할(Role): “당신은 엑셀 전문가”
목표(Goal): “피벗 테이블로 무엇을 분석하고 싶은지”
데이터 컨텍스트(Context): 표 샘플 + 컬럼 설명 + 타입
출력 형식(Output format): “단계별 절차 + 예시 + 주의점”
또한 Persona에 따라 톤/깊이를 조절:
기본: 균형
초보: 클릭 경로/메뉴 중심
전문가: 모델링, DAX, 파워쿼리, 성능 팁
6) 품질 보강 로직 (Guardrails & Enhancers)
데이터가 너무 크면: “상위 20행 샘플 + 스키마 요약”만 넣기
열이 애매하면: “가능한 피벗 구성 2~3안”을 요청하도록 프롬프트에 포함
오류 방지:
합계가 맞는지 검산(예: 금액 = 수량×단가 같은 규칙 탐지)
숫자가 텍스트로 들어간 경우 교정 방법 포함
7) 결과 출력
최종적으로 사용자에게:
“복사해서 AI(챗GPT)에 붙여넣을 프롬프트”
또는 “즉시 실행 지침(피벗 설정: 행=..., 값=...)”
형태로 제공
(지금 화면 데이터 기준) 피벗 테이블 추천 로직 예시
현재 컬럼이 수량, 단가, 금액만이라 “분류(dimension)”이 없어서 피벗의 재미가 줄어요.
이 경우 알고리즘은 보통:
“현재 데이터는 요약/합계는 가능하지만, 피벗 분해(카테고리별/상품별)는 어렵다”
“상품/날짜/거래처 같은 분류 컬럼이 추가되면 피벗 가치가 커진다”
를 안내하는 방향으로 프롬프트를 구성합니다.
원하면 내가 위 알고리즘을 바로 구현 가능한 형태로도 정리해줄게요.
(A) 규칙 기반(빠르고 가벼움)
(B) LLM + 규칙 하이브리드(품질 높음)
(C) 완전 LLM(구현 쉬움, 비용/일관성 관리 필요)
어느 방식으로 만들 계획이에요?
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>프롬프트 생성 방식 비교 (A/B/C)</title>
<style>
:root{
--bg: #0b1020;
--panel: rgba(255,255,255,.06);
--panel2: rgba(255,255,255,.085);
--text: rgba(255,255,255,.92);
--muted: rgba(255,255,255,.68);
--border: rgba(255,255,255,.12);
--accent: #8b5cf6;
--accent2:#22c55e;
--warn:#f59e0b;
--danger:#ef4444;
--shadow: 0 12px 35px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
color:var(--text);
background: radial-gradient(1200px 700px at 30% -10%, rgba(139,92,246,.35), transparent 60%),
radial-gradient(900px 500px at 90% 20%, rgba(34,197,94,.18), transparent 55%),
linear-gradient(180deg, #070a14, #0b1020 45%, #0a1226);
min-height:100vh;
}
.container{
width:min(1100px, 92vw);
margin: 36px auto 60px;
}
header{
display:flex;
gap:16px;
align-items:flex-start;
justify-content:space-between;
margin-bottom: 18px;
}
.title{
display:flex;
flex-direction:column;
gap:8px;
}
h1{
margin:0;
font-size: clamp(22px, 3vw, 32px);
letter-spacing:-0.02em;
line-height:1.15;
}
.subtitle{
margin:0;
color:var(--muted);
line-height:1.5;
font-size: 14px;
max-width: 70ch;
}
.toolbar{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
justify-content:flex-end;
padding-top: 4px;
}
.chip{
border:1px solid var(--border);
background: rgba(255,255,255,.04);
color: var(--muted);
padding: 8px 10px;
border-radius: 999px;
font-size: 12px;
display:flex;
gap:8px;
align-items:center;
user-select:none;
}
.chip b{color:var(--text); font-weight:600}
.switch{
display:flex;
align-items:center;
gap:10px;
padding: 10px 12px;
border-radius: 12px;
border:1px solid var(--border);
background: rgba(255,255,255,.04);
color: var(--muted);
font-size: 12px;
cursor:pointer;
user-select:none;
}
.switch input{accent-color: var(--accent)}
.grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px;
}
@media (max-width: 980px){
.grid{grid-template-columns: 1fr;}
header{flex-direction:column; align-items:flex-start}
.toolbar{justify-content:flex-start}
}
.card{
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
border:1px solid var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
padding: 16px 16px 14px;
position:relative;
overflow:hidden;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{
transform: translateY(-2px);
border-color: rgba(139,92,246,.35);
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
}
.card.selected{
border-color: rgba(139,92,246,.65);
background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(255,255,255,.045));
}
.badge{
display:inline-flex;
gap:8px;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
border:1px solid var(--border);
background: rgba(0,0,0,.2);
color: var(--muted);
}
.badge strong{color: var(--text); font-weight:700}
.card h2{
margin: 12px 0 6px;
font-size: 18px;
letter-spacing:-0.01em;
}
.desc{
margin:0 0 12px;
color: var(--muted);
font-size: 13px;
line-height:1.6;
}
.sectionTitle{
margin: 12px 0 8px;
font-size: 12px;
color: rgba(255,255,255,.76);
letter-spacing: .02em;
text-transform: uppercase;
}
ul{
margin:0;
padding-left: 18px;
color: var(--muted);
line-height:1.6;
font-size: 13px;
}
li{margin: 5px 0}
.pills{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top: 12px;
}
.pill{
font-size: 12px;
padding: 7px 10px;
border-radius: 999px;
border:1px solid var(--border);
background: rgba(255,255,255,.04);
color: rgba(255,255,255,.78);
}
.pill.good{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08)}
.pill.warn{border-color: rgba(245,15
댓글 없음:
댓글 쓰기