qna.html


<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="author" content="루나">
    <link rel="apple-touch-icon" sizes="57x57" href="./logo/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./logo/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./logo/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./logo/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./logo/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./logo/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./logo/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./logo/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./logo/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="./logo/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./logo/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./logo/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./logo/favicon-16x16.png">
    <link rel="manifest" href="./logo/manifest.json">
    <meta name="msapplication-TileColor" content="#524B9B">
    <meta name="msapplication-TileImage" content="./logo/ms-icon-144x144.png">
    <meta name="theme-color" content="#524B9B">

    <meta http-equiv="Title" content="세상을 비추는 달, LUNA">
    <meta http-equiv="Subject" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta http-equiv="Publisher" content="루나">

    <meta name="twitter:title" content="세상을 비추는 달, LUNA">
    <meta name="twitter:description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta name="twitter:image" content="./logo/logo-512x512.png">
    <meta name="twitter:card" content="summary_large_image">

    <meta property="og:type" content="website">
    <meta property="og:title" content="세상을 비추는 달, LUNA">
    <meta property="og:description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta property="og:image" content="./logo/logo-512x512.png">
    <meta property="og:url" content="https://luna.codes">

    <link rel="canonical" href="https://luna.codes">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>세상을 비추는 달, LUNA</title>
    <meta name="description" content="한국디지털미디어고등학교의 IT 소셜벤처 동아리">
    <meta name="keywords" content="루나,LUNA,디미고,DIMIGO,동아리,IT소셜벤처">

    <link rel="stylesheet" href="./css/style.css">

    <script src="https://npm.2w.vc/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/ScrollMagic.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>
    <script src="https://npm.2w.vc/scrollmagic@2.0.8/scrollmagic/minified/plugins/animation.gsap.min.js"></script>
    <script src="https://npm.2w.vc/gsap@2.1.3/src/minified/TweenMax.min.js"></script>
    <script src="https://npm.2w.vc/gsap@2.1.3/src/minified/TimelineMax.min.js"></script>
  </head>
  <body>
    <div id="app" class="qna">
      <div id="navbar">
  <div id="inner">
    <a id="item" href="./"><img src="./logo/favicon-96x96.png">LUNA</a>
    <div id="fill"></div>
    <a id="item" slug="home" href="./"><div id="active">홈</div><div id="deactive">홈</div></a>
    <a id="item" slug="member" href="./member.html"><div id="active">멤버</div><div id="deactive">멤버</div></a>
    <a id="item" slug="award" href="./award.html"><div id="active">업적</div><div id="deactive">업적</div></a>
    <a id="item" slug="project" href="./project.html"><div id="active">프로젝트</div><div id="deactive">프로젝트</div></a>
    <a id="item" slug="qna" href="./qna.html"><div id="active">Q&A</div><div id="deactive">Q&A</div></a>
  </div>
  <script>
    $('#navbar a[slug="qna"]').addClass('active');
  </script>
</div>
      <div id="scroll">
        <div id="content">
          <div id="page" class="main">
  <div id="inner">
    <div id="text">
      <div id="title">자주 묻는 질문</div>
      <div id="description">루나에 대해서 자주 묻는 질문을 정리했습니다.<br>아래 질문들에 답변한 유튜브 영상이 있으니, <span id="bold">궁금하시다면 영상을 시청해주세요!</span></div>
    </div>
    <iframe src="https://www.youtube.com/embed/hIX8CQHqW-M?wmode=transparent&rel=0&controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  </div>
</div>
<div id="page" class="qna" type="min">
  <div id="inner">
  </div>
</div>

<script type="module" src="./js/utils.qna.js"></script>
          <div id="footer">
  <div id="inner">
    <div id="identify">
      <div id="logo"></div>
      <div id="text">
        <div id="slogan">세상을 비추는 달,</div>
        <div id="title">LUNA</div>
      </div>
    </div>
    <div id="menu">
      <div id="sns">
        <a id="item" class="instagram" href="https://www.instagram.com/dimigo_luna/" target="_blank"></a>
        <a id="item" class="github" href="https://github.com/LUNA-coding" target="_blank"></a>
        <a id="item" class="youtube" href="https://www.youtube.com/channel/UCWfvTEUzP9b2pPTDBSi9IMg" target="_blank"></a>
        <a id="item" class="facebook" href="https://www.facebook.com/lunacoding/" target="_blank"></a>
      </div>
      <div id="cc">Copyright © 2024 LUNA All rights reserved.</div>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
    <script>
      const slug = "qna";
      let showWidth = 0;
      let showHeight = 0;
      let checkScale = true;
      const getVW = (width) => showWidth * width / 100;
      const getVH = (height) => showHeight * height / 100;
      const setScaleWithWidth = (scaleWidth) => {
        const scale = $(window).width() / scaleWidth;
        setScale(scale);
      };
      const setScale = (scale) => {
        $('body').css('transform', `scale(${scale})`);
        $('body').css('width', `${1 / scale * 100}%`);
        $('body').css('height', `${1 / scale * 100}%`);
        checkScale = false;
        window.dispatchEvent(new Event('resize'));
      };
      const resize = () => {
        [showWidth, showHeight] = [$('body').width(), $('body').height()];
        $('#app').width(showWidth); $('#app').height(Math.ceil(showHeight));
        $('#content #page[type="full"]').height(showHeight - $('#navbar').height());
        $('#content #page[type="min"]').css('min-height', `${showHeight - $('#navbar').height()}px`);
        for(const vw of $('.vw')) {
          $(vw).width(getVW($(vw).attr('vw')));
        }

        if(checkScale) {
          if(showWidth <= 750) {
            setScaleWithWidth(750);
          } else {
            setScale(1);
          }
        } else {
          checkScale = true;
        }
      }; resize();
      $(window).resize(resize).trigger('resize');
      $(document).ready(() => {
        $('#scroll').addClass('loaded');
        if(["member", "project"].includes(slug)) {
          $('#navbar').addClass('glass');
          $('#scroll').scroll(() => {
            if($('#scroll').scrollTop()) {
              $('#navbar').removeClass('glass');
            } else {
              $('#navbar').addClass('glass');
            }
          });
        }
      });
    </script>
  </body>
</html>