티스토리 뷰

백엔드 교육과정/3월

2024.03.25_ Bootstrap , JQuery

Ji@n 2024. 3. 25. 17:10

 

Bootstrap :

 

부트스트랩(Bootstrap)은 HTML, CSS 및 JavaScript를 사용하여

반응형 및 모바일 우선 웹사이트를 개발하기 위한 가장 인기 있는 프레임워크 중 하나.

오픈소스이며 무료로 다운받을 수 있다!

 

1) bootstrap

 

<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

 

 

 

부트스트랩을 사용할 때 이 코드를 필수적으로 사용한다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
	
</head>
<body>

	<h1>Bootstrap</h1>
	<div class="contatiner-fluid"></div>
		<h1>같은 넓이의 컬럼</h1>
		<div class="row">
			<div class="col" style="background-color: red">.col</div>
			<div class="col" style="background-color: blue">.col</div>
			<div class="col" style="background-color: green">.col</div>
			<div class="col" style="background-color: orange">.col</div>
		</div>
		
		<div class="container-fluid"></div>
			<h1>다른 넓이의 반응형 컬럼</h1>
			<p>578px 넓이 및으로 브라우저를 변경하면 컬럼 위치가 변경됨</p>
			<div class="row">
				<div class="col-sm-4" style="background-color: lavender">.col-sm-4</div>
				<div class="col-sm-8" style="background-color: lavenderblush">.col-sm-8</div>
			</div>
			

</body>
</html>

 

 

 

 

2) table

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Table</title>
	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
	<div class="container">
		<h2>기본 테이블</h2>
		<p>table 클래스는 기본적으로 스타일을 포함</p>
		<table class="table">
			<thead>
				<tr>
					<th>성</th>
					<th>이름</th>
					<th>이메일</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>홍</td>
					<td>길동</td>
					<td>test@gmail.com</td>
				</tr>
				<tr>
					<td>고</td>
					<td>길동</td>
					<td>test@gamil.com</td>
				</tr>
				<tr>
					<td>김</td>
					<td>길동</td>
					<td>test@gmail.com</td>
				</tr>
			</tbody>
		</table>
	</div>

</body>
</html>

 

 

 

 

 

 

03) alert

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alert</title>

	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<h2>알림</h2>
		<div class="alert alert-success">
			<strong>Success!</strong> 성공 또는 긍정적인 메시지 박스
		</div>
		<div class="alert alert-info">
			<strong>Info!</strong> 정보 메시지 박스
		</div>
		<div class="alert alert-warning">
			<strong>Warning!</strong> 경고 메시지 박스
		</div>
		<div class="alert alert-danger">
			<strong>Danger!</strong> 위험 메시지 박스
		</div>
	</div>
</body>
</html>

 

 

 

 

 

04) button

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button</title>
	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<h2>버튼 스타일</h2>
		<button class="btn">Basic</button>
		<button class="btn btn-primary">Primary</button>
		<button class="btn btn-secondary">Secondary</button>
		<button class="btn btn-success">Success</button>
		<button class="btn btn-info">Info</button>
		<button class="btn btn-warning">Warning</button>
		<button class="btn btn-danger">Danger</button>
		<button class="btn btn-dark">Dark</button>
		<button class="btn btn-light">Light</button>
		<button class="btn btn-link">Link</button>
	</div>

</body>
</html>

 

 

 

 

 

 

05) form

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form</title>
	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
	<div class="container">
		<h2>로그인 화면</h2>
		<form action="">
			<div class="form-group">
				<label for="email">이메일:</label>
				<input type="email" class="form-control"
				id="email" placeholder="이메일 입력">
			</div>
			<div class="form-group">
				<label for="pwd">비밀번호:</label>
				<input type="password" class="form-control"
				id="pwd" placeholder="비밀번호 입력">
			</div>
			<div class="form-group form-check">
				<label class="form-check-label">
					<input class="form-check-input" type="checkbox"
					name="remember">
					아이디 저장
				</label>
			</div>
			<button type="submit" class="btn btn-primary">제출</button>
		</form>
	</div>
</body>
</html>

 

 

 

 

 

