index.html

<!DOCTYPE html>
<html lang="ko" dir="ltr" onmouseup="stamp()" xmlns="http://www.w3.org/1999/html">
<!-- Left To Right, 텍스트의 방향 지정, rlt의 경우 거꾸로 -->
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DYC615HPFM"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-DYC615HPFM');
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 모바일 화면을 위한 meta 태그, 사용중인 장치와 동일하게 뷰포트의 너비를 설정-->
    <!-- <meta name="viewport" content="initial-scale=1"> -->
    <!-- 기본 확대 / 축소 막아두기-->

    <!-- sns 공유하기 - twitter, Open Graph -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="보인다 총무(였던 것)">
    <meta name="twitter:title" content="보드게임 취향 테스트">
    <meta name="author" content="보인다 총무(였던 것)">
    <meta name="keywords" content="인천대학교, 인천대, 동아리, 보인다, 심리테스트">
    <meta property="og:url" content="https://boinda-test.netlify.app"/>
    <meta property="og:title" content="보드게임 취향 테스트"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content="https://boinda-test.netlify.app/img/share.png"/>
    <meta property="og:image:alt" content="우와! 친구다 친구!"/>
    <meta property="og:description" content="너에게 딱 맞는 보드게임을 추천해줄게!"/>

    <!--favicon-->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="img/favicon.ico"/>

    <title>보드게임 취향 테스트</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <!-- 반응형 웹과 버튼 등을 위한 링크 -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <!-- https://fonts.google.com/specimen/Gaegu?subset=korean#standard-styles -->

    <link rel="stylesheet" href="./css/default.css">
    <link rel="stylesheet" href="./css/animation.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/qna.css">
    <link rel="stylesheet" href="./css/result.css">
    <link rel="stylesheet" href="./css/color.css">
    <link rel="stylesheet" href="./css/cursor.css">

    <!-- RELation(필수): 현재 문서와 외부 리소스 사이의 연관 관계를 명시
    Hypertext REFerence: 태그가 사용하는 파일의 원본-->

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script src="./js/jskey.js" charset="utf-8"></script>

</head>
<body>
<div class="content" id="stamp" onmouseup="stamp()"></div>
<div class="container noSelect">    <!-- in order to use grid system-->
    <section id="main" class="mx-auto my-5 px-3 py-5">
        <!-- https://getbootstrap.com/docs/5.1/utilities/spacing/ -->
        <h2 class="mb-3">보드게임 좋아해?</h2>
        <h1 class="mb-3">너에게 딱 맞는 <br> 보드게임을 추천해줄게!</h1>
        <!-- keep-all 로 어절이 끊기지 않게!-->
        <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
            <img src="./img/main.png" alt="mainImage" class="img-fluid">
            <!-- img-fluid 로 이미지에 반응성 적용-->
        </div>
        <div id="pleaseUseExternalBrowser">

        </div>

        <button type="button" class="btn begin mt-3 py-2 px-3"
                onclick="begin()">시작하기
        </button>
    </section>
    <section id="qna">
        <div class="progress mx-auto mt-5">
            <div class="progressBar">
            </div>
        </div>
        <div class="qBox mx-auto my-5 px-3 py-3 ">

        </div>
        <div class="answerBox">

        </div>
    </section>
    <section id="result" class="mx-auto my-5 py-5 px-3" style="word-break:keep-all">
        <h1>너... 이런 거 좋아하니?</h1>
        <div class="resultName">

        </div>
        <div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">

        </div>
        <div class="resultDesc">

        </div>

        <div id="linkDiv" class="mx-auto my-3">

        </div>

        <div id="shareDiv" class="mt-3 mx-auto">
            <button type="button" class="kakao px-2" onclick="setKakaoShare()"><img src="./img/kakaotalk.svg"
                                                                                    alt="카카오톡 공유하기"></button>
            <button type="button" class="twitter px-2" onclick="setTwitterShare()"><img src="./img/twitter.svg"
                                                                                        alt="트위터 공유하기"></button>
            <button type="button" class="facebook px-2" onclick="setFacebookShare()"><img src="./img/facebook.svg"
                                                                                          alt="페이스북 공유하기"></button>
            <button type="button" class="clipboard px-2" onclick="setClipboardShare()">🖇</button>
            <p>결과를 공유할 수 있어요!</p>
            <p class="resultShare pt-3" id="pleaseWait"></p>
        </div>
        <button type="button" id="refresh" class="refresh mx-auto mt-3 py-2 px-3" onClick="window.location.reload()">
            다시하기
        </button>
    </section>
    <script src="./js/background.js" charset="utf-8"></script>
    <script src="./js/data.js" charset="utf-8"></script>
    <script src="./js/start.js" charset="utf-8"></script>
    <script src="./js/share.js" charset="utf-8"></script>
    <script src="./js/result.js" charset="utf-8"></script>
    <script src="./js/detecting.js" charset="utf-8"></script>
    <script src="./js/stamp.js" charset="utf-8"></script>

    <!-- 통상적으로 js는 body 하단에 import-->
</div>

</body>
</html>