'HTML프로젝트' 태그의 글 목록

HTML프로젝트

개발자 포트폴리오 2022.12.14 1
[web] 간단한 숫자게임 2022.12.14

728x90

개발자 포트폴리오

2022. 12. 14. 21:02

728x90

HTML 코드

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sticky Memo</title>
    <script src="랜딩페이지.js" defer></script>
    <link rel="stylesheet" href="랜딩페이지.css">
    <script src="https://kit.fontawesome.com/3777ee8c9b.js" crossorigin="anonymous"></script>
</head>
    <body>

<!-- 상단 메뉴 -->
       <header>
           <nav class="headA">
               <span><a href="#" class="num1">HOME</a></span>
                <span><a href="#a1" class="num2">ABOUT</a></span>
                <span><a href="#a2" class="num3">SKILL</a></span>
                <span><a href="#a3" class="num4">PROJECTS</a></span>
                <span><a href="#a4" class="num5">CONTACT</a></span>
                <a>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                    <i class="fa-solid fa-angles-down"></i>
                </a>
            </nav>
        </header>

<!--메인화면-->
        <section class="conA" >
            <div class="container">
                <h1>PORTFOLIO</h1>
                <p>안녕하세요 *** 입니다.</p>
                <p>제 포트폴리오에 오신것을 환영합니다.</p>
            </div>
        </section>
<div id="a1"></div>

<!--소개-->
        <section class="conB">
            <div class="ABOUT">ABOUT</div>
            <div class="container">
                <div class="Img"></div>
                <div class="cover">
                여기에 소개글 작성
                </div>
            </div>
        </section>
<div id="a2"></div>
<!--스킬-->
        <section class="conC">
            <div class="SKILL">SKILL</div>
            <div class="container">
                <div class="text">
                    <h1 class="HTML">HTML</h1>
                    <div class="HTMLImg"></div>
                </div>
                <div class="text">
                    <h1 class="Java">Java</h1>
                    <div class="JavaImg"></div>
                </div>
                <div class="text">
                    <h1 class="Python">Python</h1>
                    <div class="PythonImg"></div>
                </div>
                <div class="text">
                    <h1 class="SQL">SQL</h1>
                    <div class="SQLImg"></div>
                </div>
                <div class="text">
                    <h1 class="CSS">CSS</h1>
                    <div class="CSSImg"></div>
                </div>
                <div class="text">
                    <h1 class="JavaScript">JavaScript</h1>
                    <div class="JavaScriptImg"></div>
                </div>
            </div>
        </section>
<div id="a3"></div>
<!--작업-->
        <section class="conD">
            <div class="PROJECTS">PROJECTS</div>
            <div class="container">
                <div><img src="../Resource/NumberPuzzle.gif" class="Img"></div>
                <div class="Project">
                    <h1>01. NumberPuzzle</h1>
                    <h2>내용</h2>
                    <p>
                        START버튼 클릭 시
                        랜덤 숫자들이 칸에 배치되고
                        그 숫자들을 순서대로 빠르게 찾아보는 간단한 게임입니다.
                    </p>
                    <h2>참여인원</h2>
                    <p>1 명</p>
                    <h2>개발기간</h2>
                    <p>22.10.22 ~ 22.10.23</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>

            <div class="container">
                <div><img src="../Resource/PORTFOLIO.gif" class="Img"></div>
                <div class="Project">
                    <h1>02. PORTFOLIO</h1>
                    <h2>내용</h2>
                    <p>
                        포트폴리오 입니다.
                    </p>
                    <h2>참여인원</h2>
                    <p>1 명</p>
                    <h2>개발기간</h2>
                    <p>22.10.29 ~ 22.10.30</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>
            <div class="container">
                <div><img src="../Resource/1.jpg" class="Img"></div>
                <div class="Project">
                    <h1>03. 준비중</h1>
                    <h2>내용</h2>
                    <p>
                        -
                    </p>
                    <h2>참여인원</h2>
                    <p>-</p>
                    <h2>개발기간</h2>
                    <p>-</p>
                    <div class="Link"><a href="#">LINK</a></div>
                </div>
            </div>
        </section>
