CausalInferenceLab.github.io/index.html at main · CausalInferenceLab/CausalInferenceLab.github.io · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Causal Inference Hub | 가짜연구소 인과추론팀</title>
<meta name="description" content="인과추론에서 AI 시대의 데이터 리터러시까지. 가짜연구소 인과추론팀이 2022년부터 함께 만든 오픈소스와 커리큘럼을 한곳에 모은 허브입니다.">
<meta property="og:title" content="Causal Inference Hub | 가짜연구소 인과추론팀">
<meta property="og:description" content="웹북, 영상, R 패키지까지. 2022년부터 함께 만든 인과추론 오픈소스와 L0–L4 커리큘럼.">
<meta property="og:image" content="https://causalinferencelab.github.io/assets/img/og-hub.png">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="assets/img/team-mark.png">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap">
<link rel="stylesheet" href="assets/css/hub.css">
</head>
<body>
<a class="skip" href="#main">본문으로 건너뛰기</a>

<header class="site-header">
  <div class="wrap header-row">
    <a class="brand" href="#top" aria-label="Causal Inference Hub 처음으로">
      <img class="brand-logo" src="assets/img/team-mark.png" alt="" width="34" height="34">
      <span class="brand-text"><span class="brand-name">Causal Inference Hub</span><span class="brand-sub">가짜연구소 인과추론팀</span></span>
    </a>
    <nav class="site-nav" aria-label="주요 메뉴">
      <a href="#curriculum">커리큘럼</a>
      <a href="#contrib">기여</a>
      <a href="#events">행사</a>
      <a href="#reading">읽을거리</a>
      <a href="#join">참여하기</a>
    </nav>
  </div>
</header>

