소개
수업 때 엘리 교수님이 말씀해주신 학사일정 페이지...
불편해서 저도 만들어서 배포해 보았습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
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>2026학년도 학사력 — 4·5·6·7월</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<style>
:root {
--bg: #f0f4f8;
--surface: #ffffff;
--surface2: #e8edf3;
--border: #d8dee8;
--text: #1a2030;
--muted: #8892a8;
--apr: #2563eb;
--apr-light: #eff6ff;
--apr-bd: #bfdbfe;
--may: #16a34a;
--may-light: #f0fdf4;
--may-bd: #bbf7d0;
--jun: #dc2626;
--jun-light: #fef2f2;
--jun-bd: #fecaca;
--jul: #7c3aed;
--jul-light: #f5f3ff;
--jul-bd: #ddd6fe;
--holiday: #ef4444;
--makeup: #f59e0b;
--event: #7c3aed;
--exam: #0891b2;
--shadow: 0 2px 12px rgba(0,0,0,0.07);
}
* { 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.6;
min-height: 100vh;
}
/* ── 헤더 ── */
.page-header {
background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 60%, #4f46e5 100%);
padding: 48px 24px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
pointer-events: none;
}
.header-label {
font-family: 'DM Mono', monospace;
font-size: 11px; letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 12px;
}
.page-header h1 {
font-size: clamp(1.8rem,4vw,2.8rem);
font-weight: 900; color: #fff;
letter-spacing: -.03em;
line-height: 1.1; margin-bottom: 10px;
}
.page-header h1 span { color: #93c5fd; }
.header-sub {
font-size: 14px; color: rgba(255,255,255,0.55);
margin-bottom: 24px;
}
.month-tabs {
display: flex; justify-content: center;
gap: 8px; flex-wrap: wrap;
}
.mtab {
padding: 7px 20px; border-radius: 20px;
border: 1.5px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.65);
font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: all .2s;
}
.mtab:hover, .mtab.active {
background: rgba(255,255,255,0.2);
color: #fff; border-color: rgba(255,255,255,0.45);
}
/* ── 래퍼 ── */
.wrapper {
max-width: 1080px;
margin: 0 auto;
padding: 36px 20px 80px;
}
/* ── 범례 ── */
.legend {
display: flex; gap: 16px; flex-wrap: wrap;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 13px 20px;
margin-bottom: 32px;
box-shadow: var(--shadow);
}
.legend-item {
display: flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--muted);
}
.legend-dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
}
/* ── 월 섹션 ── */
.month-section {
margin-bottom: 52px;
animation: fadeUp .5s ease both;
}
.month-section:nth-child(2) { animation-delay: .05s; }
.month-section:nth-child(3) { animation-delay: .10s; }
.month-section:nth-child(4) { animation-delay: .15s; }
.month-section:nth-child(5) { animation-delay: .20s; }
.month-header {
display: flex; align-items: center;
gap: 14px; margin-bottom: 18px;
}
.month-badge {
font-family: 'DM Mono', monospace;
font-size: 13px; font-weight: 700;
padding: 6px 18px; border-radius: 8px;
border: 2px solid;
}
.mb-apr { background: var(--apr-light); border-color: var(--apr-bd); color: var(--apr); }
.mb-may { background: var(--may-light); border-color: var(--may-bd); color: var(--may); }
.mb-jun { background: var(--jun-light); border-color: var(--jun-bd); color: var(--jun); }
.mb-jul { background: var(--jul-light); border-color: var(--jul-bd); color: var(--jul); }
.month-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.month-count {
margin-left: auto;
font-family: 'DM Mono', monospace;
font-size: 12px; color: var(--muted);
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 20px;
padding: 4px 14px;
}
/* ── 캘린더 ── */
.cal-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 14px;
}
.cal-head {
display: grid; grid-template-columns: repeat(7,1fr);
background: var(--surface2);
border-bottom: 1px solid var(--border);
}
.cal-head-cell {
padding: 10px 0; text-align: center;
font-family: 'DM Mono', monospace;
font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.cal-head-cell:first-child { color: var(--holiday); }
.cal-head-cell:last-child { color: #6366f1; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-cell {
min-height: 88px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 7px;
transition: background .15s;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--surface2); }
.cal-cell.empty { background: rgba(0,0,0,0.015); }
.cal-date {
font-family: 'DM Mono', monospace;
font-size: 14px; font-weight: 700;
width: 27px; height: 27px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
margin-bottom: 3px;
}
.cal-cell.is-sun .cal-date { color: var(--holiday); }
.cal-cell.is-sat .cal-date { color: #6366f1; }
.cal-cell.is-holiday .cal-date { background: var(--holiday); color: #fff; }
.cal-cell.is-makeup .cal-date { background: var(--makeup); color: #fff; }
.cal-cell.is-exam .cal-date { background: var(--exam); color: #fff; }
.ev-tag {
display: block;
font-size: 10px; font-weight: 600;
padding: 2px 5px; border-radius: 4px;
margin-bottom: 2px; line-height: 1.4;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.ev-holiday { background: rgba(239,68,68,0.1); color: #b91c1c; }
.ev-makeup { background: rgba(245,158,11,0.12); color: #92400e; }
.ev-event { background: rgba(124,58,237,0.1); color: #5b21b6; }
.ev-exam { background: rgba(8,145,178,0.1); color: #0e7490; }
.ev-info { background: rgba(37,99,235,0.08); color: #1d4ed8; }
.ev-grade { background: rgba(16,185,129,0.1); color: #065f46; }
/* ── 이벤트 목록 ── */
.event-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow);
}
.event-list-header {
padding: 11px 18px;
background: var(--surface2);
border-bottom: 1px solid var(--border);
font-family: 'DM Mono', monospace;
font-size: 10px; color: var(--muted);
letter-spacing: .15em; text-transform: uppercase;
}
.ev-item {
display: flex; align-items: flex-start;
gap: 13px; padding: 12px 18px;
border-bottom: 1px solid rgba(0,0,0,0.04);
transition: background .15s;
}
.ev-item:last-child { border-bottom: none; }
.ev-item:hover { background: var(--surface2); }
.ev-date-badge {
font-family: 'DM Mono', monospace;
font-size: 13px; font-weight: 700;
min-width: 52px; color: var(--muted);
flex-shrink: 0; padding-top: 1px;
}
.ev-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0; margin-top: 5px;
}
.ev-content { flex: 1; }
.ev-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ev-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
/* ── 배너 ── */
.day-banner {
display: flex; align-items: center;
gap: 14px; padding: 14px 18px;
border-radius: 10px; margin-top: 12px;
border: 1px solid;
}
.db-apr { background: var(--apr-light); border-color: var(--apr-bd); }
.db-may { background: var(--may-light); border-color: var(--may-bd); }
.db-jun { background: var(--jun-light); border-color: var(--jun-bd); }
.db-jul { background: var(--jul-light); border-color: var(--jul-bd); }
.db-num {
font-family: 'DM Mono', monospace;
font-size: 1.5rem; font-weight: 700;
flex-shrink: 0;
}
.db-apr .db-num { color: var(--apr); }
.db-may .db-num { color: var(--may); }
.db-jun .db-num { color: var(--jun); }
.db-jul .db-num { color: var(--jul); }
.db-text { font-size: 13px; color: var(--muted); line-height: 1.6; }
.db-text strong { color: var(--text); }
/* ── 하단 요약 ── */
.summary-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px 28px;
box-shadow: var(--shadow);
}
.summary-label {
font-family: 'DM Mono', monospace;
font-size: 10px; letter-spacing: .15em;
text-transform: uppercase; color: var(--muted);
margin-bottom: 18px;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
gap: 14px;
}
.sum-card {
padding: 16px; border-radius: 10px;
border: 1px solid;
}
.sc-title {
font-size: 12px; font-weight: 700;
margin-bottom: 8px;
}
.sc-body {
font-size: 13px; color: #3a3a34;
line-height: 1.8;
}
@media (max-width: 640px) {
.cal-cell { min-height: 62px; padding: 4px; }
.cal-date { font-size: 12px; width: 22px; height: 22px; }
.ev-tag { font-size: 9px; padding: 1px 4px; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- 헤더 -->
<div class="page-header">
<div class="header-label">2026학년도 학사력</div>
<h1>4월 · 5월 · 6월 · <span>7월</span></h1>
<p class="header-sub">2026학년도 1학기 주요 일정 안내</p>
<div class="month-tabs">
<a href="#apr" class="mtab">4월</a>
<a href="#may" class="mtab">5월</a>
<a href="#jun" class="mtab">6월</a>
<a href="#jul" class="mtab">7월</a>
</div>
</div>
<div class="wrapper">
<!-- 범례 -->
<div class="legend">
<div class="legend-item"><div class="legend-dot" style="background:var(--holiday);"></div>공휴일·휴일</div>
<div class="legend-item"><div class="legend-dot" style="background:var(--makeup);"></div>보강일</div>
<div class="legend-item"><div class="legend-dot" style="background:var(--exam);"></div>시험·평가</div>
<div class="legend-item"><div class="legend-dot" style="background:var(--apr);"></div>수업 관련</div>
<div class="legend-item"><div class="legend-dot" style="background:#10b981;"></div>성적·행정</div>
<div class="legend-item"><div class="legend-dot" style="background:var(--jul);"></div>방학·휴무</div>
</div>
<!-- ══════════ 4월 ══════════ -->
<div class="month-section" id="apr">
<div class="month-header">
<div class="month-badge mb-apr">APR</div>
<div class="month-title">4월</div>
<div class="month-count">30일</div>
</div>
<div class="cal-wrap">
<div class="cal-head">
<div class="cal-head-cell">일</div><div class="cal-head-cell">월</div>
<div class="cal-head-cell">화</div><div class="cal-head-cell">수</div>
<div class="cal-head-cell">목</div><div class="cal-head-cell">금</div>
<div class="cal-head-cell">토</div>
</div>
<div class="cal-grid">
<!-- 4/1(수)부터 시작 — 앞 빈칸 3개(일,월,화) -->
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell"><div class="cal-date">1</div></div>
<div class="cal-cell"><div class="cal-date">2</div></div>
<div class="cal-cell"><div class="cal-date">3</div></div>
<div class="cal-cell is-sat"><div class="cal-date">4</div></div>
<div class="cal-cell is-sun"><div class="cal-date">5</div></div>
<div class="cal-cell"><div class="cal-date">6</div></div>
<div class="cal-cell"><div class="cal-date">7</div></div>
<div class="cal-cell"><div class="cal-date">8</div></div>
<div class="cal-cell"><div class="cal-date">9</div></div>
<div class="cal-cell"><div class="cal-date">10</div></div>
<div class="cal-cell is-sat"><div class="cal-date">11</div></div>
<div class="cal-cell is-sun"><div class="cal-date">12</div></div>
<div class="cal-cell"><div class="cal-date">13</div></div>
<div class="cal-cell"><div class="cal-date">14</div></div>
<div class="cal-cell"><div class="cal-date">15</div></div>
<div class="cal-cell"><div class="cal-date">16</div></div>
<div class="cal-cell"><div class="cal-date">17</div></div>
<div class="cal-cell is-sat"><div class="cal-date">18</div></div>
<div class="cal-cell is-sun"><div class="cal-date">19</div></div>
<div class="cal-cell"><div class="cal-date">20</div></div>
<div class="cal-cell"><div class="cal-date">21</div></div>
<div class="cal-cell"><div class="cal-date">22</div></div>
<div class="cal-cell"><div class="cal-date">23</div></div>
<div class="cal-cell"><div class="cal-date">24</div></div>
<div class="cal-cell is-sat"><div class="cal-date">25</div></div>
<div class="cal-cell is-sun"><div class="cal-date">26</div></div>
<div class="cal-cell"><div class="cal-date">27</div></div>
<div class="cal-cell"><div class="cal-date">28</div></div>
<div class="cal-cell"><div class="cal-date">29</div></div>
<div class="cal-cell"><div class="cal-date">30</div></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
</div>
</div>
<div class="event-list">
<div class="event-list-header">📋 4월 주요 일정</div>
<div class="ev-item">
<div class="ev-date-badge">4월</div>
<div class="ev-dot" style="background:var(--apr);"></div>
<div class="ev-content">
<div class="ev-name">5주차 ~ 9주차 정규 수업</div>
<div class="ev-desc">공휴일 없이 전체 정규 수업 진행</div>
</div>
</div>
</div>
<div class="day-banner db-apr">
<div class="db-num">✓</div>
<div class="db-text"><strong>4월은 공휴일 없는 정상 수업 기간</strong>이에요. 5주차~9주차 수업이 빠짐없이 진행돼요.</div>
</div>
</div>
<!-- ══════════ 5월 ══════════ -->
<div class="month-section" id="may">
<div class="month-header">
<div class="month-badge mb-may">MAY</div>
<div class="month-title">5월</div>
<div class="month-count">31일</div>
</div>
<div class="cal-wrap">
<div class="cal-head">
<div class="cal-head-cell">일</div><div class="cal-head-cell">월</div>
<div class="cal-head-cell">화</div><div class="cal-head-cell">수</div>
<div class="cal-head-cell">목</div><div class="cal-head-cell">금</div>
<div class="cal-head-cell">토</div>
</div>
<div class="cal-grid">
<!-- 5/1(금)부터 — 앞 빈칸 5개(일~목) -->
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<!-- 5/1 금 — 근로자의날 -->
<div class="cal-cell is-holiday">
<div class="cal-date">1</div>
<span class="ev-tag ev-holiday">근로자의날</span>
<span class="ev-tag ev-makeup">보강 6/12</span>
</div>
<div class="cal-cell is-sat"><div class="cal-date">2</div></div>
<div class="cal-cell is-sun"><div class="cal-date">3</div></div>
<!-- 5/4 월 — 재량휴업일 -->
<div class="cal-cell is-holiday">
<div class="cal-date">4</div>
<span class="ev-tag ev-holiday">재량휴업일</span>
<span class="ev-tag ev-makeup">보강 6/15</span>
</div>
<!-- 5/5 화 — 어린이날 -->
<div class="cal-cell is-holiday">
<div class="cal-date">5</div>
<span class="ev-tag ev-holiday">어린이날</span>
<span class="ev-tag ev-makeup">보강 6/9</span>
</div>
<!-- 5/6 수 — 수업일수 60일 -->
<div class="cal-cell">
<div class="cal-date">6</div>
<span class="ev-tag ev-info">수업일수 60일</span>
</div>
<div class="cal-cell"><div class="cal-date">7</div></div>
<div class="cal-cell"><div class="cal-date">8</div></div>
<div class="cal-cell is-sat"><div class="cal-date">9</div></div>
<div class="cal-cell is-sun"><div class="cal-date">10</div></div>
<div class="cal-cell"><div class="cal-date">11</div></div>
<div class="cal-cell"><div class="cal-date">12</div></div>
<div class="cal-cell"><div class="cal-date">13</div></div>
<div class="cal-cell"><div class="cal-date">14</div></div>
<div class="cal-cell"><div class="cal-date">15</div></div>
<div class="cal-cell is-sat"><div class="cal-date">16</div></div>
<div class="cal-cell is-sun"><div class="cal-date">17</div></div>
<div class="cal-cell"><div class="cal-date">18</div></div>
<div class="cal-cell"><div class="cal-date">19</div></div>
<div class="cal-cell"><div class="cal-date">20</div></div>
<div class="cal-cell"><div class="cal-date">21</div></div>
<div class="cal-cell"><div class="cal-date">22</div></div>
<div class="cal-cell is-sat">
<div class="cal-date">23</div>
<span class="ev-tag ev-info">수업일수 90일</span>
</div>
<div class="cal-cell is-sun"><div class="cal-date">24</div></div>
<!-- 5/25 월 — 대체공휴일(부처님오신날) -->
<div class="cal-cell is-holiday">
<div class="cal-date">25</div>
<span class="ev-tag ev-holiday">대체공휴일</span>
<span class="ev-tag ev-holiday">부처님오신날</span>
<span class="ev-tag ev-makeup">보강 6/16</span>
</div>
<!-- 5/26 화 — 일반 수업일 -->
<div class="cal-cell">
<div class="cal-date">26</div>
</div>
<div class="cal-cell"><div class="cal-date">27</div></div>
<div class="cal-cell"><div class="cal-date">28</div></div>
<div class="cal-cell"><div class="cal-date">29</div></div>
<div class="cal-cell is-sat"><div class="cal-date">30</div></div>
<div class="cal-cell is-sun"><div class="cal-date">31</div></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
</div>
</div>
<div class="event-list">
<div class="event-list-header">📋 5월 주요 일정</div>
<div class="ev-item">
<div class="ev-date-badge">5/1</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">근로자의 날</div>
<div class="ev-desc">공휴일 · 보강일 : 6월 12일(금)</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">5/4</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">재량휴업일</div>
<div class="ev-desc">휴업 · 보강일 : 6월 15일(월)</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">5/5</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">어린이날</div>
<div class="ev-desc">공휴일 · 보강일 : 6월 9일(화)</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">5/6</div>
<div class="ev-dot" style="background:var(--apr);"></div>
<div class="ev-content">
<div class="ev-name">수업일수 60일 달성</div>
<div class="ev-desc">1학기 누적 수업일수 60일</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">5/23</div>
<div class="ev-dot" style="background:var(--apr);"></div>
<div class="ev-content">
<div class="ev-name">수업일수 90일 달성</div>
<div class="ev-desc">1학기 누적 수업일수 90일</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">5/25</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">부처님오신날 대체공휴일</div>
<div class="ev-desc">공휴일 · 보강일 : 6월 16일(화)</div>
</div>
</div>
</div>
<div class="day-banner db-may">
<div class="db-num">4일</div>
<div class="db-text">
<strong>5월 휴일 4일</strong> (근로자의날·재량휴업일·어린이날·대체공휴일)<br/>
모든 보강은 6월에 진행돼요.
</div>
</div>
</div>
<!-- ══════════ 6월 ══════════ -->
<div class="month-section" id="jun">
<div class="month-header">
<div class="month-badge mb-jun">JUN</div>
<div class="month-title">6월</div>
<div class="month-count">30일</div>
</div>
<div class="cal-wrap">
<div class="cal-head">
<div class="cal-head-cell">일</div><div class="cal-head-cell">월</div>
<div class="cal-head-cell">화</div><div class="cal-head-cell">수</div>
<div class="cal-head-cell">목</div><div class="cal-head-cell">금</div>
<div class="cal-head-cell">토</div>
</div>
<div class="cal-grid">
<!-- 6/1(월)부터 — 앞 빈칸 1개(일) -->
<div class="cal-cell empty"></div>
<!-- 6/1 월 — 수업일수 90일 -->
<div class="cal-cell">
<div class="cal-date">1</div>
<span class="ev-tag ev-info">수업일수 90일</span>
</div>
<div class="cal-cell"><div class="cal-date">2</div></div>
<!-- 6/3 수 — 전국동시지방선거 -->
<div class="cal-cell is-holiday">
<div class="cal-date">3</div>
<span class="ev-tag ev-holiday">지방선거</span>
<span class="ev-tag ev-makeup">보강 6/11</span>
</div>
<div class="cal-cell"><div class="cal-date">4</div></div>
<div class="cal-cell"><div class="cal-date">5</div></div>
<!-- 6/6 토 — 현충일 -->
<div class="cal-cell is-holiday">
<div class="cal-date">6</div>
<span class="ev-tag ev-holiday">현충일</span>
</div>
<div class="cal-cell is-sun"><div class="cal-date">7</div></div>
<div class="cal-cell"><div class="cal-date">8</div></div>
<!-- 6/9 화 — 보강(어린이날) -->
<div class="cal-cell is-makeup">
<div class="cal-date">9</div>
<span class="ev-tag ev-makeup">보강(어린이날)</span>
</div>
<!-- 6/10 수 — 보강(개교기념일 3/18) -->
<div class="cal-cell is-makeup">
<div class="cal-date">10</div>
<span class="ev-tag ev-makeup">보강(개교기념일)</span>
</div>
<!-- 6/11 목 — 보강(지방선거) -->
<div class="cal-cell is-makeup">
<div class="cal-date">11</div>
<span class="ev-tag ev-makeup">보강(지방선거)</span>
</div>
<!-- 6/12 금 — 보강(근로자의날) -->
<div class="cal-cell is-makeup">
<div class="cal-date">12</div>
<span class="ev-tag ev-makeup">보강(근로자의날)</span>
</div>
<div class="cal-cell is-sat"><div class="cal-date">13</div></div>
<div class="cal-cell is-sun"><div class="cal-date">14</div></div>
<!-- 6/15 월 — 보강(재량휴업일) -->
<div class="cal-cell is-makeup">
<div class="cal-date">15</div>
<span class="ev-tag ev-makeup">보강(재량휴업일)</span>
</div>
<!-- 6/16 화 — 보강(부처님오신날) -->
<div class="cal-cell is-makeup">
<div class="cal-date">16</div>
<span class="ev-tag ev-makeup">보강(부처님오신날)</span>
</div>
<!-- 6/17 수 — 기말고사 시작 -->
<div class="cal-cell is-exam">
<div class="cal-date">17</div>
<span class="ev-tag ev-exam">기말고사</span>
</div>
<div class="cal-cell is-exam">
<div class="cal-date">18</div>
<span class="ev-tag ev-exam">기말고사</span>
</div>
<div class="cal-cell is-exam">
<div class="cal-date">19</div>
<span class="ev-tag ev-exam">기말고사</span>
</div>
<div class="cal-cell is-sat"><div class="cal-date">20</div></div>
<div class="cal-cell is-sun"><div class="cal-date">21</div></div>
<div class="cal-cell is-exam">
<div class="cal-date">22</div>
<span class="ev-tag ev-exam">기말고사</span>
</div>
<div class="cal-cell is-exam">
<div class="cal-date">23</div>
<span class="ev-tag ev-exam">기말고사</span>
</div>
<div class="cal-cell"><div class="cal-date">24</div></div>
<div class="cal-cell"><div class="cal-date">25</div></div>
<!-- 6/26 금 — 성적입력 시작 -->
<div class="cal-cell">
<div class="cal-date">26</div>
<span class="ev-tag ev-grade">성적입력 시작</span>
</div>
<div class="cal-cell is-sat"><div class="cal-date">27</div></div>
<div class="cal-cell is-sun"><div class="cal-date">28</div></div>
<div class="cal-cell">
<div class="cal-date">29</div>
<span class="ev-tag ev-grade">성적입력</span>
</div>
<div class="cal-cell">
<div class="cal-date">30</div>
<span class="ev-tag ev-grade">성적입력</span>
</div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
</div>
</div>
<div class="event-list">
<div class="event-list-header">📋 6월 주요 일정</div>
<div class="ev-item">
<div class="ev-date-badge">6/3</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">전국동시지방선거</div>
<div class="ev-desc">선거일 휴일 · 보강일 : 6월 11일(목)</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">6/6</div>
<div class="ev-dot" style="background:var(--holiday);"></div>
<div class="ev-content">
<div class="ev-name">현충일 (토요일)</div>
<div class="ev-desc">공휴일</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">6/9~16</div>
<div class="ev-dot" style="background:var(--makeup);"></div>
<div class="ev-content">
<div class="ev-name">보강 기간 (6일)</div>
<div class="ev-desc">
6/9(어린이날) · 6/10(개교기념일) · 6/11(지방선거)<br/>
6/12(근로자의날) · 6/15(재량휴업일) · 6/16(부처님오신날 대체)
</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">6/17~23</div>
<div class="ev-dot" style="background:var(--exam);"></div>
<div class="ev-content">
<div class="ev-name">기말고사</div>
<div class="ev-desc">1학기 기말시험 기간</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">6/26~</div>
<div class="ev-dot" style="background:#10b981;"></div>
<div class="ev-content">
<div class="ev-name">성적 입력 및 강의평가</div>
<div class="ev-desc">기말고사 종료 후 성적 입력 및 강의평가 시작</div>
</div>
</div>
</div>
<div class="day-banner db-jun">
<div class="db-num">6일</div>
<div class="db-text">
<strong>6월 보강 6일</strong> (9·10·11·12·15·16일)<br/>
기말고사 6/17~23 · 성적입력 6/26~
</div>
</div>
</div>
<!-- ══════════ 7월 ══════════ -->
<div class="month-section" id="jul">
<div class="month-header">
<div class="month-badge mb-jul">JUL</div>
<div class="month-title">7월</div>
<div class="month-count">31일</div>
</div>
<div class="cal-wrap">
<div class="cal-head">
<div class="cal-head-cell">일</div><div class="cal-head-cell">월</div>
<div class="cal-head-cell">화</div><div class="cal-head-cell">수</div>
<div class="cal-head-cell">목</div><div class="cal-head-cell">금</div>
<div class="cal-head-cell">토</div>
</div>
<div class="cal-grid">
<!-- 7/1(수)부터 — 앞 빈칸 3개(일,월,화) -->
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<div class="cal-cell empty"></div>
<!-- 7/1 수 — 성적열람 및 정정 시작 -->
<div class="cal-cell">
<div class="cal-date">1</div>
<span class="ev-tag ev-grade">성적열람·정정</span>
</div>
<div class="cal-cell">
<div class="cal-date">2</div>
<span class="ev-tag ev-grade">성적열람·정정</span>
</div>
<div class="cal-cell">
<div class="cal-date">3</div>
<span class="ev-tag ev-grade">성적열람·정정</span>
</div>
<div class="cal-cell is-sat"><div class="cal-date">4</div></div>
<div class="cal-cell is-sun"><div class="cal-date">5</div></div>
<div class="cal-cell"><div class="cal-date">6</div></div>
<div class="cal-cell"><div class="cal-date">7</div></div>
<div class="cal-cell"><div class="cal-date">8</div></div>
<div class="cal-cell"><div class="cal-date">9</div></div>
<div class="cal-cell"><div class="cal-date">10</div></div>
<div class="cal-cell is-sat"><div class="cal-date">11</div></div>
<div class="cal-cell is-sun"><div class="cal-date">12</div></div>
<div class="cal-cell"><div class="cal-date">13</div></div>
<!-- 7/14~16 전과 신청, 재입학 신청 -->
<div class="cal-cell">
<div class="cal-date">14</div>
<span class="ev-tag ev-event">전과·재입학 신청</span>
</div>
<div class="cal-cell">
<div class="cal-date">15</div>
<span class="ev-tag ev-event">전과·재입학 신청</span>
</div>
<div class="cal-cell">
<div class="cal-date">16</div>
<span class="ev-tag ev-event">전과·재입학 신청</span>
</div>
<div class="cal-cell"><div class="cal-date">17</div></div>
<div class="cal-cell is-sat"><div class="cal-date">18</div></div>
<div class="cal-cell is-sun"><div class="cal-date">19</div></div>
<div class="cal-cell"><div class="cal-date">20</div></div>
<div class="cal-cell"><div class="cal-date">21</div></div>
<div class="cal-cell"><div class="cal-date">22</div></div>
<div class="cal-cell"><div class="cal-date">23</div></div>
<div class="cal-cell"><div class="cal-date">24</div></div>
<div class="cal-cell is-sat"><div class="cal-date">25</div></div>
<div class="cal-cell is-sun"><div class="cal-date">26</div></div>
<!-- 7/27~31 하계 집중휴무기간 -->
<div class="cal-cell is-holiday">
<div class="cal-date">27</div>
<span class="ev-tag ev-event">하계휴무(예정)</span>
</div>
<div class="cal-cell is-holiday">
<div class="cal-date">28</div>
<span class="ev-tag ev-event">하계휴무(예정)</span>
</div>
<div class="cal-cell is-holiday">
<div class="cal-date">29</div>
<span class="ev-tag ev-event">하계휴무(예정)</span>
</div>
<div class="cal-cell is-holiday">
<div class="cal-date">30</div>
<span class="ev-tag ev-event">하계휴무(예정)</span>
</div>
<div class="cal-cell is-holiday">
<div class="cal-date">31</div>
<span class="ev-tag ev-event">하계휴무(예정)</span>
</div>
</div>
</div>
<div class="event-list">
<div class="event-list-header">📋 7월 주요 일정</div>
<div class="ev-item">
<div class="ev-date-badge">7/1~3</div>
<div class="ev-dot" style="background:#10b981;"></div>
<div class="ev-content">
<div class="ev-name">성적 열람 및 정정 · 강의평가</div>
<div class="ev-desc">1학기 최종 성적 확인 및 정정 기간</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">7/14~16</div>
<div class="ev-dot" style="background:var(--event);"></div>
<div class="ev-content">
<div class="ev-name">전과 신청 · 재입학 신청</div>
<div class="ev-desc">학적 변동 관련 신청 기간</div>
</div>
</div>
<div class="ev-item">
<div class="ev-date-badge">7/27~31</div>
<div class="ev-dot" style="background:var(--jul);"></div>
<div class="ev-content">
<div class="ev-name">하계 집중휴무기간 (예정)</div>
<div class="ev-desc">하계 방학 집중휴무 기간 (예정)</div>
</div>
</div>
</div>
<div class="day-banner db-jul">
<div class="db-num">🌊</div>
<div class="db-text">
<strong>7월은 1학기 마무 리 기간</strong>이에요.<br/>
성적정정(1~3일) · 전과신청(14~16일) · 하계휴무(27~31일)
</div>
</div>
</div>
<!-- 하단 요약 -->
<div class="summary-box">
<div class="summary-label">📌 4~7월 핵심 요약</div>
<div class="summary-grid">
<div class="sum-card" style="background:var(--apr-light);border-color:var(--apr-bd);">
<div class="sc-title" style="color:var(--apr);">4월 — 정규 수업</div>
<div class="sc-body">공휴일 없음<br/>5주차~9주차 정상 수업</div>
</div>
<div class="sum-card" style="background:var(--may-light);border-color:var(--may-bd);">
<div class="sc-title" style="color:var(--may);">5월 — 공휴일 4일</div>
<div class="sc-body">
5/1 근로자의날<br/>
5/4 재량휴업일<br/>
5/5 어린이날<br/>
5/25 대체공휴일(부처님오신날)
</div>
</div>
<div class="sum-card" style="background:var(--jun-light);border-color:var(--jun-bd);">
<div class="sc-title" style="color:var(--jun);">6월 — 보강·기말</div>
<div class="sc-body">
6/9~16 보강 6일<br/>
6/17~23 기말고사<br/>
6/26~ 성적입력
</div>
</div>
<div class="sum-card" style="background:var(--jul-light);border-color:var(--jul-bd);">
<div class="sc-title" style="color:var(--jul);">7월 — 학기 마무리</div>
<div class="sc-body">
7/1~3 성적열람·정정<br/>
7/14~16 전과·재입학 신청<br/>
7/27~31 하계 집중휴무(예정)
</div>
</div>
</div>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.mtab');
const ids = ['apr','may','jun','jul'];
window.addEventListener('scroll', () => {
let current = '';
ids.forEach(id => {
const el = document.getElementById(id);
if (el && window.scrollY >= el.offsetTop - 130) current = id;
});
tabs.forEach((t,i) => t.classList.toggle('active', ids[i] === current));
});
</script>
</body>
</html>
결과와 배운 점
원본 파일도 얼마나 복잡하게 되어 있는지, claude도 헛갈리더라구요.
만들어서 보내드렸는데 교수님들이 좋아하셨습니다.
좋은 소스 주셔서 감사합니다.
