Open to select my project

KIM YONG TAE

PUBLISHER

SEOUL KOREAN

23 YEARS OLD

안녕하세요. 신입 퍼블리셔 김용태입니다. 새로운 직업을 찾는 과정에서 국비 지원 교육을 알게 되었고, 학원을 알아보던 도중 처음으로 코딩을 접하게 되었습니다. 점차 관심이 생겨 학원을 등록하여 배우게 되었습니다.

배워보지도 못한 영역이라 처음엔 개념이 안 잡혀있어서 어려웠지만, 매일매일 학원이 끝나도 남아서 복습을 하여 수업에 따라갈 수 있게 되었습니다. 그렇게 배우다 보니 코딩의 매력을 알게 되었습니다.

답은 똑같아도 만들어 내는 과정이 다양하고 자기 자신만의 스타일이 있어서 더욱더 마음에 들었습니다. 사람마다 만들어내는 과정이 달라 표현도 조금씩 달라 지면서 더욱더 좋은 표현들이 나오고 그것으로 인해 더 많은 표현이 나와 발전해 나아가는 게 매우 좋았습니다.

표현들을 찾기 위해 코드 펜을 통해 애니메이션 등을 틈이 나는 시간마다 찾아보고 디비컷을 통해 표현 방법이 어떤 게 적용이 되고 어떤 식으로 활용하는지 찾아보는 재미에 요새 푹 빠져있습니다.

아직은 신입이지만 점점 더 발전해서 신입이 아닌 전문가를 목표로 삼고 매일 매일 공부하고 있습니다. 하루, 일주일, 한 달이 다른 저를 보여 드리겠습니다.

2020 NEW PUBLISHER

NEW

PUBLISHER

KIM YONG TAE

HTML

HTML5

CSS

SCSS

LAYOUT

WEBSTANDARD

RESPONSIVE

NONGSHIM

NAVER

JAVASCRIPT

JQUERY

ANIMATION

SLIDER

PARALLAX

BRACKETS

GITHUB

VISUAL CODE

FIGMA

ZEPLIN

SLACK

웹 표준 사이트 제작

웹 표준 사이트는 웹 표준, 웹 접근성을 배우고 적용하여 만들어낸 사이트입니다.

<!-- HTMl -->
<!-- 스킵 네비게이션 -->
<div id="skip">
    <a href="#contents">전체 메뉴 바로가기</a>
    <a href="#cont-ban">배너 메뉴 바로가기</a>
    <a href="#cont-cont">컨텐츠 메뉴 바로가기</a>
</div>
<!-- //스킵 네비게이션 -->

/* CSS */
<style>
    /* 스킵 내비게이션 */
    #skip {
        position: relative;
    }

    #skip a {
        border: 1px solid #fff;
        background-color: #333;
        color: #fff;
        width: 140px;
        text-align: center;
        position: absolute;
        left: 0px;
        top: -50px;
        font-size: 14px;
        padding: 10px;
    }

    #skip a:active,
    #skip a:focus {
        top: 0px;
    }
</style>

<!-- HTML  -->
<!-- 예시)  -->
<a href="#" class="icon1"><span class="ir_pm">icon1</span></a>

/* CSS */
<style>
    /* IR 효과 */
    /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */

    .ir_pm {
        display: block;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
    }

    /* 의미있는 이미지의 대체 텍스트를 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
    .ir_wa {
        display: block;
        overflow: hidden;
        position: relative;
        z-index: -1;
        width: 100%;
        height: 100%;
    }

    /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
    .ir_so {
        overflow: hidden;
        position: absolute;
        width: 0;
        height: 0;
        line-height: 0;
        text-indent: -9999px;
    }
</style>

<!-- HTML  -->
<div class="ad">
    <h4>Advertisement</h4>
    <div class="ligthbox ">
        <a href="img/webstandard1.jpg"><img src="img/sban07.jpg" alt="이미지1"></a>
        <a href="img/webstandard2.jpg"><img src="img/sban08.jpg" alt="이미지2"></a>
        <a href="img/webstandard3.jpg"><img src="img/sban09.jpg" alt="이미지3"></a>
    </div>
</div>

/* CSS */
<style>
    .ad {
        overflow: hidden;
    }

    .ad h4 {
        font-size: 14px;
        color: #0093bd;
        padding-bottom: 3px;
        font-weight: bold;
        margin-top: 15px;
    }

    .ad a {
        float: left;
        width: 93px;
        margin-right: 5px;
    }

    .ad a:last-child {
        margin-right: 0;
    }

    .ad a img {
        width: 100%;
}
</style>

