main.html

<!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="닫기">&times;</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>