<!--연락처-->
        <nav class="footA">
            <div class="CONTACT">CONTACT</div>
            <div class="tel">
                <ul>
                    <li><i class="fa-solid fa-envelope"></i> 이메일</li>
                    <li><i class="fa-solid fa-phone"></i> 폰번호</li>
                </ul>
            </div>
        </nav>
        <div class="footD">&copy;2022 본인이름. All rights reserved.</div>
<div id="a4"></div>
    </body>
</html>

CSS 코드

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap');
/* 기본 설정: 페이지 전체 */
body {
    margin: 0;
}
/*-----------------------------------------------------------------*/
/*------------------------      메뉴칸     -------------------------*/
/*-----------------------------------------------------------------*/
.headA {
    width: 400px;
    justify-content: center;
    top: -145px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(235, 246, 255, 0.72);
    position: fixed;
    display: block;
    border-radius: 15px;
    transition-duration: 0.7s;
    cursor : pointer;
    font-family: 'Cinzel', serif;
    z-index: 99;
}
.headA:hover {
    transition-duration: 0.7s;
    top: 190px;
    display: block;
}
.headA > span > a {
    font-weight: 1000;
    font-size: 1.8rem;
    border-radius: 15px;
    transition-duration: 0.5s;
    display: block;
    color: #000000;
}
.headA > span > a:hover{
    text-align: center;
    color: #ffffff;
    cursor : pointer;
    border-radius: 15px;
    box-shadow: 1px 1px 5px 1px black;
    letter-spacing: 1rem;
    background-color: rgb(0, 0, 0);
    transition-duration: 0.5s;
    animation: Line 0.8s infinite;
}
.headA a {
    display: block;
    padding: 15px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}

.headA i{
    animation: flash 3s infinite;

}
.conA > .container{
    left: 100px;
    /*display: flex;*/
}




