<!doctype html>

<head>

<style>

*{margin:0;padding:0;box-sizing:border-box}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8f9fa;color:#1a1a2e;line-height:1.7;min-height:100vh;display:flex;flex-direction:column}

a{color:#4f46e5;text-decoration:none}

.navbar{background:#fff;border-bottom:1px solid #e9ecef;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.05)}

.nav-container{max-width:1000px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}

.nav-logo{font-size:1.3rem;font-weight:700;color:#4f46e5;cursor:pointer}

.nav-links{display:flex;gap:1.5rem}

.nav-links a{color:#555;font-weight:500;font-size:.95rem;cursor:pointer}

.nav-links a:hover{color:#4f46e5}

.container{max-width:1000px;margin:0 auto;padding:2rem 1.5rem;flex:1;width:100%}

.hero{text-align:center;padding:3rem 1rem 2rem}

.hero h1{font-size:2.5rem;font-weight:800;color:#1a1a2e;margin-bottom:.5rem}

.hero p{color:#666;font-size:1.1rem;margin-bottom:1.5rem}

.stats{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem}

.stat{display:flex;flex-direction:column;align-items:center}

.stat-num{font-size:2rem;font-weight:800;color:#4f46e5}

.stat-label{font-size:.85rem;color:#999}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}

.filter-btn{padding:.4rem 1rem;border:1px solid #e0e0e0;border-radius:20px;background:#fff;color:#555;font-size:.9rem;cursor:pointer;transition:all .2s}

.filter-btn:hover{border-color:#4f46e5;color:#4f46e5}

.filter-btn.active{background:#4f46e5;color:#fff;border-color:#4f46e5}

.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}

.note-card{background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;border:1px solid #e9ecef;transition:all .2s;display:flex;flex-direction:column;cursor:pointer}

.note-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08);border-color:#c7d2fe}

.note-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}

.note-subject{background:#eef2ff;color:#4f46e5;padding:.2rem .7rem;border-radius:6px;font-size:.8rem;font-weight:600}

.note-date{font-size:.8rem;color:#aaa}

.note-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;color:#1a1a2e}

.note-summary{color:#666;font-size:.95rem;margin-bottom:1rem;flex:1}

.note-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}

.note-author{font-size:.85rem;color:#888}

.note-tags{display:flex;gap:.4rem;flex-wrap:wrap}

.note-tag{font-size:.75rem;color:#6b7280;background:#f3f4f6;padding:.15rem .5rem;border-radius:4px}

.note-detail{max-width:750px;margin:0 auto}

.back-link{display:inline-block;color:#4f46e5;font-size:.9rem;margin-bottom:1.5rem;font-weight:500;cursor:pointer}

.back-link:hover{text-decoration:underline}

.note-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #e9ecef}

.note-header h1{font-size:2rem;font-weight:800;color:#1a1a2e;margin-bottom:1rem;line-height:1.3}

.note-meta{display:flex;gap:1.5rem;color:#888;font-size:.9rem;margin-bottom:.75rem}

.note-content{font-size:1.05rem;line-height:1.8;color:#333}

.note-content h2{font-size:1.5rem;font-weight:700;margin:2rem 0 1rem;color:#1a1a2e;padding-bottom:.5rem;border-bottom:1px solid #e9ecef}

.note-content h3{font-size:1.2rem;font-weight:700;margin:1.5rem 0 .75rem;color:#1a1a2e}

.note-content p{margin-bottom:1rem}

.note-content ul,.note-content ol{margin:.5rem 0 1rem 1.5rem}

.note-content li{margin-bottom:.3rem}

.note-content code{background:#f3f4f6;padding:.15rem .4rem;border-radius:4px;font-size:.9em;color:#e11d48}

.note-content pre{background:#1a1a2e;color:#e9ecef;padding:1rem;border-radius:8px;overflow-x:auto;margin:1rem 0}

.note-content pre code{background:none;color:inherit;padding:0}

.note-content blockquote{border-left:4px solid #4f46e5;padding-left:1rem;margin:1rem 0;color:#666;font-style:italic}

.note-content table{width:100%;border-collapse:collapse;margin:1rem 0}

.note-content th,.note-content td{border:1px solid #e9ecef;padding:.5rem .75rem;text-align:left}

.note-content th{background:#f8f9fa;font-weight:600}

.about{max-width:750px;margin:0 auto}

.about h1{font-size:2rem;font-weight:800;margin-bottom:2rem;color:#1a1a2e}

.about-section{margin-bottom:2rem}

.about-section h2{font-size:1.3rem;font-weight:700;margin-bottom:.75rem;color:#1a1a2e}

.about-section p{color:#555;margin-bottom:.75rem}

.about-section ol,.about-section ul{margin:.5rem 0 1rem 1.5rem;color:#555}

.about-section li{margin-bottom:.4rem}

.about-section code{background:#f3f4f6;padding:.15rem .4rem;border-radius:4px;font-size:.9em;color:#e11d48}

.footer{text-align:center;padding:1.5rem;color:#999;font-size:.85rem;border-top:1px solid #e9ecef;background:#fff}

.page{display:none}

.page.active{display:block}

@media(max-width:600px){.hero h1{font-size:1.8rem}.notes-grid{grid-template-columns:1fr}.nav-container{flex-direction:column;gap:.5rem}}

</style>

</head>

<body>

<section class="hero"><h1>📚 스터디 노트 공유</h1><p>친구들과 함께 수업 필기, 요약 자료, 시험 공부 노트를 공유하는 공간입니다.</p><div class="stats"><div class="stat"><span class="stat-num">4</span><span class="stat-label">노트</span></div><div class="stat"><span class="stat-num">4</span><span class="stat-label">과목</span></div></div></section>

<div class="note-card" data-subject="수학" onclick="showPage('note-math')"><div class="note-card-header"><span class="note-subject">수학</span><span class="note-date">10월 28일</span></div><h3 class="note-title">수학 1차 함수 정리</h3><p class="note-summary">1차 함수의 그래프, 기울기, y절편과 실생활 활용 문제를 정리한 노트입니다.</p><div class="note-footer"><span class="note-author">✍️ 김학생</span><div class="note-tags"><span class="note-tag">#일차함수</span><span class="note-tag">#중간고사</span></div></div></div>

<div class="note-card" data-subject="영어" onclick="showPage('note-english')"><div class="note-card-header"><span class="note-subject">영어</span><span class="note-date">10월 25일</span></div><h3 class="note-title">영어 관사 a/an/the 완전 정복</h3><p class="note-summary">부정관사(a/an)와 정관사(the)의 사용법과 예외 상황을 정리한 노트입니다.</p><div class="note-footer"><span class="note-author">✍️ 이영어</span><div class="note-tags"><span class="note-tag">#문법</span><span class="note-tag">#관사</span></div></div></div>

<div class="note-card" data-subject="과학" onclick="showPage('note-science')"><div class="note-card-header"><span class="note-subject">과학</span><span class="note-date">10월 20일</span></div><h3 class="note-title">과학 광합성 메커니즘</h3><p class="note-summary">광합성의 전체 과정과 명반응/암반응을 시각적으로 이해하기 쉽게 정리한 노트입니다.</p><div class="note-footer"><span class="note-author">✍️ 박과학</span><div class="note-tags"><span class="note-tag">#생물</span><span class="note-tag">#광합성</span></div></div></div>

<div class="note-card" data-subject="역사" onclick="showPage('note-history')"><div class="note-card-header"><span class="note-subject">역사</span><span class="note-date">10월 15일</span></div><h3 class="note-title">역사 조선 건국과 세종대왕</h3><p class="note-summary">조선 건국 과정부터 세종대왕의 업적과 한글 창제까지 핵심 내용을 정리한 노트입니다.</p><div class="note-footer"><span class="note-author">✍️ 최역사</span><div class="note-tags"><span class="note-tag">#조선</span><span class="note-tag">#세종</span></div></div></div>

</section>

</div>

<p><strong>1차 함수</strong>는 <code>y = ax + b</code> 형태로 표현되는 함수입니다.</p>

<ul><li><code>a</code>: 기울기 (slope)</li><li><code>b</code>: y절편 (y-intercept)</li></ul>

<ol><li>1차 함수의 그래프는 <strong>직선</strong>입니다.</li><li>기울기 <code>a</code>가 양수면 우상향, 음수면 우하향합니다.</li><li>y절편 <code>b</code>는 그래프가 y축과 만나는 점입니다.</li></ol>

<blockquote>💡 <strong>팁</strong>: 기울기가 클수록 그래프가 더 가파릅니다.</blockquote>

<p>함수 <code>y = 2x + 3</code> 의 그래프를 그려보세요.</p>

</div>

</article>

</div>

<ul><li><strong>a</strong>: 자음 소리로 시작하는 단어 앞 (a book, a car, a university)</li><li><strong>an</strong>: 모음 소리로 시작하는 단어 앞 (an apple, an hour, an MBA)</li></ul>

<blockquote>⚠️ <strong>주의</strong>: 철자가 아니라 <strong>소리</strong>로 판단합니다!</blockquote>

<ol><li>처음 언급하는 명사 → I saw <strong>a</strong> cat. The cat was cute.</li><li>직업/신분 → She is <strong>a</strong> teacher.</li><li>"하나의" → I'll be back in <strong>an</strong> hour.</li></ol>

<ol><li>앞서 언급한 명사 → I bought <strong>a</strong> book. <strong>The</strong> book is interesting.</li><li>유일한 것 → <strong>the</strong> sun, <strong>the</strong> moon, <strong>the</strong> earth</li><li>서수 앞 → <strong>the</strong> first, <strong>the</strong> second</li><li>최상급 앞 → <strong>the</strong> best, <strong>the</strong> most beautiful</li></ol>

<table><tr><th>상황</th><th>예시</th></tr><tr><td>추상명사</td><td>Love is important.</td></tr><tr><td>복수명사</td><td>Dogs are loyal.</td></tr><tr><td>식사</td><td>I have breakfast at 7.</td></tr><tr><td>고유명사</td><td>Korea, Seoul, Mount Everest</td></tr><tr><td>언어/학과</td><td>I study English and math.</td></tr></table>

<ul><li><strong>play the piano</strong> (악기 앞에는 the)</li><li><strong>play soccer</strong> (운동 앞에는 관사 없음)</li><li><strong>go to school</strong> (목적: 공부하러)</li><li><strong>in the morning</strong> / <strong>at night</strong></li></ul>

<ul><li>~~play piano~~ → play <strong>the</strong> piano</li><li>~~play the soccer~~ → play soccer</li><li>~~in morning~~ → in <strong>the</strong> morning</li></ul>

<ol><li>(a / an / the) ___ honest person is always trusted.</li><li>I love ___ music. Especially ___ classical music.</li><li>She is ___ best student in ___ class.</li></ol>

<ol><li><strong>An</strong> honest person is always trusted. (honest의 h는 묵음)</li><li>I love music. Especially <strong>the</strong> classical music.</li><li>She is <strong>the</strong> best student in <strong>the</strong> class.</li></ol>

</div>

</article>

</div>

<h2>광합성이란?</h2>

<p>녹색 식물이 빛 에너지를 이용하여 이산화탄소와 물에서 <strong>포도당과 산소</strong>를 합성하는 과정입니다.</p>

<h3>1. 명반응 (Light Reaction)</h3>

<ul><li><strong>장소</strong>: 엽록체의 그라나 (틸라코이드 막)</li><li><strong>조건</strong>: 빛이 필요</li><li><strong>과정</strong>: 빛 에너지 흡수 → 물 분해 → 산소 발생, ATP와 NADPH 생성</li></ul>

<h3>2. 암반응 (Calvin Cycle)</h3>

<ul><li><strong>장소</strong>: 엽록체의 스트로마</li><li><strong>조건</strong>: 빛이 직접 필요 없음</li><li><strong>과정</strong>: CO₂ 고정 → ATP와 NADPH 이용 → 포도당 합성</li></ul>

<table><tr><th>항목</th><th>명반응</th><th>암반응</th></tr><tr><td>장소</td><td>그라나</td><td>스트로마</td></tr><tr><td>빛 필요</td><td>O</td><td>X</td></tr><tr><td>입력</td><td>물, 빛</td><td>CO₂, ATP, NADPH</td></tr><tr><td>출력</td><td>O₂, ATP, NADPH</td><td>포도당</td></tr></table>

<ol><li>잎을 알코올에 담가 엽록소 제거</li><li>요오드-요오드화칼륨 용액 적용</li><li><strong>남색</strong>으로 변하면 전분 존재 확인</li></ol>

<blockquote>💡 빛을 받은 잎만 전분이 검출됩니다.</blockquote>

<ol><li>명반응에서 발생하는 산소는 어디서 오는가?</li><li>암반응의 장소는?</li><li>빛이 없을 때 광합성의 어느 단계가 멈추는가? 왜?</li></ol>

</div>

</article>

</div>

<ol><li><strong>고려 말기</strong> 권문세족의 부정부패</li><li><strong>위화도 회군</strong> (1388년) — 이성계가 요동 원정 중 회군하여 정권 장악</li><li><strong>새 왕조</strong>의 필요성 대두</li></ol>

<h2>세종대왕의 업적 (1418~1450)</h2>

<ol><li>위화도 회군이 일어난 연도와 그 의미는?</li><li>세종대왕이 한글을 창제한 목적은?</li><li>측우기의 역사적 의의를 설명하시오.</li></ol>

</div>

</article>

</div>

<div class="about-section"><h2>이 플랫폼은 무엇인가요?</h2><p>학교 친구들과 수업 필기, 요약 자료, 시험 공부 노트를 쉽게 공유할 수 있는 플랫폼입니다.</p></div>

<div class="about-section"><h2>주요 기능</h2><ul><li>📝 과목별 노트 정리</li><li>🏷️ 과목별 필터링 & 태그 시스템</li><li>📱 모바일 반응형 디자인</li><li>⚡ Cloudflare 글로벌 네트워크에서 빠른 로딩</li><li>🔒 무료 호스팅</li></ul></div>

</div>

</main>

<footer class="footer"><p>📚 스터디 노트 공유 플랫폼 · Cloudflare Pages에서 호스팅됨</p></footer>

function showPage(id){

document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));

document.getElementById('page-'+id).classList.add('active');

window.scrollTo(0,0);

}

function filterNotes(subject,btn){

document.querySelectorAll('.filter-btn').forEach(b=>b.classList.remove('active'));

btn.classList.add('active');

document.querySelectorAll('.note-card').forEach(c=>{

c.style.display=(subject==='all'||c.dataset.subject===subject)?'':'none';

});

}

</script>

</body>

</html>