45일차 2023-05-10
2023. 5. 10. 19:36ㆍbootstrap
BootStrap
Form Inputs23.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>FormInputs23.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Form Inputs</h1>
<p>we use the .form-control class to style inputs with full-width and proper padding, etc</p>
</div><!--jumbotron-->
<h2>Checkboxes</h2>
<!--체크박스를 세로배치시에는 form-group을 주지말자(주면 여백이 너무많다) -->
<div class="form-check">
<!--체크박스를 lable로 감싸고 텍스트는 체크박스뒤에(이유는 글자 클릭시에도 버튼역할을 하게 만들려고)-->
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<!--반드시 disabled는 태그의 속성으로(클래스가 아닌)-->
<input type="checkbox" class="form-check-input " value="" disabled>Option 3
</label>
</div>
<h2>Inline Checkboxes</h2>
<div class="form-check-inline">
<!--체크박스를 lable로 감싸고 텍스트는 체크박스뒤에-->
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<!--반드시 disabled는 태그의 속성으로(클래스가 아닌)-->
<input type="checkbox" class="form-check-input " value="" disabled>Option 3
</label>
</div>
<!--Radio버튼은 Checkbox와 동일-->
<h2>Select List</h2>
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<h2>Form Control Sizing(세로폭)</h2>
<!--
세로폭은 form-control-*
가로폭은 w-계열
w-auto:해상도에 상관없이 텍스트박스의 기본 크기 유지
-->
<input type="text" class="form-control form-control-sm w-auto">
<input type="text" class="form-control my-2 w-25">
<input type="text" class="form-control form-control-lg w-50">
<h2>Form Control with Plain Text</h2>
<input type="text" class="form-control mb-2" placeholder="기본 폼 요소" >
<input type="text" class="form-control-plaintext border-bottom border-danger border-top-0" placeholder="form-control-plaintext 클래스" >
</div><!--container-->
</body>
</html>
결과)
Custom Forms24.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>CustomForms24.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Custom Forms</h1><!--모양이 좀더 크고, 애니메이션이 들어간 것-->
<p>Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults</p>
</div><!--jumbotron-->
<h2>Custom Checkbox/Custom Radio/Custom Switch</h2>
<!--label 및 아이디 속성 필수.label이 없으면 요소가 보이지 않는다-->
<div class="custom-control custom-checkbox">
<!--label로 감싸지 말자:감싸면 체크가 안된다, input 의id와 label의 for은 연동하기 위함-->
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<!--label로 감싸지 말자:감싸면 체크가 안된다, input 의id와 label의 for은 연동하기 위함 -->
<input type="radio" class="custom-control-input" id="customRadio">
<label class="custom-control-label" for="customRadio">Custom radio</label>
</div>
<!--체크박스로 스위치를 만든다-->
<div class="custom-control custom-switch"> <!--input 의id와 label의 for은 연동하기 위함-->
<input type="checkbox" class="custom-control-input" id="switch1">
<label class="custom-control-label" for="switch1">불루투스</label>
</div>
<h2>Inline Custom Form Controls</h2>
<!--custom-control-inline클래스만 추가-->
<div class="custom-control custom-checkbox custom-control-inline">
<!--label로 감싸지 말자:감싸면 체크가 안된다-->
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<!--label로 감싸지 말자:감싸면 체크가 안된다-->
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Custom checkbox</label>
</div>
<h2>Custom Select Menu</h2>
<!--form-control 대신 custom-select-->
<!--w-auto:선택상자의 가로폭 조정-->
<select class="custom-select w-auto"><!-- w-auto는 content크기만큼 너비-->
<option selected>Custom Select Menu</option>
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<h2>Custom Range</h2>
<input type="range" class="custom-range w-auto">
<h2>Custom File Upload</h2>
<!--선택한 파일을 입력상자에 뿌리기 위해서는 자스코딩 필요-->
<style>/*원래 영어로 Browse 써져있는 거 뜯어온 거임*/
/* "Browse" 텍스트 변경 */
.custom-file-input:lang(en)~.custom-file-label::after {
content: "파일찾기";
}
</style>
<div class="custom-file w-auto"><!--버튼의 너비를 Content크기만큼 자동으로 맞춰줌-->
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label selected" for="customFile">파일을 선택하세요</label>
</div>
<script>
/*
//제이쿼리 버전
$(".custom-file-input").on("change", function() {
//console.log($(this).val().split("\\"));
var fileName = $(this).val().split("\\").pop();
//$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
//".custom-file-label"의미없다(형제가 한명이니까)
//addClass("selected")도 의미없다. selected클래스는 부트스랩에 없다
$(this).siblings().html(fileName);
});*/
//문)바닐라 JS버전으로 구현하여라
var customFile = document.querySelector('#customFile');
customFile.onchange=function(){
var fileName = this.value.split("\\").pop();//this.value는 파일 선택 input값을 가져오고,split으로 \\로 문자 분할,pop()메소드로 마지막 섹션을 추출
this.nextElementSibling.innerHTML=fileName;//위 추출된 걸 nextElementSibling은 속성은 현재 요소의 다음 요소를 가져옴, 이게 파일 찾기 버튼임
//innerHTML속성을 파일이름으로 업데이트 함
};
//(또 다른 방법)
//바닐라 js버전으로 구현
// document.querySelector(".custom-file-input").addEventListener("change",function(){
// var fileName = event.target.value.split("\\").pop();
// var siblings = this.parentNode.children;
// for (var i = 0; i < siblings.length; i++) {
// if (siblings[i] !== this) {
// siblings[i].innerHTML = fileName;
// }
// }
// });
</script>
</div><!--container-->
</body>
</html>결과)
Carousel25.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Carousel25.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Carousel</h1>
<p>The Carousel is a slideshow for cycling through elements</p>
</div><!--jumbotron-->
<div class="d-flex justify-content-center"><!--캐러셀을 중앙정렬(근데 없어도 중앙정렬 가능)-->
<!--캐러셀을 100%너비 주고, data-ride속성은 자동 슬라이드하게 해주는 속성-->
<div id="demo" class="carousel slide w-100" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators"><!--indicators속성은 표시기 리스트를 클릭하여 원하는 슬라이드로 이동하게 해줌-->
<li data-target="#demo" data-slide-to="0" class="active"></li><!--active는 첨에 활성화를 나타냄-->
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://www.nate.com"><!--그림 클릭시 링크가게됨-->
<img src="images/1.jpg" alt="풍경사진1" class="w-100" style="height:300px">
</a>
<div class="carousel-caption"><!--caption은 글자 보여줌-->
<h3>첫번째 풍경사진</h3>
<p>멋지네요!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/2.jpg" alt="풍경사진2" class="w-100" style="height:300px">
<div class="carousel-caption">
<h3>두번째 풍경사진</h3>
<p>기가막네요!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/3.jpg" alt="풍경사진3" class="w-100" style="height:300px">
<div class="carousel-caption">
<h3>세번째 풍경사진</h3>
<p>환상이네요!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/4.jpg" alt="풍경사진4" class="w-100" style="height:300px">
<div class="carousel-caption">
<h3>네번째 풍경사진</h3>
<p>오우 쩝니다!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span><!-- 이건 "<"이 아이콘을 나타냄-->
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span><!-- 이건 ">"이 아이콘을 나타냄-->
</a>
</div>
</div>
</div><!--container-->
</body>
</html>결과)
Modal26.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Modal26.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
/*모달헤더의 아래쪽 경계선 제거 및 x버튼의 여백 지정*/
.modal-header{
border-bottom: none;
padding: 0;
padding-right: .7rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Modal</h1>
<p>The Modal component is a dialog box/popup window that is displayed on top of the current page</p>
</div><!--jumbotron-->
<h2>Add animation/Modal Size/Centered Modal</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >
모달 띄우기
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<!--
모달 크기 설정
Add the size class to the <div> element with class .modal-dialog
By default, modals are "medium" in size.
-->
<div class="modal-dialog modal-dialog-centered"><!--dialog는 모달 대화 상자를 표시하기 위한 기본 클래스,그리고 중앙 정렬 속성 줌-->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header justify-content-center">
<h5 class="modal-title mt-3">수정/삭제용 비밀번호 입력창</h5>
<!--
<button type="button" class="close" data-dismiss="modal">×</button>
-->
</div>
<!-- Modal body -->
<div class="modal-body">
<!--가로 정렬,needs-validation은 폼 제출 전 유효성 검사, novalidate 속성은 기본제공되는 브라우저 유효성 검사를 비활성화 시킴-->
<form class="form-inline justify-content-center needs-validation" novalidate>
<div class="d-flex flex-wrap">
<label for="password" class="mr-2">비밀번호</label><!--for속성에 password를 form 요소의 id와 연결시킴,required는 비어있으면 폼이 제출 안됨-->
<input type="password" class="form-control mr-2" placeholder="비밀번호를 입력하세요" id="password" required>
<button type="submit" class="btn btn-primary">확인</button>
<div class="invalid-feedback">비밀번호를 입력하세요</div><!--invalid-feedback속성은 내용이 유효하지 않을 경우 텍스트를 표시함-->
</div>
</form>
</div>
<!-- Modal footer
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">닫기</button>
</div>
-->
</div>
</div>
</div>
</div><!--container-->
<script>
/*
backdrop옵션
true - dark overlay
false - no overlay (transparent)
"static"-닫기를 클릭해야만 모달창이 닫힌다(모달창 영역이 아닌 곳 클릭시는 안 닫힌다)
1.Using data-
data-*계열 속성으로 백드랍 구현: 모달띄우는 버튼에 data-backdrop="true or false or static" 추가
2.Using JS
*/
$('div.container > button').click(function(){//div태그의 container클래스의 하위에 button태그를 찾고, click이벤트 핸들러 등록(클릭 시 함수 실행)
$('#myModal').modal({backdrop:'static'});//id값이 myModal인 요소에 대해 Modal실행, backdrop속성은 모달이 열릴때 배경에 어두운 레이어 표시하는
//옵션, 이 속성이 static값을 설정하면 모달 밖의 영역 클릭 시 모달을 닫지 못하게 됨(원래는 닫을 수 있음)
});
var password = document.querySelector('#password');//id값이 password인 태그를 변수 password에 담음
document.forms[0].onsubmit=function(e){//첫번째 폼 요소, 이폼 요소가 제출 이벤트 발생시 onsumit 이벤트 핸들러 호출
if(!document.forms[0].checkValidity()){//첫번째 폼 요소가 폼 유효성 검사 실행, 이게 조건에 맞지 않는다면 아래코드 실행
document.forms[0].classList.add('was-validated');//div에 지정한 valid/invalid 메시지 띄우기 위함 //폼 요소에 was-validated클래스 추가
return false;//submit 이벤트 취소
}
console.log('비밀번호:',password.value);
e.preventDefault();//이벤트 취소
$('#myModal').modal("hide");//모달창 닫기
};
</script>
</body>
</html>결과)
Tooltip27.html
결과)
Popover28.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Popover28.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Popover</h1>
<p>
The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element.<br/>
The difference is that the popover can contain much more content<br/>
By default, the popover is closed when you click on the element again
</p>
</div><!--jumbotron-->
<h2>Positioning Popovers/Closing Popovers</h2>
<h4>data-* 계열 속성으로 구현</h4>
<!--
1. 요소에 data-toggle="popover"속성 및 title속성(팝오버의 헤더 텍스트) 및 data-content속성으로 내용 설정
2. 자바스크립트로 툴팁 구현
data-trigger="focus"속성은 요소 밖의 아무 영역이나 클릭해도
팝오버가 닫힌다(단,해당 요소를 클릭하면 닫히지 않는다)
data-html속성이 기본값 false임 이걸 true로 바꿔줘야 data-content에 html태그(strong)를 줄 수 있음
-->
<a href="#" class="btn btn-info" data-toggle="popover" data-placement="top" title="비밀쪽지1" data-content="내일 오후 2시에 <strong>명동성당</strong>에서<br/>둘만 조용히 봐요" data-trigger="focus" data-html="true">Top</a>
<a href="#" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="비밀쪽지2" data-content="내일 오후 2시에 명동성당에서 둘만 조용히 봐요" data-trigger="focus">Bottom</a>
<a href="#" class="btn btn-warning" data-toggle="popover" data-placement="left" title="비밀쪽지3" data-content="내일 오후 2시에 명동성당에서 둘만 조용히 봐요">Left</a>
<a href="#" class="btn btn-danger" data-toggle="popover" data-placement="right" title="비밀쪽지4" data-content="내일 오후 2시에 명동성당에서 둘만 조용히 봐요">Right</a>
<h4>자바스크립트로 구현</h4>
<button class="btn btn-warning">Top</button>
<button class="btn btn-success">Bottom</button>
<button class="btn btn-danger">Left</button>
<button class="btn btn-primary">Right</button>
</div><!--container-->
<script>
//data-*계열 속성으로 구현시
$('[data-toggle="popover"]').popover();
//JS로 구현시
$('div > button.btn.btn-warning').popover({title: "위쪽",content:'<strong>위쪽</strong>에 보이는 팝업입니다', placement: "top",html:true});
$('div > button.btn.btn-success').popover({title: "아래쪽",content:'아래쪽에 보이는 팝업입니다', placement: "bottom"});
$('div > button.btn.btn-danger').popover({title: "왼쪽",content:'왼쪽에 보이는 팝업입니다', placement: "left"});
$('div > button.btn.btn-primary').popover({title: "오른쪽",content:'오른쪽에 보이는 팝업입니다', placement: "right"});
</script>
</body>
</html>결과)
Toast29.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Toast29.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Toast</h1>
<p>
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.)
<br/>
Toasts are hidden by default
</p>
</div><!--jumbotron-->
<button type="button" class="btn btn-primary" id="myBtn">토스트 띄우기</button>
<div class="mt-2">
<form class="form-inline">
<label for="username" class="mr-2">아이디</label><!--for속성으로 form태그의 id연결(username)-->
<input type="text" class="form-control mr-2" placeholder="아이디를 입력하세요" id="username">
<label for="password" class="mr-2">비밀번호</label><!--for속성으로 form태그의 id연결(password)-->
<input type="password" class="form-control mr-2" placeholder="비밀번호를 입력하세요" id="password">
<button type="submit" class="btn btn-primary">확인</button><!-- 서버 전송-->
</form>
<div class="toast mt-2">
<div class="toast-header">
확인창
</div>
<div class="toast-body">
2초간 보입니다.
</div>
</div>
</div>
</div><!--container-->
<script>
//토스트 띄우기 버튼 클릭시 이벤트 처리-2초후 자동으로 닫힌다(autohide)(기본값2초)
$('#myBtn').click(function(){//id가 myBtn인 태그 클릭 시 함수 실행
$('.toast').toast('show');//클래스toast를 찾아 실행 2초 show
});
$('[type=submit]').click(function(e){//타입이 submit을 찾아 그 태그 클릭 시 함수 실행
e.preventDefault();//type="submit"이면 무조건 제출되기때문에 기본 제출기능을 막아야 한다
if($('#username').val()!=='' && $('#password').val()!=='')//id가username인 태그가 값이 있고,password도 값이 있을때
return;//함수 나감 아래 코드 실행 X
if($('#username').val()===''){//id가 username의 값이 없을때
$('.toast-body').html('아이디를 입력하세요');//toast-body클래스를 가진 div태그 요소의 내용을 아이디를 입력하세요로 변경
$('.toast').toast('show');//toast클래스를 가진 요소를 보여줌(div태그)
}
else if($('#password').val()===''){//위와 같음
$('.toast-body').html('비밀번호를 입력하세요');
$('.toast').toast('show')
}
});
</script>
</body>
</html>결과)
Scrollspy30.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<title>Scrollspy30.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
body {
position: relative;
height: 2500px;
}
</style>
</head><!--data-spy속성은 스크롤 이벤트 감지,
data-target속성은 data-spy속성과 함께 사용, 감지할 요소의 선택자 지정.navbar가 선택됨
data-offset속성은 data-spy속성과 함께 사용, 감지된 요소가 활성화 되기전에
스크롤 위치를 조정하는 옵션:50px만큼 설정(스크롤을 내린 정도)
-->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div class="container" style="margin-top: 80px;"><!--마진은 navbar길이가 있어서 줌-->
<div class="jumbotron bg-info">
<h1>Scrollspy</h1>
<p>Scrollspy is used to automatically update links in a navigation list based on scroll position</p>
</div><!--jumbotron-->
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</div><!--container-->
</body>
</html>결과)
Icons32.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!--
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
여기는 all.css 다 다운하는것
-->
<script src="https://kit.fontawesome.com/ea18e66c75.js" crossorigin="anonymous"></script><!--이 코드가 아이콘 뽑는 링크-->
<title>Icons32.html</title>
<style>
/*점보트론 세로폭 및 마진바툼 줄이기*/
.jumbotron{
padding-top:1rem;
padding-bottom:1rem;
margin-bottom: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron bg-info">
<h1>Icons32.html</h1>
<p>
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4)<br/>
However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.<br/>
To use Font Awesome icons, add the following to your HTML page (No downloading or installation is required)</p>
</div><!--jumbotron-->
<h2>Font Awesome Icons</h2>
<!--모든 Font Awesome Icons들
https://www.w3schools.com/icons/default.asp
-->
<i class="fas fa-heart"></i>
<i class="fas fa-thumbs-up"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<br/>
<i class='fas fa-hamburger'></i>
<i class='fas fa-hamburger' style='font-size:24px'></i>
<i class='fas fa-hamburger' style='font-size:36px'></i>
<i class='fas fa-hamburger' style='font-size:48px;color:red'></i>
<button style='font-size:24px' class="btn btn-warning">햄버거 <i class='fas fa-hamburger'></i></button>
<i class='fas fa-baby-carriage'></i>
<i class='fas fa-baby-carriage' style='font-size:24px'></i>
<i class='fas fa-baby-carriage' style='font-size:36px'></i>
<i class='fas fa-baby-carriage' style='font-size:48px;color:red'></i>
<i class="fa-solid fa-house-user"></i>
<i class="fa-solid fa-house-user" style='font-size:36px'></i>
<i class="fa-solid fa-floppy-disk" style='font-size:36px'></i>
<br/>
<i class='fas fa-microphone-alt'></i>
<i class='fas fa-microphone-alt' style='font-size:24px'></i>
<i class='fas fa-microphone-alt' style='font-size:36px'></i>
<i class='fas fa-microphone-alt' style='font-size:48px;color:red'></i>
</div><!--container-->
</body>
</html>결과)
'bootstrap' 카테고리의 다른 글
| 46일차 2023-05-11 (0) | 2023.05.11 |
|---|---|
| 44일차 2023-05-09 (0) | 2023.05.09 |
| 43일차 2023-05-08 (0) | 2023.05.08 |
| 42일차 2023-05-04 (0) | 2023.05.04 |
| 41일차 2023-05-03 (0) | 2023.05.03 |