//jQ
<script src="js/lightgallery-all.min.js">
<script>
    //라이트 박스
    $(".ligthbox").lightGallery(); 
</script>

반응형 사이트 제작

반응형 사이트는 미디어 쿼리를 이용하여 화면 해상도에 맞추어 만들어낸 사이트입니다.

<!-- HTML -->
<!-- 미디어 쿼리 예제) -->
<div class="ligthbox ">
    <a href="assets/img/light01_s.jpg"><img src="assets/img/light01.jpg" alt="이미지"></a>
    <a href="assets/img/light02_s.jpg"><img src="assets/img/light02.jpg" alt="이미지"></a>
    <a href="assets/img/light03_s.jpg"><img src="assets/img/light03.jpg" alt="이미지"></a>
    <a href="assets/img/light04_s.jpg"><img src="assets/img/light04.jpg" alt="이미지"></a>
    <a href="assets/img/light05_s.jpg"><img src="assets/img/light05.jpg" alt="이미지"></a>
    <a href="assets/img/light06_s.jpg"><img src="assets/img/light06.jpg" alt="이미지"></a>
    <a href="assets/img/light07_s.jpg"><img src="assets/img/light07.jpg" alt="이미지"></a>
    <a href="assets/img/light08_s.jpg"><img src="assets/img/light08.jpg" alt="이미지"></a>
    <a href="assets/img/light09_s.jpg"><img src="assets/img/light09.jpg" alt="이미지"></a>
    <a href="assets/img/light10_s.jpg"><img src="assets/img/light10.jpg" alt="이미지"></a>
</div>

/* CSS */
<style>
    .ligthbox {
        display: grid; 
        /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr;  */
        grid-template-columns: repeat(5,1fr);
        grid-gap: 8px;
    }
    /* 미디어 쿼리 */
    @media (max-width: 1220px){
        .ligthbox { grid-template-columns: repeat(4,1fr);}
        .ligthbox a:nth-child(5n) {display: none;}
    }
    @media (max-width: 1024px){
        .ligthbox { grid-template-columns: repeat(3,1fr);}
        .ligthbox a:nth-child(10) {display: block;}
    }

    @media (max-width: 960px){
    }


    @media (max-width: 768px){
    }

    @media (max-width: 600px){
        .ligthbox { grid-template-columns: repeat(2,1fr);}
        .ligthbox a:nth-child(10) {display: none;}
    }
    @media (max-width: 320px){
        .ligthbox { grid-template-columns: repeat(1,1fr);}
}
</style>

<!-- HTML -->
<figure>
    <img src="assets/img/blog4_@1.jpg" srcset="assets/img/blog4_@2.jpg 2x, assets/img/blog4_@3.jpg 3x" alt="블로그 이미지">
    <figcaption>
       반응형 이미지 글입니다.반응형 이미지 글입니다.반응형 이미지 글입니다.반응형 이미지 글입니다.
    </figcaption>
 </figure>

모바일 사이트 제작

모바일 사이트는 미디어 쿼리를 이용하여 핸드폰 해상도에 맞게 작업한 사이트입니다.

