UIUX _국비과정 0503 [제이쿼리 이벤트]

백만두 2024. 6. 8. 17:48

2024. 6. 8. 17:48

계속해서 제이쿼리의 이벤트에 대해 배운다.

change 이벤트

change 이벤트 : 요소의 변화 감지
$(this) = "#rel_site"
this 는 이벤트가 발생한 요소

<script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            
            $(function () {
                // change 이벤트 : 요소의 변화 감지
                // $(this) = "#rel_site"
                // this 는 이벤트가 발생한 요소
                $("#rel_site").on("change",function(){
                    $(".txt").text($(this).val())
                });     
            });
            
        </script>
    </head>
    <body>
        <select id="rel_site">
            <option value="">사이트 선택</option>
            <option value="www.google.com">구글</option>
            <option value="www.naver.com">네이버</option>
            <option value="www.daum.net">다음</option>
      </select>
      <p class="txt"></p>
    </body>

링크 속성 제거와 클릭이벤트 적용하기

<script>
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // 링크 속성 제거와 클릭이벤트 적용하기 
                // <a> <form> 태그
                // <a href="#"> <form action="#"> 링크 속성 제거
                // 스크립트에서는 아래 두가지 방법으로 링크 속성 제거, 클릭이벤트 적용
                // 1. return false
                // 2. e.preventDefault() -> 핸들러에 매개변수를 넣어야 한다.

                $(".btn1").on("click",function(e){
                    e.preventDefault();
                    $(".txt1").css({"background-color":"tomato"})
                });

                $(".btn2").on("click",function(){
                    $(".txt2").css({"background-color":"tomato"})
                    return false; // 링크 속성 차단
                });

                $(".btn3").on("click",function(){
                    $(".txt3").css({"background-color":"tomato"})
                });

            });
        </script>
    </head>
    <body>
        <p>
            <a href="http://www.easyspub.co.kr/" class="btn1">버튼1</a>
        </p>
        <p class="txt1">내용1</p>
        <p>
            <a href="http://www.easyspub.co.kr/" class="btn2">버튼2</a>
        </p>
        <p class="txt2">내용2</p>
        <p>
            <!-- 링크 속성이 없다 -->
            <button class="btn3">버튼3</button> 
        </p>
        <p class="txt3">내용3</p>
    </body>

참고 )

[자바스크립트 입문] 이벤트

이벤트 이벤트란 사용자가 웹 브라우저에서 취하는 모든 동작을 말한다. 웹 페이지에 접속하여 마우스 및 ...

blog.naver.com

📚 제이쿼리 이벤트 종류 & 설정 총정리

jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다.

inpa.tistory.com

이벤트를 복습하는 프로젝트

글자크기를 조절하는 프로그램

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select>
            <option>맑은고딕</option>
            <option>헬베티카</option>
            <option>산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <div id="wrap">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat
            consectetur nibh, ut luctus urna placerat non. Phasellus consectetur nunc nec mi
            feugiat egestas. Pellentesque et consectetur mauris, sed rutrum est. Etiam odio
            nunc, ornare quis urna sed, fermentum fermentum augue. Nam imperdiet vestibulum
            ipsum quis feugiat. Nunc non pellentesque diam, nec tempor nibh. Ut consequat
            sem sit amet ullamcorper sodales.
            
        </div>
    </body>
</html>

글자모양도 바꾸기 추가

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
                let body = $("body");

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

                // 글자 모양 변경
                $("#fontStyle").on("change", function () {
                    body.css("font-family", $(this).val());
                });

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-family:'Times New Roman', Times, serif  */
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select class="changeStyleZone" id="fontStyle">
            <option
                class="Lucida Sans"
                value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
            <option
                class="Segoe UI"
                value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
            <option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <div id="wrap">
            내 생일 파티에 너만 못 온 그날 혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날
            너무 멋있는 옷을 입고 그날 Heard him say
        </div>
    </body>
</html>

