2026년 3월 12일 (목) 02:38에 Kimseoyun님의 편집

2026-03-12T02:38:12Z

2026년 3월 12일 (목) 02:33에 Kimseoyun님의 편집

2026-03-12T02:33:01Z

2026년 3월 12일 (목) 02:17에 Kimseoyun님의 편집

2026-03-12T02:17:58Z

Kimseoyun: 새 문서: 광주 오월길 - 기억의...</h1> <p>2026-03-12T02:07:47Z</p> <p>새 문서: <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>광주 오월길 - 기억의...</p> <p><b>새 문서</b></p><div><!DOCTYPE html><br /> <html lang="ko"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <title>광주 오월길 - 기억의 길을 걷다</title><br /> <script src="https://cdn.tailwindcss.com"></script><br /> <script><br /> tailwind.config = {<br /> theme: {<br /> extend: {<br /> colors: {<br /> 'may-dark': '#1a1a1a',<br /> 'may-gray': '#e0e0e0',<br /> 'may-accent': '#c0a060', // 숭고함을 상징하는 차분한 골드 톤<br /> },<br /> fontFamily: {<br /> 'sans': ['Pretendard', 'Noto Sans KR', 'sans-serif'],<br /> 'serif': ['Noto Serif KR', 'serif'],<br /> },<br /> }<br /> }<br /> }<br /> </script><br /> <style><br /> @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&family=Pretendard:wght@400;600;700&display=swap');<br /> <br /> body {<br /> background-color: #f8f9fa;<br /> color: #333;<br /> line-height: 1.7;<br /> }<br /> <br /> /* 스크롤바 스타일링 /<br /> ::-webkit-scrollbar { width: 8px; }<br /> ::-webkit-scrollbar-track { background: #f1f1f1; }<br /> ::-webkit-scrollbar-thumb { background: #c0a060; border-radius: 4px; }<br /> ::-webkit-scrollbar-thumb:hover { background: #a08050; }<br /> <br /> / 타임라인/스테퍼 스타일 /<br /> .path-step::before {<br /> content: '';<br /> position: absolute;<br /> left: -17px;<br /> top: 5px;<br /> width: 12px;<br /> height: 12px;<br /> background-color: #c0a060;<br /> border-radius: 50%;<br /> z-index: 10;<br /> }<br /> .path-step:not(:last-child)::after {<br /> content: '';<br /> position: absolute;<br /> left: -12px;<br /> top: 15px;<br /> width: 2px;<br /> height: calc(100% + 1rem);<br /> background-color: #e0e0e0;<br /> z-index: 5;<br /> }<br /> <br /> / 이미지 모달 스타일 */<br /> .modal {<br /> display: none;<br /> position: fixed;<br /> z-index: 1000;<br /> top: 0; left: 0; width: 100%; height: 100%;<br /> background-color: rgba(0,0,0,0.8);<br /> overflow: auto;<br /> }<br /> .modal-content {<br /> margin: 5% auto;<br /> display: block;<br /> width: 80%;<br /> max-width: 700px;<br /> }<br /> .close-modal {<br /> position: absolute;<br /> top: 20px;<br /> right: 30px;<br /> color: #fff;<br /> font-size: 40px;<br /> cursor: pointer;<br /> }<br /> </style><br /> </head><br /> <body class="font-sans"><br /> <br /> <header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200"><br /> <nav class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"><br /> <a href="#" class="text-2xl font-bold text-may-dark font-serif">광주 오월길 <span class="text-may-accent">아카이브</span></a><br /> <div class="space-x-8 text-sm font-medium text-gray-700"><br /> <a href="#intro" class="hover:text-may-accent transition">소개</a><br /> <a href="#path" class="hover:text-may-accent transition">기억의 길</a><br /> <a href="#digital" class="hover:text-may-accent transition">디지털 아카이브</a><br /> </div><br /> </nav><br /> </header><br /> <br /> <section class="relative bg-may-dark text-white py-32 px-6"><br /> <div class="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1598188151591-62d989f6679b?q=80&w=2000')] bg-cover bg-center"></div><br /> <div class="max-w-5xl mx-auto relative z-10 text-center"><br /> <p class="text-may-accent font-serif text-xl mb-3">역사의 현장, 민주주의의 걸음</p><br /> <h1 class="text-5xl md:text-6xl font-bold font-serif leading-tight mb-6">오월길, <br>끝나지 않은 노래</h1><br /> <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10"><br /> 1980년 5월, 광주의 뜨거웠던 열흘을 기억합니다. <br><br /> 그날의 함성과 아픔, 그리고 희망이 서린 '오월길'을 따라 민주주의의 의미를 되새겨 봅니다.<br /> </p><br /> <a href="#path" class="inline-block bg-may-accent text-may-dark font-bold px-8 py-3 rounded-full hover:bg-white transition duration-300"><br /> 기억의 길 따라가기<br /> </a><br /> </div><br /> </section><br /> <br /> <section id="intro" class="py-24 px-6 bg-white"><br /> <div class="max-w-4xl mx-auto text-center"><br /> <h2 class="text-3xl font-bold font-serif text-may-dark mb-6">오월길이란?</h2><br /> <div class="w-16 h-1 bg-may-accent mx-auto mb-10"></div><br /> <p class="text-lg text-gray-700 leading-relaxed mb-6"><br /> '광주 오월길'은 1980년 5·18민주화운동의 주요 역사적 현장을 연결하여 조성한 도보 탐방로입니다. <br /> 이 길은 단순한 산책로가 아닌, 당시 시민들의 항쟁과 희생, 그리고 연대의 역사를 온몸으로 체험하고 기억하는 소통의 공간입니다.<br /> </p><br /> <p class="text-gray-600"><br /> 총 5개의 테마 코스로 구성되어 있으며, 각 코스는 5·18의 전개 과정과 의미를 담고 있습니다. <br><br /> 우리는 이 길을 걸으며 과거의 아픔을 위로하고, 미래의 민주 가치를 가꿉니다.<br /> </p><br /> </div><br /> </section><br /> <br /> <section class="py-24 px-6 bg-gray-50 border-y border-gray-100"><br /> <div class="max-w-7xl mx-auto"><br /> <h2 class="text-3xl font-bold font-serif text-may-dark text-center mb-16">오월길, 다섯 가지 이야기</h2><br /> <br /> <div class="grid md:grid-cols-3 gap-8"><br /> <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 group hover:shadow-lg transition-shadow duration-300"><br /> <div class="text-may-accent mb-5 text-lg font-serif">01. 불통의 길</div><br /> <h3 class="text-xl font-bold text-may-dark mb-4 group-hover:text-may-accent transition">민주주의를 향한 첫 외침</h3><br /> <p class="text-gray-600 text-sm leading-relaxed mb-6"><br /> 신군부의 비상계엄 확대에 맞서 전남대 학생들이 처음으로 항거를 시작한 곳입니다. 불의에 타협하지 않은 청년들의 정신이 깃들어 있습니다.<br /> </p><br /> <div class="flex items-center space-x-2 text-xs text-gray-500"><br /> <span>#전남대정문</span><br /> <span>#5.18사적지1호</span><br /> </div><br /> </div><br /> <br /> <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 group hover:shadow-lg transition-shadow duration-300"><br /> <div class="text-may-accent mb-5 text-lg font-serif">02. 민중의 길</div><br /> <h3 class="text-xl font-bold text-may-dark mb-4 group-hover:text-may-accent transition">시민들이 써 내려간 역사</h3><br /> <p class="text-gray-600 text-sm leading-relaxed mb-6"><br /> 계엄군의 무차별 폭력에 맞서 광주 시민들이 자발적으로 떨쳐 일어난 항쟁의 핵심 공간입니다. 금남로를 가득 메운 함성을 느껴보세요.<br /> </p><br /> <div class="flex items-center space-x-2 text-xs text-gray-500"><br /> <span>#금남로</span><br /> <span>#가톨릭센터</span><br /> </div><br /> </div><br /> <br /> <div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 group hover:shadow-lg transition-shadow duration-300"><br /> <div class="text-may-accent mb-5 text-lg font-serif">03. 갈등의 길</div><br /> <h3 class="text-xl font-bold text-may-dark mb-4 group-hover:text-may-accent transition">아픔을 딛고 피어난 연대</h3><br /> <p class="text-gray-600 text-sm leading-relaxed mb-6"><br /> 시민들이 스스로를 지키기 위해 무장했던 곳이자, 치열한 토론과 수습 노력이 이어졌던 공간입니다. 주먹밥을 나누던 따뜻한 공동체 정신이 살아있습니다.<br /> </p><br /> <div class="flex items-center space-x-2 text-xs text-gray-500"><br /> <span>#도청앞광장</span><br /> <span>#상무관</span><br /> </div><br /> </div><br /> <br /> </div><br /> <br /> <div class="text-center mt-16"><br /> <button class="text-may-accent border border-may-accent px-6 py-2 rounded-full hover:bg-may-accent hover:text-white transition">모든 코스 보기</button><br /> </div><br /> </div><br /> </section><br /> <br /> <section id="path" class="py-24 px-6 bg-white"><br /> <div class="max-w-5xl mx-auto"><br /> <h2 class="text-3xl font-bold font-serif text-may-dark mb-16">길 위에서 만나는 오월의 순간들</h2><br /> <br /> <div class="ml-8 border-l-2 border-may-gray pl-10 space-y-16"><br /> <br /> <div class="relative path-step"><br /> <div class="flex flex-col md:flex-row md:items-start gap-8"><br /> <div class="flex-1"><br /> <h3 class="text-2xl font-bold text-may-dark mb-2">1. 민주주의의 불꽃, 전남대 정문</h3><br /> <p class="text-gray-500 text-sm mb-4">5.18 사적지 1호 / 전남대학교</p><br /> <p class="text-gray-700 leading-relaxed mb-6"><br /> 1980년 5월 18일 아침, 교문을 봉쇄한 계엄군과 등교하려는 학생들 사이에 충돌이 일어났습니다. 이것이 바로 5·18민주화운동의 시작이었습니다. 계엄군의 잔혹한 진압은 광주 시민들의 분노를 유발했습니다.<br /> </p><br /> </div><br /> <div class="w-full md:w-2/5 flex-shrink-0"><br /> <img src="https://dh.aks.ac.kr/~kimseoyun/wiki/images/d/de/5.18%EB%8B%B9%EC%8B%9C%EC%A0%84%EB%82%A8%EB%8C%80%EC%A0%95%EB%AC%B8.jpg" alt="전남대 정문 아카이브 사진" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition" onclick="openModal(this)"><br /> <p class="text-xs text-gray-400 mt-2 text-center">[오마이뉴스 사진] 당시 전남대 정문 전경</p><br /> </div><br /> </div><br /> </div><br /> <br /> <div class="relative path-step"><br /> <div class="flex flex-col md:flex-row md:items-start gap-8"><br /> <div class="flex-1"><br /> <h3 class="text-2xl font-bold text-may-dark mb-2">2. 함성이 메아리치다, 금남로</h3><br /> <p class="text-gray-500 text-sm mb-4">5.18 사적지 4호 / 금남로 거리</p><br /> <p class="text-gray-700 leading-relaxed mb-6"><br /> 5월 20일 저녁, 수많은 시민이 계엄군의 폭력 진압에 항의하며 금남로로 모여들었습니다. 택시와 버스 운전사들이 차량 시위를 주도하며 항쟁의 기폭제가 되었고, 금남로는 '민주주의의 광장'이 되었습니다.<br /> </p><br /> </div><br /> <div class="w-full md:w-2/5 flex-shrink-0"><br /> <img src="https://dh.aks.ac.kr/~kimseoyun/wiki/images/4/45/5.18%EB%8B%B9%EC%8B%9C%EA%B8%88%EB%82%A8%EB%A1%9C%EC%8B%9C%EC%9C%84.jpg" alt="전남대 정문 아카이브 사진" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition" onclick="openModal(this)"><br /> <p class="text-xs text-gray-400 mt-2 text-center">[조선일보 사진] 당시 금남로 시위 현장</p><br /> </div><br /> </div><br /> </div><br /> <br /> <div class="relative path-step"><br /> <div class="flex flex-col md:flex-row md:items-start gap-8"><br /> <div class="flex-1"><br /> <h3 class="text-2xl font-bold text-may-dark mb-2">3. 끝까지 지켜낸 곳, 구 전남도청</h3><br /> <p class="text-gray-500 text-sm mb-4">5.18 사적지 5호 / 문화전당역 인근</p><br /> <p class="text-gray-700 leading-relaxed mb-6"><br /> 항쟁 기간 동안 시민수습대책위원회가 꾸려지고, 마지막 순간까지 시민군이 계엄군에 맞서 싸웠던 곳입니다. 5월 27일 새벽, 계엄군의 무력 진압으로 많은 이들이 이곳에서 산화했습니다.<br /> </p><br /> <button class="bg-may-dark text-white text-sm px-4 py-2 rounded-md hover:bg-gray-800 transition">당시 상황 보기 (모달)</button><br /> </div><br /> <div class="w-full md:w-2/5 flex-shrink-0"><br /> <img src="https://dh.aks.ac.kr/~kimseoyun/wiki/images/e/e6/5.18%EB%8B%B9%EC%8B%9C%EC%A0%84%EB%82%A8%EB%8F%84%EC%B2%AD.jpg" alt="구 전남도청 아카이브 사진" class="rounded-lg shadow-md cursor-pointer hover:opacity-90 transition" onclick="openModal(this)"><br /> <p class="text-xs text-gray-400 mt-2 text-center">[연합뉴스 사진] 항쟁 당시 도청 앞 광장</p><br /> </div><br /> </div><br /> </div><br /> <br /> </div><br /> </div><br /> </section><br /> <br /> <section id="digital" class="py-24 px-6 bg-gray-50 border-t border-gray-100"><br /> <div class="max-w-7xl mx-auto"><br /> <h2 class="text-3xl font-bold font-serif text-may-dark text-center mb-16">오월의 기록, 디지털로 만나다</h2><br /> <br /> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"><br /> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover:border-may-accent transition"><br /> <div class="text-5xl mb-4">📸</div><br /> <h4 class="font-bold text-may-dark mb-2">사진 아카이브</h4><br /> <p class="text-gray-600 text-xs">그날의 생생한 현장 기록</p><br /> </div><br /> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover:border-may-accent transition"><br /> <div class="text-5xl mb-4">📄</div><br /> <h4 class="font-bold text-may-dark mb-2">문서 아카이브</h4><br /> <p class="text-gray-600 text-xs">당시 선언문, 일기 등</p><br /> </div><br /> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover:border-may-accent transition"><br /> <div class="text-5xl mb-4">🎤</div><br /> <h4 class="font-bold text-may-dark mb-2">구술 아카이브</h4><br /> <p class="text-gray-600 text-xs">목격자들의 증언 영상</p><br /> </div><br /> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover:border-may-accent transition"><br /> <div class="text-5xl mb-4">🗺️</div><br /> <h4 class="font-bold text-may-dark mb-2">사적지 지도</h4><br /> <p class="text-gray-600 text-xs">5.18 현장 위치 정보</p><br /> </div><br /> </div><br /> </div><br /> </section><br /> <br /> <footer class="bg-may-dark text-gray-400 py-16 px-6"><br /> <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12"><br /> <div><br /> <a href="#" class="text-2xl font-bold text-white font-serif mb-4 block">광주 오월길 <span class="text-may-accent">아카이브</span></a><br /> <p class="text-sm leading-relaxed max-w-md"><br /> 이 웹페이지는 5·18민주화운동의 역사와 문화를 디지털로 기록하고 공유하기 위해 제작된 아카이브 공간입니다. <br /> 위키 문서의 데이터를 바탕으로, 누구나 쉽게 오월의 정신을 접하고 기억할 수 있도록 구성했습니다.<br /> </p><br /> </div><br /> <div class="text-sm space-y-2 md:text-right"><br /> <p>본 콘텐츠는 5·18기념재단 및 관련 기관의 자료를 기반으로 재구성되었습니다.</p><br /> <p>제작: 지역 문화 아카이브 전문 웹디자이너</p><br /> <p>Copyright © 2024 Gwangju May Road Archive. All rights reserved.</p><br /> </div><br /> </div><br /> </footer><br /> <br /> <div id="imageModal" class="modal" onclick="closeModal()"><br /> <span class="close-modal">×</span><br /> <img class="modal-content" id="img01"><br /> </div><br /> <br /> <script><br /> // 모달 열기 함수<br /> function openModal(element) {<br /> document.getElementById("imageModal").style.display = "block";<br /> document.getElementById("img01").src = element.src;<br /> }<br /> <br /> // 모달 닫기 함수<br /> function closeModal() {<br /> document.getElementById("imageModal").style.display = "none";<br /> }<br /> </script><br /> <br /> </body><br /> </html></div> </article> </main></body></html>

@@ 60번째 줄: / 60번째 줄: @@
              z-index: 5;
+         }
          /* 이미지 모달 스타일 */

@@ 85번째 줄: / 85번째 줄: @@
              cursor: pointer;
+         }
      </style>
 </head>
@@ 101번째 줄: / 147번째 줄: @@
      <section class="relative bg-may-dark text-white py-32 px-6">
-        <div class="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1598188151591-62d989f6679b?q=80&w=2000')] bg-cover bg-center"></div>
+<div class="main-archive-container">
-        <div class="max-w-5xl mx-auto relative z-10 text-center">
+    <h3 style="color: #c0a060;">역사의 현장, 민주주의의 걸음</h3>
-            <p class="text-may-accent font-serif text-xl mb-3">역사의 현장, 민주주의의 걸음</p>
+    <h1>오월길, 끝나지 않은 노래</h1>
-            <h1 class="text-5xl md:text-6xl font-bold font-serif leading-tight mb-6">오월길, <br>끝나지 않은 노래</h1>
+    <hr style="width: 100px; border: 0;  solid #c0a060; margin: 20px 0;">
-            <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-10">
+    <p>1980년 5월, 광주의 뜨거웠던 열흘을 기억합니다.</p>
-년 5월, 광주의 뜨거웠던 열흘을 기억합니다. <br>
+    <a href="#path" class="path-button">기억의 길 따라가기</a>
-                그날의 함성과 아픔, 그리고 희망이 서린 '오월길'을 따라 민주주의의 의미를 되새겨 봅니다.
+</div>
      </section>

@@ 1번째 줄: / 1번째 줄: @@
-<!DOCTYPE html>
 <html lang="ko">
 <head>

광주 오월길 AI 변환 - 편집 역사

2026년 3월 12일 (목) 02:38에 Kimseoyun님의 편집

2026년 3월 12일 (목) 02:33에 Kimseoyun님의 편집

2026년 3월 12일 (목) 02:17에 Kimseoyun님의 편집