<main id="main">
  <section class="hero" id="top" aria-labelledby="hero-title">
    <div class="wrap">
      <div class="banner">
        <div class="banner-main">
          <p class="banner-kicker"><span>Pseudo-Lab</span><span class="sep" aria-hidden="true"></span>인과추론팀 <b>Causal-Lab</b></p>
          <h1 id="hero-title">Causal Inference Hub</h1>
          <p class="banner-lede">인과추론에서 시작해 AI 시대의 데이터 리터러시까지. <br>2022년부터 함께 만든 오픈소스를 L0–L4 커리큘럼으로 엮었습니다.</p>
          <div class="banner-cta">
            <a class="pill solid" href="#curriculum">커리큘럼 보기</a>
            <a class="pill" href="https://github.com/CausalInferenceLab" target="_blank" rel="noopener">GitHub</a>
            <a class="pill" href="#join">참여하기</a>
          </div>
        </div>
        <div class="banner-side">
          <img class="banner-mark" src="assets/img/team-mark.png" alt="" width="132" height="132">
          <ul class="featured" id="featured" aria-label="대표 사이트"></ul>
        </div>
      </div>
      <div class="hero-grid">
        <ul class="growth" id="growth" aria-label="팀의 성장 지표">
          <li class="tile"><span class="tile-label">함께한 러너</span><span class="tile-value">102명</span></li>
          <li class="tile"><span class="tile-label">프로젝트</span><span class="tile-value">23개</span></li>
          <li class="tile"><span class="tile-label">GitHub 스타</span><span class="tile-value">1,045</span></li>
          <li class="tile"><span class="tile-label">행사 참가자</span><span class="tile-value">330명</span></li>
        </ul>
        <aside class="ladder-card" aria-labelledby="ladder-title">
          <h2 id="ladder-title">인과추론 커리큘럼</h2>
          <p class="ladder-sub">L0–L2는 무료 자료만으로 끝까지 갈 수 있습니다.</p>
          <ol class="ladder" id="ladder"></ol>
        </aside>
      </div>
    </div>
  </section>

  <section class="band" id="curriculum" aria-labelledby="curriculum-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="curriculum-title">커리큘럼과 오픈소스</h2>
        <p id="curriculum-sub">트랙 지도로 전체를 보고, 커리큘럼에서 하나씩 열어 보세요.</p>
      </div>
      <div class="goal-row">
        <span class="goal-q">무엇을 하고 싶나요?</span>
        <div class="route-chips" role="radiogroup" aria-label="목표 고르기" id="route-chips"></div>
      </div>
      <p class="route-note" id="route-note" aria-live="polite"></p>
      <div class="tabs big" role="tablist" aria-label="보기 방식">
        <button type="button" role="tab" id="tab-map" aria-controls="panel-map" aria-selected="true">트랙 지도</button>
        <button type="button" role="tab" id="tab-course" aria-controls="panel-course" aria-selected="false" tabindex="-1">커리큘럼<span class="tab-n" id="n-course"></span></button>
        <button type="button" role="tab" id="tab-contrib" aria-controls="panel-contrib" aria-selected="false" tabindex="-1">기여<span class="tab-n" id="n-contrib"></span></button>
      </div>

      <div id="panel-map" role="tabpanel" aria-labelledby="tab-map">
        <div class="map-card">
          <div class="map-scroll">
            <svg id="metro" role="img" aria-labelledby="metro-title"><title id="metro-title">인과추론 트랙 지도: L0부터 L4까지 6개 트랙</title></svg>
          </div>
          <div class="vlines" id="vlines"></div>
          <ul class="line-legend" id="line-legend"></ul>
        </div>
      </div>

      <div id="panel-course" role="tabpanel" aria-labelledby="tab-course" hidden>
        <div class="week" id="week"></div>
        <div class="shelf-bar">
          <div class="chapters" id="chapters" role="group" aria-label="단계로 이동"></div>
          <div class="shelf-nav">
            <button type="button" data-shelf="-1" aria-label="이전 레포"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3L5 8l5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
            <button type="button" data-shelf="1" aria-label="다음 레포"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          </div>
        </div>
        <div class="shelf-wrap" id="shelf-wrap">
          <ol class="shelf" id="shelf" tabindex="0" aria-label="레포 목록. 좌우로 스크롤할 수 있습니다."></ol>
        </div>
        <p class="shelf-foot" id="shelf-foot"></p>
      </div>

      <div id="panel-contrib" role="tabpanel" aria-labelledby="tab-contrib" hidden>
        <div class="people-rail" id="people-rail" aria-label="Builder"></div>
        <h3 class="contrib-head">기수별로 보기</h3>
        <p class="contrib-sub" id="contrib-sub"></p>
        <div class="matrix-scroll" tabindex="0" aria-label="Builder별 기수 기여표. 좌우로 스크롤할 수 있습니다.">
          <table class="matrix" id="matrix"></table>
        </div>
        <ul class="matrix-legend" id="matrix-legend"></ul>
      </div>

    </div>
  </section>

  <section class="band" id="events" aria-labelledby="events-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="events-title">행사</h2>
        <p>현업과 학계가 만나는 Data Forum을 열고 있습니다.</p>
      </div>
      <ol class="events" id="event-list"></ol>
    </div>
  </section>

  <section class="band" id="reading" aria-labelledby="reading-title">
    <div class="wrap">
      <div class="section-head">
        <h2 id="reading-title">읽을거리</h2>
        <p>팀이 쓴 글과 독자를 위한 자료입니다.</p>
      </div>
      <ul class="articles" id="article-list"></ul>
    </div>
  </section>

  <section class="band" id="join" aria-labelledby="join-title">
    <div class="wrap join">
      <div class="section-head">
        <h2 id="join-title">참여하기</h2>
        <p>러너로 시작해 기여를 쌓고, Builder로 다음 기수의 프로젝트를 엽니다.</p>
      </div>
      <ol class="steps">
        <li>
          <h3>러너로 참여</h3>
          <p>가짜연구소는 반기마다 기수를 모집합니다. 인과추론팀 프로젝트에 러너로 들어와 14주 동안 함께 공부하고 만듭니다.</p>
          <a class="btn" href="https://pseudo-lab.com/" target="_blank" rel="noopener">가짜연구소 프로젝트 보기</a>
        </li>
        <li>
          <h3>첫 기여 남기기</h3>
          <p>오탈자 하나, 예제 하나도 기여입니다. 진행 중인 레포의 이슈를 보고 PR을 보내 주세요.</p>
          <a class="btn" href="https://github.com/search?q=org%3ACausalInferenceLab+is%3Aissue+is%3Aopen&type=issues" target="_blank" rel="noopener">열린 이슈 보기</a>
        </li>
        <li>
          <h3>Builder로 프로젝트 열기</h3>
          <p>다음 기수에 직접 프로젝트를 열어 보세요. 레포는 템플릿으로 시작하고, 이 허브에는 데이터 파일 PR 한 번으로 올라갑니다.</p>
          <a class="btn" href="https://github.com/CausalInferenceLab/Project-template" target="_blank" rel="noopener">프로젝트 템플릿</a>
        </li>
      </ol>
      <p class="join-foot">질문은 <a href="https://discord.gg/HeHbFAvmSZ" target="_blank" rel="noopener">가짜연구소 디스코드</a>에 남겨 주세요.</p>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="wrap footer-row">
    <div>
      <p class="footer-brand">가짜연구소 인과추론팀</p>
      <p id="footer-note">러너 수는 팀 프로젝트 기록에서, 스타와 기여자 수는 GitHub에서 집계합니다.</p>
    </div>
    <ul class="footer-links">
      <li><a href="https://github.com/CausalInferenceLab" target="_blank" rel="noopener">GitHub</a></li>
      <li><a href="https://pseudo-lab.com/" target="_blank" rel="noopener">가짜연구소</a></li>
      <li><a href="https://discord.gg/HeHbFAvmSZ" target="_blank" rel="noopener">Discord</a></li>
      <li><a href="https://github.com/CausalInferenceLab/CausalInferenceLab.github.io" target="_blank" rel="noopener">이 허브 고치기</a></li>
    </ul>
  </div>
</footer>

<dialog class="station" id="station-dialog" aria-labelledby="station-title">
  <div class="station-inner" id="station-body"></div>
</dialog>

<script src="assets/js/hub.js" defer></script>
</body>
</html>