"광주 주요 스토리"의 두 판 사이의 차이

my9univ
이동: 둘러보기, 검색
7번째 줄: 7번째 줄:
 
           <p class="main-subtit">STORY DATA</p>
 
           <p class="main-subtit">STORY DATA</p>
 
           <h2 class="main-tit">주요 스토리(전체 리스트)</h2>
 
           <h2 class="main-tit">주요 스토리(전체 리스트)</h2>
            <p style="font-size: 0.9em; color: #7F7F7F; margin-left: 0;">
+
 
 +
          <!-- 설명 문구 -->
 +
          <p style="font-size: 0.9em; color: #7F7F7F; margin-left: 0;">
 
             광주를 대표하는<br>
 
             광주를 대표하는<br>
 
             소재 중심의<br>
 
             소재 중심의<br>
 
             짧은 이야기
 
             짧은 이야기
            </p>
+
          </p>
        </div>
+
 
        <div class="category-filters">
+
           <!-- ▶ 전체 리스트 펼치기 -->
           <div class="filter-btn-group">
+
          <div style="margin-top: 10px;">
            <button type="button" class="filter-btn active" data-category="Agent">
+
             <a href="javascript:void(0);" onclick="toggleTable()" style="font-size: 0.95em; color: #0366CC; text-decoration: none;">▶ 전체 리스트 펼치기</a>
              <span class="icon icon-person"></span>
+
          </div>
              <span class="filter-txt">인물/단체</span>
+
 
            </button>
+
          <!-- 위키 문법 표 영역 (숨김 처리) -->
             <button type="button" class="filter-btn" data-category="Place">
+
           <div id="tableArea" style="display: none; margin-top: 10px;">
              <span class="icon icon-place"></span>
+
            <pre style="font-family: inherit;">
              <span class="filter-txt">장소</span>
+
{| class="wikitable"
            </button>
+
! 제목1 !! 제목2 !! 제목3 !! 제목4 !! 제목5
            <button type="button" class="filter-btn" data-category="Event">
+
|-
              <span class="icon icon-event"></span>
+
| 내용1 || 내용2 || 내용3 || 내용4 || 내용5
              <span class="filter-txt">사건</span>
+
|-
            </button>     
+
| 내용6 || 내용7 || 내용8 || 내용9 || 내용10
            <button type="button" class="filter-btn" data-category="Object">
+
|}
              <span class="icon icon-object"></span>
+
             </pre>
              <span class="filter-txt">사물</span>
 
            </button>            
 
            <button type="button" class="filter-btn" data-category="Concept">
 
              <span class="icon icon-term"></span>
 
              <span class="filter-txt">개념/용어</span>
 
            </button>
 
            <button type="button" class="filter-btn" data-category="Record">
 
              <span class="icon icon-record"></span>
 
              <span class="filter-txt">기록물</span>
 
            </button>
 
            <button type="button" class="filter-btn" data-category="Work">
 
              <span class="icon icon-data"></span>
 
              <span class="filter-txt">자료</span>
 
             </button>
 
 
           </div>
 
           </div>
 +
 +
          <!-- toggle JS -->
 +
          <script>
 +
            function toggleTable() {
 +
              var t = document.getElementById("tableArea");
 +
              if (t.style.display === "none") {
 +
                t.style.display = "block";
 +
              } else {
 +
                t.style.display = "none";
 +
              }
 +
            }
 +
          </script>
 
         </div>
 
         </div>
</html>
 
  
 +
        <!-- STORY DATA 반복 및 카테고리 -->
 +
        <div class="main-header">
 +
          <p class="main-subtit">STORY DATA</p>
 +
          <h2 class="main-tit">카테고리별로 만나는 주요 스토리</h2>
 +
        </div>
  
[[분류:2025_광주]]
+
        <!-- 종교/문화/경제/사회 버튼 -->
 +
        <div class="category-filters" style="margin-top: 10px;">
 +
          <div class="filter-btn-group">
 +
            <button type="button" class="filter-btn">종교</button>
 +
            <button type="button" class="filter-btn">문화</button>
 +
            <button type="button" class="filter-btn">경제</button>
 +
            <butt

2025년 11월 26일 (수) 14:31 판

<html>

STORY DATA

주요 스토리(전체 리스트)

광주를 대표하는
소재 중심의
짧은 이야기

           <a href="javascript:void(0);" onclick="toggleTable()" style="font-size: 0.95em; color: #0366CC; text-decoration: none;">▶ 전체 리스트 펼치기</a>
         <script>
           function toggleTable() {
             var t = document.getElementById("tableArea");
             if (t.style.display === "none") {
               t.style.display = "block";
             } else {
               t.style.display = "none";
             }
           }
         </script>

STORY DATA

카테고리별로 만나는 주요 스토리

           <button type="button" class="filter-btn">종교</button>
           <button type="button" class="filter-btn">문화</button>
           <button type="button" class="filter-btn">경제</button>
           <butt