PageSourceSearch

https://www.gcyf.or.kr/th/index.php

html gcyf.or.kr collected 2026-10-05 17:45:22 UTC 41,828 bytes, 1,079 lines download raw bytes

1<!doctype html>
2<html lang="ko">
3
4<head>
5  <meta charset="utf-8">
6  <!-- 공유 관련  -->
7  <meta name="description" content="2014년 설립되어 ‘별카페’라는 별칭으로 널리 알려진 탄현청소년문화의집은 청소년이 주도적으로 성장하는 자유공간입니다.">
8  <meta property="og:type" content="website">
9  <meta property="og:url" content="http://www.gcyf.or.kr/tj">
10  <meta property="og:title" content="탄현청소년문화의집">
11  <meta property="og:description" content="청소년 성장 자원을 잇는 탄현 브리지 탄현청소년문화의집">
12  <meta property="og:image" content="http://www.gcyf.or.kr/img/og_img/og_img_tanhyun.png">
13  <meta name="format-detection" content="telephone=no">
14
15  <meta http-equiv="imagetoolbar" content="no">
16<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=no">
17<meta http-equiv="X-UA-Compatible" content="IE=edge">
18  <title>탄현청소년문화의집</title>
19
20  <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon_32.png" />
21<link rel="stylesheet" href="/skin/latest/basicNew/style.css?ver=171222">
22  <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon_196.png" />
23  <link rel="stylesheet" href="/css/datepicker.css?ver=171222">
24  <link rel="stylesheet" href="/theme/th/css/tanhyun.css?ver=171222">
25  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
26
27  
27<script>
28    // 자바스크립트에서 사용하는 전역변수 선언
29    var g5_url = "";
30    var g5_bbs_url = "/bbs";
31    var g5_is_member = "";
32    var g5_is_admin = "";
33    var g5_is_mobile = "";
34    var g5_bo_table = "";
35    var g5_content_id = "";
36    var g5_sca = "";
37    var g5_editor = "";
38    var g5_cookie_domain = "";
39  </script>
39
40  
40<script src="/js/jquery-1.12.4.min.js"></script>
40
41  
41<script src="/js/common.js?ver=171222"></script>
41
42  
42<script src="/js/wrest.js?ver=171222"></script>
42
43  
43<script src="/js/placeholders.min.js"></script>
43
44  <!-- 재단운영시설 링크 -->
45  
45<script src="/js/menu.js"></script>
45
46  
46<script src="/js/link.js"></script>
46
47  
47<script src="/js/sub_breacrumb.js" defer></script>
47
48  
48<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
48
49
50      <!-- 메인 부분만  -->
51    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
52    
52<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
52
53    <link rel="stylesheet" href="/css/main.css?ver=171222">
54  
55  <!-- 메뉴 링크 -->
56  
56<script src="/theme/th/js/menu_th.js"></script>
56
57  
57<script src="/theme/th/js/menu_th_check.js"></script>
57
58
59  
59<script type="application/ld+json">
60  {
61    "@context": "http://schema.org",
62    "@type": "Organization",
63    "name": "탄현청소년문화의집",
64    "url": "https://www.gcyf.or.kr/th",
65    "sameAs": [
66      "https://www.facebook.com/thstarcafe/"
67    ]
68  }
69  </script>
69
70  <link rel="stylesheet" href="/js/font-awesome/css/font-awesome.min.css">
71  </head>
72
73<body  class="sub_foundation tanhyun main">
74  <div class="wrap">
75    <div id="hd" class="hd">
76  <h1 id="hd_h1">고양시청소년재단</h1>
77  <div id="skip_to_container"><a href="#container">본문 바로가기</a></div>
78
79  
80<!-- 팝업레이어 시작 { -->
81<div id="hd_pop">
82    <h2>팝업레이어 알림</h2>
83
84<span class="sound_only">팝업레이어 알림이 없습니다.</span></div>
85
86<script>
87$(function() {
88    $(".hd_pops_reject").click(function() {
89        var id = $(this).attr('class').split(' ');
90        var ck_name = id[1];
91        var exp_time = parseInt(id[2]);
92        $("#"+id[1]).css("display", "none");
93        set_cookie(ck_name, 1, exp_time, g5_cookie_domain);
94    });
95    $('.hd_pops_close').click(function() {
96        var idb = $(this).attr('class').split(' ');
97        $('#'+idb[1]).css('display','none');
98    });
99    $("#hd").css("z-index", 1000);
100});
101</script>
101
102<!-- } 팝업레이어 끝 -->  <div id="hd_wrapper" class="hd_wrapper">
103    <div class="wrap_inner">
104      <div id="logo" class="logo">
105        <a href="/th"><img src="/img/sub_logo/tanhyun_logo.png" alt="탄현청소년문화의집"></a>
106      </div>
107
108      <nav class="hd_menu" id="gnb" aria-label="주요메뉴">
109      </nav>
110      <div class="heder_icon_list">
111                  <a href="/bbs/login.php" class="btn_login">로그인</a>
112                <button class="btn_sch" type="button">
113          <span class="sound_only">검색창 열기</span>
114          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
115            <path d="M30.564 30.564L37.1999 37.1999" stroke="#111827" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
116            <path d="M20.3335 33.4671C27.587 33.4671 33.4671 27.587 33.4671 20.3335C33.4671 13.0801 27.587 7.19995 20.3335 7.19995C13.0801 7.19995 7.19995 13.0801 7.19995 20.3335C7.19995 27.587 13.0801 33.4671 20.3335 33.4671Z" stroke="#111827" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
117          </svg>
118        </button>
119        <div class="menu_btn">
120          <button type="button" class="btn btn_menu" id="open-menu-btn" title="menu">
121            <span></span>
122            <span></span>
123            <span></span>
124          </button>
125        </div>
126      </div>
127    </div>
128    <div class="nav-sub-wrap"></div>
129    <div class="sch_box">
130      <div class="hd_sch_wr">
131        <fieldset id="hd_sch">
132          <legend>SEARCH</legend>
133          <form name="fsearchbox" method="get" action="/bbs/search.php" onsubmit="return fsearchbox_submit(this);">
134            <input type="hidden" name="sfl" value="wr_subject||wr_content">
135            <input type="hidden" name="sop" value="and">
136            <label for="sch_stx" class="sound_only">검색어 필수</label>
137            <div class="sch_input_box">
138              <input type="text" name="stx" id="sch_stx" class="sch_stx" maxlength="20" placeholder="검색어를 입력해주세요">
139              <button type="submit" id="sch_submit" class="sch_submit" value="검색">
140                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
141                  <path d="M30.564 30.564L37.1999 37.1999" stroke="#111827" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
142                  <path d="M20.3335 33.4671C27.587 33.4671 33.4671 27.587 33.4671 20.3335C33.4671 13.0801 27.587 7.19995 20.3335 7.19995C13.0801 7.19995 7.19995 13.0801 7.19995 20.3335C7.19995 27.587 13.0801 33.4671 20.3335 33.4671Z" stroke="#111827" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
143                </svg>
144              </button>
145            </div>
146          </form>
147          <button type="button" class="btn_sch_close">
148            <i aria-hidden="true" class="icon icoClose"></i>
149            <span class="sound_only">검색창 닫기</span>
150          </button>
151          
151<script>
152            function fsearchbox_submit(f) {
153              if (f.stx.value.length < 2) {
154                alert("검색어는 두글자 이상 입력하십시오.");
155                f.stx.select();
156                f.stx.focus();
157                return false;
158              }
159
160              // 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
161              var cnt = 0;
162              for (var i = 0; i < f.stx.value.length; i++) {
163                if (f.stx.value.charAt(i) == ' ')
164                  cnt++;
165              }
166
167              if (cnt > 1) {
168                alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
169                f.stx.select();
170                f.stx.focus();
171                return false;
172              }
173
174              return true;
175            }
176          </script>
176
177
178        </fieldset>
179      </div>
180    </div>
181  </div>
182
183  
183<script>
184    // 상단 메뉴 동적 생성
185    document.addEventListener('DOMContentLoaded', function() {
186      const menuHTML = createMenuHTMLFromArray(sitemapAsArray);
187      const hdMenu = document.getElementById('gnb');
188      const hdWrap = document.getElementById('hd_wrapper');
189      const mediaQuery = window.matchMedia('(min-width: 993px)');
190
191      if (hdMenu) {
192        hdMenu.innerHTML = menuHTML;
193        console.log("메뉴가 성공적으로 삽입되었습니다.");
194
195        function addActiveClass() {
196          hdMenu.classList.add('active');
197          hdWrap.classList.add('active');
198        }
199
200        function removeActiveClass() {
201          hdMenu.classList.remove('active');
202          hdWrap.classList.remove('active');
203        }
204
205        function handlePCInteraction(query) {
206          if (query.matches) {
207            hdMenu.addEventListener('mouseover', addActiveClass);
208            hdMenu.addEventListener('mouseout', removeActiveClass);
209          } else {
210            hdMenu.removeEventListener('mouseover', addActiveClass);
211            hdMenu.removeEventListener('mouseout', removeActiveClass);
212            removeActiveClass();
213          }
214        }
215
216        handlePCInteraction(mediaQuery);
217
218        mediaQuery.addListener(handlePCInteraction);
219      } else {
220        console.error("ID 'gnb'를 가진 요소를 찾을 수 없습니다.");
221      }
222
223      //
224
225
226      // 검색 관련
227      const btnSch = document.querySelector('.btn_sch'); // 열기 버튼
228      const btnSchClose = document.querySelector('.btn_sch_close'); // 닫기 버튼
229      const schBox = document.querySelector('.sch_box'); // 검색 영역
230      const schInput = document.getElementById('sch_stx'); // 입력창
231
232      // 1. 검색창 열기
233      btnSch.addEventListener('click', function(e) {
234        e.stopPropagation(); // 버튼 클릭 시 문서 클릭 이벤트로 전파 방지
235        schBox.classList.add('active');
236        schInput.focus();
237        btnSch.setAttribute('aria-expanded', 'true');
238      });
239
240      // 2. 닫기 버튼 클릭 시 닫기
241      btnSchClose.addEventListener('click', function() {
242        schBox.classList.remove('active');
243        btnSch.setAttribute('aria-expanded', 'false');
244        btnSch.focus(); // 닫힌 후 원래 버튼으로 포커스 복귀 (접근성)
245      });
246
247      // 3. 영역 외 클릭 시 닫기
248      document.addEventListener('click', function(e) {
249        // 클릭된 요소가 schBox 내부에 없고, 열기 버튼도 아닐 때
250        if (schBox.classList.contains('active') &&
251          !schBox.contains(e.target) &&
252          !btnSch.contains(e.target)) {
253
254          schBox.classList.remove('active');
255          btnSch.setAttribute('aria-expanded', 'false');
256        }
257      });
258
259      // 4. (추가) ESC 키 누를 때 닫기 (접근성 강화)
260      document.addEventListener('keydown', function(e) {
261        if (e.key === 'Escape' && schBox.classList.contains('active')) {
262          schBox.classList.remove('active');
263          btnSch.focus();
264        }
265      });
266    });
267  </script>
267
268<!-- 콘텐츠 시작 { -->
269<hr>
270<div id="wrapper" >
271  <div id="container_wr">
272    <div id="container" class="container">
273      
274
275<div class="swiper main_banner">
276  <div class="swiper-wrapper">
277
278			<!-- 없음 -->
279		
280
281	<div class="swiper-slide">
282		<!-- <div class="img_box_bg" style="background-image: url(/theme/th/img/main/main_banner_01.png);"></div> -->
283		<div class="img_box_bg" style="background-image: url(/theme/gcyf/img/main/main_banner_01.png);"></div>
284		<div class="text_box">
285			<div class="inner">
286				<p class="Paperozi">고양시청소년재단</p>
287				<span>더 나은 미래를 만드는 오늘의 주역, 고양 청소년</span>
288			</div>
289		</div>
290	</div>
291  </div>
292  <div class="control_box">
293    <div class="inner">
294      <div class="chevron_box">
295        <div class="chevron btn-next">
296          <img src="/img/common/icon_chevron_left.svg" alt="">
297        </div>
298        <div class="chevron btn-prev">
299          <img src="/img/common/icon_chevron_right.svg" alt="">
300        </div>
301      </div>
302      <div class="control">
303        <div class="swiper-pagination"></div>
304        <button type="button" class="handleSlideBtn">정지</button>
305      </div>
306      <div class="scroll-line">
307        <p>Scroll</p>
308        <div class="line"></div>
309      </div>
310    </div>
311  </div>
312</div>
313<script>
314  var mainVisualSwiper = new Swiper(".main_banner", {
315    loop: true,
316    speed: 1200,
317    effect: 'fade',
318    autoplay: {
319      delay: 5000,
320      disableOnInteraction: false,
321    },
322    pagination: {
323      el: ".main_banner .swiper-pagination",
324      type: "fraction",
325      formatFractionCurrent: function(number) {
326        return ('0' + number).slice(-2);
327      },
328      formatFractionTotal: function(number) {
329        return ('0' + number).slice(-2);
330      },
331      renderFraction: function(currentClass, totalClass) {
332        return '<span class="' + currentClass + '"></span>' +
333          ' <em>/</em> ' +
334          '<span class="' + totalClass + '"></span>';
335      }
336    },
337    slideActiveClass: 'on',
338    navigation: {
339      nextEl: ".main_banner .btn-next",
340      prevEl: ".main_banner .btn-prev",
341    },
342  });
343
344  const handleBtn = document.querySelector('.main_banner .handleSlideBtn');
345  const handleSlide = document.querySelector(`.${handleBtn.dataset.name}`);
346  let state = 0;
347
348  function mainVisualSwiperHandle(event) {
349    if (state == 0) {
350      mainVisualSwiper.autoplay.stop();
351      event.currentTarget.innerText = `재생`;
352      event.currentTarget.classList.add(`stop`);
353      state = 1;
354    } else {
355      mainVisualSwiper.autoplay.start();
356      event.currentTarget.innerText = `정지`;
357      event.currentTarget.classList.remove(`stop`);
358      state = 0;
359    }
360  }
361
362  handleBtn.addEventListener('click', (Event) => {
363    mainVisualSwiperHandle(Event)
364  });
365</script>
365<section class="sub_quick_link" data-aos="fade-up">
366  <div class="inner">
367    <ul class="sub_quick_link_box">
368      <li class="quick_item">
369				<a href="https://linktr.ee/thyouth14">
370          <div class="icon_box"><img src="/img/quick_link/quick_th_01.png" alt=""></div>
371          <span>프로그램 신청</span>
372        </a>
373			</li>
374			<li class="quick_item">
375				<a href="https://map.naver.com/p/entry/place/1318106215?lng=126.7620223&amp;lat=37.6942021&amp;placePath=/ticket?bookingRedirectUrl=https://m.booking.naver.com/booking/6/bizes/1508442&amp;from=map&amp;fromPanelNum=1&amp;additionalHeight=76&amp;timestamp=202511181313&amp;locale=ko&amp;svcName=map_pcv5&amp;from=map&amp;fromPanelNum=1&amp;additionalHeight=76&amp;timestamp=202511061140&amp;locale=ko&amp;svcName=map_pcv5&amp;theme=place&amp;entry=pll&amp;lang=ko&amp;area=pll&amp;c=15.00,0,0,0,dh">
376          <div class="icon_box"><img src="/img/quick_link/quick_th_02.png" alt=""></div>
377          <span>공간 예약</span>
378        </a>
379			</li>
380			<li class="quick_item">
381				<a href="http://pf.kakao.com/_YdvKC">
382          <div class="icon_box"><img src="/img/quick_link/quick_th_03.png" alt=""></div>
383          <span>공지사항</span>
384        </a>
385			</li>
386			<li class="quick_item">
387				<a href="https://www.instagram.com/star_cafe_24/">
388          <div class="icon_box"><img src="/img/quick_link/quick_th_04.png" alt=""></div>
389          <span>온라IN 별</span>
390        </a>
391			</li>
392    </ul>
393  </div>
394</section>
395<div class="main_section main_news">
396  <div class="inner">
397    <div>
398      <h2 class="sect_tit" data-aos="fade-up">
399        재단<span>소식</span>
400      </h2>
401      <section class="notice_link" data-aos="fade-up">
402        <div class="notice">
403          <div class="item1 on">
404            <!-- /home/goyangyouth/public_html/skin/latest/basicNew -->
405<style>
406.date {
407	font-variant-numeric: tabular-nums;
408}
409</style>
410			<h3>공지사항</h3>
411			<div>
412				<ul>
413						<li>
414						<a href="/th/bbs/board.php?bo_table=notice&amp;wr_id=4272"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">추석연휴 휴관 안내</span>						<span class="date">2026.09.19</span>
415
416						</a>					</li>
417						<li>
418						<a href="/th/bbs/board.php?bo_table=notice&amp;wr_id=4199"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">탄현청소년문화의집 [한 여름밤의 청소년 버스킹] 운영</span>						<span class="date">2026.07.29</span>
419
420						</a>					</li>
421						<li>
422						<a href="/th/bbs/board.php?bo_table=notice&amp;wr_id=4170"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">청소년버스킹 [한 여름밤의 버스킹] 공연 동아리 모집</span>						<span class="date">2026.07.01</span>
423
424						</a>					</li>
425						<li>
426						<a href="/th/bbs/board.php?bo_table=notice&amp;wr_id=4141"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">고양시청소년재단 10주년 슬로건 온라인 투표 안내</span>						<span class="date">2026.06.12</span>
427
428						</a>					</li>
429						<li>
430						<a href="/th/bbs/board.php?bo_table=notice&amp;wr_id=4029"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">[우리가 만드는 디지털 세상-2회기]</span>						<span class="date">2026.03.25</span>
431
432						</a>					</li>
433						</ul>
434			</div>
435			<a href="/th/bbs/board.php?bo_table=notice" class="more">더보기<em class="img_bx"><img src="/img/common/icon_more.svg" alt=""></em></a>			            <!-- // 공지사항 끝 -->
436          </div>
437          <div class="item2">
438            <!-- /home/goyangyouth/public_html/skin/latest/basicNew -->
439<style>
440.date {
441	font-variant-numeric: tabular-nums;
442}
443</style>
444			<h3>채용정보</h3>
445			<div>
446				<ul>
447						<li>
448						<a href="/th/bbs/board.php?bo_table=recruitment&amp;wr_id=1076"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">2026년 탄현청소년문화의집 문화체육강좌 2차 강사 모집 공고</span>						<span class="date">2026.06.25</span>
449
450						</a>					</li>
451						<li>
452						<a href="/th/bbs/board.php?bo_table=recruitment&amp;wr_id=1068"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">2026년 탄현청소년문화의집 문화체육강좌 1차 강사 모집 공고</span>						<span class="date">2026.05.29</span>
453
454						</a>					</li>
455						<li>
456						<a href="/th/bbs/board.php?bo_table=recruitment&amp;wr_id=1067"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">탄현청소년문화의집 2026년 탄현청소년문화의집 기간제근로자 채용(활동사업팀) 최종 합격자 …</span>						<span class="date">2026.05.27</span>
457
458						</a>					</li>
459						<li>
460						<a href="/th/bbs/board.php?bo_table=recruitment&amp;wr_id=1066"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">2026년 탄현청소년문화의집 기간제근로자(사업보조직) 채용 1차 서류심사 합격자 공고</span>						<span class="date">2026.05.22</span>
461
462						</a>					</li>
463						<li>
464						<a href="/th/bbs/board.php?bo_table=recruitment&amp;wr_id=1063"> <b class='notic_info item_th'>탄현</b><span class="title ellipsis">탄현청소년문화의집 2026년 기간제근로자 채용(사업보조직)</span>						<span class="date">2026.05.14</span>
465
466						</a>					</li>
467						</ul>
468			</div>
469			<a href="/th/bbs/board.php?bo_table=recruitment" class="more">더보기<em class="img_bx"><img src="/img/common/icon_more.svg" alt=""></em></a>			            <!-- // 채용공고 끝 -->
470          </div>
471          
471<script>
472            $(document).ready(function() {
473              $('.notice > [class*="item"] h3').on('click', function() {
474                $('.notice > [class*="item"]').removeClass('on');
475                $(this).closest( '[class*="item"]' ).addClass( 'on' );
476              })
477            })
478          </script>
478
479        </div>
480      </section>
481    </div>
482    <section class="popup" data-aos="fade-up">
483      <h3 class="sound_only">팝업존</h3>
484      <div class="swiper" data-aos="zoom-in">
485        <ul class="swiper-wrapper">
486          
487	<li class="swiper-slide">
488					<a href="https://www.gcyf.or.kr/theme/th/webzine/2512/index.html" target="_blank" class="img_bx">
489							<img src="/data/file/side_mb_tanhyun/thumb-3695710099_PTYIGCZp_5e30511982ac0836442d107a07a89940be747e62_720x0.jpg" alt="탄현청소년문화의집 웹진 바로 보기">
490							</a>	</li>
491          <li class="swiper-slide">
492            <div>
493              <span class="img_bx"><img src="/img/common/popup_banner.jpg" alt="" /></span>
494              <span class="titl sound_only">고양시청소년재단</span>
495            </div>
496          </li>
497        </ul>
498      </div>
499      <div class="wrap_pagin">
500        <div class="swiper-pagination-fraction">
501          <span class="swiper-pagination-current"></span>
502          <div class="swiper-pagination swiper-progress-main_visual swiper-pagination-progressbar">
503            <span class="swiper-pagination-progressbar-fill"></span>
504          </div>
505          <span class="swiper-pagination-total"></span>
506          <button type="button" class="btn_autoplay_toggle" aria-label="자동재생 정지">
507            <span class="icon_box"></span>
508          </button>
509        </div>
510      </div>
511      <div class="bx_etc">
512        <div class="button-prev swiper-button-prev-main_visual"></div>
513        <div class="button-next swiper-button-next-main_visual"></div>
514      </div>
515      
515<script>
516        const swiper = new Swiper('.popup .swiper', {
517          loop: true,
518          speed: 700,
519          autoplay: {
520            delay: 3000,
521            disableOnInteraction: false,
522          },
523          pagination: {
524            el: '.swiper-progress-main_visual',
525            type: 'progressbar',
526          },
527          navigation: {
528            nextEl: '.swiper-button-next-main_visual',
529            prevEl: '.swiper-button-prev-main_visual',
530          },
531          on: {
532            // 1. 초기화 시 실행
533            init: function() {
534              updateFraction(this);
535            },
536            // 2. 슬라이드 변경 시 실행
537            slideChange: function() {
538              updateFraction(this);
539            }
540          }
541        });
542
543        // [숫자 업데이트 함수]
544        function updateFraction(s) {
545          // .popup 컨테이너 내에서 요소를 찾아야 정확합니다.
546          const currentEl = document.querySelector('.popup .swiper-pagination-current');
547          const totalEl = document.querySelector('.popup .swiper-pagination-total');
548
549          if (currentEl && totalEl) {
550            // 01, 02 형식으로 보이게 하려면 padStart 사용
551            const current = (s.realIndex + 1).toString().padStart(2, '0');
552            // 복제 슬라이드를 제외한 실제 슬라이드 개수 계산
553            const total = s.slides.filter(el => !el.classList.contains('swiper-slide-duplicate')).length.toString().padStart(2, '0');
554
555            currentEl.textContent = current;
556            totalEl.textContent = total;
557          }
558        }
559        // [일시정지 / 재생 버튼 제어]
560        const btnAutoplay = document.querySelector('.btn_autoplay_toggle');
561        if (btnAutoplay) {
562          btnAutoplay.addEventListener('click', function() {
563            const isPaused = this.classList.toggle('is-paused');
564            const iconPause = this.querySelector('.icon_pause');
565            const iconPlay = this.querySelector('.icon_play');
566
567            if (isPaused) {
568              swiper.autoplay.stop();
569              if (iconPause) iconPause.style.display = 'none';
570              if (iconPlay) iconPlay.style.display = 'block';
571            } else {
572              swiper.autoplay.start();
573              if (iconPause) iconPause.style.display = 'block';
574              if (iconPlay) iconPlay.style.display = 'none';
575            }
576          });
577        }
578      </script>
578
579    </section>
580  </div>
581</div>
582
583<section class="main_sns main_section">
584  <div class="inner">
585    <div class="position">
586      <h2 class="sect_tit" data-aos="fade-up">
587        <span>#SNS</span> 바로가기
588      </h2>
589      <div class="single_color_sns" id="main_sns" data-aos="fade-up"></div>
590    </div>
591    <ul class="img_list" id="instafeed">
592      <!--li data-aos="fade-up">
593        <a href="">
594          <img src="/img/sns_01.png" alt="">
595        </a>
596      </li>
597      <li data-aos="fade-up">
598        <a href="">
599          <img src="/img/sns_02.png" alt="">
600        </a>
601      </li>
602      <li data-aos="fade-up">
603        <a href="">
604          <img src="/img/sns_03.png" alt="">
605        </a>
606      </li-->
607    </ul>
608    <div class="bg" data-aos="fade-down">
609      <img src="/img/common//sns_bg.svg" alt="">
610    </div>
611  </div>
612  
612<script>
613    // sns 가져오기
614    const snsMainContainer = document.getElementById('main_sns');
615    const linksMainHTML = createSnsLinksHTML(snsLinks);
616    snsMainContainer.innerHTML = linksMainHTML;
617  </script>
617
618</section>
619
620<script>
621    // PHP 배열을 JSON 문자열로 변환하여 JS 배열로 받습니다.
622    const listData = [{"wr_id":"69","wr_num":"-55","wr_reply":"","wr_parent":"69","wr_is_comment":"0","wr_comment":"0","wr_comment_reply":"","ca_name":"","wr_option":"html1","wr_subject":"탄현청소년문화의집 웹진 바로 보기","wr_content":"<p>탄현청소년문화의집에 놀러오세요~<\/p>","wr_link1":"https:\/\/www.gcyf.or.kr\/theme\/th\/webzine\/2512\/index.html","wr_link2":"","wr_link1_hit":"1","wr_link2_hit":"0","wr_hit":"2","wr_good":"0","wr_nogood":"0","mb_id":"admin","wr_name":"최고관리자","wr_email":"[email protected]","wr_homepage":"","wr_datetime":"2026-01-07 17:01:54","wr_file":"1","wr_last":"2026-01-07 17:01:54","wr_ip":"220.72.15.147","wr_facebook_user":"","wr_twitter_user":"","wr_1":"","wr_2":"_blank","wr_3":"2026-01-07","wr_4":"2026-12-31","wr_5":"","wr_6":"","wr_7":"","wr_8":"","wr_9":"","wr_10":"","is_notice":false,"subject":"탄현청소년문화의집 웹진 바로 보기","comment_cnt":"","datetime":"2026-01-07","datetime2":"01-07","last":"2026-01-07","last2":"01-07","name":"<span class=\"sv_member\">최고관리자<\/span>","reply":0,"icon_reply":"","icon_link":"<i class=\"fa fa-link\" aria-hidden=\"true\"><\/i> ","ca_name_href":"\/bbs\/board.php?bo_table=side_mb_tanhyun&amp;sca=","href":"\/bbs\/board.php?bo_table=side_mb_tanhyun&amp;wr_id=69","comment_href":"\/bbs\/board.php?bo_table=side_mb_tanhyun&amp;wr_id=69","icon_new":"","icon_hot":"","icon_secret":"","link":{"1":"https:\/\/www.gcyf.or.kr\/theme\/th\/webzine\/2512\/index.html","2":null},"link_href":{"1":"\/bbs\/link.php?bo_table=side_mb_tanhyun&amp;wr_id=69&amp;no=1","2":"\/bbs\/link.php?bo_table=side_mb_tanhyun&amp;wr_id=69&amp;no=2"},"link_hit":{"1":1,"2":0},"file":{"count":"1"},"icon_file":"<i class=\"fa fa-download\" aria-hidden=\"true\"><\/i> "}];
623    
624    // 콘솔 창에 출력합니다.
625    console.log("게시물 리스트:", listData);
626</script>
626
627	<div id="" class="modal type_popup">
628		<!-- 게시물 있다. -->
629		<div class="modal-content">
630			<div class="swiper">
631				<div class="swiper-wrapper">
632												<div class="swiper-slide">
633																	<a href="https://www.gcyf.or.kr/theme/th/webzine/2512/index.html" target="_blank" class="img_bx">
634																	<img src="/data/file/side_mb_tanhyun/thumb-3695710099_PTYIGCZp_5e30511982ac0836442d107a07a89940be747e62_720x0.jpg" alt="탄현청소년문화의집 웹진 바로 보기">
635																	</a>							</div>
636									</div>
637				<div class="button-prev"></div>
638  			<div class="button-next"></div>
639			</div>
640			<div class="bottom">
641				<div class="closeOption"><label for="closeOption1" class="closeOption1"><input type="checkbox" id="closeOption1" hidden>오늘 하루 보지 않기</label></div>
642				<div class="closeArea">
643					<div class="swiper-pagination"></div>
644					<button type="button" class="close-btn">닫기</button>
645				</div>
646			</div>
647		</div>
648	</div>
649	
649<script>
650		const slides2 = document.querySelectorAll(
651			".modal.type_popup .swiper .swiper-slide"
652		);
653		const slideCount2 = slides2.length;
654		const swiperEl2 = document.querySelector(".modal.type_popup .swiper");
655
656		let swiper2;
657
658		function updateCenterClass2( slidesPerView ) {
659			const needGroupCenter = ( slideCount2 > 1 ) && ( slideCount2 < slidesPerView ) // condition
660			swiperEl2.classList.toggle("is-centered", needGroupCenter);
661		}
662
663		function getSlidesPerView2() {
664			const w = window.innerWidth;
665			if (w >= 993) return 3;
666			if (w >= 769) return 2;
667			if (w >= 499) return 1.5;
668			return 1;
669		}
670
671		function initSwiper2() {
672			const slidesPerView = getSlidesPerView2();
673
674			if (slideCount2 === 0) {
675				return;
676			}
677
678			const needCenter = slideCount2 === 1;
679
680			updateCenterClass2( slidesPerView );
681
682			if (swiper2) swiper2.destroy(true, true);
683
684			swiper2 = new Swiper( ".modal.type_popup .swiper" , {
685				slidesPerView,
686				loop: slideCount2 > slidesPerView,
687				centeredSlides: needCenter,
688				initialSlide: 0,
689				speed: 500,
690				direction: 'horizontal',
691				autoplay: slideCount2 > slidesPerView
692					? { delay: 5000000, pauseOnMouseEnter: true }
693					: false,
694				pagination: {
695					el: '.modal.type_popup .swiper-pagination',
696					type: "fraction",
697				},
698				navigation: {
699					nextEl: '.type_popup .button-next',
700					prevEl: '.type_popup .button-prev',
701				},
702			});
703
704		}
705		function debounce( fn, delay = 200 ) {
706			let timer = null;
707
708			return function () {
709					clearTimeout( timer );
710					timer = setTimeout( () => {
711							fn();
712					}, delay)
713			};
714    }
715
716		const debouncedInitSwiper2 = debounce( initSwiper2, 200 );
717
718		debouncedInitSwiper2();
719		window.addEventListener( "resize", debouncedInitSwiper2 )
720
721		document.addEventListener('DOMContentLoaded', () => {
722			const POPUP_KEY = 'hidePopupUntil';
723			const dimm = document.querySelector('.modal.type_popup');
724			const popup = document.querySelector('.modal.type_popup .modal-content');
725			const todayCheckbox = document.getElementById('closeOption1');
726			const popupCloseBtn = document.querySelector('.modal.type_popup .close-btn');
727			// 오늘 끝 시간 (23:59:59)
728			function getEndOfToday() {
729				const now = new Date();
730				return new Date(
731					now.getFullYear(),
732					now.getMonth(),
733					now.getDate(),
734					23, 59, 59
735				).getTime();
736			}
737			function popupClose() {
738				dimm.classList.remove('active');
739			}
740			// 페이지 로드 시 팝업 노출 여부
741			( function initPopup() {
742				const hideUntil = localStorage.getItem( POPUP_KEY );
743
744				if( hideUntil && Date.now() < Number(hideUntil) ) {
745					popupClose();
746					return;
747				}
748
749				dimm.classList.add('active');
750			} )();
751			// 팝업 닫기 버튼 클릭 시
752			popupCloseBtn.addEventListener( 'click', () => {
753				if ( todayCheckbox.checked ) {
754					localStorage.setItem( POPUP_KEY, getEndOfToday() );
755				}
756				popupClose();
757			})
758			// 팝업 이외 영역 클릭 시
759			dimm.addEventListener( 'click', ( e ) => {
760				if ( !popup.contains( e.target ) ) {
761					popupClose();
762				}
763			})
764		})
765	</script>
765
766
767<script>
768    AOS.init();
769</script>
769
770</div>
771</div>
772</div>
773<!-- } 콘텐츠 끝 -->
774
775<hr>
776
777<!-- 하단 시작 { -->
778<div class="link_pc_facility">
779  <div class="inner">
780    <ul>
781      <li class="link_item_list">
782      <a href="/gcyf"><span>청소년재단</span></a>
783      </li>
784      <li class="link_item_list">
785        <a href="javascript:void(0);"><span>청소년수련관</span><i class="arrow"></i></a>
786        <ul>
787          <li>
788            <a href="/td"><span>토당청소년수련관</span></a>
789          </li>
790          <li>
791            <a href="/md"><span>마두청소년수련관</span></a>
792          </li>
793          <li>
794            <a href="/sg"><span>일산서구청소년수련관</span></a>
795          </li>
796        </ul>
797      </li>
798      <li class="link_item_list">
799        <a href="javascript:void(0);"><span>청소년문화의집</span><i class="arrow"></i></a>
800        <ul>
801          <li>
802            <a href="/ss"><span>성사청소년문화의집</span></a>
803          </li>
804          <li>
805            <a href="/th"><span>탄현청소년문화의집</span></a>
806          </li>
807          <li>
808            <a href="/sp"><span>송포청소년문화의집</span></a>
809          </li>
810        </ul>
811      </li>
812      <li class="link_item_list">
813        <a href="javascript:void(0);"><span>청소년자유공간</span><i class="arrow"></i></a>
814        <ul>
815          <li>
816            <a href="/hj"><span>화정청소년자유공간</span></a>
817          </li>
818          <li>
819            <a href="/jg"><span>주교청소년자유공간</span></a>
820          </li>
821          <li>
822            <a href="/hs"><span>행신청소년자유공간</span></a>
823          </li>
824        </ul>
825      </li>
826      <li class="link_item_list">
827        <a href="javascript:void(0);"><span>청소년특화시설</span><i class="arrow"></i></a>
828        <ul>
829          <li>
830            <a href="/sb"><span>고양시청소년상담복지센터</span></a>
831          </li>
832          <li>
833            <a href="/gd"><span>고양시학교밖청소년지원센터</span></a>
834          </li>
835        </ul>
836      </li>
837    </ul>
838  </div>
839</div>
840
841<script>
842  document.addEventListener("DOMContentLoaded", () => {
843    const linkItems = document.querySelectorAll('.link_item_list');
844
845    linkItems.forEach(item => {
846        const trigger = item.querySelector('a'); // 클릭할 대상
847        const subMenu = item.querySelector('ul');
848
849        if (subMenu) {
850            trigger.addEventListener('click', (e) => {
851                // 1. 기본 링크 이동 방지 및 버블링 차단
852                e.preventDefault();
853                e.stopPropagation();
854
855                // 2. 다른 열려있는 메뉴 닫기 (선택 사항)
856                linkItems.forEach(otherItem => {
857                    if (otherItem !== item) {
858                        otherItem.classList.remove('is-active');
859                    }
860                });
861
862                // 3. 현재 메뉴 토글
863                item.classList.toggle('is-active');
864            });
865        }
866    });
867
868    // 4. 메뉴 바깥 영역 클릭 시 닫기
869    document.addEventListener('click', () => {
870        linkItems.forEach(item => item.classList.remove('is-active'));
871    });
872  });
873</script>
873<div class="footer">
874  <div class="inner">
875    <div class="ft_left">
876      <div class="ft_address">
877        <span>10242) 경기도 고양시 일산서구 일현로 97-11 두산위브더제니스 공공시설 2층<br>대표번호 031-995-4220</span>
878        <em>Copyright &copy; 2026 Goyang City Youth Foundation. All rights reserved.</em>
879      </div>
880      <div class="logo">
881        <img src="/img/sub_logo/tanhyun_logo.png" alt="탄현청소년문화의집" class="icon-gray">
882      </div>
883    </div>
884    <div class="ft_center">
885      <ul class="fl_link">
886        <li>
887          <a href="/bbs/content.php?co_id=provision">이용약관</a>
888        </li>
889        <li>
890          <a href="/bbs/content.php?co_id=privacy">개인정보처리방침</a>
891        </li>
892        <li>
893          <a href="/th/bbs/content.php?co_id=tanhyun_01_5">오시는길</a>
894        </li>
895      </ul>
896    </div>
897    <div class="ft_right">
898      <div class="ft_sns single_color_sns" id="ft_sns"></div>
899      <div class="ft_facility_link_box">
900        <div class="ft_facility_link">
901          <button class="btn" id="ft_menu-toggle-btn" aria-expanded="false"><span>재단운영시설</span><i><img src="/img/common/chevron-down.svg" alt=""></i></button>
902          <ul id="ft_facilities" class="ft_btn_facilities is-closed"></ul>
903        </div>
904        <div class="ft_facility_link">
905          <button class="btn" id="ft_menu-toggle-btn2" aria-expanded="false"><span>유사기관</span><i><img src="/img/common/chevron-down.svg" alt=""></i></button>
906          <ul id="ft_facilities2" class="ft_btn_facilities is-closed"></ul>
907        </div>
908      </div>
909    </div>
910    
910<script>
911      // sns 가져오기
912      const snsFtContainer = document.getElementById('ft_sns');
913      const linksHTML = createSnsLinksHTML(snsLinks);
914      snsFtContainer.innerHTML = linksHTML;
915
916      //재단운영시설 가져오기
917      facilityMenuToggle('ft_facilities', 'ft_menu-toggle-btn', facilities);
918      facilityMenuToggle('ft_facilities2', 'ft_menu-toggle-btn2', relatedLinks);
919    </script>
919
920  </div>
921
922  <button type="button" id="top_btn"><i aria-hidden="true"></i><span class="sound_only">상단으로</span></button>
923
924  
924<script>
925    document.addEventListener('DOMContentLoaded', function() {
926      const topBtn = document.getElementById('top_btn');
927      if (!topBtn) return;
928
929      // 1. 초기 스타일 설정
930      topBtn.style.transition = 'opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease';
931      topBtn.style.opacity = '0';
932      topBtn.style.visibility = 'hidden';
933      topBtn.style.transform = 'translateY(10px)';
934
935      // 2. 스크롤 체크 함수 (재사용을 위해 분리)
936      function checkScroll() {
937        const scrollTop = window.scrollY || document.documentElement.scrollTop;
938
939        if (scrollTop > 300) {
940          topBtn.style.opacity = '1';
941          topBtn.style.visibility = 'visible';
942          topBtn.style.transform = 'translateY(0)';
943        } else {
944          topBtn.style.opacity = '0';
945          topBtn.style.visibility = 'hidden';
946          topBtn.style.transform = 'translateY(10px)';
947        }
948      }
949
950      // 3. 페이지 로드 시 즉시 실행 (새로고침 대응)
951      checkScroll();
952
953      // 4. 스크롤 할 때마다 실행
954      window.addEventListener('scroll', checkScroll);
955
956      // 5. 클릭 시 최상단 이동
957      topBtn.addEventListener('click', function(e) {
958        e.preventDefault();
959        window.scrollTo({
960          top: 0,
961          behavior: 'smooth'
962        });
963      });
964    });
965  </script>
965
966
967  <div class="all_menu is-closed" id="full-menu-overlay">
968    <h2 class="sound_only">전체 메뉴</h2>
969    <div class="all_inner">
970      <div class="all_hd_top">
971        <div class="logo">
972          <img src="/img/sub_logo/tanhyun_logo.png" alt="탄현청소년문화의집" class="icon-white">
973        </div>
974        <button class="btn_close" id="close-menu-btn" type="button"><span class="sound_only">닫기</span></button>
975      </div>
976      <div class="all_menu_content">
977        <div class="all_member">
978                      <a href="/bbs/login.php" class="btn_login">로그인</a>
979                  </div>
980        <div class="all_top_menu columns_5" id="all_top_menu"></div>
981      </div>
982      <div class="facility_link">
983        <div class="top_facility_link">
984          <button class="btn" id="all_menu-toggle-btn" aria-expanded="false"><span>재단운영시설</span><i><img src="/img/common/chevron-down.svg" alt=""></i></button>
985          <ul id="all_facilities" class="allbtn_facilities is-closed"></ul>
986        </div>
987      </div>
988      <div class="all_menu_sns single_color_sns" id="all_menu_sns"></div>
989    </div>
990  </div>
991  
991<script>
992    document.addEventListener('DOMContentLoaded', function() {
993      // header_menu 가져오기
994      const allMenu = document.getElementById('all_top_menu');
995      const allMenuHTML = createMenuHTMLFromArrayAll(sitemapAsArray);
996
997      allMenu.innerHTML = allMenuHTML;
998
999
1000      // sns 가져오기
1001      const snsContainer = document.getElementById('all_menu_sns');
1002      const linksHTML = createSnsLinksHTML(snsLinks);
1003      snsContainer.innerHTML = linksHTML;
1004
1005      //재단운영시설 가져오기
1006      facilityMenuToggle('all_facilities', 'all_menu-toggle-btn', facilities);
1007
1008      // 전체메뉴 닫기 관련
1009      const openBtn = document.getElementById('open-menu-btn');
1010      const closeBtn = document.getElementById('close-menu-btn');
1011      const fullMenu = document.getElementById('full-menu-overlay');
1012
1013      if (openBtn && closeBtn && fullMenu) {
1014
1015        // 2. 열기 버튼 클릭 시
1016        openBtn.addEventListener('click', function() {
1017          fullMenu.classList.remove('is-closed');
1018          document.body.style.overflow = 'hidden';
1019        });
1020
1021        // 3. 닫기 버튼 클릭 시
1022        closeBtn.addEventListener('click', function() {
1023          fullMenu.classList.add('is-closed');
1024          document.body.style.overflow = '';
1025        });
1026
1027      } else {
1028        console.error("메뉴 토글에 필요한 버튼(open-menu-btn, close-menu-btn) 또는 오버레이(full-menu-overlay) 요소를 찾을 수 없습니다.");
1029      }
1030
1031      // 반응형 메뉴 초기화
1032      initMenu()
1033    });
1034  </script>
1034
1035</div>
1036
1037<!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 65 bytes, lines 1037-1038
1037
1038<script async src="https://www.googletagmanager.com/gtag/js?id=
1038UA-166625430-1
vendor: 13 bytes, line 1038
1038"></script>
1039<script>
1040  
vendor: 138 bytes, lines 1040-1044
1040window.dataLayer = window.dataLayer || [];
1041  function gtag(){dataLayer.push(arguments);}
1042  gtag('js', new Date());
1043
1044  gtag('config', '
1044UA-166625430-1
vendor: 5 bytes, line 1044
1044');
1045</script>
1045
1046
1047<!-- } 하단 끝 -->
1048
1049<script>
1050  $(function() {
1051    // 폰트 리사이즈 쿠키있으면 실행
1052    font_resize("container", get_cookie("ck_font_resize_rmv_class"), get_cookie("ck_font_resize_add_class"));
1053  });
1054</script>
1054
1055
1056
1057
1058</div>
1059</body>
1060</html>
1061
1062
1063<script src="/js/instafeed.min.js"></script>
vendor: 1 bytes, line 1063
1063
1064<script>
1065    var accessToken = 'IGAAScNwgZC90hBZAGFHRDZAOZAnlBLUFHdHBFRjRncjF3N3VkbFBKbXBnbm5CdjZA3RGhjaVU4UTVwZAVZA3T2ZAZAdXFHbGpndkhQZADQ1ckFXb3pFNlZANQ29ua0tPdE9QaTBEV2I3TGtjdVQxNGszOUQ0cXQtVUJR';
1066    if(accessToken) {
1067        var feed = new Instafeed({
1068            accessToken: accessToken,
1069            limit: 3,
1070            template: '<li data-aos="fade-up"><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"></a></li>',
1071            transform: function(item) {
1072                var d = new Date(item.timestamp);
1073                item.date = [d.getDate(), d.getMonth(), d.getYear()].join('/');
1074                return item;
1075            },
1076        });
1077        feed.run();
1078    }
1079</script>
vendor: 1 bytes, line 1079
1079

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.