-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
96 lines (86 loc) · 5.38 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko" data-theme="cmyk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>대한민국 탄소중립 대시보드 - 코드포코리아</title>
<meta property="og:title" content="대한민국 탄소중립 대시보드 - 코드포코리아"/>
<meta property="og:description"
content="탄소중립 이행 상황을 추적해 시민들에게 보여주는 대시보드를 만듭니다. 탄소중립위원회, 온실가스종합정보센터, 온실가스감축인지 예산서 등 흩어져 있는 데이터를 수집하고 종합합니다."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://cnd.codefor.kr/"/>
<meta property="og:image" content="http://cnd.codefor.kr/sns.png"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmlincludejs"></script>
<style>
.container {
max-width: 768px !important;
padding-left: 1rem;
padding-right: 1rem;
}
</style>
</head>
<body>
<header>
<section class="hero py-20 bg-base-200" style="background-image: url(stephen-dawson-qwtCeJ5cLYs-unsplash.jpg)">
<div class="hero-content">
<div class="container mx-auto">
<h4 class="text-white font-extrabold font-title text-2xl lg:text-3xl">코드포코리아</h4>
<h1 class="text-white mb-2 font-extrabold font-title text-5xl lg:text-6xl shadow">대한민국 탄소중립 대시보드</h1>
<p class="text-white font-bold text-lg py-6">
탄소중립 이행 상황을 추적해 시민들에게 보여주는 대시보드를 만듭니다.
<br>
탄소중립위원회, 온실가스종합정보센터, 온실가스감축인지 예산서 등 흩어져 있는 데이터를 수집하고 종합합니다.
</p>
</div>
</div>
</section>
</header>
<section class="sticky top-0 z-90 bg-base-300">
<div class="container mx-auto">
<div class="justify-between overflow-x-auto justify-items-stretch tabs tabs-boxed bg-base-300">
<a href="#intro" class="tab link-neutral">소개</a>
<a href="#sectors" class="tab link-neutral">부문</a>
<a href="#news" class="tab link-neutral">뉴스</a>
<a href="#policies" class="tab link-neutral">정책</a>
</div>
</div>
</section>
<main>
<section id="sectors" class="py-20 bg-white">
<div class="container mx-auto">
<h2 class="text-4xl font-bold mb-4 ">소개</h2>
<h3 class="text-xl font-bold ">목적</h3>
<p class="pt-4 pb-6">
대한민국 탄소중립 대시보드는 시민들이 기후위기와 탄소중립과 관련된 정보를 쉽게 이해하고 활용할 수 있도록 돕기 위해 만들어졌습니다. 대시보드는 최신 데이터를 토대로 국가의 온실가스 배출 현황을 모니터링하고, 탄소중립을 달성하는 데 필요한 조치와 정책에 대한 단서를 제공하며, 시민들의 기후문해력을 높이고 국가가 기후목표를 달성하는 데 기여합니다.
</p>
<h3 class="text-xl font-bold ">배경</h3>
<p class="pt-4 pb-6">
민간 단위에서 국가의 온실가스 배출량을 모니터링하는 노력은 파편화되어 있으며, 공식 배출량 통계는 아직까지 1~2년의 시차를 두고 ‘최신화’되는 상황입니다. 또한 탄소중립과 관련된 각종 정보 역시 여러 곳에 흩어져 있어 한눈에 파악하기 어렵기 때문에, 관심 있는 일반 시민이 국가의 탄소중립 논의와 진행 상황을 이해하는 것이 쉽지 않았습니다. 본 대시보드는 이러한 문제를 해결하기 위해 만들어졌습니다. 대시보드는 탄소중립 각 분야에 관련된 최신 정보를 제공하고, 국가의 탄소중립 이행 상황을 직관적으로 확인할 수 있도록 데이터를 시각화합니다.
</p>
<h3 class="text-xl font-bold ">계획</h2>
<p class="pt-4 pb-6">
현재 에너지 전환 분야에 중점을 두고 대시보드를 개발 중입니다. 이를 통해 시민들이 대한민국의 에너지 전환과 관련된 정보와 정책을 쉽게 찾을 수 있게 도울 것이며, 이후에 다른 분야에 관한 내용을 추가해 나갈 계획입니다. 대시보드를 통해 우리나라가 탄소중립을 달성하기까지의 노력을 지속해서 추적할 것이며, 그 과정에서 시민들이 행동을 취할 방법도 제시하고자 합니다.
</p>
</div>
</section>
<include src="_sectors_nav.html"></include>
<section id="policies" class="py-20 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-4">정책과 기사</h2>
<div class="mt-4">
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS6f99VEhNkMNdHtqfAfiPtfwBcFjxSKcyHV75EF8vLdU7tZfXA8sJ5eRK4dKkBI28eMuBFLPZ8z4pa/pubhtml?widget=true&headers=false"
class="w-full h-96"></iframe>
</div>
<div class="mt-4">
<a href="https://docs.google.com/spreadsheets/d/1JzjuHmgZaC03ApHRsEIURvGa31g8tAYvVFSmg78Kg9E/edit#gid=89222323"
target="_blank" class="text-primary underline">문서 바로보기</a>
</div>
</div>
</section>
</main>
<include src="_sectors_footer.html"></include>
</body>
</html>