06) modal

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal</title>
	<!-- 반응형 웹 디자인을 위한 meta 태그 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
	<h3>Modal 예시</h3>
	<p>아래 버튼을 누르시오.</p>
	<button type="button" class="btn btn-primary" data-bs-toggle="modal"
	data-bs-target="#myModal">
		Open Modal
	</button>
</div>

<!-- Modal -->
<div class="modal" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<!-- Modal Header -->
			<div class="modal-header">
				<h4 class="modal-title">Modal Heading</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
			</div>
			
			<!-- Modal body -->
			<div class="modal-body">
				Modal body..
			</div>
			
			<!-- Modal footer -->
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" 
				data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

</body>
</html>

 

 

 

 

 

 

 

JQuery :

 

 

JQuery는 가볍고 "write less, do more" 목적으로 하는 JavaScript의 라이브러리.

JQuery는 목적 :  웹 사이트에서 JavaScript를 사용하기를 훨씬 쉽게 만드는 것이다.

JQuery 는 많은 줄의 JavaScript 코드가 필요한 일반적인 작업들을

하나의 코드 줄로 호출할 수 있는 메서드로 감싸는 방식으로 작동한다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
	</script>
	
	<!-- 
		JQuery
		- 자바스크립트를 더 쉽게 사용하기 위한 목적으로 만들어진 라이브러리
		- 장점 : 확장성이 좋고, 대중적으로 사용됨
		- 단점 : 순수 JavaScript 코드보다 속도가 느리다.
	 -->
	 
<title>Intro</title>
	<script type="text/javascript">
	// DOM이 전부 등록된 후에 실행되는 함수 : $(document).ready();
	// 스크립트를 어느 위치에서 선언해도 문제가 없음
	$(document).ready(function(){
		$('h2').click(function(){
			$(this).hide(); // this : h2를 가리킴
		})// end h2.click()		
	}); //end document
	</script>

</head>
<body>
	<h1>jQuery 사용하기</h1>
	<h2>클릭하세요! 그럼 제가 사라집니다.</h2>
	<h2>h2 태그</h2>
	 
</body>
</html>

 

 

Intro

jQuery 사용하기

클릭하세요! 그럼 제가 사라집니다.

h2 태그

 

 

 

02) syntax

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
	</script>
	
<title>Syntax</title>
</head>
<body>
	<h1>jQuery 기본 문법</h1>
	<button id="btn1">모두 숨기기</button>
	<button id="btn2">클래스 c1 숨기기</button>
	
	<p>단락1</p>
	<p class="c1">단락2, 클래스 c1</p>
	<p id="p1">단락4, 아이디 p1</p>
	
	<script type="text/javascript">
		// jQuery 기본 문장 : $('selector').action();
		// - $('selector') : HTML 요소를 찾음
		// 	요소를 찾는 방법은 CSS 선택자와 동일(태그,아이디,클래스)
		
		// - css 선택자 : 
		// 'p' : 태그(요소)
		// '#p1' : 아이디
		// '.c1' : 클래스 
		
		// - action() : 해당 HTML 요소에 행해질 동작(기능)
		$(document).ready(function(){
			$('#btn1').click(function(){
				$('p').hide();
			})
			
			$('#btn2').click(function(){
				$('.c1').hide();
			})
			
			$('#btn3').click(function(){
				$('#p1').hide();
			})
		}); //end ready()
		
	</script>
	
</body>
</html>

 

 

Syntax

jQuery 기본 문법

단락1

단락2, 클래스 c1

단락4, 아이디 p1

 

 

 

03) event1

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
	</script>