/*-----------------------------------------------------------------*/
/*------------------------      메인       -------------------------*/
/*-----------------------------------------------------------------*/
.conA {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../Resource/2-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    min-width: 450px;
    color: #FFF;
}
.conA > .container {
    width: 100%;
    height: 600px;
    text-align: center;
    justify-content: center;
    display: inline-block;
    box-shadow: 10px 10px 20px black;
    text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
    background-color: rgba(206, 206, 206, 0.84);
    animation: Line 2s infinite;

}
.conA > .container > h1 {
    color: #20273b;
    font-size: 10rem;
    margin-bottom: -1px;
    font-family: 'Cinzel', serif;

}
.conA > .container > p{
    margin-bottom: -50px;
    color: #20273b;
    font-size: 2.5rem;
    font-weight: 1000;
    font-family: 'Hahmlet', serif;
}
/*-----------------------------------------------------------------*/
/*------------------------      소개       -------------------------*/
/*-----------------------------------------------------------------*/
.conB {
    background-color: #dbe3e7;
    border-top: 5px solid #99b5b9;
}
.conB > .ABOUT {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.conB > .container {
    padding: 10%;
    display: flex;
    justify-content: center;
}

.conB > .container > .Img {
    position: relative;
    width: 600px;
    height: 400px;
    margin-right: 5%;
    display: inline-block;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    background-image: url(../Resource/1.jpg);
}

.conB > .container > .cover{
    width: 500px;
    display: inline-block;
    font-size: 25px;
    font-family: 'Hahmlet', serif;
}


/*-----------------------------------------------------------------*/
/*------------------------      기술       -------------------------*/
/*-----------------------------------------------------------------*/
.conC {
    background-color: #bcc6cb;
}
.conC > .SKILL {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}
.conC > .container{
    padding: 15%;
    justify-content: center;
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
}
.conC > .container > .text > div{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 15rem;
    height: 15rem;
    border: 0.3rem solid #dbe3e7;
    transition-duration: 0.3s;
    opacity: 0.5;
}
.conC > .container > .text > div:hover{
    transition-duration: 0.5s;
    animation: Line 2s infinite;
    opacity: 1;
}

.conC > .container > div > h1{
    color: #bbc4ca;
    text-align: center;
    font-size: 1.7rem;
    width: 15.5rem;
    height: 2rem;
    border-radius: 5px;
    background-color: #4b5e6e;
    font-family: 'Cinzel', serif;
}
.conC > .container > .text > div > p {
    font-family: 'Hahmlet', serif;
}


.conC > .container > div > .HTMLImg{
    background-image: url(../Resource/HTML.png);
}
.conC > .container > div > .JavaImg{
    background-image: url(../Resource/Java.png);
}
.conC > .container > div > .PythonImg{
    background-image: url(../Resource/Python.png);
}
.conC > .container > div > .SQLImg{
    background-image: url(../Resource/MySQL.png);
}
.conC > .container > div > .CSSImg{
    background-image: url(../Resource/CSS.png);
}
.conC > .container > div > .JavaScriptImg{
    background-image: url(../Resource/JavaScript.png);
}



/*-----------------------------------------------------------------*/
/*------------------------      작업       -------------------------*/
/*-----------------------------------------------------------------*/
.conD {
    background-color: #d9e1e6;
}
.conD > .PROJECTS {
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid black;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.conD > .container{
    padding: 10%;
    display: flex;
    justify-content: center;
    gap: 10rem;
}
.conD > .container > .Project {
    position: relative;
    width: 35rem;
    display: grid;
    font-family: 'Hahmlet', serif;
    grid-template-columns: repeat(1, 1fr);
    overflow: hidden;
}
.conD > .container > div > .Img {
    box-shadow: 3px 3px 20px black;
    position: relative;
    width: 40rem;
    height: 30rem;
    display: inline-block;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
}
.conD > .container > .Project > div {
    height: 35px;
    padding-top: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    background-color: rgba(32, 39, 60, 0.59);
    transition-duration: 0.5s;
}
.conD > .container > .Project > div:hover {
    background-color: #20273b;
    transition-duration: 0.5s;
    cursor: pointer;
}

.conD > .container > .Project > h1 {
    display: block;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 3rem;
}
.conD > .container > .Project > h2 {
    display: inline-block;
    margin-bottom: 5px;
    margin-top: 0;
}
.conD > .container > .Project > p{
    display: block;
    margin-top: 0;
}

.conD > .container > .Project > .Link > a {
    letter-spacing: 0.5rem;
    font-weight: 1000;
    font-size: 1.5rem;
    color: #d7dfe5;
    font-family: 'Cinzel', serif;
    text-decoration: none;

}

/*-----------------------------------------------------------------*/
/*------------------------      연락       -------------------------*/
/*-----------------------------------------------------------------*/
.footA {
    background-color: #20273b;
}
.footA > .CONTACT {
    color: white;
    padding-top: 2%;
    position: relative;
    font-size: 2rem;
    border-bottom: 2px solid #ffffff;
    text-align: center;
    font-family: 'Cinzel', serif;
}
.footA > .tel {
    display: flex;
    justify-content: center;
    padding: 7%;
}

.footA > .tel > ul {
    justify-content: center;
    list-style: none;
}
.footA > .tel > ul > li {
    color: white;
    font-weight: 1000;
    font-size: 1.7rem;
    font-family: 'Cinzel', serif;
}
.footD {
    color: white;
    font-size: 0.8rem;
    text-align: center;
    background-color: #20273c;
    padding-bottom: 3%;
}











@media (max-width: 767px){
    .conA > .container > h1 {
        font-size: 4rem;
        padding-top: 30%;
    }

    .conA > .container > p{
        font-size: 1.5rem;
        margin-bottom: 0px;

    }
    .conB > .container > .Img {
        width: 300px;
        height: 200px;
    }

    .conB > .container > .cover{
        font-size: 1rem ;
    }
    .conC > .container > .text > div{
        width: 7rem;
        height: 7rem;
    }

    .conC > .container > div > h1{
        font-size: 1.5rem;
        width: 7rem;
        height: 1.7rem;
    }
    .conC > .container{
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(3, 1fr);
    }
    .conD > .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .conD > .container > div > .Img {
        width: 25rem;
        height: 18rem;
    }
    .conD > .container > .Project > div:hover {
        background-color: #20273b;
        transition-duration: 0.5s;
        cursor: pointer;
    }
    .conD > .container > .Project > h1 {
        font-size: 1.5rem;
    }
    .conD > .container > .Project > h2 {
        font-size: 1rem;
    }
    .conD > .container > .Project > p{
        font-size: 0.8rem;
    }
    .conD > .container > .Project > .Link > a {
        font-size: 1rem;
    }
    .footA > .tel > ul > li {
        font-size: 1.3rem;
    }
}

































/*-----------------------------------------------------------------*/
/*------------------------      애니메이션     ----------------------*/
/*-----------------------------------------------------------------*/
@keyframes Line {
    from{
        border: 0.3rem solid rgb(153, 181, 185);
    }
    70%{
        border: 0.3rem solid rgb(76, 95, 110);
    }
    30%{
        border: 0.3rem solid rgb(153, 181, 185);
    }
    to{
        border: 0.3rem solid rgb(188, 198, 203);
    }
}
@keyframes flash {
    from{
        color: black;
    }
    50%{
        color: white;
    }
    to{
        color: #000000;
    }
}

728x90

저작자표시 비영리 변경금지

'정보 > WEB' 카테고리의 다른 글

container 태그 (0)	2022.12.18
br 태그 (0)	2022.12.18
b 태그 (0)	2022.12.18
a 태그 (0)	2022.12.18
[web] 간단한 숫자게임 (0)	2022.12.14

[web] 간단한 숫자게임

2022. 12. 14. 20:42

728x90

html 코드

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>숫자클릭하기</title>
    <link rel="stylesheet" href="nunber.css">
    <script src="number.js" defer></script>
</head>
    <body>
            <div id="start">START</div>
                <div class="back" ><div id="timer" hidden><span>00:00:00</span></div></div>
                    <div class="number-container" id="numberContainer" hidden>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                        <div class="number" hidden></div>
                    </div>
                <div id="Time" hidden></div>
        </div>
    </body>
</html>

css 코드

body {
    background-color: #1c1d18;
}

body > .number-container {
    position: absolute;
    display: grid;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-template-columns: repeat(6, 1fr);
    gap: 0.1rem;
}
.back {
    position: absolute;
    width: 1200px;
    height: 800px;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    background-color: rgba(234, 255, 224, 0.92);
    border-radius: 15px;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
    z-index: 0;
    animation: Line 1.5s infinite;
}

.number {
    border: 0.3rem solid rgb(0, 0, 0, 0.4);
    background-color: rgba(250, 250, 218, 0.8);
    font-size: 4.1rem;
    text-align: center;
    border-radius: 15px;
    font-weight: 500;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
}

.number:hover {
    border: 0.3rem solid rgba(255, 255, 255);
    background-color: rgb(172, 245, 221);
    cursor : pointer;
    animation: Line2 0.5s infinite;

}
.number:active{
    margin: -10px;
    font-size: 5rem;
    background-color: rgb(172, 245, 221);
    background-color: aquamarine;
    box-shadow: #222222;
    z-index: 9;
}

#timer {
    position: fixed;
    width: 590px;
    height: 80px;
    left: 50%;
    top: 8%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
    background-color: rgba(250, 250, 218, 0.8);
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
    font-size: 3.5rem;
    text-align: center;
    z-index: 9;
    font-weight: 1000;
    animation: Line 1.5s infinite;

    
}
#Time {
    position: fixed;
    width: 1200px;
    height: 140px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: rgb(5, 5, 5);
    background-color: rgb(50, 115, 255, 0.6);
    border: 0.125rem solid rgb(255, 255, 255, 0.7);
    border-radius: 15px;
    text-align: center;
    font-size: 90px;
    text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
    box-shadow: 3px 3px 40px rgba(0, 0, 0, 0.9);;
    font-weight: 1000;
    z-index: 0;
    -webkit-text-stroke: 1px rgb(255, 255, 255);
    animation: Line 1.5s infinite;
}


