-
학원 day60. 부트스트랩, Jquery기록 2022. 11. 29. 12:57
아코디언
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를 찾을 수 없다.
따라서, 형제선택자 보다는 클래스 선택자, 아이디 선택자, 자손 선택자, 자식선택자를 많이 쓴다.
태그 선택자 또한 구체적인 태그를 특정하지 않기 때문에 잘 쓰이지 않는다.
'기록' 카테고리의 다른 글
학원 day62. jquery 이벤트처리(2), HTML DOM 조작, ER다이어그램 (0) 2022.12.01 학원 day61. jquery 선택자, 이벤트 처리 (0) 2022.11.30 학원 day59. 검색기능 (0) 2022.11.28 학원 day58. 폼요소, 이벤트 버블링, 이벤트 실습 (0) 2022.11.25 학원 day57. DOM, BOM (0) 2022.11.24