빅데이터 Java 개발자 교육 - 40일차 [jQuery/JS 연동 및 Bootstrap] (실습)

Jun_Gyu·2023년 3월 27일

Accordion JavaScript bootstrap bxslider container icon jquery lightbox masonry setInterval 무한스크롤

빅데이터 Java 개발자 교육

목록 보기

42/71

jQuery/JS 연동

입력양식 Focus

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>jQuery/JS 연동</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <form action="">
        <input type="text" maxlength="6">
        <span>-</span>
        <input type="password" maxlength="7">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>jQuery/JS 연동</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script>
        window.onload = function() {
            var membernum1 = document.getElementById('membernum1'); // 각 input 객체의 id값을 받아옴. 
            var membernum2 = document.getElementById('membernum2');

            membernum1.onkeydown = function () { // 첫번째 입력창 키보드 입력
                console.log(membernum1.value.length);
                if (6 <= membernum1.value.length) { // 첫번째 칸의 입력된 수 길이가 6 이상이면
                    membernum2.focus(); // 두번째 칸으로 포커싱 이동.
                }
            }
            membernum2.onkeydown = function (e) {// 두번째 입력창 키보드 입력
                var event = e || window.event; // 1. membernum2에서 백스페이스 (keyCode  8번)이고, membernum2값을 다 지웠으면, 
                // (window.event를 or로 지정해주는 이유는 )
                if(event.keyCode == 8 && membernum2.value.length == 0) {
                    membernum1.focus(); // 2. 앞자리 입력창으로 포커스 이동.
                }
            }
            membernum1.focus();
        };
    </script>
</head>
<body>
    <form action="">
        <input type="text" maxlength="6" id="membernum1">
        <span>-</span>
        <input type="password" maxlength="7" id="membernum2">
    </form>
</body>
</html>

앞자리칸의 길이가 6을 초과할 경우 다음 칸으로 포커스가 넘어가게 되고,
반대로 뒷자리칸의 길이가 0이 될 경우 다시 앞자리칸으로 포커스가 넘어오게 된다.

애니메이션 (setInterval)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>프레임 애니메이션</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script>
        window.onload = function () {
            var count = 0;
            var running = document.getElementById('running');
            var frames = [
                './images/0.png','./images/1.png','./images/2.png','./images/3.png','./images/4.png',
                './images/5.png','./images/6.png','./images/7.png','./images/8.png','./images/9.png',
                './images/10.png','./images/11.png','./images/12.png','./images/13.png','./images/14.png'
            ];
            
            setInterval(() => {
                running.src = frames[count % frames.length]; // 0~14 index로 무한반복
                count += 1;
            }, 40 ); // 영상 재생속도, 40ms에 한번씩 이미지 체인지.
        }
    </script>
</head>
<body>
    <img id="running">
</body>
</html>

문서 객체 생성,추가하기 (jQuery 라이브러리 활용)

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>jQuery로 객체추가</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src="https://code.jquery.com/jquery-3.6.4.slim.js" 
            integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" 
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () { //"window.onload= fucntion" 와 "() => {" 도 같은 의미임!
            for (var i = 0; i < 10; i++) {  // body에 h1 객체를 10개 만드는 것과 같음.
                $('<h1>Create object for' + i + '</h1>').css({
                    'background-color': 'black',
                    'color': 'red'

                }).appendTo('body');
                /* });
                 * $('body').append(h1); 로도 쓸 수 있다. */
            }
            // $('body').append('<h1>Create object by jQuery</h1>'); // body 태그내에 추가
        }) 
    </script>
</head>
<body>
    
</body>
</html>

무한 스크롤

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>무한 스크롤</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://code.jquery.com/jquery-3.6.4.slim.js" 
            integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" 
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            var count = 0;
            var appendDoc = function () {
                for(var i =0; i < 20; i++){
                $('<h1>무한스크롤' + count + '</h1>').css({
                        'background-color' : 'rgb(' + count % 256 + ', ' + count % 256 + ', ' + count % 256 + ')',
                        'color': 'white'
                }).appendTo('body');
                count++;
                }
            }
            appendDoc();

            $(window).scroll(function () {
                var scrollH = $(window).scrollTop() + $(window).height();
                var docH = $(document).height();
                console.log('scrollH = '+ scrollH + ' & ' + 'docH =' + docH);
                
                if(scrollH >= docH - 10) { // docH에서 10정도 뺀 값과 비교를 하지 않으면 스크롤이 멈춤. 
                    appendDoc();
                }
            });
        });
    </script>
</head>
<body>
    
