cs-visualizer/index.html at main · M1zz/cs-visualizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="ko" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Visualizer — 컴퓨터 공학 개념 시각화</title>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
/* extra landing styles */
.chapter-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:2.5rem;position:relative;z-index:1;padding:0 20px;max-width:1080px;width:100%;}
@media(max-width:820px){.chapter-nav{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.chapter-nav{grid-template-columns:1fr 1fr;}}
</style>
</head>
<body>
<header class="hero">
  <div class="hero-grid"></div>
  <h1>CS <span>Visualizer</span></h1>
  <p>컴공을 나오지 않아도 괜찮습니다. 이진수부터 고급 알고리즘까지 — 컴퓨터 공학의 핵심 개념을 인터랙티브 시각화로 직접 체험하세요.</p>
  <div class="chapter-nav">
    <a href="ch1.html" class="ch-card ch1">
      <div class="ch-card-num">CHAPTER 01</div>
      <div class="ch-card-name">컴퓨터의 언어</div>
      <div class="ch-card-topics">이진수 · 논리게이트 · 진법변환 · 문자인코딩</div>
    </a>
    <a href="ch2.html" class="ch-card ch2">
      <div class="ch-card-num">CHAPTER 02</div>
      <div class="ch-card-name">자료구조</div>
      <div class="ch-card-topics">배열/LL · 스택&큐 · BST · 해시 · 힙 · Union-Find · 세그먼트트리 · 펜윅트리</div>
    </a>
    <a href="ch3.html" class="ch-card ch3">
      <div class="ch-card-num">CHAPTER 03</div>
      <div class="ch-card-name">알고리즘</div>
      <div class="ch-card-topics">정렬 · 탐색 · 재귀 · 빅오 · 비트마스크 · 접미사배열</div>
    </a>
    <a href="ch4.html" class="ch-card ch4">
      <div class="ch-card-num">CHAPTER 04</div>
      <div class="ch-card-name">그래프 알고리즘</div>
      <div class="ch-card-topics">그래프 · DFS/BFS · MST · 다익스트라 · 사이클 탐지</div>
    </a>
    <a href="ch5.html" class="ch-card ch5">
      <div class="ch-card-num">CHAPTER 05</div>
      <div class="ch-card-name">고급 알고리즘</div>
      <div class="ch-card-topics">네트워크플로우 · 이분매칭 · 볼록껍질 · TSP · NP-Complete</div>
    </a>
    <a href="ch6.html" class="ch-card ch6">
      <div class="ch-card-num">CHAPTER 06</div>
      <div class="ch-card-name">운영체제</div>
      <div class="ch-card-topics">메모리 · 가상메모리 · 스케줄링 · 데드락</div>
    </a>
    <a href="ch7.html" class="ch-card ch7">
      <div class="ch-card-num">CHAPTER 07</div>
      <div class="ch-card-name">컴퓨터 구조</div>
      <div class="ch-card-topics">CPU동작원리 · 캐시메모리</div>
    </a>
    <a href="ch8.html" class="ch-card ch8">
      <div class="ch-card-num">CHAPTER 08</div>
      <div class="ch-card-name">네트워크</div>
      <div class="ch-card-topics">OSI7계층 · TCP · HTTP · DNS</div>
    </a>
    <a href="ch9.html" class="ch-card ch9">
      <div class="ch-card-num">CHAPTER 09</div>
      <div class="ch-card-name">보안</div>
      <div class="ch-card-topics">암호화 · 해시함수</div>
    </a>
    <a href="ch10.html" class="ch-card ch10">
      <div class="ch-card-num">CHAPTER 10</div>
      <div class="ch-card-name">데이터베이스</div>
      <div class="ch-card-topics">SQL · 정규화 · 트랜잭션 · 인덱스 · NoSQL</div>
    </a>
    <a href="ch11.html" class="ch-card ch11">
      <div class="ch-card-num">CHAPTER 11</div>
      <div class="ch-card-name">OOP & 패러다임</div>
      <div class="ch-card-topics">객체지향 · SOLID · 함수형 · 패러다임 비교</div>
    </a>
    <a href="ch12.html" class="ch-card ch12">
      <div class="ch-card-num">CHAPTER 12</div>
      <div class="ch-card-name">디자인 패턴</div>
      <div class="ch-card-topics">Singleton · Factory · Observer · Strategy · MVC</div>
    </a>
    <a href="ch13.html" class="ch-card ch13">
      <div class="ch-card-num">CHAPTER 13</div>
      <div class="ch-card-name">시스템 & 언어</div>
      <div class="ch-card-topics">컴파일러 · 인터프리터 · 시스템콜 · IPC · GC</div>
    </a>
    <a href="ch14.html" class="ch-card ch14">
      <div class="ch-card-num">CHAPTER 14</div>
      <div class="ch-card-name">Git & 버전관리</div>
      <div class="ch-card-topics">commit · branch · merge · rebase · 협업 전략</div>
    </a>
  </div>
</header>
<footer>
  <p>CS Visualizer · MIT License · <a href="https://github.com/M1zz/cs-visualizer" style="color:var(--accent);text-decoration:none;">GitHub</a></p>
</footer>
<button class="theme-toggle-btn" id="themeToggleIndex" title="다크 모드로 전환">🌙</button>
<script>
(function(){
  const btn=document.getElementById('themeToggleIndex');
  const saved=localStorage.getItem('cs_viz_theme')||'light';
  document.documentElement.setAttribute('data-theme',saved);
  function upd(){const dark=document.documentElement.getAttribute('data-theme')==='dark';btn.textContent=dark?'☀️':'🌙';btn.title=dark?'라이트 모드로 전환':'다크 모드로 전환';}
  upd();
  btn.addEventListener('click',()=>{
    const next=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';
    document.documentElement.setAttribute('data-theme',next);
    localStorage.setItem('cs_viz_theme',next);upd();
  });
})();
</script>
</body>
</html>