<!-- HTML -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="김용태">
    <meta name="description" content="항상 함께하는 나만의 트레이너">
    <meta name="keywords" content="Nike Training, Nike, nike, hearth, 나이키, 나이키 트레이닝, 운동">
    <title>Nike Training Club App</title>

    <!-- meta -->
    <meta property="og:title" content="나이키 트레이닝">
    <meta property="og:url" content="https://sdw6545.github.io/port98/">
    <meta property="og:description" content="항상 함께하는 나만의 트레이너">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="나이키 트레이닝">
    <meta name="twitter:url" content="https://sdw6545.github.io/port98/">
    <meta name="twitter:description" content="항상 함께하는 나만의 트레이너">

    <!-- style -->
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/fonts.css">
    <link rel="stylesheet" href="assets/css/swiper.css">
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="row">
                <header id="header">           
                    <a href="#">
                        <span class="line1"></span>
                        <span class="line2"></span>
                        <span class="line3"></span>
                    </a>                        
                    <h1>운동</h1>
                </header>
                <!-- //header -->
            </div>
            <!-- //row -->                         
        </div>
        <!-- //container -->
        
        <nav id="nav">
            <div class="container">
                <ul>
                    <li class="on"><a href="index.html">맞춤 추천</a></li>
                    <li><a href="index2.html">탐색</a></li>
                    <li><a href="index3.html">컬렉션</a></li>
                    <li><a href="index4.html">플랜</a></li>
                </ul>
            </div>
        </nav>
        <!-- //nav -->

        <section id="section01">
            <div class="container">
                <h2>최고의 맞춤형 추천</h2>
                <div class="swiper-container">
                    <div class="swiper-wrapper">                        
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img01.jpg" alt="릴레이 반복">
                            <p>릴레이 반복</p>
                            <span>30분 - 초급</span>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img02.jpg" alt="코어 강화">
                            <p>코어 강화</p>
                            <span>8분 - 중급</span>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img03.jpg" alt="관절 유연성 기르기">
                            <p>관절 유연성 기르기</p>
                            <span>15분 - 초급</span> 
                        </div>
                    </div>
                </div>    
            </div>            
        </section>
        <!-- //section01 -->      
        
        <section id="section02">
            <div class="container">
                <h2>새로운 운동</h2>
                <div class="swiper-container">
                    <div class="swiper-wrapper">                        
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img04.jpg" alt="웨이크업 워밍업">
                            <p>웨이크업 워밍업</p>
                            <span>10분 - 초급</span>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img05.jpg" alt="선셋 스트레칭">
                            <p>선셋 스트레칭</p>
                            <span>10분 - 초급</span>
                        </div>
                        <div class="swiper-slide">
                            <img src="assets/img/n1-img06.jpg" alt="코어 강화 및 유산소 운동">
                            <p>코어 강화 및<br> 유산소 운동</p>
                            <span>30분 - 중급</span> 
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- //section02 -->

        <section id="section03">
            <div class="container">
                <div class="row">
                    <div class="sec3">
                        <div class="sec3-box">
                            <img src="assets/img/n1-img07.jpg" alt="10개의 운동 · 모든 수준">
                            <span>10개의 운동 · 모든 수준</span>
                            <p>경기의 수준을 높이세요</p>
                        </div>
                        <div class="sec3-box">
                            <img src="assets/img/n1-img08.jpg" alt="10개의 운동 · 초급 및 중급">
                            <span>10개의 운동 · 초급 및 중급</span>
                            <p>20분 내 가능한 운동</p>
                        </div>
                    </div>
                </div>                
            </div>
        </section>
    </div>
    <!-- //wrap -->
    
    <script src="assets/js/jquery.min_1.12.4.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: '1.5',
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },            
        });
    </script>
</body>
</html>

/* CSS */
/* 레이아웃 */


.container {max-width: 1000px; margin: 0 auto;}
.row {position: relative; margin: 0px 25px;}
:root {font-size: 16px;}
#header {height: 50px;}
#section01 {margin: 2em 0;}

/* header */ 
#header {margin: 20px 0;}
#header a {position: relative; top: 4px; width: 25px; height: 25px; display: inline-block;}
#header .line1 {width: 20px; height: 2px; background: #000; position: absolute; top: 8px;}
#header .line2 {width: 20px; height: 2px; background: #000; position: absolute; top: 14px;}
#header .line3 {width: 20px; height: 2px; background: #000; position: absolute; top: 20px;}
#header h1 {font-family: 'BareunDotumPro2'; font-size: 1.5rem; margin-left: 2rem; display: inline-block;}

/* nav */
#nav ul {
    display: flex; justify-content: space-between; 
    border-bottom: 0.1rem solid #E2E2E2;
    padding: 1rem 1.8rem 1em;
}
#nav ul li.on {position: relative;}
#nav ul li.on::before {
    content: '';
    width: 7.8rem;
    height: 0.2rem;
    background: #000;
    position: absolute;
    left: -2.2rem; bottom: -1rem;
}
#nav ul li a {
    font-family: 'BareunDotumPro2';
    font-size: 1rem;
    color: #8E8E8E;
}
#nav ul li.on a {color: #000;}

