학원 day60. 부트스트랩, Jquery
아코디언
data-bs-parent="#accordion-sample" 를 추가하면 아코디언 한세트만 나오게 할 수 있고, 없애면 오른쪽처럼 모두 나오게 한다.
브레디크럼
경고창
dismissible은 닫기 기능을 제공한다.
배지
유틸리티 - 플렉스, 플로트
<span class="float-end">2022년 12월 1일</span> -- 오른쪽으로 글씨가 가도록 한다.
<div class="d-flex justify-content-between"> -- 글씨가 양쪽으로 등간격으로 떨어지도록 한다.
버튼
button태그도 되고, a태그에도 된다.
버튼 사이즈
버튼 활성화/비활성화
버튼 그룹
모달창
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<title>웹 애플리케이션</title>
<style type="text/css">
.btn-xs {
--bs-btn-padding-y: .25rem;
--bs-btn-padding-x: .5rem;
--bs-btn-font-size: .75rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col-12">
<table class="table">
<thead>
<tr>
<th>번호</th>
<th>부서명</th>
<th>직급</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>영업1팀</td>
<td>과장</td>
<td>홍길동</td>
<td><button class="btn btn-outline-primary btn-xs" onclick="openEmployeeDetailModal(100)">상세보기</button>
</td>
</tr>
<tr>
<td>200</td>
<td>영업2팀</td>
<td>대리</td>
<td>김유신</td>
<td><button class="btn btn-outline-primary btn-xs" onclick="openEmployeeDetailModal(200)">상세보기</button>
</td>
</tr>
<tr>
<td>300</td>
<td>영업2팀</td>
<td>사원</td>
<td>강감찬</td>
<td><button class="btn btn-outline-primary btn-xs" onclick="openEmployeeDetailModal(300)">상세보기</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 모달창 시작-->
<div class="modal fade" id="modal-detail-employee" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<!-- 모달 컨텐츠 시작 -->
<div class="modal-content">
<!-- 모달 헤더부 시작 -->
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">직원 상세 정보</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 모달 헤더부 끝 -->
<!-- 모달 바디부 시작 -->
<div class="modal-body">
<table class="tabel">
<tbody>
<tr>
<th>사원번호</th><td><span id="emp-no"></span></td>
</tr>
</tbody>
</table>
.....
</div>
<!-- 모달 바디부 끝 -->
<!-- 모달 푸터부 시작 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">확인</button>
</div>
<!-- 모달 푸터부 끝 -->
</div>
<!-- 모달 컨텐츠 끝 -->
</div>
</div>
<!-- 모달창 끝-->
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
// 모달 객체를 생성한다.
var employeeDetailModal = new bootstrap.Modal("#modal-detail-employee");
function openEmployeeDetailModal(employeeNo) {
// 모달창의 사원번호 칸에 사원번호를 출력한다.
var span = document.querySelector("#emp-no");
span.textContent = employeeNo;
// 모달 창을 화면에 출력한다.
employeeDetailModal.show();
}
</script>
</body>
</html>data-가 붙으면 브라우저가 코드를 신경쓰지 않는다. 사용자 정의 속성을 정의할 때 data-를 적는다.
태그에 정보를 남겨두고 싶을 때 사용한다.
네비게이션 바
<title>웹 애플리케이션</title>
</head>
<body>
<!-- 내비바 메뉴가 화면의 맨 왼쪽에 표시되는 내비바 -->
<nav class="navbar navbar-dark bg-dark mb-3">
<div class="container-fluid"> // 브라우저 전체 너비를 써서 네비바가 표시됨
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- 내비바 메뉴가 컨텐츠 위치에 맞춰서 표시되는 내비바 -->
<nav class="navbar navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container">
<!-- 컨테이너 내부에 위치한 내비바-->
<nav class="navbar navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h1>샘플 애플리케이션</h1>
<p>A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks the navbar vertically on xxlarge, extra large, large, medium or small screens).</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>
<a href="#" ...> 의 의미
[출처] <a href="#" ...> 의 의미|작성자 moonv11
.me-auto가 적용된 메뉴는 내비바의 왼쪽에 위치하고,
.me-auto가 적용되지 않는 메뉴의 경우, 내비바의 오른쪽에 위치한다.
드롭다운
탭
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
<div class="row mb-3">
<div class="col-12">
<h3>탭</h3>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#menu-1">내 일정</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu-2">부서 일정</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu-3">타부서 일정</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane container active" id="menu-1">
<p>본인 일정을 확인하세요</p>
<table class="table">
<thead>
<tr>
<th>순번</th>
<th>제목</th>
<th>우선순위</th>
<th>처리기한</th>
<th>처리상태</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>프로젝트 회의</td>
<td>낮음</td>
<td>2022년 12월 1일</td>
<td>처리중</td>
</tr>
<tr>
<td>1</td>
<td>프로젝트 회의</td>
<td>낮음</td>
<td>2022년 12월 1일</td>
<td>처리중</td>
</tr>
<tr>
<td>1</td>
<td>프로젝트 회의</td>
<td>낮음</td>
<td>2022년 12월 1일</td>
<td>처리중</td>
</tr>
<tr>
<td>1</td>
<td>프로젝트 회의</td>
<td>낮음</td>
<td>2022년 12월 1일</td>
<td>처리중</td>
</tr>
<tr>
<td>1</td>
<td>프로젝트 회의</td>
<td>낮음</td>
<td>2022년 12월 1일</td>
<td>처리중</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane container fade" id="menu-2">
<p>소속 부서의 일정을 확인하세요</p>
</div>
<div class="tab-pane container fade" id="menu-3">
<p>다른 부서의 일정을 확인하세요</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>
간격
텍스트
수직정렬
인라인, 인라인블록, 인라인테이블 및 테이블 셀 요소의 수직 정렬을 쉽게 변경할 수 있다.
Carousel
이미지 넘길 때 쓰임
Fixed Navigation Bar
스크롤을 내려도 네비게이션 바를 고정시키고 싶을 때 사용
Jquery
- 경량의 자바스크립트 라이브러리
- 크로스 브라우징(어떤 브라우저에서든 똑같은 반응을 하는 것)을 지원
- CSS3 선택자를 지원 (자바스크립트 안에서도 내가 조작하고 싶은 엘리먼트를 조회할 때에도 사용한다. document.querySelectorAll(" ");)
제이쿼리의 함수이름은 $ 이다.
자바스크립트에서는 document.querySelectorAll(".btn");
제이쿼리의에서는 $(".btn") 이렇게 작성한다.
장점
- 강력한 선택자를 지원
- HTML DOM을 조작하는 다양한 메소드를 지원
- 스타일을 쉽게 조작할 수 있다.
- 애니메이션 효과 구현
- 단순한 이벤트 처리
- 쉬운 AJAX 처리 (사용자가 클릭하는 순간에 서버랑 통신하여 데이터를 가져오는 것)
- Write Less, Do more 적게 작성하고, 많이 일할 수 있다.
- 강력한 선택자 : 쉽게 엘리먼트를 찾을 수 있다.
- 에소드가 묵시적 반복을 수행한다.
- 메소드체이닝을 지원한다. (한번 선택한 엘리먼트에 대해서 .을 연결해서 이어서 쓰는 것을 통해 여러번의 조작작업을 할 수 있다.)
* 속도 측면에서는 순수 자바스크립트 > 제이쿼리 > 뷰 > 리액트
jquery 라이브러리 설치
- jquery 소스 다운받아서 설치하기
1. jquery.com에서 소스를 다운받아서 프로젝트에 저장한다.
2. HTML문서나 JSP에서 해당 위치에 저장된 소스를 <script src="jquery-3.4.1.min.js"></script> 태그를 사용해서 해당 페이지에 포함시킨다.
- CDN을 이용하기
CDN(Content Delivery Network)으로 부터 jquery 라이브러리를 받아서 사용한다.
* 사용자로부터 가장 가까운 CDN서버로부터 라이브러리를 가져온다.
* 웹 서버의 트래픽을 감소시킨다.
$() 함수 사용법
방법1. $("selector")
* selector 표현식에 해당하는 엘리먼트를 검색한다.
* jquery집합객체를 반환한다.
* jquery집합객체 = 검색된 엘리먼트 + 다양한 메소드
방법2. $(function() { ... })
* HTML Document객체가 준비되면 함수가 자동으로 실행된다. (웹페이지가 동작하자마자 실행해야 하는 작업을 적어놓는다.)
* $(document).ready(function() { ... })와 같은 싯점에 실행된다.
방법3. $(document객체) 혹은 $(element객체)
* $("#box") 함수의 실행결과 ----> jQuery집합객체[검색된 엘리먼트 + 좋은 메소드]
* var el = document.getElementById("box");
el ----> 태그정보 + 허접한 메소드
$(el) ----> jQuery집합객체[el + 좋은 메소드]
방법4. $("html태그")
* 작성된 html태그에 해당하는 엘리먼트 객체를 생성하고, 생성된 엘리먼트를 포함하는 jQuery집합객체[생성된 엘리먼트 + 좋은 메소드]를 반환한다.
* $("<p>연습입니다.</p>") --> jQuery집합객체[p엘리먼트 + 좋은 메소드]
$("<p>연습입니다.</p>").css("color", 'red').click(function() { ... });
Jquery Selector
- jquery 라이브러리에서 가장 중요한 부분이다.
- HTML문서에서 엘리먼트를 조작하기 위해서 반드시 선행되어야 하는 작업은
조작대상이 되는 엘리먼트를 선택하는 작업 <-- jQuery Selector를 활용하면 간단해진다.
- 모든 jQuery 작업의 시작은 $(select)함수로부터 시작한다.
내용을 바꾸는 건 메소드체이닝을 지원하여 객체를 또 획득하지만
조회하는 건 더이상 메소드체이닝을 지원하지 않는다.
<title>웹 애플리케이션</title>
</head>
<body>
<div class="container">
<h1>jQuery 선택자 연습</h1>
<p>jQuery의 기본 선택자를 연습해보세요</p>
<div id="box-1" class="border mb-3 p-3">
<h3>첫번째 박스</h3>
<p>첫번째 박스의 p입니다.</p>
<div class="border p-3">
<p class="text-primary">div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
</div>
</div>
<div id="box-2" class="border mb-3 p-3">
<h3>두번째 박스</h3>
<p>두번째 박스의 p입니다.</p>
<div class="border p-3">
<p class="text-primary">div 내부에 있는 p입니다.</p>
<p class="text-primary">div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
<p>div 내부에 있는 p입니다.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 태그 선택자
//$("h1").css("color", "red");
//$("h3").css("color", "green");
//$("p").css("color", 'blue');
// 클래스 선택자
//$(".text-primary").addClass("bg-danger");
// 아이디 선택자
//$("#box-1").css("background-color", "lightgray");
//$("#box-2").css("background-color", "lightgreen");
//$("h1, h3").css("color", 'red');
//$("h1, h3, .text-primary").css("background-color", "lightgreen");
// 자손 선택자
$("#box-1 p").css("background-color", "lightgreen");
// 자식 선택자
$("#box-2 > p").css("background-color", "lightgreen");
// 자식 선택자
$("#box-2 > div > p").css("background-color", "orange");
// 형제 선택자 (+ 바로 다음 동생 선택자, h1바로 다음에 있는 div)
//$("h1 + div").css("background-color", "orange");
// 형제 선택자 (~ 동생들 선택자, h1바로 다음에 있는 div)
//$("h1 ~ div").css("background-color", "orange");
});
</script>
</body>
</html>
h1 바로 다음에 div가 없고 p가 온다면 형제 선택자 중 바로 다음 선택자의 div를 찾을 수 없다.
따라서, 형제선택자 보다는 클래스 선택자, 아이디 선택자, 자손 선택자, 자식선택자를 많이 쓴다.
태그 선택자 또한 구체적인 태그를 특정하지 않기 때문에 잘 쓰이지 않는다.