<title>Event</title>
</head>
<body>
	<h1>JQuery Event</h1>
	<img alt="전구" src="images/bulb_off.gif" id ="bulb">
	<br>
	<br>
	<p style="border : 1px solid black; background-color: green;">
	hover
	</p>
	
	<!-- 마우스를 올리면 전구가 켜지고, 
		마우스를 내리면 전구가 꺼짐 -->
		
	<script>
	// $(document).ready(function(){});
	$(function(){
		//mouseover, mouseenter
		$('#bulb').mouseover(function(){
			console.log($(this).attr('src')); 
			//attr('속성 이름') : attribute를 값을 가져오는 코드
			//attr('속성 이름','값') : 속성의 값을 변경하는 코드
			$(this).attr('src','images/bulb_on.gif');
		});// end bulb.mouseover()
		
		// mouseout, mouseleave : 
		// - 마우스가 해당 영역 바깥으로 나갔을 때
		$('#bulb').mouseout(function(){
			$(this).attr('src','images/bulb_off.gif');
		});// end bulb.mouseout()
	});
	
	// hover(handlerIn, handlerOut)
	// - handlerIn : 마우스가 해당 영역 위로 올라갔을 떄 처리할 이벤트 핸들러 
	// - handlerOut : 마우스가 해당 영역 바깥으로 나갔을 떄 처리할 이벤트 핸들러 
	 function handlerIn(){
		// css('스타일 이름') : 스타일 이름에 저장된 값을 출력
		// css('스타일 이름','값') : 특정 이름의 스타일 값을 변경
		$('p').css('background-color','yellow');
 	}
	
	 function handlerOut(){
		$('p').css('background-color','green');
 	}
	 
	 $('p').hover(handlerIn,handlerOut);
			 
	 // focus : 포커스를 받았을 때(입력 가능한 상태)
	 $('#name').focus(function(){
		 $(this).css('background-color','lightyellow');
	 });// end name.focus()
	 
	 // blur : 포커스를 잃었을 때 
	 $('#name').blur(function(){
		 $(this).css('background-color','white');
	 })// end name.blur()
	
	 //change : 입력된 내용이 변경됐을 때
	 $('#name').change(function(){ //input 태그의 입력된 값 = value
		// val() : value값 출력
		// val('값') : 요소의 value 값을 변경
		let data = $('this').val().toUpperCase();
		$(this).val(data); 
		// $(this).val($('this').val().toUpperCase()); <-- .(dot) 기준으로 앞의 코드를 묶어서 읽기  
		
		
	 });// end name.change()
	 
</script>
</body>
</html>

 

 

Event

JQuery Event

전구

hover

 

 

 

04) event2

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event2</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
</script>
</head>
<body>
	<h1>jQuery Event2</h1>
	<p>TEST</p>
	<script type="text/javascript">
		// 하나의 HTML 요소에 여러 개의 event handler 등록 방법
		// $('selector').on({
		//			event1 : function(){},
		//			event2 : function(){},
		// 				...
		//});
		$('p').on({
			mouseover : function(){
				$(this).css('background-color','lightyellow');
			},
			mouseout : function(){
				$(this).css('background-color','lightgreen');
			},
			click : function(){
				if($(this).text().match('TEST')){
					$(this).text('월요일');
				}else{
					$(this).text('TEST');
				}
			}
		}); // end p.on()
		
	</script>
</body>
</html>

 

 

event2

jQuery Event2

TEST

 

 

 

05)getset

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get/set</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
</script>
</head>
<body>
	<h1>jQuery getter/setter</h1>
	<p>우리는 <b>jQuery</b>를 공부하고 있습니다.</p>
	<button id="btn1">HTML</button>
	<button id="btn2">Text</button>
	<div id="output"></div>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#btn1').click(function(){
				let msg = $('p').html(); // innerHTML에 해당 : 모든 HTML 내용 가져오기
				$('#output').html(msg);
			});
			
			$('#btn2').click(function(){
				let msg = $('p').text(); // textContent : 텍스트만 가져오기
				$('#output').html(msg);
			});
		});//end document
		
		
		
	</script>
	
</body>
</html>

 

 

get/set

jQuery getter/setter

우리는 jQuery를 공부하고 있습니다.

 

 

 

06) css

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
</script>
<style type="text/css">
.blue{
	background: blue;}
</style>
</head>
<body>
	<h1>jQuery CSS 변경 방법</h1>
	<p>jQuery CSS</p>
	
	<hr>
	
	<h1>CSS 클래스 추가/제거</h1>
	<p id="p1">단락1</p>
	<p id="p2">단락2</p>
	<p id="p3">단락3</p>
	<button id="add-class">클래스 추가</button>
	<button id="remove-class">클래스 제거</button>
	<button id="toggle-class">클래스 토글</button>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//jQuery를 사용한 css 변경 
			// - css('property', value);
			// - css({property : vall, property : val2});
			$('p').click(function(){
				$(this).css({
					font : '200% serif',
					background : 'lightgreen',
					border : '1px solid grey',
					textAlign : 'center'					
				})
			});
			
			// addClass('클래스이름') : HTML 요소에 클래스 속성을 추가
			// removeClass('클래스이름') : HTML 요소에 클래스 속성을 제거 
			// togglerClass('클래스이름') : HTML 요소에 클래스 속성 추가/제거 토글
			
			$('#add-class').click(function(){
				$('#p1').addClass('important');
				$('#p2, #p3').addClass('blue');
			});
			
			$('#remove-class').click(function(){
				$('#p2, #p3').removeClass('blue');
			});
			
			$('#toggle-class').click(function(){
				$('#p2, #p3').toggleClass('blue');
			});
		});
		
		
	</script>