글자 색 바꾸기 추가

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            // 글자크기를 조절하는 프로그램

            $(function () {
                let baseFontSize = 14; // 기준값 : 원래 폰트 사이즈
                let body = $("body");

                // 외부에 만들어진 함수를 쓸 때는 zoomInOut 처럼 함수의 이름만 사용, () 붙이지 않음 요소 선택을 그룹으로 한 경우, 자식들이
                // 요소를 적용받는다.
                $(".zoomBtnZone button").on("click", zoomInOut);
                $(".colors").on("change", colorChange);

                // 별로도 정의한 핸들러
                function zoomInOut() {
                    if ($(this).hasClass("zoomOutBtn")) {
                        if (baseFontSize <= 8) { // 최소 크기
                            return false;
                        }
                        baseFontSize--;
                    } else if ($(this).hasClass("zoomInBtn")) {
                        if (baseFontSize >= 20) { // 최대 크기
                            return false;
                        }
                        baseFontSize++;
                    } else {
                        baseFontSize = 14;
                    }

                    $(".fontSize").text(baseFontSize + "px");
                    $("body").css({
                        fontSize: baseFontSize + "px"
                    })
                }

                // 글자 모양 변경
                $("#fontStyle").on("change", function () {
                    body.css("font-family", $(this).val());
                });

                // 글자 색 변경
                function colorChange(){
                    $("body #wrap").css({color:$(this).val()});
                }

            });
        </script>
        <style>
            body {
                font-size: 14px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-family:'Times New Roman', Times, serif  */
            }
        </style>
    </head>
    <body>
        <p class="zoomBtnZone">
            <button class="zoomOutBtn">-</button>
            <button class="originBtn">100%</button>
            <button class="zoomInBtn">+</button>
        </p>
        <select class="changeStyleZone" id="fontStyle">
            <option
                class="Lucida Sans"
                value="'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">맑은고딕</option>
            <option
                class="Segoe UI"
                value="'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">헬베티카</option>
            <option class="Times New Roman" value="'Times New Roman', Times, serif">산들고딕</option>
        </select>
        <p class="fontSize">14px</p>
        <br>
        <br>
        <label>색상선택 : </label>
        <input type="color" class="colors">
        <br> <br>
        <div id="wrap">
            낭비하지 마, 네 시간은 은행 <br>
            서둘러서 정리해, 걔는 real bad 받아주면 안돼, no, you better trust me 답답해서, 그래 <br>
            저번에도 봤지만 너 없을 때 <br>
            걘 여기저기에 눈빛을 뿌리네 아주 눈부시게, honestly, <br>
            우리 사이에 He's been totally lying, yeah <br>
            내 생일 파티에 너만 못 온 그날 <br>
            혜진이가 엄청 혼났던 그날 지원이가 여친이랑 헤어진 그날 걔는 언제나 네가 없이 그날 <br>
            너무 멋있는 옷을 입고 그날 Heard him say
        </div>
    </body>
</html>

이제 애니메이션에 대해 배운다

정말 재미있는 개념이라 계속 만들어보며 공부하면 좋을 것! 게임 만들어보기!

제이쿼리의 애니메이션

애니메이션 효과

hide(), fadeOut(), slideOut() => 숨김
show(), fadeIn(), slideDown() => 노출
toggle(), fadeToggle(), slideToggle(), fadeTo(0 ~ 1)

효과시간
1. slow, normal, fast
2. 1000단위(밀리세컨즈)
$(요소선택).효과메서드(효과시간, 가속도, [콜백함수]) 
                                 콜백함수는 선택적으로 사용

