소개
21기 스터디 후 학생들에게 강의 자료를 웹으로 만들어서 보여주고 있는데 반응이 좋습니다.
그래서인지 매 수업마다 2~3개씩 만들어서 제공하고 있습니다.
만족도가 높은 것 같아요.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
cluade에 코드를 입력하고 설명을 해달라고 한 뒤, 그걸 로 페이지를 만들어 달라고 했습니다.
한국어 텍스트가 포함된 한국어 웹사이트 스크린샷
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
한국어로 된 문자 메시지의 스크린샷
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
한국어와 중국어 텍스트가 포함된 웹사이트 스크린샷
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>C# 콘솔 색상 완전 이해</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"/>
<style>
:root {
--bg: #0c0e14;
--surface: #13161f;
--surface2: #191d28;
--border: #252a3a;
--text: #dde3f5;
--muted: #5c6480;
--accent: #7dd3fc;
--green: #86efac;
--yellow: #fde68a;
--red: #fca5a5;
--purple: #c4b5fd;
--orange: #fdba74;
--code-bg: #090b10;
--shadow: 0 2px 16px rgba(0,0,0,0.3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.7;
min-height: 100vh;
}
body::before {
content: '';
position: fixed; inset: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(125,211,252,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(196,181,253,0.05) 0%, transparent 50%);
pointer-events: none; z-index: 0;
}
/* ── 히어로 ── */
.hero {
position: relative; z-index: 1;
padding: 72px 24px 60px;
text-align: center;
border-bottom: 1px solid var(--border);
overflow: hidden;
}
/* 콘솔 느낌 스캔라인 */
.hero::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,0.012) 2px,
rgba(255,255,255,0.012) 4px
);
pointer-events: none;
}
.hero-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: .22em;
text-transform: uppercase; color: var(--muted);
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 900; letter-spacing: -.03em;
line-height: 1.1; margin-bottom: 16px;
}
.hero h1 .hl-fg { color: #60a5fa; }
.hero h1 .hl-bg { color: #f9a8d4; }
.hero-sub {
font-size: 15px; color: var(--muted);
max-width: 480px; margin: 0 auto 28px;
line-height: 1.85;
}
/* 미니 콘솔 미리보기 */
.hero-console {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
background: #0a0c10;
border: 1px solid #1e2230;
border-radius: 10px;
padding: 16px 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
margin-top: 8px;
}
.hc-line { display: flex; align-items: center; gap: 8px; }
.hc-prompt { color: #3d4466; }
.hc-blue { color: #3b82f6; }
.hc-red { color: #ef4444; background: #eab308; padding: 0 4px; border-radius: 2px; }
.hc-white { color: #e2e8f0; }
/* ── 래퍼 ── */
.wrapper {
position: relative; z-index: 1;
max-width: 860px; margin: 0 auto;
padding: 0 24px 100px;
}
/* ── 섹션 ── */
.section { margin-top: 64px; animation: fadeUp .5s ease both; }
.section:nth-child(1) { animation-delay: .05s; }
.section:nth-child(2) { animation-delay: .12s; }
.section:nth-child(3) { animation-delay: .19s; }
.section:nth-child(4) { animation-delay: .26s; }
.section:nth-child(5) { animation-delay: .33s; }
.sec-header {
display: flex; align-items: center;
gap: 14px; margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.badge {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 700;
padding: 5px 16px; border-radius: 8px;
border: 1.5px solid; white-space: nowrap;
}
.badge-fg { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.3); color: #60a5fa; }
.badge-bg { background: rgba(249,168,212,0.1); border-color: rgba(249,168,212,0.3); color: #f9a8d4; }
.badge-reset{ background: rgba(134,239,172,0.1); border-color: rgba(134,239,172,0.3); color: var(--green); }
.badge-color{ background: rgba(253,230,138,0.1); border-color: rgba(253,230,138,0.3); color: var(--yellow); }
.badge-demo { background: rgba(196,181,253,0.1); border-color: rgba(196,181,253,0.3); color: var(--purple); }
.sh-title h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px; }
.sh-title p { font-size: 13px; color: var(--muted); }
/* ── 설명 카드 ── */
.desc-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 28px;
margin-bottom: 16px;
font-size: 14.5px; line-height: 1.95;
color: #b0b8d4;
box-shadow: var(--shadow);
}
.desc-card strong { color: var(--text); }
.key-point {
display: inline-flex; align-items: center;
gap: 8px; margin-top: 14px;
padding: 10px 16px; border-radius: 8px;
font-size: 13.5px; font-weight: 600;
}
.kp-blue { background: rgba(96,165,250,0.1); border: 1px solid rgba(96,165,250,0.3); color: #60a5fa; }
.kp-pink { background: rgba(249,168,212,0.1); border: 1px solid rgba(249,168,212,0.3); color: #f9a8d4; }
.kp-green { background: rgba(134,239,172,0.1); border: 1px solid rgba(134,239,172,0.3); color: var(--green); }
.kp-red { background: rgba(252,165,165,0.1); border: 1px solid rgba(252,165,165,0.3); color: var(--red); }
/* ── 코드 블록 ── */
.code-block {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 12px; overflow: hidden;
margin-bottom: 16px;
}
.cb-bar {
display: flex; align-items: center; gap: 7px;
padding: 10px 16px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid var(--border);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dr { background: #f38ba8; }
.dy { background: #f9e2af; }
.dg { background: #a6e3a1; }
.cb-lang { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-left: auto; }
pre {
padding: 20px 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 13.5px; line-height: 2.1;
overflow-x: auto; color: #cdd6f4;
}
.kw { color: #cba6f7; }
.cl { color: #89b4fa; }
.fn { color: #89dceb; }
.pr { color: #89b4fa; }
.str { color: #a6e3a1; }
.cm { color: #3d4466; font-style: italic; }
.hl-blue { color: #60a5fa; font-weight: 700; }
.hl-red { color: #f87171; font-weight: 700; }
.hl-yellow{ color: #fbbf24; font-weight: 700; }
.hl-green { color: #34d399; font-weight: 700; }
.hl-reset { color: #a78bfa; font-weight: 700; }
.hl-white { color: #f1f5f9; font-weight: 700; }
/* ── 콘솔 시뮬레이터 ── */
.console-sim {
background: #080a0f;
border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.cs-titlebar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: #111420;
border-bottom: 1px solid var(--border);
}
.cs-dots { display: flex; gap: 6px; }
.cs-dot { width: 12px; height: 12px; border-radius: 50%; }
.cd-r { background: #ff5f57; }
.cd-y { background: #febc2e; }
.cd-g { background: #28c840; }
.cs-title {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: #3d4466;
margin-left: 8px; letter-spacing: .05em;
}
.cs-body {
padding: 20px 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px; line-height: 2;
min-height: 80px;
}
.cs-line { display: flex; align-items: center; }
.cs-prompt { color: #2d3155; margin-right: 8px; font-size: 12px; }
/* 실제 콘솔 색상 팔레트 */
.color-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-top: 4px;
}
.color-chip {
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
transition: transform .15s, box-shadow .15s;
}
.color-chip:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.chip-preview {
height: 52px;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700;
}
.chip-label {
padding: 7px 10px;
background: var(--surface2);
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: var(--muted);
letter-spacing: .06em;
border-top: 1px solid var(--border);
}
/* ── 인터랙티브 데모 ── */
.demo-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
box-shadow: var(--shadow);
}
.demo-header {
padding: 13px 20px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
gap: 14px; flex-wrap: wrap;
}
.demo-header span {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: var(--muted);
letter-spacing: .12em; text-transform: uppercase;
}
.select-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.color-select {
padding: 6px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--text);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
outline: none; cursor: pointer;
transition: border-color .2s;
}
.color-select:focus { border-color: var(--accent); }
.select-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: var(--muted);
}
.demo-body { padding: 20px 24px; }
.demo-console {
background: #080a0f;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
}
.dc-bar {
padding: 8px 14px;
background: #0d0f16;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 6px;
}
.dc-body {
padding: 16px 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px; line-height: 2.2;
min-height: 70px;
}
#demo-output-line {
display: inline-block;
padding: 2px 10px;
border-radius: 4px;
transition: all .3s ease;
}
.demo-code-preview {
margin-top: 14px;
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px; line-height: 1.9;
color: #6c7086;
}
/* ── ResetColor 위험 데모 ── */
.danger-compare {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 560px) { .danger-compare { grid-template-columns: 1fr; } }
.dc-card {
border-radius: 12px; overflow: hidden;
border: 1px solid;
}
.dc-card.bad { border-color: rgba(252,165,165,0.3); }
.dc-card.good { border-color: rgba(134,239,172,0.3); }
.dc-head {
padding: 10px 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .08em;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dc-head.bad { background: rgba(252,165,165,0.08); color: var(--red); }
.dc-head.good { background: rgba(134,239,172,0.08); color: var(--green); }
.dc-console {
background: #080a0f;
padding: 14px 18px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; line-height: 2.2;
}
/* ── 비교 표 ── */
.prop-table {
width: 100%; border-collapse: collapse;
font-size: 13.5px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
box-shadow: var(--shadow);
}
.prop-table th {
padding: 13px 18px; text-align: left;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.prop-table td {
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,0.04);
vertical-align: middle;
}
.prop-table tr:last-child td { border-bottom: none; }
.prop-table tr:hover td { background: var(--surface2); }
.prop-table td:first-child {
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700;
color: var(--accent);
}
.prop-table td:nth-child(2) { color: #8892b0; font-size: 13px; }
.prop-table td:nth-child(3) { color: var(--green); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
/* ── 핵심 정리 ── */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px; margin-top: 56px;
}
.sum-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px; padding: 22px;
box-shadow: var(--shadow);
transition: transform .2s;
}
.sum-card:hover { transform: translateY(-4px); }
.sum-dot { width: 10px; height: 10px; border-radius: 50%; margin-bottom: 12px; }
.sum-name {
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.sum-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }
.sum-when {
margin-top: 10px; font-size: 12px;
color: var(--muted); border-top: 1px solid var(--border);
padding-top: 10px;
}
/* 애니메이션 */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.cursor {
display: inline-block;
width: 8px; height: 16px;
background: #60a5fa;
vertical-align: middle;
animation: blink 1s step-end infinite;
margin-left: 2px;
}
</style>
</head>
<body>
<!-- 히어로 -->
<div class="hero">
<div class="hero-tag">C# · Console · Color</div>
<h1>
콘솔 <span class="hl-fg">글자색</span> &<br/>
<span class="hl-bg">배경색</span> 바꾸기
</h1>
<p class="hero-sub">
ForegroundColor · BackgroundColor · ResetColor<br/>
콘솔 출력에 색을 입히는 방법을 알아봐요!
</p>
<!-- 미니 콘솔 미리보기 -->
<div class="hero-console">
<div class="hc-line">
<span class="hc-prompt">C:\></span>
<span class="hc-blue">Blue 텍스트</span>
</div>
<div class="hc-line">
<span class="hc-prompt">C:\></span>
<span class="hc-red">Red 텍스트</span>
</div>
<div class="hc-line">
<span class="hc-prompt">C:\></span>
<span class="hc-white">일반 텍스트</span>
<span class="cursor"></span>
</div>
</div>
</div>
<div class="wrapper">
<!-- ── 01 ForegroundColor ── -->
<div class="section">
<div class="sec-header">
<div class="badge badge-fg">01 · ForegroundColor</div>
<div class="sh-title">
<h2>글자색 바꾸기</h2>
<p>콘솔에 출력되는 텍스트의 색상을 변경</p>
</div>
</div>
<div class="desc-card">
<strong>Console.ForegroundColor</strong>는 콘솔에 출력되는 <strong>글자(텍스트)의 색상</strong>을 바꿔요.<br/>
<strong>ConsoleColor.색상명</strong> 을 대입하면 이후 모든 출력이 그 색으로 나와요.<br/>
색상을 바꾼 후에는 반드시 <strong>ResetColor()</strong> 로 원래대로 되돌려야 해요!
<br/>
<div class="key-point kp-blue">📌 ForegroundColor = 글자(전경) 색상</div>
</div>
<div class="code-block">
<div class="cb-bar">
<div class="dot dr"></div><div class="dot dy"></div><div class="dot dg"></div>
<div class="cb-lang">C#</div>
</div>
<pre><span class="cm">// ① 글자색을 파란색으로 설정</span>
<span class="cl">Console</span>.<span class="fn">ForegroundColor</span> = <span class="cl">ConsoleColor</span>.<span class="hl-blue">Blue</span>;
<span class="cm">// ② 파란색으로 출력</span>
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"Blue"</span>);
<span class="cm">// ③ 색상 원래대로 복구 (필수!)</span>
<span class="cl">Console</span>.<span class="hl-reset">ResetColor</span>();</pre>
</div>
<!-- 콘솔 시뮬레이터 -->
<div class="console-sim">
<div class="cs-titlebar">
<div class="cs-dots">
<div class="cs-dot cd-r"></div>
<div class="cs-dot cd-y"></div>
<div class="cs-dot cd-g"></div>
</div>
<div class="cs-title">Microsoft Visual Studio 디버그 콘솔</div>
</div>
<div class="cs-body">
<div class="cs-line">
<span class="cs-prompt">▶</span>
<span style="color: #3b82f6; font-weight: 600;">Blue</span>
</div>
<div class="cs-line">
<span class="cs-prompt">▶</span>
<span style="color: #e2e8f0;">일반 텍스트 (ResetColor 후)</span>
</div>
</div>
</div>
</div>
<!-- ── 02 BackgroundColor ── -->
<div class="section">
<div class="sec-header">
<div class="badge badge-bg">02 · BackgroundColor</div>
<div class="sh-title">
<h2>배경색 바꾸기</h2>
<p>텍스트 뒤 배경의 색상을 변경</p>
</div>
</div>
<div class="desc-card">
<strong>Console.BackgroundColor</strong>는 콘솔 텍스트의 <strong>배경 색상</strong>을 바꿔 요.<br/>
ForegroundColor와 함께 쓰면 <strong>배경색 + 글자색을 동시에</strong> 설정할 수 있어요.<br/>
설정 순서는 상관없지만, 출력 <strong>전에</strong> 두 색상을 모두 설정해야 해요.
<br/>
<div class="key-point kp-pink">📌 BackgroundColor = 배경(후경) 색상</div>
</div>
<div class="code-block">
<div class="cb-bar">
<div class="dot dr"></div><div class="dot dy"></div><div class="dot dg"></div>
<div class="cb-lang">C#</div>
</div>
<pre><span class="cm">// ① 배경색 = 노란색</span>
<span class="cl">Console</span>.<span class="fn">BackgroundColor</span> = <span class="cl">ConsoleColor</span>.<span class="hl-yellow">Yellow</span>;
<span class="cm">// ② 글자색 = 빨간색</span>
<span class="cl">Console</span>.<span class="fn">ForegroundColor</span> = <span class="cl">ConsoleColor</span>.<span class="hl-red">Red</span>;
<span class="cm">// ③ 노란 배경 + 빨간 글자로 출력</span>
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"Red"</span>);
<span class="cm">// ④ 색상 원래대로 복구</span>
<span class="cl">Console</span>.<span class="hl-reset">ResetColor</span>();</pre>
</div>
<!-- 콘솔 시뮬레이터 -->
<div class="console-sim">
<div class="cs-titlebar">
<div class="cs-dots">
<div class="cs-dot cd-r"></div>
<div class="cs-dot cd-y"></div>
<div class="cs-dot cd-g"></div>
</div>
<div class="cs-title">Microsoft Visual Studio 디버그 콘솔</div>
</div>
<div class="cs-body">
<div class="cs-line">
<span class="cs-prompt">▶</span>
<span style="background:#eab308;color:#ef4444;font-weight:700;padding:0 8px;border-radius:3px;">Red</span>
</div>
<div class="cs-line">
<span class="cs-prompt">▶</span>
<span style="color:#e2e8f0;">일반 텍스트 (ResetColor 후)</span>
</div>
</div>
</div>
</div>
<!-- ── 03 ResetColor ── -->
<div class="section">
<div class="sec-header">
<div class="badge badge-reset">03 · ResetColor()</div>
<div class="sh-title">
<h2>색상 원래대로 복구</h2>
<p>변경한 색상을 콘솔 기본값으로 되돌리기</p>
</div>
</div>
<div class="desc-card">
<strong>Console.ResetColor()</strong>는 변경된 색상을 <strong>콘솔 기본값</strong>으로 되돌려요.<br/>
이걸 호출하지 않으면 이후 모든 출력이 계속 바뀐 색으로 출력돼요!<br/>
색상을 바꿀 때마다 사용 후에는 <strong>항상 ResetColor()를 호출</strong>하는 습관을 들이세요.
<br/>
<div class="key-point kp-red">⚠️ ResetColor() 빠뜨리면 이후 출력이 모두 영향 받아요!</div>
</div>
<!-- 위험 비교 -->
<div class="danger-compare">
<div class="dc-card bad">
<div class="dc-head bad">❌ ResetColor() 없을 때</div>
<div style="background:var(--code-bg);padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.05);">
<pre style="padding:0;font-size:12.5px;line-height:1.9;"><span class="cl">Console</span>.<span class="fn">ForegroundColor</span>
= <span class="cl">ConsoleColor</span>.<span class="hl-blue">Blue</span>;
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"파란색"</span>);
<span class="cm">// ResetColor() 없음!</span>
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"이것도..."</span>);</pre>
</div>
<div class="dc-console">
<div style="color:#3b82f6;">파란색</div>
<div style="color:#3b82f6;">이것도 파란색! 😱</div>
</div>
</div>
<div class="dc-card good">
<div class="dc-head good">✅ ResetColor() 있을 때</div>
<div style="background:var(--code-bg);padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.05);">
<pre style="padding:0;font-size:12.5px;line-height:1.9;"><span class="cl">Console</span>.<span class="fn">ForegroundColor</span>
= <span class="cl">ConsoleColor</span>.<span class="hl-blue">Blue</span>;
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"파란색"</span>);
<span class="cl">Console</span>.<span class="hl-reset">ResetColor</span>(); <span class="cm">// ✅</span>
<span class="cl">Console</span>.<span class="fn">WriteLine</span>(<span class="str">"정상색"</span>);</pre>
</div>
<div class="dc-console">
<div style="color:#3b82f6;">파란색</div>
<div style="color:#e2e8f0;">정상색 ✅</div>
</div>
</div>
</div>
</div>
<!-- ── 04 색상 팔레트 ── -->
<div class="section">
<div class="sec-header">
<div class="badge badge-color">04 · ConsoleColor</div>
<div class="sh-title">
<h2>사용 가능한 색상 목록</h2>
<p>ConsoleColor 열거형의 16가지 색상</p>
</div>
</div>
<div class="desc-card">
<strong>ConsoleColor</strong>는 열거형(enum)으로 총 <strong>16가지 색상</strong>을 제공해요.<br/>
ForegroundColor와 BackgroundColor 모두 동일한 색상을 사용할 수 있어요.
</div>
<div class="color-grid">
<div class="color-chip">
<div class="chip-preview" style="background:#000;color:#aaa;">Aa</div>
<div class="chip-label">Black</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#008080;color:#fff;">Aa</div>
<div class="chip-label">DarkCyan</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#800000;color:#fff;">Aa</div>
<div class="chip-label">DarkRed</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#008000;color:#fff;">Aa</div>
<div class="chip-label">DarkGreen</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#000080;color:#fff;">Aa</div>
<div class="chip-label">DarkBlue</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#808000;color:#fff;">Aa</div>
<div class="chip-label">DarkYellow</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#800080;color:#fff;">Aa</div>
<div class="chip-label">DarkMagenta</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#808080;color:#fff;">Aa</div>
<div class="chip-label">DarkGray</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#c0c0c0;color:#333;">Aa</div>
<div class="chip-label">Gray</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#0000ff;color:#fff;">Aa</div>
<div class="chip-label">Blue</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#00ff00;color:#000;">Aa</div>
<div class="chip-label">Green</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#00ffff;color:#000;">Aa</div>
<div class="chip-label">Cyan</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#ff0000;color:#fff;">Aa</div>
<div class="chip-label">Red</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#ff00ff;color:#fff;">Aa</div>
<div class="chip-label">Magenta</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#ffff00;color:#000;">Aa</div>
<div class="chip-label">Yellow</div>
</div>
<div class="color-chip">
<div class="chip-preview" style="background:#fff;color:#000;">Aa</div>
<div class="chip-label">White</div>
</div>
</div>
<!-- 속성 비교표 -->
<div style="margin-top:20px;overflow-x:auto;">
<table class="prop-table">
<thead>
<tr>
<th>속성 / 메서드</th>
<th>역할</th>
<th>사용 예</th>
</tr>
</thead>
<tbody>
<tr>
<td>ForegroundColor</td>
<td>글자(텍스트) 색상 설정</td>
<td>= ConsoleColor.Blue</td>
</tr>
<tr>
<td>BackgroundColor</td>
<td>배경 색상 설정</td>
<td>= ConsoleColor.Yellow</td>
</tr>
<tr>
<td>ResetColor()</td>
<td>모든 색상을 기본값으로 복구</td>
<td>Console.ResetColor()</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ── 05 인터랙티브 데모 ── -->
<div class="section">
<div class="sec-header">
<div class="badge badge-demo">05 · 직접 해보기</div>
<div class="sh-title">
<h2>색상 조합 미리보기</h2>
<p>글자색과 배경색을 선택해서 결과를 확인해보세요</p>
</div>
</div>
<div class="demo-wrap">
<div class="demo-header">
<span>색상 선택</span>
<div class="select-group">
<span class="select-label">글자색</span>
<select class="color-select" id="sel-fg" onchange="updateDemo()">
<option value="#fff,white">White</option>
<option value="#3b82f6,Blue" selected>Blue</option>
<option value="#ef4444,Red">Red</option>
<option value="#22c55e,Green">Green</option>
<option value="#f9e2af,Yellow">Yellow</option>
<option value="#00ffff,Cyan">Cyan</option>
<option value="#ff00ff,Magenta">Magenta</option>
<option value="#000,Black">Black</option>
</select>
<span class="select-label">배경색</span>
<select class="color-select" id="sel-bg" onchange="updateDemo()">
<option value="transparent,없음" selected>없음</option>
<option value="#eab308,Yellow">Yellow</option>
<option value="#3b82f6,Blue">Blue</option>
<option value="#ef4444,Red">Red</option>
<option value="#22c55e,Green">Green</option>
<option value="#000,Black">Black</option>
<option value="#fff,White">White</option>
</select>
</div>
</div>
<div class="demo-body">
<div class="demo-console">
<div class="dc-bar">
<div class="cs-dot cd-r"></div>
<div class="cs-dot cd-y"></div>
<div class="cs-dot cd-g"></div>
</div>
<div class="dc-body">
<span id="demo-output-line">Hello, C#!</span>
</div>
</div>
<div class="demo-code-preview" id="demo-code">
Console.ForegroundColor = ConsoleColor.Blue;<br/>
Console.WriteLine("Hello, C#!");<br/>
Console.ResetColor();
</div>
</div>
</div>
</div>
<!-- 핵심 정리 -->
<div class="summary-grid">
<div class="sum-card">
<div class="sum-dot" style="background:#60a5fa;"></div>
<div class="sum-name" style="color:#60a5fa;">ForegroundColor</div>
<div class="sum-desc">글자색을 바꿔요. ConsoleColor.색상명 대입.</div>
<div class="sum-when">✦ 출력 전에 설정해야 적용돼요</div>
</div>
<div class="sum-card">
<div class="sum-dot" style="background:#f9a8d4;"></div>
<div class="sum-name" style="color:#f9a8d4;">BackgroundColor</div>
<div class="sum-desc">배경색을 바꿔요. ForegroundColor와 함께 사용.</div>
<div class="sum-when">✦ 출력 전에 설정해야 적용돼요</div>
</div>
<div class="sum-card">
<div class="sum-dot" style="background:#86efac;"></div>
<div class="sum-name" style="color:#86efac;">ResetColor()</div>
<div class="sum-desc">색상을 기본값으로 복구해요. 항상 호출하세요!</div>
<div class="sum-when">✦ 빠뜨리면 이후 출력 전체에 영향</div>
</div>
<div class="sum-card">
<div class="sum-dot" style="background:#fde68a;"></div>
<div class="sum-name" style="color:#fde68a;">ConsoleColor</div>
<div class="sum-desc">16가지 색상 열거형. Black ~ White.</div>
<div class="sum-when">✦ Foreground/Background 모두 사용 가능</div>
</div>
</div>
</div>
<script>
function updateDemo() {
const fgVal = document.getElementById('sel-fg').value.split(',');
const bgVal = document.getElementById('sel-bg').value.split(',');
const fgColor = fgVal[0];
const fgName = fgVal[1];
const bgColor = bgVal[0];
const bgName = bgVal[1];
const line = document.getElementById('demo-output-line');
line.style.color = fgColor;
line.style.background = bgColor === 'transparent' ? 'transparent' : bgColor;
line.style.padding = bgColor === 'transparent' ? '0' : '2px 10px';
line.style.borderRadius = '3px';
const code = document.getElementById('demo-code');
let html = '';
if (bgColor !== 'transparent') {
html += `<span style="color:#89b4fa;">Console</span>.BackgroundColor = <span style="color:#89b4fa;">ConsoleColor</span>.<span style="color:#fbbf24;">${bgName}</span>;<br/>`;
}
html += `<span style="color:#89b4fa;">Console</span>.ForegroundColor = <span style="color:#89b4fa;">ConsoleColor</span>.<span style="color:#60a5fa;">${fgName}</span>;<br/>`;
html += `<span style="color:#89b4fa;">Console</span>.WriteLine(<span style="color:#a6e3a1;">"Hello, C#!"</span>);<br/>`;
html += `<span style="color:#89b4fa;">Console</span>.<span style="color:#a78bfa;">ResetColor</span>();`;
code.innerHTML = html;
}
updateDemo();
</script>
</body>
</html>
결과와 배운 점
프로그래밍 수업을 지루해하는 부분이 있어서 콘솔에서 색깔 바꾸는 것을 가르쳐주려고 했는데요. 책에는 그 내용이 한참 뒤에 있어서... 아직 아이들은 앞에 조건문 배우는 중
참고 자료를 만들어서 보여주고 언제든 볼 수 있도록 강의 자료실에 업로드해두니 홈페이지 활성화도 되고 좋은 듯 합니다.
일과 학습의 두 마리 토끼를 잡는 중입니다.
