-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
304 lines (296 loc) · 17.3 KB
/
Copy pathmain.html
File metadata and controls
304 lines (296 loc) · 17.3 KB
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!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/common.css">
<!-- 메인 페이지 전용 스타일시트 -->
<link rel="stylesheet" href="../css/main.css">
<!-- Pretendard 폰트 적용 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<!-- Font Awesome 아이콘 사용 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- ===== 상단 헤더 영역 ===== -->
<header>
<div class="container">
<!-- 로고(메인 페이지 이동) -->
<div class="logo">
<a href="./main.html">
<img src="../images/main_img/logo.png" alt="로고">
<p>CN Clean-Net</p>
</a>
</div>
<!-- 메인 네비게이션 메뉴 -->
<nav>
<ul>
<li><a href="#">디지털 시민의식</a></li>
<li><a href="#">사이버 윤리 사례 모음</a></li>
<li><a href="서영.html" target="_blank">디지털 실천 다짐</a></li>
<li><a href="#">디지털 윤리 채널</a></li>
<li><a href="sev1.html" target="_blank">나의 디지털 시민의식은?</a></li>
</ul>
</nav>
<!-- 검색 및 로그인 영역 -->
<div class="search-login right-align">
<input type="text" placeholder="검색">
<button>로그인</button>
</div>
</div>
</header>
<main>
<!-- ===== 히어로(메인 배너) 섹션 ===== -->
<section class="hero-section">
<div class="container">
<h1><b>디지털 시민의식과 사이버 윤리</b></h1>
<p><b>온라인 세상에서도 책임감 있는 시민으로서 행동하는 방법을 배우고, 함께 건강한 디지털 문화를 만들어 갑시다.</b></p>
<div class="hero-buttons">
<button class="primary-button">시작하기</button>
<button class="secondary-button">더 알아보기</button>
</div>
</div>
</section>
<!-- ===== 핵심 가치 섹션 ===== -->
<section class="core-values-section">
<div class="container">
<h2>디지털 시민 의식의 핵심 가치</h2>
<p class="section-description">온라인 세상에서 책임감 있는 시민으로 살아가기 위한 중요한 가치들을 알아보세요.</p>
<div class="value-cards-grid">
<!-- 핵심 가치 카드 1 -->
<div class="value-card">
<div class="icon-circle">
<i class="fas fa-shield-alt"></i>
</div>
<h3>디지털 안전</h3>
<p>개인정보 보호와 온라인 보안에 대한 이해를 통해 <br>자신과 타인을 보호하는 방법을 배웁니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
<!-- 핵심 가치 카드 2 -->
<div class="value-card">
<div class="icon-circle">
<i class="fas fa-comments"></i>
</div>
<h3>디지털 존중</h3>
<p>온라인에서 타인을 존중하고 공정하고 <br>소통하는 방식으로 건강한 디지털 문화를 만듭니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
<!-- 핵심 가치 카드 3 -->
<div class="value-card">
<div class="icon-circle">
<i class="fas fa-lightbulb"></i>
</div>
<h3>디지털 리터러시</h3>
<p>정보를 비판적으로 평가하고 올바르게 활용하는 <br>능력을 키워 디지털 세상을 현명하게 탐색합니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
</div>
</div>
</section>
<!-- ===== 디지털 시민의식 설명 섹션 ===== -->
<section class="what-is-digital-citizenship">
<div class="container">
<h2>디지털 시민의식이란?</h2>
<p class="section-description">
디지털 시민의식은 온라인 환경에서 책임감 있게 행동하고, 다른 사용자를 존중하며, 디지털 기술을 안전하고 효과적으로 사용하는 능력을 말합니다. <br>
이는 온라인 예절, 개인정보 보호, 디지털 리터러시, 사이버 보안 등의 요소를 포함합니다.
</p>
<div class="citizenship-cards-grid">
<!-- 시민의식 카드 1 -->
<div class="citizenship-card">
<div class="icon-circle">
<i class="fas fa-user-shield"></i>
</div>
<h3>안전한 보안</h3>
<p>개인정보를 안전하게 관리하고 온라인 활동을 <br>보호하는 방법을 배웁니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
<!-- 시민의식 카드 2 -->
<div class="citizenship-card">
<div class="icon-circle">
<i class="fas fa-handshake"></i>
</div>
<h3>디지털 예절</h3>
<p>온라인상에서 다른 사람을 존중하고 배려하며 <br>소통하는 방법을 배웁니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
<!-- 시민의식 카드 3 -->
<div class="citizenship-card">
<div class="icon-circle">
<i class="fas fa-pencil-ruler"></i>
</div>
<h3>윤리적 활용</h3>
<p>정보를 비판적으로 평가하고 올바르게 활용하는 능력을 키워 현명한 디지털 생활을 합니다.</p>
<a href="#" class="learn-more-link">자세히 알아보기 →</a>
</div>
</div>
</div>
</section>
<!-- ===== 사이버 윤리 사례 섹션 ===== -->
<section class="cyber-ethics-cases-new alt-background">
<div class="container">
<div class="content-wrapper">
<!-- 사이버 윤리 사례 설명 영역 -->
<div class="text-content">
<h2>실제 사례로 배우는 사이버 윤리</h2>
<p>다양한 사이버 윤리 사례를 통해 온라인에서 발생할 수 있는 <br>문제 상황과 올바른 대처 방법을 배워보세요.</p>
<ul>
<li><i class="fas fa-check-circle"></i> 사이버 폭력 예방 및 대응 방법</li>
<li><i class="fas fa-check-circle"></i> 개인정보 보호와 프라이버시 존중</li>
<li><i class="fas fa-check-circle"></i> 디지털 저작권과 콘텐츠 윤리</li>
<li><i class="fas fa-check-circle"></i> 디지털 발자국과 온라인 평판 관리</li>
</ul>
<button class="cases-button">사례 더 보기 →</button>
</div>
<!-- 사이버 윤리 사례 이미지 영역 -->
<div class="image-content">
<img src="../images/main_img/사이버 윤리 학습 이미지.jpg" alt="사이버 윤리 학습 이미지">
</div>
</div>
</div>
</section>
<!-- ===== 디지털 실천 다짐 섹션 ===== -->
<section class="digital-commitment-section new-layout">
<div class="container">
<h2>디지털 실천 다짐</h2>
<p class="section-description">더 나은 디지털 세상을 위한 우리의 약속, 함께 실천해보세요.</p>
<div class="commitment-cards-grid">
<!-- 실천 다짐 카드 1 -->
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-comment-dots"></i>
</div>
<h3>존중하는 소통</h3>
<p>온라인에서도 상대방을 존중하고 <br>배려하는 언어를 사용하겠습니다.</p>
</div>
<!-- 실천 다짐 카드 2 -->
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-lock"></i>
</div>
<h3>개인정보 보호</h3>
<p>나와 타인의 개인정보를 소중히 <br>여기고 안전하게 관리하겠습니다.</p>
</div>
<!-- 실천 다짐 카드 3 -->
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-file-alt"></i>
</div>
<h3>저작권 존중</h3>
<p>타인의 창작물을 존중하고 <br> 적절한 인용과 출처 표기를 하겠습니다.</p>
</div>
<!-- 실천 다짐 카드 4 -->
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-hands-helping"></i>
</div>
<h3>디지털 시민 참여</h3>
<p>건강한 디지털 문화 조성에 <br>적극적으로 참여하고 기여하겠습니다.</p>
</div>
</div>
<!-- 다짐 작성 페이지로 이동 버튼 -->
<button class="my-commitment-button-new" onclick="window.location.href='서영.html'">
나의 디지털 실천 다짐 작성하기 <i class="fas fa-arrow-right"></i>
</button>
</div>
</section>
<!-- ===== 디지털 윤리 체험관 섹션 ===== -->
<section class="digital-ethics-experience-center alt-background">
<div class="container">
<h2>디지털 윤리 체험관</h2>
<p class="section-description">다양한 상황 속에서 디지털 윤리 실천을 직접 체험하고 배워보세요.</p>
<div class="experience-cards-grid">
<!-- 체험 카드 1 -->
<div class="experience-card">
<img src="../images/main_img/사이버 윤리 체험.jpg" alt="사이버 윤리 시뮬레이션">
<div class="card-content">
<h3>사이버 윤리 시뮬레이션</h3>
<p>다양한 온라인 상황에서 윤리적 결정을 내리는 <br>시뮬레이션을 통해 올바른 판단력을 키웁니다.</p>
<a href="#" class="experience-link">체험하기 →</a>
</div>
</div>
<!-- 체험 카드 2 -->
<div class="experience-card">
<img src="../images/main_img/디지털 발자국.jpg" alt="디지털 발자국 탐색기">
<div class="card-content">
<h3>디지털 발자국 탐색기</h3>
<p>온라인 활동이 남기는 흔적을 시각화하여 <br>디지털 발자국의 중요성과 관리 방법을 배웁니다.</p>
<a href="#" class="experience-link">체험하기 →</a>
</div>
</div>
<!-- 체험 카드 3 -->
<div class="experience-card">
<img src="../images/main_img/퀴즈.jpg" alt="디지털 시민 퀴즈">
<div class="card-content">
<h3>디지털 시민 퀴즈</h3>
<p>재미있는 퀴즈를 통해 디지털 시민으로서 알아야 할 <br>지식을 테스트하고 배웁니다.</p>
<a href="#" class="experience-link">체험하기 →</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 도움말/상담 기관 안내 섹션 ===== -->
<section class="help-section">
<div class="container">
<h2>도움이 필요하신가요?</h2>
<p class="section-description">사이버 폭력이나 디지털 문제로 어려움을 겪고 계신다면 아래 기관에 도움을 요청하세요.</p>
<div class="help-cards-grid">
<!-- 청소년 상담 카드 -->
<div class="help-card">
<div class="icon-circle-small">
<i class="fas fa-phone-alt"></i>
</div>
<h3>청소년 상담 1388</h3>
<p>24시간 청소년 상담 서비스를 제공합니다. <br>사이버 폭력, 디지털 중독 등 다양한 <br>문제에 대해 상담받을 수 있습니다.</p>
<a href="tel:1388" class="call-link">1388로 전화하기 →</a>
</div>
<!-- 사이버 폭력 신고 카드 -->
<div class="help-card">
<div class="icon-circle-small">
<i class="fas fa-shield-alt"></i>
</div>
<h3>사이버 폭력 신고센터</h3>
<p>사이버 폭력 피해를 신고하고 도움을 받을<br> 수 있습니다. 전문 상담사가 상황에 맞는 <br>해결책을 제시합니다.</p>
<a href="https://www.police.go.kr/www/open/cyber/cyber.jsp" target="_blank" class="report-link">신고하기 →</a>
</div>
<!-- 개인정보침해 신고 카드 -->
<div class="help-card">
<div class="icon-circle-small">
<i class="fas fa-clipboard-list"></i>
</div>
<h3>개인정보침해 신고센터</h3>
<p>개인정보 유출이나 침해 사례를 신고하고 <br>상담 및 법적 대응 방법 안내받을 수 있습니다.</p>
<a href="https://privacy.go.kr" target="_blank" class="info-link">자세히 알아보기 →</a>
</div>
</div>
</div>
</section>
</main>
<!-- ===== 하단 푸터 영역 ===== -->
<footer></footer>
<!-- ===== 공지사항 팝업 HTML 추가 ===== -->
<div id="notice-popup" class="notice-popup-overlay" style="display: none;">
<div class="notice-popup">
<button class="close-btn" id="closeNoticePopup" aria-label="닫기">×</button>
<h2>디지털 시민의식 실천 캠페인 안내</h2>
<div class="notice-content">
<p>안녕하세요!<br>
CN Clean-Net에서는 건강한 디지털 문화를 만들기 위해 <b>'디지털 시민의식 실천 캠페인'</b>을 진행하고 있습니다.<br>
여러분의 적극적인 참여와 실천을 부탁드립니다.</p>
<ul>
<li>실천 다짐을 남기고 공유해보세요!</li>
<li>사이버 폭력, 개인정보 침해 등 피해 시 도움 센터를 이용하세요.</li>
<li>본 사이트의 모든 서비스는 로그인 없이 자유롭게 이용 가능합니다.</li>
</ul>
</div>
</div>
</div>
<!-- ===== 공통/메인/공지사항 JS 파일 연결 ===== -->
<script src="../js/common.js"></script>
<script src="../js/main.js"></script>
<script src="../js/ann.js"></script>
</body>
</html>