버튼을 이용한 애니메이션 예제 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>
            
            $(function () {
                $(".btn2").hide();

                $(".btn1").on("click", () => {
                    $(".box").slideUp(1000,"linear", function(){
                        $(".btn1").hide();
                        $(".btn2").show();
                    });
                });

                $(".btn2").on("click",() => {
                    $(".box").fadeIn(4000,"swing",function(){
                        $(".btn2").hide();
                        $(".btn1").show();
                    });
                });

                $(".btn3").on("click",() => {
                    $(".box").slideToggle(2000,"linear");  // 반대 상태로 만들어준다
                });

                $(".btn4").on("click",() => {   
                    $(".box").fadeTo("fast", 0.3);  // 투명도 조절
                });

                $(".btn5").on("click",() => {
                    $(".box").fadeTo("fast", 1);
                });
            });
            
        </script>
        <style>
            .content{
               width:400px;
               background-color: #eee;
            }
         </style>
    </head>
    <body>
        <p>
            <button class="btn1">slideUp</button>
            <button class="btn2">fadeIn</button>
         </p>
         <p>
            <button class="btn3">toggleSide</button>
         </p> 
         <p>
            <button class="btn4">fadeTo(0.3)</button>
            <button class="btn5">fadeTo(1)</button>
         </p>   
         <div class="box">
            <div class="content">
                  Lorem ipsum dolor sit amet, 
                  consectetur adipiscing elit. 
                  Maecenas feugiat consectetur nibh, 
                  ut luctus urna placerat non. 
                  Phasellus consectetur nunc nec mi feugiat egestas. 
                  Pellentesque et consectetur mauris, sed rutrum est. 
                  Etiam odio nunc, ornare quis urna sed, fermentum fermentum augue. 
                  Nam imperdiet vestibulum ipsum quis feugiat. 
                  Nunc non pellentesque diam, nec tempor nibh. 
                  Ut consequat sem sit amet ullamcorper sodales.
            </div>
         </div>
    </body>
</html>

animate()을 쓰는 방법

animate() : 움직임 구현 
animate({스타일 속성}, 적용시간, 가속도, 콜백함수)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // animate() : 움직임 구현 
                // animate({스타일 속성}, 적용시간, 가속도, 콜백함수)

                $(".btn1").on("click", function(){
                    $(".txt1").animate({
                        marginLeft:"500px",
                        fontSize:"30px"
                    },2000,function(){
                        alert("모션 완료");
                    });
                });
                
                $(".btn2").on("click", function(){
                    $(".txt2").animate({
                        // 한번에 50px 씩 더해나가라
                        marginLeft:"+=50px"  
                    },1000);
                });

            });
        </script>
        <style>
            .txt1{background-color: aqua;}
            .txt2{background-color: pink;}
         </style>
    </head>
    <body>
        <p>
            <button class="btn1">버튼1</button>
        </p>
        <span class="txt1">"500px" 이동</span>
        <p>
            <button class="btn2">버튼2</button>
        </p>
        <span class="txt2">"50px"씩 이동</span>
    </body>
</html>

stop(), delay()

stop() : 현재 실행중인 애니메이트를 종료 후 다음 애니메이션 실행
stop(true, true) : 현재 실행중인 애니메이션 종료, 에니메이션의 끝 지점으로 이동한다
대기열을 삭제해 더 이상 애니메이션이 일어나지 않는다.
delay() : 일정시간 큐에서 대기 후 실행

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {

                $(".txt1").animate({
                    marginLeft:"300px"
                },1000);

                $(".txt2").delay(3000).animate({
                    marginLeft:"300px"
                },1000);

                $(".btn1").on("click",moveElment);

                function moveElment(){
                    $(".txt3").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt4").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt4").stop();

                    $(".txt5").animate({
                        marginLeft:"+=50px"
                    },800);

                    $(".txt5").stop(true, true);
                }
            });

        </script>
        <style>
            p{width: 110px;text-align: center;}
            .txt1{background-color: aqua;}
            .txt2{background-color: pink;}
            .txt3{background-color: orange;}
            .txt4{background-color: green;}
            .txt5{background-color: gold;}
         </style>

    </head>
    <body>
        <p class="txt1">효과1</p>
        <p class="txt2">효과2<br> delay(3000)</p>
     
        <p><button class="btn1">50px 전진</button></p>
        <p class="txt3">효과3</p>
        <p class="txt4">효과4<br>stop( )</p>
        <p class="txt5">효과5<br>stop(true, true)</p>
    </body>
</html>

queue() 와 dequeue()

queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다

 <script
            src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>
        <script>

            $(function () {
                // queue() : 함수를 사용해서 에니메이트 효과 구현, 자기 뒤에 있는 에니메이트 효과는 다 날려버림(나머지 대기열 삭제)
                // 예) 게임에서 대빵을 죽였을 때 나머지 공격 효과 X
                // clearQueue() : 진행 중인 것을 제외하고 대기열 정보 모두 삭제
                // dequeue() : queue() 이후에 대기열의 정보를 정상적으로 실행시킨다

                $(".txt1").animate({marginLeft:"200px"},1000)
                .animate({marginTop:"200px"},1000)
                .queue(function(){         // queue() 뒤에 대기열 삭제
                    $(this).css({background:"pink"});
                })
                .animate({marginLeft:"0px"},1000)
                .animate({marginTop:"0px"},1000);
                
            });

        </script>
        <style>
            *{margin:0;}
            .txt1{width:50px;text-align: 
            center;background-color: aqua;}
         </style>

    </head>
    <body>
        <p class="txt1">내용1</p>
    </body>