/* section01 */
#section01 {font-family: 'BareunDotumPro1';}
#section01 h2 {margin: 1rem 0 1rem 1rem; font-size: 1.3rem;}
#section01 .swiper-wrapper {margin: 0 1.1rem; width: 1000px;} 
#section01 .swiper-wrapper .swiper-slide {float: left; margin-right: 0.3rem;}
#section01 .swiper-wrapper .swiper-slide img {width: 100%;}
#section01 .swiper-wrapper .swiper-slide p {line-height: 1.8; margin-top: 0.5rem;}
#section01 .swiper-wrapper .swiper-slide span {color: #7A7A7A;}

/* section02 */
#section02 {font-family: 'BareunDotumPro1'; margin: 4rem 0;}
#section02 h2 {margin: 1rem 0 1rem 1rem; font-size: 1.3rem;}
#section02 .swiper-wrapper  {margin: 0 1.2rem; width: 1000px;} 
#section02 .swiper-wrapper .swiper-slide {float: left; margin-right: 0.3rem;}
#section02 .swiper-wrapper .swiper-slide img {width: 100%;}
#section02 .swiper-wrapper .swiper-slide p {line-height: 1.8; margin-top: 0.5rem;}
#section02 .swiper-wrapper .swiper-slide span {color: #7A7A7A;}

/* section03 */
.sec3 .sec3-box {position: relative; color: #fff; margin-bottom: 1rem;}
.sec3 .sec3-box img {width: 100%;}
.sec3 .sec3-box span {
    position: absolute; left: 1.5rem; bottom: 7.5rem; 
    font-family: 'BareunDotumPro1'; 
    font-size: 1rem;
}
.sec3 .sec3-box p {
    position: absolute; left: 1.5rem; bottom: 2rem;
    font-family: 'BareunDotumPro2'; 
    font-size: 2rem; width: 50%;
    line-height: 35px;
}

네이버 사이트 제작

네이버 사이트는 네이버 사이트를 참고하여 만들어낸 사이트입니다. (수정중인 사이트입니다.)

<!-- HTML -->
<svg class="svgWrap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="222px" height="60px" viewBox="0 0 222 60">
    <text class="aniText" x="30px" y="55px">네이바</text>
</svg>

/* CSS */
<style>
    .svgWrap {
        margin-left: 50px;
        font-family: 'Do Hyeon', sans-serif;
        display: flex;
        width: 222px;
        height: 52px;
        font-size: 70px;
        font-weight: 400;
        margin-top: 50px;
        stroke: #365fa0;
        stroke-width: 2;
        animation: strokee 5s infinite alternate;
    }

    @keyframes strokee {
        0% {
            fill: rgba(72, 138, 204, 0);
            stroke: rgba(54, 95, 160, 1);
            stroke-dashoffset: 25%;
            stroke-dasharray: 0 50%;
        }

        70% {
            fill: rgba(72, 138, 204, 0);
            stroke: rgba(54, 95, 160, 1)rgba(54, 95, 160, 1)
        }

        80% {
            fill: rgba(72, 138, 204, 0);
            stroke: rgba(54, 95, 160, 1)
        }

        100% {
            fill: rgba(72, 138, 204, 1);
            stroke: rgba(54, 95, 160, 0);
            stroke-dashoffset: -25%;
            stroke-dasharray: 50% 0;
        }
    }
<style>

농심 사이트 제작

농심 사이트는 농심 사이트를 참고아혀 만들어낸 사이트입니다.

/* CSS */
<style>
    @-webkit-keyframes bounceInLeftt {
        from, 60%, 75%, 90%,
        to {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
                    transform: translate3d(-3000px, 0, 0) scaleX(3);
        }
        60% {
            -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
                    transform: translate3d(25px, 0, 0) scaleX(1);
        }
        75% {
            -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
                    transform: translate3d(-10px, 0, 0) scaleX(0.98);
        }
        90% {
            -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
                    transform: translate3d(5px, 0, 0) scaleX(0.995);
        }
        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
        }
    }
</style>

animation

GSAP

ANIMATION

view

CUBE

ANIMATION

view

CIRCLE

ANIMATION

view

SQUARE

ANIMATION

view

