<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
이렇게 넣은 사진, 좌우 화살표, 아래에 슬라이더 갯수만큼의 원이 생기면 성공.
<!-- 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이다.
이렇게 알아서 버튼 디자인을 해준다.
<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
브라우저의 길이에 따라 바뀌는 것을 볼 수 있다.
<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가 되자마자 바뀌는 모습을 볼 수 있다.
<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
이렇게 로그인 창이 완성된다.
<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>
위 코드를 추가하면
선택창이 추가된다.
<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 칸이 하나 더 생기고
누르면 글자가 위로 올라간다.
<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
코드가 엄청 길고 복잡하다.
이렇게 아코디언이 생성된다.
<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 색상으로 나온다.
<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>
위 코드를 추가한다
<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 코드를 복붙하였다.
아래 사진 슬라이드가 추가되었다.
<!-- 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에 위 코드를 추가한다.
아이콘이 추가된 것을 볼 수 있다.
<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
현재 여기까지 작성하였다.
내일 마저 할 것이다