#start {
    position: fixed;
    width: 400px;
    height: 130px;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: rgb(75, 75, 75);
    background-color: rgb(172, 245, 221);
    border: 0.125rem solid rgb(210, 215, 225);
    border-radius: 15px;
    text-align: center;
    text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.3);
    font-size: 90px;
    font-weight: 1000;
    letter-spacing: 0.8rem;
    -webkit-text-stroke: 2px black;
    z-index: 8;
    transition-duration: 0.7s;
}

#start:hover {
    color: black;
    background-color: aquamarine;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.9);
    font-size: 95px;
    letter-spacing: 1rem;
    cursor : pointer;
    animation: Line 1.5s infinite;
    transition-duration: 0.7s;
}














@keyframes Line {
    from{
        border: 0.2rem solid rgb(43, 255, 0);
    }
    50%{
        border: 0.2rem solid rgb(0, 238, 255);
    }
    to{
        border: 0.2rem solid rgb(229, 255, 0);
    }
}
@keyframes Line2 {
    from{
        border: 0.2rem solid rgb(0, 0, 0);
    }
    to{
        border: 0.2rem solid rgb(255, 255, 255);
    }
}

js 코드

let arr = []; // 랜덤문제배열
let arr2 = []; // 정답배열
let maxNum = 36; // 칸의 최대크기
let clickBox = document.querySelectorAll('.number'); // 숫자버튼
let numberBox = document.querySelector('.number-container');
let startButton = document.getElementById('start') //스타트버튼
let Timer = document.getElementById('timer');
let lastTime = document.getElementById('Time');
let xBox = document.getElementById('xbox');
let Back = document.getElementById('back');
const timerStatus = { RUNNING: true, STOP: false }; //enum처럼 상태 객체를 만들기
let nowStatus = timerStatus.STOP; //타이머의 상태를 저장하는 변수 (기본값: STOP)
let timerID = ""; // 타이머를 갱신

