소개
예제 코드에 Math.Truncate()에 대해서 나오게 되어서 검색해서 알려달라고 했는데 다른 함수까지 비교해서 설명해주는 것을 보고 설명 페이지를 만들어 달라고 진행한 사례입니다.
생각하지 못했던 설명까지 추가해 주어서 너무 좋더라구요.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
claude를 사용했습니다.
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>Math.Truncate 완벽 이해</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet"/>
<style>
:root {
--bg: #fafaf7;
--surface: #ffffff;
--surface2: #f3f2ee;
--border: #e5e3dc;
--text: #1c1c18;
--muted: #9b9a94;
--trunc: #c0392b;
--trunc-light: #fef0ee;
--trunc-border: #f5c6c2;
--round: #2980b9;
--round-light: #eef5fb;
--round-border: #b8d9f0;
--floor: #27ae60;
--floor-light: #edfaf3;
--floor-border: #b2e8cc;
--accent: #e67e22;
--accent-light: #fef6ee;
--code-bg: #1e1e2e;
--shadow-sm: 0 1px 8px rgba(0,0,0,0.06);
--shadow-md: 0 4px 24px rgba(0,0,0,0.09);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Noto Sans KR', sans-serif;
min-height: 100vh;
padding-bottom: 100px;
}
/* 상단 히어로 */
.hero {
background: var(--code-bg);
color: #cdd6f4;
padding: 64px 24px 56px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(192,57,43,0.25) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: 'Math.Truncate';
position: absolute;
bottom: -10px; right: 24px;
font-family: 'Fira Code', monospace;
font-size: 5rem;
font-weight: 600;
color: rgba(255,255,255,0.03);
white-space: nowrap;
pointer-events: none;
}
.hero-inner {
max-width: 860px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero-tag {
font-family: 'Fira Code', monospace;
font-size: 11px;
letter-spacing: 0.2em;
color: #a6adc8;
text-transform: uppercase;
margin-bottom: 16px;
}
.hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 16px;
color: #fff;
}
.hero h1 span {
color: #f38ba8;
font-family: 'Fira Code', monospace;
}
.hero-desc {
font-size: 15px;
color: #a6adc8;
max-width: 480px;
line-height: 1.8;
}
/* 래퍼 */
.wrapper {
max-width: 860px;
margin: 0 auto;
padding: 48px 24px 0;
}
/* 섹션 */
.section { margin-bottom: 40px; animation: fadeUp 0.55s ease both; }
.section:nth-child(1) { animation-delay: 0.05s; }
.section:nth-child(2) { animation-delay: 0.1s; }
.section:nth-child(3) { animation-delay: 0.15s; }
.section:nth-child(4) { animation-delay: 0.2s; }
.section:nth-child(5) { animation-delay: 0.25s; }
.section-label {
font-family: 'Fira Code', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.section-label span {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 3px 12px;
}
.section-title {
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 18px;
color: var(--text);
}
/* 카드 */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
/* 개념 박스 */
.concept-box {
padding: 28px 32px;
border-left: 4px solid var(--trunc);
background: linear-gradient(135deg, var(--trunc-light) 0%, #fff 60%);
}
.concept-icon { font-size: 2.5rem; margin-bottom: 12px; }
.concept-def {
font-size: 15px;
line-height: 1.85;
color: #3a3a34;
}
.concept-def strong { color: var(--trunc); }
.concept-formula {
display: inline-block;
margin-top: 16px;
background: var(--code-bg);
color: #f38ba8;
font-family: 'Fira Code', monospace;
font-size: 15px;
padding: 10px 20px;
border-radius: 10px;
}
/* 시각적 수직선 */
.number-line-wrap {
padding: 28px 32px;
}
.nl-title {
font-size: 13px;
color: var(--muted);
margin-bottom: 20px;
font-family: 'Fira Code', monospace;
}
.number-line {
position: relative;
height: 60px;
margin: 0 20px;
}
.nl-axis {
position: absolute;
top: 50%;
left: 0; right: 0;
height: 2px;
background: var(--border);
transform: translateY(-50%);
}
.nl-arrow {
position: absolute;
top: 50%; right: -10px;
transform: translateY(-50%);
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid var(--border);
}
.nl-tick {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.nl-tick .tick-line {
width: 2px;
height: 14px;
background: var(--border);
}
.nl-tick .tick-label {
font-family: 'Fira Code', monospace;
font-size: 12px;
color: var(--muted);
position: absolute;
bottom: -22px;
white-space: nowrap;
}
.nl-point {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.nl-point .dot {
width: 12px; height: 12px;
border-radius: 50%;
border: 3px solid;
}
.nl-point .dot-label {
font-family: 'Fira Code', monospace;
font-size: 11px;
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-weight: 600;
}
.nl-result-arrow {
position: absolute;
top: 50%;
height: 3px;
transform: translateY(-50%);
}
/* 코드 블록 */
.code-bar {
display: flex;
align-items: center;
gap: 7px;
padding: 11px 16px;
background: rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #f38ba8; }
.dot-y { background: #f9e2af; }
.dot-g { background: #a6e3a1; }
.code-lang {
font-family: 'Fira Code', monospace;
font-size: 11px;
color: #6c7086;
margin-left: auto;
letter-spacing: 0.1em;
}
.code-block {
background: var(--code-bg);
border-radius: 14px;
overflow: hidden;
margin: 0;
}
pre {
padding: 22px 24px;
font-family: 'Fira Code', monospace;
font-size: 13.5px;
line-height: 2;
overflow-x: auto;
color: #cdd6f4;
}
.kw { color: #cba6f7; }
.fn { color: #89b4fa; }
.num { color: #fab387; }
.str { color: #a6e3a1; }
.cm { color: #6c7086; font-style: italic; }
.op { color: #f38ba8; }
.var { color: #f9e2af; }
/* 비교 테이블 */
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.compare-table thead tr {
background: var(--surface2);
}
.compare-table th {
padding: 14px 20px;
text-align: center;
font-family: 'Fira Code', monospace;
font-size: 12px;
letter-spacing: 0.1em;
border-bottom: 2px solid var(--border);
color: var(--muted);
}
.compare-table th.th-trunc { color: var(--trunc); }
.compare-table th.th-round { color: var(--round); }
.compare-table th.th-floor { color: var(--floor); }
.compare-table td {
padding: 13px 20px;
text-align: center;
border-bottom: 1px solid var(--border);
font-family: 'Fira Code', monospace;
font-size: 13px;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td.input-col {
text-align: left;
color: var(--text);
font-weight: 600;
background: var(--surface2);
}
.compare-table td.trunc-col { color: var(--trunc); font-weight: 600; }
.compare-table td.round-col { color: var(--round); font-weight: 600; }
.compare-table td.floor-col { color: var(--floor); font-weight: 600; }
.compare-table tr:hover td { background: var(--surface2); }
.compare-table td.input-col:hover { background: var(--surface2); }
/* 차이점 하이라이트 */
.diff-badge {
display: inline-block;
font-size: 10px;
padding: 2px 7px;
border-radius: 10px;
margin-left: 6px;
font-family: 'Fira Code', monospace;
}
.diff-badge.diff { background: #fff3cd; color: #856404; }
/* 인터랙티브 계산기 */
.calc-area { padding: 28px 32px; }
.calc-input-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.calc-input-row label {
font-size: 14px;
color: var(--muted);
font-family: 'Fira Code', monospace;
white-space: nowrap;
}
.calc-input {
width: 120px;
padding: 10px 14px;
border: 2px solid var(--border);
border-radius: 10px;
font-family: 'Fira Code', monospace;
font-size: 16px;
color: var(--text);
background: var(--surface2);
outline: none;
transition: border-color 0.2s;
}
.calc-input:focus { border-color: var(--trunc); }
.calc-btn {
padding: 10px 22px;
background: var(--trunc);
color: #fff;
border: none;
border-radius: 10px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
}
.calc-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.calc-btn:active { transform: translateY(0); }
.calc-result-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
@media (max-width: 520px) {
.calc-result-grid { grid-template-columns: 1fr; }
}
.result-card {
border-radius: 12px;
padding: 18px;
text-align: center;
border: 1px solid;
transition: transform 0.2s;
}
.result-card:hover { transform: translateY(-2px); }
.result-card.trunc-card { background: var(--trunc-light); border-color: var(--trunc-border); }
.result-card.round-card { background: var(--round-light); border-color: var(--round-border); }
.result-card.floor-card { background: var(--floor-light); border-color: var(--floor-border); }
.result-card .rc-method {
font-family: 'Fira Code', monospace;
font-size: 11px;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.trunc-card .rc-method { color: var(--trunc); }
.round-card .rc-method { color: var(--round); }
.floor-card .rc-method { color: var(--floor); }
.result-card .rc-value {
font-family: 'Fira Code', monospace;
font-size: 2rem;
font-weight: 700;
}
.trunc-card .rc-value { color: var(--trunc); }
.round-card .rc-value { color: var(--round); }
.floor-card .rc-value { color: var(--floor); }
.result-card .rc-desc {
font-size: 12px;
color: var(--muted);
margin-top: 6px;
}
/* 학점 계산 예시 */
.grade-steps {
padding: 28px 32px;
}
.step-row {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.step-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.step-num {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--code-bg);
color: #f38ba8;
font-family: 'Fira Code', monospace;
font-size: 13px;
font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.step-content { flex: 1; }
.step-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
color: var(--text);
}
.step-code {
font-family: 'Fira Code', monospace;
font-size: 13px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
color: var(--trunc);
margin-bottom: 6px;
}
.step-explain {
font-size: 13px;
color: var(--muted);
line-height: 1.7;
}
/* 핵심 정리 */
.summary-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 600px) {
.summary-row { grid-template-columns: 1fr; }
}
.summary-card {
border-radius: 14px;
padding: 22px;
border: 1px solid;
}
.summary-card.trunc { background: var(--trunc-light); border-color: var(--trunc-border); }
.summary-card.round { background: var(--round-light); border-color: var(--round-border); }
.summary-card.floor { background: var(--floor-light); border-color: var(--floor-border); }
.sc-icon { font-size: 1.8rem; margin-bottom: 8px; }
.sc-name {
font-family: 'Fira Code', monospace;
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
}
.trunc .sc-name { color: var(--trunc); }
.round .sc-name { color: var(--round); }
.floor .sc-name { color: var(--floor); }
.sc-points {
list-style: none;
font-size: 12.5px;
color: #555;
display: flex;
flex-direction: column;
gap: 5px;
line-height: 1.6;
}
.sc-points li::before { content: '• '; }
/* 포인트 박스 */
.point-box {
background: var(--accent-light);
border: 1px solid #f5cba7;
border-radius: 12px;
padding: 20px 24px;
margin-top: 16px;
font-size: 14px;
color: #7d4800;
line-height: 1.8;
}
.point-box strong { color: var(--accent); }
/* 애니메이션 */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
0% { transform: scale(0.85); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop 0.35s ease both; }
</style>
</head>
<body>
<!-- 히어로 -->
<div class="hero">
<div class="hero-inner">
<div class="hero-tag">C# · System.Math</div>
<h1><span>Math.Truncate()</span><br/>완벽 이해</h1>
<p class="hero-desc">소수점을 버리는 함수인데, Round·Floor와 어떻게 다를까요? 직접 계산하며 이해해봐요!</p>
</div>
</div>
<div class="wrapper">
<!-- 1. 개념 -->
<div class="section">
<div class="section-label"><span>STEP 01 · 개념</span></div>
<div class="section-title">Math.Truncate란?</div>
<div class="card">
<div class="concept-box">
<div class="concept-icon">✂️</div>
<div class="concept-def">
<strong>소수점 이하를 그냥 잘라버리는</strong> 함수예요.<br/>
반올림도 아니고, 내림도 아니에요.<br/>
소수점 뒤에 뭐가 오든 <strong>무조건 버립니다.</strong><br/><br/>
<em style="color:var(--muted);font-size:14px;">Truncate = "잘라내다, 절단하다"</em>
</div>
<div class="concept-formula">Math.Truncate(double d) → 정수 방향으로 절단</div>
</div>
</div>
</div>
<!-- 2. 수직선 시각화 -->
<div class="section">
<div class="section-label"><span>STEP 02 · 시각화</span></div>
<div class="section-title">수직선으로 보는 Truncate</div>
<div class="card">
<div class="number-line-wrap">
<div class="nl-title">// 양수 예시: Truncate(8.7) = 8</div>
<!-- 양수 수직선 -->
<div style="position:relative;height:80px;margin:0 30px 40px;">
<div style="position:absolute;top:40px;left:0;right:0;height:2px;background:var(--border);"></div>
<div style="position:absolute;top:34px;right:-8px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--border);"></div>
<!-- 눈금 -->
<div style="position:absolute;left:10%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--border);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--muted);margin-top:4px;">7</div>
</div>
<div style="position:absolute;left:38%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--trunc);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--trunc);margin-top:4px;font-weight:700;">8</div>
</div>
<div style="position:absolute;left:66%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--border);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--muted);margin-top:4px;">9</div>
</div>
<!-- 8.7 점 -->
<div style="position:absolute;left:54%;top:28px;">
<div style="width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--accent);position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:700;">8.7</div>
</div>
<!-- 화살표 (8.7 → 8) -->
<div style="position:absolute;left:39%;top:38px;width:14%;height:3px;background:linear-gradient(to left,var(--trunc),transparent);"></div>
<div style="position:absolute;left:38.5%;top:34px;font-size:11px;color:var(--trunc);">◀</div>
<!-- 결과 라벨 -->
<div style="position:absolute;left:38%;top:6px;transform:translateX(-50%);background:var(--trunc);color:#fff;font-family:'Fira Code',monospace;font-size:11px;padding:3px 10px;border-radius:20px;white-space:nowrap;">결과: 8</div>
</div>
<div class="nl-title" style="margin-top:8px;">// 음수 예시: Truncate(-8.7) = -8 (0 방향!)</div>
<!-- 음수 수직선 -->
<div style="position:relative;height:80px;margin:0 30px;">
<div style="position:absolute;top:40px;left:0;right:0;height:2px;background:var(--border);"></div>
<div style="position:absolute;top:34px;right:-8px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid var(--border);"></div>
<div style="position:absolute;left:10%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--border);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--muted);margin-top:4px;">-9</div>
</div>
<div style="position:absolute;left:38%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--floor);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--floor);margin-top:4px;">-8</div>
</div>
<div style="position:absolute;left:66%;top:30px;display:flex;flex-direction:column;align-items:center;">
<div style="width:2px;height:20px;background:var(--border);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--muted);margin-top:4px;">-7</div>
</div>
<!-- -8.7 점 -->
<div style="position:absolute;left:24%;top:28px;">
<div style="width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent);"></div>
<div style="font-family:'Fira Code',monospace;font-size:11px;color:var(--accent);position:absolute;top:-22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:700;">-8.7</div>
</div>
<!-- 화살표 (-8.7 → -8, 즉 오른쪽으로) -->
<div style="position:absolute;left:25.5%;top:38px;width:12%;height:3px;background:linear-gradient(to right,transparent,var(--trunc));"></div>
<div style="position:absolute;left:37.2%;top:34px;font-size:11px;color:var(--trunc);">▶</div>
<div style="position:absolute;left:38%;top:6px;transform:translateX(-50%);background:var(--trunc);color:#fff;font-family:'Fira Code',monospace;font-size:11px;padding:3px 10px;border-radius:20px;white-space:nowrap;">결과: -8</div>
</div>
<div class="point-box" style="margin-top:24px;">
<strong>🔑 핵심!</strong> Truncate는 항상 <strong>0 방향</strong>으로 버려요.<br/>
양수 8.7 → 8 (왼쪽으로)<br/>
음수 -8.7 → -8 (오른쪽으로, 즉 0에 가까운 방향)
</div>
</div>
</div>
</div>
<!-- 3. 비교 -->
<div class="section">
<div class="section-label"><span>STEP 03 · 비교</span></div>
<div class="section-title">Truncate vs Round vs Floor</div>
<div class="card" style="overflow:auto;">
<table class="compare-table">
<thead>
<tr>
<th style="text-align:left;">입력값</th>
<th class="th-trunc">Truncate<br/><span style="font-size:10px;opacity:0.7;">소수점 절단</span></th>
<th class="th-round">Round<br/><span style="font-size:10px;opacity:0.7;">반올림</span></th>
<th class="th-floor">Floor<br/><span style="font-size:10px;opacity:0.7;">내림</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="input-col">9.9</td>
<td class="trunc-col">9</td>
<td class="round-col">10</td>
<td class="floor-col">9</td>
</tr>
<tr>
<td class="input-col">9.1</td>
<td class="trunc-col">9</td>
<td class="round-col">9</td>
<td class="floor-col">9</td>
</tr>
<tr>
<td class="input-col">9.5</td>
<td class="trunc-col">9</td>
<td class="round-col">10</td>
<td class="floor-col">9</td>
</tr>
<tr>
<td class="input-col">-9.1
<span class="diff-badge diff">음수 차이!</span>
</td>
<td class="trunc-col">-9</td>
<td class="round-col">-9</td>
<td class="floor-col" style="position:relative;">-10
<span style="font-size:10px;color:var(--floor);display:block;">← 여기가 달라요!</span>
</td>
</tr>
<tr>
<td class="input-col">-9.9
<span class="diff-badge diff">음수 차이!</span>
</td>
<td class="trunc-col">-9</td>
<td class="round-col">-10</td>
<td class="floor-col">-10</td>
</tr>
</tbody>
</table>
</div>
<div class="point-box" style="margin-top:14px;">
<strong>💡 양수에서는</strong> Truncate = Floor (결과 동일)<br/>
<strong>💡 음수에서는</strong> Truncate ≠ Floor — Truncate는 <strong>-9</strong>, Floor는 <strong>-10</strong><br/>
Floor는 "더 작은 정수 방향"이라서 음수에서는 더 음수로 내려가요!
</div>
</div>
<!-- 4. 인터랙티브 계산기 -->
<div class="section">
<div class="section-label"><span>STEP 04 · 직접 해보기</span></div>
<div class="section-title">숫자를 입력해서 비교해보세요</div>
<div class="card">
<div class="calc-area">
<div class="calc-input-row">
<label>입력값:</label>
<input class="calc-input" type="number" id="calc-input" value="85.7" step="0.1"/>
<button class="calc-btn" onclick="calculate()">계산하기</button>
</div>
<div class="calc-result-grid" id="calc-result">
<div class="result-card trunc-card">
<div class="rc-method">TRUNCATE</div>
<div class="rc-value" id="res-trunc">85</div>
<div class="rc-desc">소수점 절단</div>
</div>
<div class="result-card round-card">
<div class="rc-method">ROUND</div>
<div class="rc-value" id="res-round">86</div>
<div class="rc-desc">반올림</div>
</div>
<div class="result-card floor-card">
<div class="rc-method">FLOOR</div>
<div class="rc-value" id="res-floor">85</div>
<div class="rc-desc">내림</div>
</div>
</div>
<div id="calc-explain" style="font-size:13px;color:var(--muted);line-height:1.8;padding:14px;background:var(--surface2);border-radius:10px;border:1px solid var(--border);">
85.7 입력 → Truncate: <strong>85</strong> / Round: <strong>86</strong> / Floor: <strong>85</strong>
</div>
</div>
</div>
</div>
<!-- 5. 학점 계산 적용 -->
<div class="section">
<div class="section-label"><span>STEP 05 · 실전 적용</span></div>
<div class="section-title">학점 계산에서의 역할</div>
<div class="card">
<div class="grade-steps">
<div class="step-row">
<div class="step-num">1</div>
<div class="step-content">
<div class="step-title">score를 10으로 나누기</div>
<div class="step-code">score / 10.0 → 85 / 10.0 = 8.5</div>
<div class="step-explain">10.0으로 나누는 이유: int끼리 나누면 정수 나눗셈이 되므로 double 유지를 위해 10.0 사용</div>
</div>
</div>
<div class="step-row">
<div class="step-num">2</div>
<div class="step-content">
<div class="step-title">Truncate로 소수점 버리기</div>
<div class="step-code">Math.Truncate(8.5) → 8.0</div>
<div class="step-explain">8.5, 8.9, 8.1 모두 → 8.0 으로 만들어줘요</div>
</div>
</div>
<div class="step-row">
<div class="step-num">3</div>
<div class="step-content">
<div class="step-title">다시 10을 곱해서 10단위로 만들기</div>
<div class="step-code">8.0 * 10 → 80.0</div>
<div class="step-explain">80~89점대를 모두 80으로 통일</div>
</div>
</div>
<div class="step-row">
<div class="step-num">4</div>
<div class="step-content">
<div class="step-title">(int)로 캐스팅 → switch로 학점 분기</div>
<div class="step-code">(int)(80.0) → 80 → case 80: "B"</div>
<div class="step-explain">85점 → 80 → B, 97점 → 90 → A, 55점 → 50 → F</div>
</div>
</div>
</div>
</div>
<div class="code-block" style="margin-top:16px;">
<div class="code-bar">
<div class="dot dot-r"></div><div class="dot dot-y"></div><div class="dot dot-g"></div>
<div class="code-lang">C#</div>
</div>
<pre><span class="cm">// 전체 흐름: score = 85</span>
<span class="kw">int</span> <span class="var">bucket</span> = (<span class="kw">int</span>)(<span class="fn">Math.Truncate</span>(<span class="var">score</span> / <span class="num">10.0</span>) * <span class="num">10</span>);
<span class="cm">// 85 / 10.0 = 8.5</span>
<span class="cm">// Truncate(8.5) = 8.0</span>
<span class="cm">// 8.0 * 10 = 80.0</span>
<span class="cm">// (int)80.0 = 80 ← switch에 사용!</span>
<span class="kw">switch</span> (<span class="var">bucket</span>)
{
<span class="kw">case</span> <span class="num">90</span>: <span class="var">grade</span> = <span class="str">"A"</span>; <span class="kw">break</span>;
<span class="kw">case</span> <span class="num">80</span>: <span class="var">grade</span> = <span class="str">"B"</span>; <span class="kw">break</span>; <span class="cm">// ← 85점이 여기로!</span>
<span class="kw">case</span> <span class="num">70</span>: <span class="var">grade</span> = <span class="str">"C"</span>; <span class="kw">break</span>;
<span class="kw">case</span> <span class="num">60</span>: <span class="var">grade</span> = <span class="str">"D"</span>; <span class="kw">break</span>;
<span class="kw">default</span>: <span class="var">grade</span> = <span class="str">"F"</span>; <span class="kw">break</span>;
}</pre>
</div>
</div>
<!-- 6. 핵심 정리 -->
<div class="section">
<div class="section-label"><span>핵심 정리</span></div>
<div class="section-title">이것만 기억하세요!</div>
<div class="summary-row">
<div class="summary-card trunc">
<div class="sc-icon">✂️</div>
<div class="sc-name">Math.Truncate</div>
<ul class="sc-points">
<li>소수점 무조건 절단</li>
<li>0 방향으로 버림</li>
<li>음수에서 Floor와 다름</li>
<li>학점 계산, 10단위 처리에 적합</li>
</ul>
</div>
<div class="summary-card round">
<div class="sc-icon">🔄</div>
<div class="sc-name">Math.Round</div>
<ul class="sc-points">
<li>반올림</li>
<li>.5 이상이면 올림</li>
<li>일반적인 수학 반올림</li>
<li>평균, 통계에 주로 사용</li>
</ul>
</div>
<div class="summary-card floor">
<div class="sc-icon">⬇️</div>
<div class="sc-name">Math.Floor</div>
<ul class="sc-points">
<li>항상 내림</li>
<li>더 작은 정수 방향</li>
<li>음수에서 Truncate와 다름</li>
<li>페이지네이션, 인덱스 계산에 사용</li>
</ul>
</div>
</div>
</div>
</div>
<script>
function calculate() {
const input = parseFloat(document.getElementById('calc-input').value);
if (isNaN(input)) {
alert('숫자를 입력해주세요!');
return;
}
// Truncate: 0 방향으로 절단
const trunc = input >= 0 ? Math.floor(input) : Math.ceil(input);
// Round: 반올림
const round = Math.round(input);
// Floor: 내림
const floor = Math.floor(input);
document.getElementById('res-trunc').textContent = trunc;
document.getElementById('res-round').textContent = round;
document.getElementById('res-floor').textContent = floor;
// 애니메이션
const cards = document.querySelectorAll('.result-card');
cards.forEach(c => { c.classList.remove('pop'); void c.offsetWidth; c.classList.add('pop'); });
// 설명 업데이트
let diffMsg = '';
if (trunc !== floor) {
diffMsg = ` <span style="color:var(--trunc);font-weight:600;">※ 음수라서 Truncate(${trunc}) ≠ Floor(${floor})!</span>`;
}
document.getElementById('calc-explain').innerHTML =
`<strong>${input}</strong> 입력 → ` +
`Truncate: <strong style="color:var(--trunc)">${trunc}</strong> / ` +
`Round: <strong style="color:var(--round)">${round}</strong> / ` +
`Floor: <strong style="color:var(--floor)">${floor}</strong>` +
diffMsg;
}
// Enter 키 지원
document.getElementById('calc-input').addEventListener('keydown', e => {
if (e.key === 'Enter') calculate();
});
</script>
</body>
</html>
결과와 배운 점
생각하지 못했던 여러 함수들을 비교하는 내용이 들어간 것이 너무 좋았구요.
이미 여러 번 웹 페이지를 만들었던 채팅에 요청을 하면 필요할 때 퀴즈를 만들어 제공해 주더라구요.
그런데 이상하게 강의 준비에 시간은 더 쓰는 느낌입니다.
