index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>알고리즘 & 개발 완벽 가이드</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .hero {
            text-align: center;
            padding: 60px 0 40px;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 40px;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto;
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 32px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .part-section {
            margin-bottom: 48px;
        }

        .part-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .part-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }

        .part-icon.p1 { background: linear-gradient(135deg, #667eea, #764ba2); }
        .part-icon.p2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .part-icon.p3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .part-icon.p4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
        .part-icon.p5 { background: linear-gradient(135deg, #fa709a, #fee140); }
        .part-icon.p6 { background: linear-gradient(135deg, #a8edea, #fed6e3); }
        .part-icon.p7 { background: linear-gradient(135deg, #667eea, #764ba2); }

        .part-title {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .chapter-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .chapter-card {
            display: block;
            padding: 20px;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.2s;
        }

        .chapter-card:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(92, 107, 192, 0.15);
            transform: translateY(-2px);
        }

        .chapter-number {
            display: inline-block;
            width: 28px;
            height: 28px;
            background: var(--bg-sidebar);
            border-radius: 6px;
            text-align: center;
            line-height: 28px;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .chapter-card:hover .chapter-number {
            background: var(--primary-color);
            color: white;
        }

        .chapter-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .chapter-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .quick-start {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 32px;
            border-radius: 12px;
            margin-bottom: 48px;
        }

        .quick-start h3 {
            color: white;
            margin-top: 0;
            margin-bottom: 16px;
        }

        .quick-start p {
            color: rgba(255,255,255,0.9);
            margin-bottom: 20px;
        }

        .quick-start-links {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .quick-start-links a {
            display: inline-block;
            padding: 10px 20px;
            background: rgba(255,255,255,0.2);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            transition: background 0.2s;
        }

        .quick-start-links a:hover {
            background: rgba(255,255,255,0.3);
        }

        .main.home {
            max-width: 1100px;
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 1.8rem;
            }

            .stats {
                gap: 24px;
            }

            .chapter-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <button class="menu-toggle" onclick="toggleSidebar()">☰</button>
        <h1><a href="index.html">알고리즘 & 개발 완벽 가이드</a></h1>
    </header>

    <nav class="sidebar" id="sidebar">
        <div class="sidebar-section">
            <div class="sidebar-part">Part 1: 알고리즘 기초</div>
            <a href="pages/01-big-o.html" class="sidebar-item">1. Big-O & 기본 패턴</a>
            <a href="pages/02-brute-force.html" class="sidebar-item">2. Brute-Force & Recursion</a>
            <a href="pages/03-search.html" class="sidebar-item">3. 탐색 알고리즘</a>
            <a href="pages/04-basic-sort.html" class="sidebar-item">4. 기초 정렬</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 2: 자료구조</div>
            <a href="pages/05-linkedlist.html" class="sidebar-item">5. LinkedList</a>
            <a href="pages/06-stack-queue.html" class="sidebar-item">6. Stack & Queue & Deque</a>
            <a href="pages/07-heap.html" class="sidebar-item">7. Heap & Priority Queue</a>
            <a href="pages/08-advanced-sort.html" class="sidebar-item">8. 고급 정렬</a>
            <a href="pages/24-hashmap.html" class="sidebar-item">9. HashMap</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 3: 핵심 알고리즘</div>
            <a href="pages/09-dp.html" class="sidebar-item">10. Dynamic Programming</a>
            <a href="pages/10-backtracking.html" class="sidebar-item">11. 백트래킹 & 가지치기</a>
            <a href="pages/17-python-lib.html" class="sidebar-item">12. 그리디 알고리즘</a>
            <a href="pages/11-graph.html" class="sidebar-item">13. 그래프 알고리즘</a>
            <a href="pages/12-string.html" class="sidebar-item">14. 문자열 알고리즘</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 4: BFS/DFS 심화</div>
            <a href="pages/13-bfs-master.html" class="sidebar-item">15. BFS 4단계 마스터</a>
            <a href="pages/14-simulation.html" class="sidebar-item">16. 시뮬레이션 & 행렬 회전</a>
            <a href="pages/15-tree.html" class="sidebar-item">17. 트리 탐색 & 손코딩</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 5: Python 실전</div>
            <a href="pages/16-list-comprehension.html" class="sidebar-item">18. List Comprehension</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 6: 백엔드 개발</div>
            <a href="pages/18-design-pattern.html" class="sidebar-item">19. 디자인 패턴 23선</a>
            <a href="pages/19-transaction.html" class="sidebar-item">20. 트랜잭션 & DB</a>
            <a href="pages/20-http-rest.html" class="sidebar-item">21. HTTP & REST API</a>
            <a href="pages/21-architecture.html" class="sidebar-item">22. 아키텍처 설계</a>
            <a href="pages/22-nodejs.html" class="sidebar-item">23. Node.js 백엔드</a>
        </div>

        <div class="sidebar-section">
            <div class="sidebar-part">Part 7: 부록</div>
            <a href="pages/23-os-system.html" class="sidebar-item">24. 운영체제 (OS)</a>
        </div>
    </nav>

    <main class="main home">
        <div class="hero">
            <h1>알고리즘 & 개발 완벽 가이드</h1>
            <p>코딩 테스트 준비부터 백엔드 개발까지, 체계적으로 정리된 학습 자료</p>
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number">24</div>
                    <div class="stat-label">챕터</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">7</div>
                    <div class="stat-label">파트</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">100+</div>
                    <div class="stat-label">코드 예제</div>
                </div>
            </div>
        </div>

        <div class="quick-start">
            <h3>빠른 시작</h3>
            <p>학습 목표에 따라 시작점을 선택하세요</p>
            <div class="quick-start-links">
                <a href="pages/01-big-o.html">처음부터 시작</a>
                <a href="pages/09-dp.html">DP 집중 학습</a>
                <a href="pages/13-bfs-master.html">BFS/DFS 심화</a>
                <a href="pages/18-design-pattern.html">백엔드 개발</a>
            </div>
        </div>

        <!-- Part 1 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p1">1</div>
                <h2 class="part-title">Part 1: 알고리즘 기초</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/01-big-o.html" class="chapter-card">
                    <span class="chapter-number">01</span>
                    <h3 class="chapter-title">Big-O & 기본 패턴</h3>
                    <p class="chapter-desc">시간복잡도 이해, 투 포인터, 슬라이딩 윈도우, 해시맵 패턴</p>
                </a>
                <a href="pages/02-brute-force.html" class="chapter-card">
                    <span class="chapter-number">02</span>
                    <h3 class="chapter-title">Brute-Force & Recursion</h3>
                    <p class="chapter-desc">순열, 조합, 부분집합, 재귀, 꼬리 재귀, 트램폴린</p>
                </a>
                <a href="pages/03-search.html" class="chapter-card">
                    <span class="chapter-number">03</span>
                    <h3 class="chapter-title">탐색 알고리즘</h3>
                    <p class="chapter-desc">선형 탐색, 이진 탐색, bisect 모듈 활용</p>
                </a>
                <a href="pages/04-basic-sort.html" class="chapter-card">
                    <span class="chapter-number">04</span>
                    <h3 class="chapter-title">기초 정렬</h3>
                    <p class="chapter-desc">버블, 선택, 삽입 정렬의 원리와 구현</p>
                </a>
            </div>
        </section>

        <!-- Part 2 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p2">2</div>
                <h2 class="part-title">Part 2: 자료구조</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/05-linkedlist.html" class="chapter-card">
                    <span class="chapter-number">05</span>
                    <h3 class="chapter-title">LinkedList</h3>
                    <p class="chapter-desc">단일, 이중, 원형 연결 리스트 구현</p>
                </a>
                <a href="pages/06-stack-queue.html" class="chapter-card">
                    <span class="chapter-number">06</span>
                    <h3 class="chapter-title">Stack & Queue & Deque</h3>
                    <p class="chapter-desc">LIFO, FIFO 구조와 활용 패턴</p>
                </a>
                <a href="pages/07-heap.html" class="chapter-card">
                    <span class="chapter-number">07</span>
                    <h3 class="chapter-title">Heap & Priority Queue</h3>
                    <p class="chapter-desc">힙 구조, heapify, heapq 라이브러리</p>
                </a>
                <a href="pages/08-advanced-sort.html" class="chapter-card">
                    <span class="chapter-number">08</span>
                    <h3 class="chapter-title">고급 정렬</h3>
                    <p class="chapter-desc">Quick, Merge, Heap Sort 분할 정복</p>
                </a>
                <a href="pages/24-hashmap.html" class="chapter-card">
                    <span class="chapter-number">09</span>
                    <h3 class="chapter-title">HashMap</h3>
                    <p class="chapter-desc">Hash Function, Collision, Chaining, Rehashing</p>
                </a>
            </div>
        </section>

        <!-- Part 3 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p3">3</div>
                <h2 class="part-title">Part 3: 핵심 알고리즘</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/09-dp.html" class="chapter-card">
                    <span class="chapter-number">10</span>
                    <h3 class="chapter-title">Dynamic Programming</h3>
                    <p class="chapter-desc">상태 설계, 점화식, Top-down vs Bottom-up</p>
                </a>
                <a href="pages/10-backtracking.html" class="chapter-card">
                    <span class="chapter-number">11</span>
                    <h3 class="chapter-title">백트래킹 & 가지치기</h3>
                    <p class="chapter-desc">N-Queen, N과 M 시리즈, Pruning 기법</p>
                </a>
                <a href="pages/17-python-lib.html" class="chapter-card">
                    <span class="chapter-number">12</span>
                    <h3 class="chapter-title">그리디 알고리즘</h3>
                    <p class="chapter-desc">탐욕적 선택, 최적 부분 구조, 활동 선택</p>
                </a>
                <a href="pages/11-graph.html" class="chapter-card">
                    <span class="chapter-number">13</span>
                    <h3 class="chapter-title">그래프 알고리즘</h3>
                    <p class="chapter-desc">Dijkstra, MST, 위상 정렬</p>
                </a>
                <a href="pages/12-string.html" class="chapter-card">
                    <span class="chapter-number">14</span>
                    <h3 class="chapter-title">문자열 알고리즘</h3>
                    <p class="chapter-desc">패턴 매칭, 회문, 문자열 DP</p>
                </a>
            </div>
        </section>

        <!-- Part 4 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p4">4</div>
                <h2 class="part-title">Part 4: BFS/DFS 심화</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/13-bfs-master.html" class="chapter-card">
                    <span class="chapter-number">15</span>
                    <h3 class="chapter-title">BFS 4단계 마스터</h3>
                    <p class="chapter-desc">기본 → 상태 → 동적 보드 → 완전탐색</p>
                </a>
                <a href="pages/14-simulation.html" class="chapter-card">
                    <span class="chapter-number">16</span>
                    <h3 class="chapter-title">시뮬레이션 & 행렬 회전</h3>
                    <p class="chapter-desc">방향 배열, 90도 회전, 테두리 회전</p>
                </a>
                <a href="pages/15-tree.html" class="chapter-card">
                    <span class="chapter-number">17</span>
                    <h3 class="chapter-title">트리 탐색 & 손코딩</h3>
                    <p class="chapter-desc">트리 순회, BST, 손코딩 핵심 유형</p>
                </a>
            </div>
        </section>

        <!-- Part 5 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p5">5</div>
                <h2 class="part-title">Part 5: Python 실전</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/16-list-comprehension.html" class="chapter-card">
                    <span class="chapter-number">18</span>
                    <h3 class="chapter-title">List Comprehension</h3>
                    <p class="chapter-desc">Pythonic 문법, 조건 필터링, 중첩</p>
                </a>
            </div>
        </section>

        <!-- Part 6 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p6">6</div>
                <h2 class="part-title">Part 6: 백엔드 개발</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/18-design-pattern.html" class="chapter-card">
                    <span class="chapter-number">19</span>
                    <h3 class="chapter-title">디자인 패턴 23선</h3>
                    <p class="chapter-desc">생성, 구조, 행동, 엔터프라이즈 패턴</p>
                </a>
                <a href="pages/19-transaction.html" class="chapter-card">
                    <span class="chapter-number">20</span>
                    <h3 class="chapter-title">트랜잭션 & DB</h3>
                    <p class="chapter-desc">ACID, Isolation Level, Lock, 데드락</p>
                </a>
                <a href="pages/20-http-rest.html" class="chapter-card">
                    <span class="chapter-number">21</span>
                    <h3 class="chapter-title">HTTP & REST API</h3>
                    <p class="chapter-desc">HTTP 메서드, 상태 코드, 인증, CORS</p>
                </a>
                <a href="pages/21-architecture.html" class="chapter-card">
                    <span class="chapter-number">22</span>
                    <h3 class="chapter-title">아키텍처 설계</h3>
                    <p class="chapter-desc">클린, 헥사고날, DDD, MSA</p>
                </a>
                <a href="pages/22-nodejs.html" class="chapter-card">
                    <span class="chapter-number">23</span>
                    <h3 class="chapter-title">Node.js 백엔드</h3>
                    <p class="chapter-desc">Express, MongoDB, JWT, 에러 처리</p>
                </a>
            </div>
        </section>

        <!-- Part 7 -->
        <section class="part-section">
            <div class="part-header">
                <div class="part-icon p7">+</div>
                <h2 class="part-title">Part 7: 부록</h2>
            </div>
            <div class="chapter-grid">
                <a href="pages/23-os-system.html" class="chapter-card">
                    <span class="chapter-number">24</span>
                    <h3 class="chapter-title">운영체제 (OS)</h3>
                    <p class="chapter-desc">프로세스, 스레드, 메모리, 스케줄링, 파일시스템</p>
                </a>
            </div>
        </section>

        <footer>
            <p>알고리즘 & 개발 완벽 가이드</p>
            <p style="font-size: 0.85rem; margin-top: 8px;">Generated from 알고리즘 강의 원본 자료</p>
        </footer>
    </main>

    <script>
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
        }
    </script>
</body>
</html>