HTML CSS SCSS LAYOUT WEB HTML CSS SCSS LAYOUT WEB HTML CSS SCSS LAYOUT WEB HTML CSS SCSS LAYOUT WEB HTML CSS SCSS LAYOUT WEB

WEBSTANDARD RESPONSIVE NONGSHIM NAVER WEBSTANDARD RESPONSIVE NONGSHIM NAVER WEBSTANDARD RESPONSIVE NONGSHIM NAVER WEBSTANDARD RESPONSIVE NONGSHIM NAVER

SCRIPT SLIDER PARALLAX MOUSE EFFECT GAME SCRIPT Thank you SCRIPT

JQUERY JAVASCRIPT ANIMATION JQUERY JAVASCRIPT ANIMATION JQUERY JAVASCRIPT ANIMATION JQUERY JAVASCRIPT ANIMATION JQUERY JAVASCRIPT ANIMATION JAVASCRIPT ANIMATION JQUERY JAVASCRIPT ANIMATION

GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA GITHUB BRACKETS VISUAL CODE FIGMA

//jS,jQ
//닷 버튼 생성
$(".slide-wrap").append("<div class='slide-dot'></div>")
$(".slide-wrap").append(
    "<div class='slide-btn'><a href='#' class='prev'></a><a href='#' class='next'></a></div>")

const slideWrap = $(".slide-wrap"),
    slideImg = $(".slide-img"),
    slide = $(".slide"),
    slideDot = $(".slide-dot"),
    slideBtn = $(".slide-btn")

let slideCount = slide.length, //슬라이드 이미지 갯수
    currentIndex = 0, //현재 보이는 이미지 순서
    dotIndex = "", //닷 버튼 HTML
    duration = 1000, //이미지 슬라이드 이동시간
    easing = "easeOutExpo", //이미지 움직임 효과
    slideBg = ["#fcefe9", "#e9effd", "#fae3f5", "#fbe368", "#ccebea", "#e9effd", "#f4f2ec"]; //각 슬라이드 배경색

//글자 분할
slide.each(function () {
    let txt = $(this).find(".stext > h2").text();
    console.log(txt)
    let split = txt.split("").join("</span><span aria-hidden='true'>");
    split = "<span aria-hidden='true'>" + split + "</span>";
    $(this).find(".stext > h2").html(split).attr("aria-lable", txt);
})

//01. 각 이미지 absolute
// 첫번째 이미지는 left: 0 , 두번째 left 100%, 세번째 200% 
// 첫번째 이미지는 left: currentIndex , 두번째 left: currentIndex(1) * 100%, 세번째 left: currentIndex(2) * 200% 
//이미지 슬라이드
slide.each(function (index, element) {
    //console.log(element)
    //각 슬라이드 이미지    //배경색 넣기위치 설정
    $(this).css({
        left: 100 * index + "%",
        background: slideBg[index]
    })
    dotIndex += "<a href='#'>0" + (index + 1) + "</a>" //이미지 갯수만큼 닷 버튼 갯수 설정



});
slideDot.html(dotIndex); //닷 버튼 출력


//이미지 움직이기
function gotoSlide(num) {
    slideImg.animate({
        left: -100 * num + "%"
    }, duration, easing) //duration과 easing을 변수로 사용
    currentIndex = num;
    $(".cursor-follower").css({
        background: slideBg[num]
    })
    updateDot();
};

//닷버튼에 액티브추가
function updateDot() {
    slideDot.find("a").removeClass().eq(currentIndex).addClass("active");
    slide.removeClass("active").eq(currentIndex).addClass("active");
};

//버튼 클릭하기
slideBtn.on("click", "a", function (e) {
    e.preventDefault();
    let nextIndex = (currentIndex + 1) % slideCount;
    let prevIndex = (currentIndex - 1) % slideCount;
    //console.log(prevIndex) 

    if (currentIndex == 0) prevIndex = slideCount - 1

    if ($(this).hasClass("prev")) {
        gotoSlide(prevIndex)
    } else {
        gotoSlide(nextIndex)
    }
});

//닷버튼 클릭하기
slideDot.on("click", "a", function () {
    gotoSlide($(this).index());
});
$(".info2").hide()
//햄버거 메뉴
$("#nav .ham .bar").click(function () {
    $(this).toggleClass("on")
    $(".info2").slideToggle()
});
gotoSlide(currentIndex);

