HTML 5 + CSS + 자바스크립트 Day05

주세환·2023년 3월 27일
0

HTML 5

목록 보기
5/12

jQuery

입력 양식 포커스

<body>
    <input type="text" maxlength="6">
    <span>-</span>
    <input type="password" maxlength="7">
</body>

fe56_jquery.html을 생성하고 위 코드를 body에 입력하면

주민등록번호를 입력할 수 있는 최대 6자, 7자로 제한된 박스가 생성이 된다.

    <script>
        window.onload = function () {
            jumin1.focus();
            var jumin1 = document.getElementById('jumin1'); // 인풋객체를 가져옴
            var jumin2 = document.getElementById('jumin2');

            jumin1.onkeydown = function () { // 키보드 입력마다 이벤트 발생
                console.log(jumin1.value.length)
                if (6 <= jumin1.value.length ){ // jumin1이 6글자가 되면
                    jumin2.focus(); // jumin2 입력창으로 포커스 이동
            };
        };

        jumin2.onkeydown = function (e) {  
            var event = e || window.event; // jumin2에서 백스페이스( keyCode 8번 )이고 jumin2값을 다 지웠으면
            if ( event.keyCode == 8 && jumin2.value.length == 0) {
                jumin1.focus(); // 주민번호 앞자리 입력창으로 포커스 이동
            }

        }
    };
    </script>

스크립트에 추가하게 되면
앞자리 6자를 입력하면 자동으로 뒷자리 입력하는 칸으로, 뒷자리를 모두 지우면 앞자리를 입력하는 칸으로 자동으로 이동하게 된다.


프레임 애니메이션

    <script>
        window.onload = () => { // function () { (익명함수) or () => { (익명 람다함수)
            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 인덱스로 무한반복
                count += 1;
            }, 50); // 50ms에 한 번씩 이미지 체인지
        };
    </script>
</head>
<body>
    <img id="running">
</body>

달리는 15장을 폴더에 추가하고 위 코드를 작성하였다.

사진이지만 실제로는 열심히 달리는 중이다.


문서 객체 생성과 추가

    <script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" 
        integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" 
        crossorigin="anonymous">
    </script>
    <script>
        $(document).ready( function () {
            for (var i = 0; i < 10; i ++){
                $('<h1> Create object num ' + i + '</h1>').css({
                    'background-color' : 'black',
                    'color' : 'red'
                }).appendTo('body');
            }
            // $('body').append('<h1> Create object by jQuery </h1>'); // body 태그내에 추가
        })
    </script>

fe58_jquery_addobj.html이다.
첫번째 스크립트는 jQuery cnd이다.

h1 사이에 있는 항목들이 나온다.

    <script>
        $(document).ready( function () {
            for (var i = 0; i < 10; i ++){
                var h1 = $('<h1> Create object num ' + i + '</h1>').css({
                    'background-color' : 'black',
                    'color' : 'red'
                }); // .appendTo('body');

                $('body').append(h1);
            }
            // $('body').append('<h1> Create object by jQuery </h1>'); // body 태그내에 추가
        })
    </script>

이렇게 수정하여도 같은 결과가 나온다.


무한 스크롤

    <script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" 
        integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" 
        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 % 255 + ', ' + count % 255 + ', '+ count % 255 + ')',
                        'color' : 'white'
                    }).appendTo('body');
                    count++;
                }
            }    
            appendDoc();
            $(window).scroll(function () {
                var scrollH = $(window).scrollTop() + $(window).height();
                var docH = $(document).height();

                if(scrollH >= docH - 10) { // doc에서 10정도 뺸 값과 비교를 안하면 스크롤이 멈춤
                    appendDoc();
                }
            });
        });
    </script> 

fe59_infinityscroll.html이다.
첫번째 스크립트는 jQuery cnd이다.
이렇게 입력하면

이렇게 스크롤이 계~~속 내려간다.


플러그인 사용

    <script src="https://code.jquery.com/jquery-3.6.4.slim.min.js" 
        integrity="sha256-a2yjHM4jnF9f54xUQakjZGaqYs/V1CYvWpoqZzC2/Bw=" 
        crossorigin="anonymous">
    </script>
    <script>
        $(document).ready( function () {
            for (var i = 0; i < 10; i ++){
                var h1 = $('<h1> Create object num ' + i + '</h1>').css({
                    'background-color' : 'black',
                    'color' : 'red'
                }); // .appendTo('body');

                $('body').append(h1);
            }
            // $('body').append('<h1> Create object by jQuery </h1>'); // body 태그내에 추가
        })
    </script>

fe61_mylightbox.html이다.

첫번째 스크립트는 jquery cnd이다

이렇게 나온다면 성공.


