-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.html
More file actions
268 lines (259 loc) · 14.7 KB
/
test.html
File metadata and controls
268 lines (259 loc) · 14.7 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
<!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/main.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<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">
<img src="../images/logo.png" alt="로고">
<p>CN Clean-Net</p>
</div>
<nav>
<ul>
<li><a href="#">디지털 시민의식</a></li>
<li><a href="#">사이버 윤리 사례 모음</a></li>
<li><a href="#">디지털 실천 다짐</a></li>
<li><a href="#">디지털 윤리 채널</a></li>
<li><a href="#">나의 디지털 시민의식</a></li>
</ul>
</nav>
<div class="search-login">
<input type="text" placeholder="검색">
<button>로그인</button>
</div>
</div>
</header>
<main>
<section class="hero-section">
<img src="../images/메인 이미지.jpg" alt="메인 이미지" class="hero-image">
<div class="container">
<h1>디지털 시민의식과 사이버 윤리</h1>
<p>온라인 세상에서도 책임감 있는 시민으로서 행동하는 방법을 배우고, 함께 건강한 디지털 문화를 만들어 갑시다.</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">
<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>
<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>
<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">디지털 시민의식은 온라인 환경에서 책임감 있게 행동하고, 다른 사용자를 존중하며, 디지털 기술을 안전하고 효과적으로 사용하는 능력을 말합니다. 이는 온라인 예절, 개인정보 보호, 디지털 리터러시, 사이버 보안 등의 요소를 포함합니다.</p>
<div class="citizenship-cards-grid"> <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>
<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>
<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">
<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/case-study-image.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">
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-comment-dots"></i>
</div>
<h3>존중하는 소통</h3>
<p>온라인에서도 상대방을 존중하고 <br>배려하는 언어를 사용하겠습니다.</p>
</div>
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-lock"></i>
</div>
<h3>개인정보 보호</h3>
<p>나와 타인의 개인정보를 <br>소중히 여기고 안전하게 관리하겠습니다.</p>
</div>
<div class="commitment-card">
<div class="icon-box">
<i class="fas fa-file-alt"></i>
</div>
<h3>저작권 존중</h3>
<p>타인의 창작물을 존중하고 <br> 적절한 인용과 출처 표기를 하겠습니다.</p>
</div>
<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">
나의 디지털 실천 다짐 작성하기 <i class="fas fa-arrow-right"></i>
</button>
</div>
</section>
<section class="digital-ethics-experience-center">
<div class="container">
<h2>디지털 윤리 체험관</h2>
<p class="section-description">다양한 상황 속에서 디지털 윤리 실천을 직접 체험하고 배워보세요.</p>
<div class="experience-cards-grid">
<div class="experience-card">
<img src="../images/ethics-simulation.png" alt="사이버 윤리 시뮬레이션">
<div class="card-content">
<h3>사이버 윤리 시뮬레이션</h3>
<p>다양한 온라인 상황에서 윤리적 결정을 내리는 <br>시뮬레이션을 통해 올바른 판단력을 키웁니다.</p>
<a href="#" class="experience-link">체험하기 →</a>
</div>
</div>
<div class="experience-card">
<img src="../images/digital-footprint.png" alt="디지털 발자국 탐색기">
<div class="card-content">
<h3>디지털 발자국 탐색기</h3>
<p>온라인 활동이 남기는 흔적을 시각화하여 <br>디지털 발자국의 중요성과 관리 방법을 배웁니다.</p>
<a href="#" class="experience-link">체험하기 →</a>
</div>
</div>
<div class="experience-card">
<img src="../images/digital-quiz.png" 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>디지털 중독 등 다양한 문제에 대해 상담받을 수 있습니다.</p>
<a href="#" 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>전문 상담사가 상황에 맞는 해결책을 제시합니다.</p>
<a href="#" 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="#" class="info-link">자세히 알아보기 →</a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-section">
<h3>청소년 상담 센터</h3>
<p>1388 (24시간 운영)</p>
<p>www.youth.go.kr</p>
<p><span>주소:</span> 대구광역시 ~~~~</p>
</div>
<div class="footer-section">
<h3>사이버 폭력 신고</h3>
<p>경찰청 사이버수사국</p>
<p>www.police.go.kr</p>
</div>
<div class="footer-section">
<h3>관련 기관</h3>
<ul>
<li><a href="#">한국정보화진흥원</a></li>
<li><a href="#">방송통신위원회</a></li>
<li><a href="#">경찰청</a></li>
</ul>
</div>
<div class="footer-section">
<h3>소셜 미디어</h3>
<div class="social-icons">
<a href="#"><img src="../images/facebook-icon.png" alt="페이스북"></a>
<a href="#"><img src="../images/twitter-icon.png" alt="트위터"></a>
<a href="#"><img src="../images/instagram-icon.png" alt="인스타그램"></a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2025 디지털 시민의식과 사이버 윤리. All rights reserved.</p>
</div>
</footer>
<script src="../js/main.js"></script>
</body>
</html>