//자동플레이
function startTimer() {
    timer = setInterval(function () {
        let nextIndex = (currentIndex + 1) % 5;
        gotoSlide(nextIndex);
    }, 5000);
};
startTimer();

const cursor = $(".cursor");
const follower = $(".cursor-follower");

//출력용
$(document).mousemove(function (e) { //마우스가 움직였을 때 이벤트 함수
    $(".pageX").text(e.pageX); //이벤트 pageX 값을 화면에 출력
    $(".pageY").text(e.pageY); //이벤트 pageY 값을 화면에 출력
});

//커서 이동
$(document).mousemove(function (e) {
    gsap.to(cursor, 0.3, {
        left: e.pageX - 5,
        top: e.pageY - 5
    })
    gsap.to(follower, 0.8, {
        left: e.pageX - 15,
        top: e.pageY - 15
    })
});

//마우스 오버효과
$("a").hover(function () {
    cursor.addClass("active");
    follower.addClass("active");
}, function () {
    cursor.removeClass("active");
    follower.removeClass("active");
});

const sImg = $(".simg")

$(window).on("mousemove", mouseMove)

function mouseMove(e) {
    let postion = (e.pageX - ($(".slide").width() / 2)) * 0.1;


    sImg.css({
        "transform": "translate(" + postion + "px)"
    })


}

//jQ
let roadLength = $(".contents").width(); //전체 가로 값
$("body").css("height", roadLength); //전체 세로 값에 전체 가로 값(roadLength)을 할당

$(window).scroll(function () {
    let wScroll = $(window).scrollTop();

    $(".contents").css({
        "transform": "translateX(" + -wScroll + "px)"
    })
});

const spanSlow = $(".spanSlow")
const spanFast = $(".spanFast")

$(window).on("mousemove",mouseMove )

function mouseMove(e){
    let postion = (e.pageX- ($(window).width()/2))*0.1;
    spanSlow.css({"transform":"translate("+postion+"px)"})


    spanFast.css({"transform":"translate("+-postion+"px)"})


}

const $board = $('main'),
    $card = $('.card'),
    $btnSound = $('.btn-sound'),
    $themeSongEl = $('#theme-song')[0],
    $turns = $('.turns span'),
    $attempts = $('.attempts span'),
    $wins = $('.wins span'),
    $success = $('.success'),
    $btnContinue = $('.btn-continue'),
    $successMsg = $('.success-message'),
    selectedClass = 'is-selected',       //카드를 선택했을 때
    dataMatch = 'data-matched',
    dataType = 'data-type',
    playSoundClass = 'is-playing',
    visibleClass = 'is-visible',
    lastTrunClass = 'last-turn',
    timeoutLength = 900;


let sound = [
    'music/Zzzz.mp3',
    'music/zzssss.mp3',
    'music/sdsdsd.mp3'
],
    soundMatch = new Audio(sound[0]),
    soundNoMatch = new Audio(sound[1]),
    soundSuccess = new Audio(sound[2]),
    trunsCount = 2,     //기회 횟수 2
    attemptsCount = 0,  //시도 횟수
    winCount = 0,       //우승 횟수
    card1, card2, msg;

//카드 셔플
shuffleCards();

//음악 아이콘을 클릭했을 때 음악이 나오고 또 클릭했을 때 정지
$btnSound.on('click', function () {
    $(this).toggleClass(playSoundClass);
    if ($(this).hasClass(playSoundClass)) {
        $themeSongEl.play();
    } else {
        $themeSongEl.pause();
    }
});