</body>
</html>

플러그인 사용

lightbox란??

라이트박스는 화면을 채우고 웹페이지의 나머지 부분을 어둡게 하여 이미지와 동영상을 표시하는 자바스크립트 라이브러리중 하나이다. 새로운 브라우저를 열지 않아도 곧바로 이미지나 동영상 파일을 볼 수 있으며, 깔끔한 디자인으로 인해 웹 개발에서 자주 사용되는 플러그인이다.

참고글 출처 - https://en.wikipedia.org/wiki/Lightbox_(JavaScript)

https://avioli.github.io/jquery-lightbox/
먼저 위의 주소로 들어가서 플러그인을 다운받아주도록 하자.

Zip, Git 등등 여러 방법이 있다. Zip이 반응하지를 않아서 Git주소로 들어가 다운받았다.
다운을 받은 이후에 <script>문을 이용하여 추가해주도록 하자.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href="css/jquery.lightbox.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" 
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" 
            crossorigin="anonymous"></script> <!-- jQuery slim에서는 동작하지 않음. (https://releases.jquery.com/ 에서  "minified"를 가져와야 함!)  -->
            <!-- lightbox는 jQuery script 밑에 입력 -->
    <script src="js/jquery.lightbox.min.js"></script>
    <script>
        $(document).ready(function () {
            $('a.light').lightBox();
        })
    </script>
</head>
<body>
    <a class="light" href="photos/image1.jpg"><img src="photos/thumb_image1.jpg"></a>
    <a class="light" href="photos/image2.jpg"><img src="photos/thumb_image2.jpg"></a>
    <a class="light" href="photos/image3.jpg"><img src="photos/thumb_image3.jpg"></a>
</body>
</html>

사용하고자 하는 용도에 따라 위처럼 사진을 조회할 수 있는 기능이다.

Masonry

Masonry란?

Masonry는 사전적으로 "벽돌을 쌓아올린다"는 의미를 가지며, 웹에서의 Masonry 레이아웃은 하나의 축이 일반적인 그리드 레이아웃을 사용하고 다른 한 축이 Masonry 레이아웃을 사용하는 레이아웃 방법이다. 흔히 "Pinterest" 사이트에서 많이 사용하는 방법이며, 위에서 설명하였던 무한스크롤의 방식을 접목하여 많은 양의 정보를 사용자가 손쉽게 접하도록 만들어진 레이아웃 방식이다.

참고글 출처 - https://wit.nts-corp.com/2022/10/26/6595

아래의 사이트는 Masonry 레이아웃을 배포하는 사이트이다.
https://masonry.desandro.com/

사이트를 확인해보면 Masonry 레이아웃을 활용하여 꾸민 유명 셀럽들의 개인 웹페이지를 비롯하여 다양한 인기 웹페이지들을 메인에서 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        * {margin: 0; padding: 0px; }
        .body { margin: 0 auto; }
        .card {
            background-color: mediumaquamarine;
            -webkit-text-fill-color: white;
            text-align: center;
            margin: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" 
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" 
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <!-- https://masonry.desandro.com/#cdn -->
    <script>
        // jQuery로 온로드 이벤트
        // $(document).ready(function () {}); 는 외워둘 것!
        $(document).ready(function () {
            // 카드 객체 생성
            var makeCard = function() {
                for(var i = 0; i < 100; i++) { // 100개
                    $('<div>' + i + '</div>').addClass('card').css({
                        'width': '100',
                        'height': (Math.floor(Math.random() * 100) + 50)
                    }).appendTo('body');
                }                
                $('body').masonry({columnWidth : 100 });
            };
            makeCard();
        });
    </script>
</head>
<body>
    
</body>
</html>

브라우저 창의 크기에 따라서 컬럼들이 자동으로 자리를 찾아가는 형식이다.

bxslider

bxslider란?

bxSlider 란 오픈소스 플러그인의 일종으로, 웹 프론트에서 이미지파일 등을 슬라이드로 구현할 때 사용하는 플러그인이다. 앞서 소개한 lightbox의 경우에는 이미지 하나하나를 강조하여 나타내는 방식이라면, bxslider의 경우에는 웹 페이지와의 조화에 좀 더 어우러진 형태라고 볼 수 있다.

아래의 주소에서 플러그인 설치 CDN코드를 다운받을 수 있다.
https://bxslider.com/install

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>bxslider Sample</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" 
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" 
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

    <script>
         $(document).ready(function(){
            $(".slider").bxSlider();
         });
    </script>
</head>
<body>
    <div class="slider">
        <div><img src="photos/image1.jpg"></div>
        <div><img src="photos/image2.jpg"></div>
        <div><img src="photos/image3.jpg"></div>
      </div>
</body>
</html>

화살표를 누르게 되면 슬라이드 효과와 함께 다음 사진으로 전환된다.

아래내용부터는 Bootstrap에 관한 내용이다.

Bootstrap

Bootstrap이란?

부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것으로, 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻고있는 프레임워크이다.

참고글 출처 - https://ict-nroo.tistory.com/21

container

https://getbootstrap.com/docs/5.3/getting-started/download/
위의 경로로 들어가서

및줄 친 코드들을 복사하도록 하자.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>부트스트랩 시작</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- 1. Bootstrap용 csss CDN 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" 
          crossorigin="anonymous">
</head>
<body>
    <!-- 2. Bootstrap용 js는 body에 위치해야 함! -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" 
            crossorigin="anonymous">
    </script>

</body>
</html>

이때, CDN과 js는 각각 다른 위치에다 추가해주어야 한다!!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>부트스트랩 시작</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- 1. Bootstrap용 csss CDN 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" 
          crossorigin="anonymous">
        <style> /* 부트스트랩이 있지만, 추가적으로 스타일을 적용할 수 있다. */
            .addition{
                background-color: aquamarine;
                font-weight: 600;
            }
        </style>
</head>
<body>
	<form>
       <div class="container addition"><p>.container</p></div>
       <div class="container-sm addition"><p>.container-sm</p></div>
       <div class="container-md addition"><p>.container-md</p></div>
       <div class="container-fluid addition"><p>.container-fluid</p></div> <!-- 항상 100% -->

    </form>
    <!-- 2. Bootstrap용 js는 body에 위치해야 함! -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" 
            crossorigin="anonymous">
    </script>

</body>
</html>

Accordion

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Accordion</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- 1. Bootstrap용 css CDN 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" 
          crossorigin="anonymous">
        <style> /* 부트스트랩이 있지만, 추가적으로 스타일을 적용할 수 있다. */
            .addition {
                background-color: aquamarine;
                border: 1px solid whitesmoke;
                text-align: center;
            }
            
            .space {
                margin-top: 20px ;
            }

            .btn-primary {
                margin: 10px;
            }
        </style>
</head>
<body>
    <!-- 한 row당 길이는 12로 가정하기 때문에, col 뒤에 붙는 숫자의 합은 항상 12가 되어야 한다. -->
    <div class="container">
        <div class="row">
            <div class="col">
               <div class="accordion" id="lorem">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#itemOne" aria-expanded="false" aria-controls="itemOne">Item #1</button>
                        </h2>
                        <div id="itemOne" class="accordion-collapse show" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, laborum.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#itemTwo" aria-expanded="false" aria-controls="itemtwo">Item #2</button>
                        </h2>
                        <div id="itemTwo" class="accordion-collapse show" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ipsam tempore expedita.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#itemThree" aria-expanded="false" aria-controls="itemThree">Item #3</button>
                        </h2>
                        <div id="itemThree" class="accordion-collapse show" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ipsam tempore expedita.
                            </div>
                        </div>
                    </div>
               </div>
            </div>
        </div>
    </div>
    <!-- 2. Bootstrap용 js는 body에 위치해야 함! -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" 
            crossorigin="anonymous">
    </script>

</body>
</html>

Icon

Icon의 경우에는 아래의 주소로 들어가서,
https://icons.getbootstrap.com/#install

빨간색 동그라미가 된 부분을 복사하여 head 부분에 <link>문으로 추가해주도록 하자.

이후 https://icons.getbootstrap.com/에서

원하는 아이콘의 명칭을 복사하여 <i>문의 class로 불러와 사용하면 되겠다.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Accordion</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- 1. Bootstrap용 css CDN 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
    <!-- 3. Bootstrap용 Icon CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>

<body>
    <!-- 한 row당 길이는 12로 가정하기 때문에, col 뒤에 붙는 숫자의 합은 항상 12가 되어야 한다. -->
    <div class="container">
        <div class="row mb-3">
            <div class="col">
                <button type="button" class="btn btn-primary"><i class="bi-alarm-fill"></i> Primary</button>
                <button type="button" class="btn btn-secondary"><i class="bi-house-fill"></i> Secondary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-dark">Dark</button>
                <button type="button" class="btn btn-link">Link</button>
            </div>
        </div>
    </div>

    <!-- 2. Bootstrap용 js는 body에 위치해야 함! -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous">
        </script>

</body>

</html>