</body>
</html>

 

 

CSS

jQuery CSS 변경 방법

jQuery CSS

CSS 클래스 추가/제거

단락1

단락2

단락3

 

 

 

07) each

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Each</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
</script>
<style type="text/css">
.hot{
	background-color : hotpink;
}
.cold{
	background-color : aqua;
}
</style>
</head>
<body>
	<h1>jQuery each() 함수</h1>
	<ul>
		<li>Java</li>
		<li>Oracle</li>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
		<li>jQuery</li>
	</ul>
	<button id="btn">Toggle Style</button>
	
	<script type="text/javascript">
		$(document).ready(function(){
			//'컬렉션'.each(handler);
			// - each 반복문(for문과 비슷한 구조)
			// - handler : 컬렉션의 모든 원소에 적용할 기능(동작)
			
			$('#btn').click(function(){
				// console.log($('li'));
				$('li').each(function(index, element){}); // end li.each()
					console.log('index : ' + index + ',element : ' + element);
				// * element 대신에 this 사용 가능
				if(index * 2 == 0){
					$(this).toggleClass('hot');
				}else{
					$(this).toggleClass('cold');
				}
			}); // end btn.click()
		});// end document()
	</script>
</body>
</html>

 

 

Each

jQuery each() 함수

  • Java
  • Oracle
  • HTML
  • CSS
  • JavaScript
  • jQuery

 

 

 

08) find

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>find</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js" > //JQuery에는 이거 반드시 쓰기
</script>
</head>
<body>
	<div>
		<ul class="item_list">
			<li>
				<div class="info">
					<strong>과자</strong>
					<div class="price">
						<span class="val">1000</span>
					</div>
				</div>
			</li>
			<li>
				<div class="info">
					<strong>음료수</strong>
					<div class="price">
						<span class="val">1200</span>
					</div>
				</div>
			</li>
			<li>
				<div class="info">
					<strong>빵</strong>
					<div class="price">
						<span class="val">1500</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<ul class="selected_list">
	</ul>
	<script type="text/javascript">
			$(document).ready(function(){
				// 각 li 요소를 선택(클릭)했을 때 정보를 출력 
				$('.item_list').on('click','li .info',function(){
					console.log(this);
	
					var optionName = $(this).find('strong').text();
					var optionPrice = $(this).find('.price .val').text();
					console.log('optionName : ' + optionName);
					console.log('optionPrice : ' + optionPrice);
					
					var optionItem = $('<li class="option_item"></li>');
					var selectOptionName = $('<div class="option_name"></div>');
					selectOptionName.text(optionName);
					optionItem.append(selectOptionName);
					$('.selected_list').append(optionItem);//요소 추가
					
				}); // item_list.on(); 
			}); //end document()
	</script>
	
</body>
</html>

 

 

 

find
  • 과자
    1000
  • 음료수
    1200
  • 빵
    1500

 

 

 

'백엔드 교육과정 > 3월' 카테고리의 다른 글

2024.03.26 _ 미니 프론트엔드 코드 리뷰 + 수정  (0) 2024.03.26
2024.03.25_ 프론트엔드 미니 프로젝트  (0) 2024.03.25
2024.03.21_ JavaScript_function ~ object, HW3_회원가입 페이지,HW2_연락처 프로그램  (0) 2024.03.22
2024.03.20_ Web02 CSS / 이클립스 자바스크립트 설치 / Web03 javaScript  (0) 2024.03.21
2024.03.19_ 신입 웹 개발자 로드맵 , HTTP/CSS  (0) 2024.03.19
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함