갤러리

    <style>
        *{ margin: 0; padding: 0; }
        .body { margin: 0; }
        .card {
            background-color: black;
            margin: 5px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.4.js" 
        integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" 
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <script>
        // jQuery로 온로드 이벤트
        // $(document).ready(function () {});        
        $(document).ready(function () {
            // 카드 객체생성
            var makeCard = function () {
                for (var i=0; i < 100; i++) {
                    $('<div></div>').addClass('card').css({
                        'width': 100,
                        'height': (Math.floor(Math.random() * 100) + 50)
                    }).appendTo('body');
                    $('card').css({ 'background-color': 'black',
                    'margin': 5
                })
                }

                $('body').masonry({ columWidth: 100});
            };
            makeCard();
        });

        
    </script>
</head>

fe62_masonrylayout.html이다.

이렇게 까만 박스들이 나오고, 창크기를 바꿀 때마다 그에 맞춰 배치가 달라지면 성공이다.


    <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.js" 
    integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" 
    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/slide01.jpg"></div>
      <div><img src="photos/slide02.jpg"></div>
      <div><img src="photos/slide03.jpg"></div>
    </div>
</body>

fe63_bxslider.html

이렇게 넣은 사진, 좌우 화살표, 아래에 슬라이더 갯수만큼의 원이 생기면 성공.


BootStrap

강의링크

강의링크

Button

    <!-- 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 {
            color: red;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <form>
        <input type="button" value="Basic" class="btn addition">
        <button class="btn btn-primary">Primary<span class="badge">5</span></button>
        <input type="button" value="Secondary" class="btn btn-secondary">
        <input type="button" value="Success" class="btn btn-success">
        <input type="button" value="Info" class="btn btn-info">
        <input type="button" value="Warning" class="btn btn-warning">
        <input type="button" value="Danger" class="btn btn-danger">
        <input type="button" value="Dark" class="btn btn-dark">
        <input type="button" value="Light" class="btn btn-light">
        <input type="button" value="Link" class="btn btn-link">
    </form>
    
    <!-- 2. Bootstrap용 js는 body에 위치해야 함!-->
    <!--<script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr9s3Bzrl+cbzUq8=" crossorigin="anonymous"></script>-->
    <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>

fe64_bootstrap.html이다.

이렇게 알아서 버튼 디자인을 해준다.


Layout

Container

    <style>
        .addition{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container addition"><p>.container</p></div> <!-- < 576px -->
    <div class="container-sm addition"><p>.container-sm</p></div> <!-- >= 576px -->
    <div class="container-md addition"><p>.container-md</p></div> <!-- >= 768-->
    <div class="container-fluid addition"><p>.container-fluid</p></div> <!-- 항상 full -->

    
    <!-- 2. Bootstrap용 js는 body에 위치해야 함!-->
    <!--<script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr9s3Bzrl+cbzUq8=" crossorigin="anonymous"></script>-->
    <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>

fe65_bootstrap.html

브라우저의 길이에 따라 바뀌는 것을 볼 수 있다.


Grid

    <div class="container">
        <div class="row">
            <div class="col addition">1 of 2</div>
            <div class="col addition">2 of 2</div>
        </div>
        <div class="row">
            <div class="col addition">1 of 3</div>
            <div class="col addition">2 of 3</div>
            <div class="col addition">3 of 3</div>
        </div>
    </div>

이렇게 수정하면

6 : 6
4 : 4 : 4

이렇게 표시된다.


        <div class="row">
            <div class="col-5 addition">1 of 3</div>
            <div class="col-2 addition">2 of 3</div>
            <div class="col-3 addition">3 of 3</div>
        </div>

12를 맞추지 않으면

이렇게 깨지게 된다.


        <div class="row">
            <div class="col-sm addition">1 of 3</div>
            <div class="col-sm addition">2 of 3</div>
            <div class="col-sm addition">3 of 3</div>
        </div>

sm으로 바꾸면

길이가 575가 되자마자 바뀌는 모습을 볼 수 있다.


Forms

Form Control

    <style>
        .addition{
            background-color: #EAE0FE;
            border: 1px solid #C5A9FC;
        }

        .space {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container space">
        <div class="row">
            <div class="col-sm">
                <form method="get">
                    <div class="mb-2">
                        <label for="mail" class="form-label">Email Address</label>
                        <input type="email" id="mail" class="form-control" aria-describedby="mailhelp">
                        <div id="mailhelp" class="form-text">이메일을 입력하세요.</div>
                    </div>
                    <div class="mb-2">
                        <label for="pass" class="form-label">Password</label>
                        <input type="password" id="pass" class="form-control">
                    </div>
                    <input type="submit" value="로그인" class="btn btn-primary">
                </form>
            </div>
        </div>
    </div>

fe66_bootstrap_form.html

이렇게 로그인 창이 완성된다.


Selects

<div class="mb-2">
	<label for="product" class="form-label">제조회사</label>
	<select id="product" class="form-select">
		<option selected>메뉴를 선택하세요.</option>
		<option value="1">삼성전자</option>
		<option value="2">LG전자</option>
		<option value="3">SK하이닉스</option>
	</select>
</div>

위 코드를 추가하면

선택창이 추가된다.


Floating labels

<div class="form-floating mb-2">
    <input type="email" id="mail" class="form-control" placeholder="test@mail.com">
    <label for="mail2" class="form-label">Email Address</label>
</div>

위 코드를 추가하면

Email Address 칸이 하나 더 생기고

누르면 글자가 위로 올라간다.


Components

Accordion

<body>
    <div class="container space">
        <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="true" aria-controls="itemOne">Item #1</button>
                        </h2>
                        <div id="itemOne" class="accordion-collapse collapse show" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, porro.
                            </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 collapse" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum, excepturi?
                            </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 collapse" data-bs-parent="#lorem">
                            <div class="accordion-body">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, illum.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap용 js는 body에 위치해야 함!-->
    <!--<script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr9s3Bzrl+cbzUq8=" crossorigin="anonymous"></script>-->
    <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>

fe67_bootstrap_comp.html

코드가 엄청 길고 복잡하다.

이렇게 아코디언이 생성된다.


Alert

        <div class="row mb-3">
            <div class="col">
                <div class="alert alert-primary" role="alert">
                    Hello Bootstrap!
                </div>
            </div>
        </div>

row를 추가한다

Hello BootStrap!

<div class="alert alert-warning" role="alert">

alert를 바꾸었다.

warning으로 바꿨으니 warning 색상으로 나온다.


Buttons

        <div class="row mb-3">
            <div class="col">
                <div class="btn-group">
                    <a href="#" class="btn btn-primary active">Active Link</a>
                    <a href="#" class="btn btn-primary">Link</a>
                    <a href="#" class="btn btn-primary">Link</a>
                </div>
            </div>
        </div>

위 코드를 추가하면

링크 버튼이 3개 나온다. 활성화된 링크, 링크, 링크


        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <img src="https://placekitten.com/300/190" alt="kitten" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit voluptatem nulla numquam illo inventore beatae suscipit unde repellat delectus dolorum!</p>
                        <a href="#" class="btn btn-sm btm-primary">Website</a>
                    </div>
                </div>
            </div>
        </div>

위 코드를 추가한다


Card

        <div class="row mb-3">
            <div class="col">
                <div class="card" style="width: 300px; box-shadow:2px 2px 4px gray">
                    <img src="https://placekitten.com/300/191" alt="kitten" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit voluptatem nulla numquam illo inventore beatae suscipit unde repellat delectus dolorum!</p>
                        <a href="#" class="btn btn-sm btn-primary">Website</a>
                    </div>
                </div>
            </div>
        </div>

위 카드를 생성하는 코드를 추가한다.

고양이 사진이 추가된 카드가 생성된다.


        <div class="row mb-3">
            <div class="col">
                <div id="carouselExampleFade" class="carousel slide carousel-fade">
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                        <img src="./photos/slide01.jpg" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="./photos/slide02.jpg" class="d-block w-100" alt="...">
                      </div>
                      <div class="carousel-item">
                        <img src="./photos/slide03.jpg" class="d-block w-100" alt="...">
                      </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
                  </div>
            </div>
        </div>

Bootstrap 홈페이지에서 Components - Carousel 코드를 복붙하였다.

아래 사진 슬라이드가 추가되었다.


Icons

    <!--  BootStrap Icon용 CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

head에 위 코드를

	<div class="row mb-3">
            <div class="col">
                <button type="button" class="btn btn-primary"><i class="bi-alarm"></i>Primary</button>
                <button type="button" class="btn btn-secondary"><i class="bi-alarm-fill"></i>Secondary</button>
                <button type="button" class="btn btn-success"><i class="bi-house-fill">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>

body에 위 코드를 추가한다.

아이콘이 추가된 것을 볼 수 있다.


Album

하단 아이콘

<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용 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">    
    <link rel="icon" href="https://getbootstrap.com//docs/5.3/assets/img/favicons/favicon.ico">
</head>
<body>
    <!-- 맨바닥 테마(light/dark) 변경 버튼 영역-->
    <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
        <button class="btn btn-primary py-2 dropdown-toggle d-flex align-tiems-center" data-bs-toggle="dropdown" id="bd-theme" type="button">
            <i class="bi bi-brightness-high-fill"></i>  
        </button>
        <ul class="dropdown-menu">
            <li>
                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light" aria-pressed="true">
                    <i class="bi bi-brightness-high-fill"></i> Light
                </button>
            </li>
            <li>
                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
                    <i class="bi bi-moon-stars-fill"></i> Dark
                </button>
            </li>
        </ul>
    </div>
    <!-- top 메뉴영역 -->
    <header data-bs-theme="dark">
        <div class="collapse text-bg-dark" id="navbarHeader">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8"></div>
                    <div class="col-sm-4"></div>
                </div>
            </div>
        </div>
    </header>
    <!-- 2. Bootstrap용 js는 body에 위치해야 함!-->
    <!--<script src="https://code.jquery.com/jquery-3.6.4.min.js"
            integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr9s3Bzrl+cbzUq8=" crossorigin="anonymous"></script>-->
            <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>

fe68_bootstrap_album.html

현재 여기까지 작성하였다.

내일 마저 할 것이다

0개의 댓글