목업, 피그마 등등 디자인 잠깐 하고 자바2로 넘어간다.

자바 다시 복습하고 오기

지금까지 배운 이벤트를 사용해서 프로젝트 만들기

구현화면)

왼쪽 사이드바 없어졌다, 생겼다

응용해서 오른쪽으로 없어졌다, 생겼다

코드)

css

/*
 * Base
 */
html {
    font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

body {
    background-color: #656565;
}

img {
    vertical-align: middle;
}

button {
    outline: none;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.page-header {
    background-color: #fff;
}

.page-header h1 {
    width: 976px;
    height: 80px;
    margin: 0 auto;
    padding-left: 10px;
    font-size: 20px;
    font-weight: normal;
    line-height: 80px;
    letter-spacing: 0.1em;
}

.page-main {
    position: relative;

}

.page-main > aside {
    background-color: rgba(0,0,0,0.8);
    width: 350px;
    height: 100%;
    top: 0;
    right: 0;
    /* right: -350px; */
    position: fixed;
}

.page-main > aside ul {
    margin: 0;
    padding: 0;
    top: 50px;
    right: 114px;
    position: absolute;
}

.page-main > aside li {
    margin: 0 0 20px;
    list-style: none;
}

.page-main > aside button {
    background-color: rgba(0,0,0,0.8);
    /* 인라인은  width, height 를 못쓴다. */
    display: block;   
    position: absolute;
    top: 150px;
    right: 350px;
    width: 52px;
    height: 132px;
    margin: 0;
    padding: 0;
    border: none;
}

.page-footer {
    background-color: #656565;
}

.page-footer small {
    display: block;
    color: #fff;
    font-size: 11px;
    text-align: right;
    width: 976px;
    margin: 0 auto;
    height: 120px;
    line-height: 120px;
    letter-spacing: 0.15em;
}

.page-footer a {
    color: #fff;
    text-decoration: none;
}

js

$(function(){
    let duration = 300;

    // $객체정보
    let $aside = $(".page-main > aside");
    let $asidButton = $aside.find("button").on("click",function(){
        $aside.toggleClass('open')
        if ($aside.hasClass('open')){
            // 화면에 보이게
            // 'easeOutBack' 가속 붙기
            $aside.stop(true).animate({right:"-350px"},duration,'easeOutBack');
            $asidButton.find('img').attr('src', 'img/btn_open.png');
        }else{
            // 화면에 숨기게
            $aside.stop(true).animate({right:"-70px"},duration,'easeOutBack');
            $asidButton.find('img').attr('src', 'img/btn_close.png');
        }
    });
});

html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chapter 04-04 - jQuery 최고의 교과서</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/main.css">

<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
<script src="./js/main.js"></script>
</head>
<body>

<header class="page-header" role="banner">
    <h1>Creative jQuery Sample</h1>
</header>

<div class="page-main" role="main">
    <aside>
        <ul>
            <li><a href="#"><img src="img/01_aside.png"></a></li>
            <li><a href="#"><img src="img/02_aside.png"></a></li>
            <li><a href="#"><img src="img/03_aside.png"></a></li>
        </ul>
        <button><img src="img/btn_open.png"></button>
    </aside>
</div>

<footer class="page-footer" role="contentinfo">
    <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
</footer>

</body>
</html>

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

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0508 [파워포인트 목업] (0)	2024.06.11
UIUX _국비과정 0507 [파워포인트 목업] (1)	2024.06.08
UIUX _국비과정 0502 [제이쿼리 객체 조작과 이벤트] (1)	2024.06.08
UIUX _국비과정 0430 [제이쿼리 선택자] (1)	2024.06.08
UIUX _국비과정 0429 [제이쿼리 입문] (1)	2024.06.04

개발(자)되어가는 일지