//카드를 클릭하면 클릭한 카드한테 is-selected를 추가
$card.click(function () {
    if ($(this).attr(dataMatch) == 'false') {
        $(this).addClass(selectedClass);
    }

    let selectedCards = $('.' + selectedClass);     //선택된 카드를 클래스로 변경 //.is-selected

    //만약에 카드가 똑같다면
    if (selectedCards.length == 2) {
        card1 = selectedCards.eq(0).attr(dataType);
        card2 = selectedCards.eq(1).attr(dataType);

        //만약에 카드1과 카드2가 같다면
        if (card1 == card2) {
            if ($btnSound.hasClass(playSoundClass)) {
                soundMatch.play()
            }
            selectedCards.attr(dataMatch, true).removeClass(selectedClass);
        } else {
            //카드가 맞지 않으면 원래 상태로 되돌림
            if ($btnSound.hasClass(playSoundClass)) {
                soundNoMatch.play()
            }

            setTimeout(function () {
                selectedCards.removeClass(selectedClass);
                trunsCount--;       //카운트 줄이고
                $turns.html(trunsCount);
            }, timeoutLength);

            //카운드 기회가 없을 때(주의)
            if (trunsCount === 1) {
                setTimeout(function () {
                    $turns.addClass(lastTrunClass);
                }, timeoutLength)
            }

            //카운드 기회가 없을 때(시도+1) , 카운트->2 
            if (trunsCount <= 0) {
                setTimeout(function () {
                    trunsCount = 2;     //기회를 2번 복구
                    $turns.removeClass(lastTrunClass).html(trunsCount); //주의 표시 삭제, 카운트 표시
                    $card.attr(dataMatch, false);  //모든 카드 초기화
                    attemptsCount += 1;
                    $attempts.html(attemptsCount);
                }, timeoutLength)
            }
        }
    }

    //완성했을 때 
    //dataMatch가 true이면서 갯수가 전체 카드 갯수랑 같을 때
    if ($('[' + dataMatch + '= "true"]').length == $card.length) {
        setTimeout(() => {
            $success.addClass(visibleClass);
            soundSuccess.play()
            winCount += 1;
            $wins.html(winCount);
        }, timeoutLength);

        //시도 횟수에 따른 메세지
        switch (true) {
            case (attemptsCount <= 2):
                msg = "최고입니다. 최고의 아이큐";
                break;
            case (attemptsCount > 2 && attemptsCount <= 5):
                msg = "잘했네요~~~~";
                break;
            case (attemptsCount > 5 && attemptsCount <= 8):
                msg = "쫌만 더 잘해봐~~~ 바보야~~~";
                break;
            case (attemptsCount > 8):
                msg = "진짜 못하네~~~~ 다시 도전해봐~~~";
                break;
        }
        $successMsg.text(msg);

        //카드 초기화
        setTimeout(() => {
            $card.attr(dataMatch, false);
        }, 1200);

    }
});

//다시 게임 할 때 
$btnContinue.on('click', function () {
    $success.removeClass(visibleClass);
    shuffleCards();             //카드 셔플, 점수 초기화 
    trunsCount = 2;
    $turns.removeClass(lastTrunClass).html(trunsCount);
    attemptsCount = 0;
    $attempts.html(attemptsCount);
});


//카드 셔플
function shuffleCards() {
    let cards = $board.children();
    while (cards.length) {
        $board.append(cards.splice(Math.floor(Math.random() * cards.length), 1)[0])
    }
    $card.each(function (index) {
        setTimeout(() => {
            $(this).addClass(selectedClass);
        }, timeoutLength + 100 * index);
    });

    setTimeout(() => {
        $card.removeClass(selectedClass);
    }, 5000);

}

KIM YONG TAE

PUBLISHER

SEOUL KOREAN

23 YEARS OLD

웹 표준 사이트 제작

반응형 사이트 제작

모바일 사이트 제작

네이버 사이트 제작

농심 사이트 제작

animation

KIM YONG TAE

CONTACT

전화번호
010-5711-5898

이메일
sdw6545@naver.com

카카오톡
qldqlddnjfem@naver.com

KIM YONG TAE PUBLISHER SEOUL KOREAN 23 YEARS OLD

웹 표준 사이트 제작

스킵 네비게이션

IR 기법

라이트 박스

반응형 사이트 제작

미디어쿼리

반응형 이미지

모바일 사이트 제작

HTML

CSS

네이버 사이트 제작

NAVER 사이트

농심 사이트 제작

농심사이트

animation

이미지 슬라이드

PARALLAX

MOUSE

GAME

KIM YONG TAE

CONTACT

전화번호 010-5711-5898

이메일 sdw6545@naver.com

카카오톡 qldqlddnjfem@naver.com

KIM YONG TAE

PUBLISHER

SEOUL KOREAN

23 YEARS OLD

전화번호
010-5711-5898

이메일
sdw6545@naver.com

카카오톡
qldqlddnjfem@naver.com