// 1~순서배열
for (let i = 1; i <= maxNum; i++) {
    arr2.push(i);
}

// 배열의 길이가 칸의 최대크기랑 동일할때까지 랜덤숫자를 중복없이 배열에 추가한다.
while (arr.length !== maxNum){
    let ran = random(maxNum)
    if((arr.indexOf(ran)) === -1){
        arr.push(ran);
    }
}
// 랜덤숫자텍스트를 div에 순서대로 배치
clickBox.forEach(x => {
    x.innerHTML += arr.shift() ;
})

// 숫자 클릭이벤트
clickBox.forEach(x => {
    x.addEventListener('click', () => {
        for(let i=1; i <= maxNum; i++){
            if(parseInt(x.textContent) === arr2[0]){
                x.style.backgroundColor = 'aquamarine';
                x.style.border = '0.3rem solid rgb(0, 0, 0)';
                arr2.shift();
            }
        }
        if(arr2.length === 0){
            lastTime.innerText = 'CLEAR TIME : ' + Timer.textContent;
            lastTime.toggleAttribute('hidden');
            lastTime.style.zIndex = 30;
            Timer.toggleAttribute('hidden');
            clickBox.forEach(x => {
                x.toggleAttribute('hidden');
            });
        }
    });
});

// 스타트버튼 클릭
startButton.addEventListener('click', ()=>{
    startButton.toggleAttribute('hidden');
    clickBox.forEach(x => {
            x.toggleAttribute('hidden');
    });
    numberBox.toggleAttribute('hidden');
    Timer.toggleAttribute('hidden');
    nowStatus = timerStatus.RUNNING;
    if(timerID === ""){
        timerID = setInterval(timer_setting, 10);
    }
});

//랜덤숫자생성
function random(limit){
    return parseInt(Math.random() * limit +1);
}

//타이머
function timer_setting(){
    let timerNowString = timer.textContent; //현재 진행된 타이머 시간
    let times = timerNowString.split(':'); // ':'으로 문자열을 나눈다
    let hour = +times[0]; 
    let min = +times[1]; 
    let sec = +times[2]; 
    sec++; 
    if(sec >= 99){  
        min++;   
        sec = 0;    
    }
    if(min >= 60){  
        hour++;     
        min = 0;   
    }
    if(hour >= 60){ 
        hour = 0;           
        clearInterval(timerID); 
    }
    //1초가 지난 현재 타이머 시간을 문자열로 생성
    const timerSting = `${format_setting(hour)}:${format_setting(min)}:${format_setting(sec)}`;
    //타이머 시간 표시 부분에 문자열을 설정
    timer.textContent = timerSting;
    return timerSting;
}

//날짜나 시간 형식을 00:00:00 형태로 만들어주기 위한 포맷 형식
function format_setting(data){ //data -> 월, 일, 시, 분, 초 중에 하나가 들어옴 (string)
    // data 를 문자열로 바꿧을 때 한 글자면 앞에 0을 붙여서 반환시킨다.
    return data.toString().length < 2 ? '0' + data : data;
}