매일 조금씩

01/18 - W2ui, Bootstrap(1) : javascript를 지원하는 다양한 라이브러리 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

01/18 - W2ui, Bootstrap(1) : javascript를 지원하는 다양한 라이브러리

mezo 2021. 1. 31. 22:04
728x90
반응형

web 2.0

ajax (websocket: 실시간 + tcp/ip)

          - javascript api를 이용해서 원격의 데이터를 요청

          - window application

          - 디자인 - ecmascript - 데이터 분리

          => SPA(Single Page Application)

               예전에는 ajax라는 그냥 디자인이였는데 이젠 SPA로서 Ajax로 보내고 JSON으로 받는다.

               ***  참고사이트 - SPA

                    [IT정보] 싱글 페이지 애플리케이션(Sing.. : 네이버블로그 (naver.com)

 

          1. jQueryUI(pc) -> jQueryMobile

          2. w2ui  : jQuery 베이스의 모던 웹을 위한 UI 라이브러리

 

javascript는 대부분 라이브러리를 제공해놨다.

github는 소스 리파지토리이다.

 

 

 

 

 

 

 

 

W2UI

jQuery 베이스의 모던 웹을 위한 UI 라이브러리이다.

 

1. W2UI 라이브러리 가져와서 사용하기 

실습1) w2ui를 github에서 가져오기

> W2UIEx01

github.com/vitmalina/w2ui

여기서 전체 다운 해서 프로젝트의 WebContent에 붙여넣고 demo > index.html을 실행시키면 된다. 

 

 

2. W3UI가 제공하는 Demos 구현

> W2UIEx02

Home | JavaScript UI - w2ui

 

New JavaScript UI Library

w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5

w2ui.com

여기서 다운받은 js와 css 파일을 프로젝트에 넣기

w2ui는 입력보단 출력위주로 많이 되어 있다. -> grid

 

2-1. Layout

w2layout 사용

 

실습1) layout 의 panel

> layout01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const pstyle = 'background: #add6ff';
		$('#wrap').w2layout({	// 이렇게 w2에서 제공하는거 쓰면됨
			name: 'layout',
			panels:[	// 영역 디자인
				//{ type: 'top', style: 'background: #add6ff'},
				{ type: 'top', style: pstyle, resizable: true},
				{ type: 'bottom', style: pstyle, resizable: false},
				{ type: 'left', style: pstyle, resizable: true},
				{ type: 'right', style: pstyle, resizable: true},
				{ type: 'main', style: pstyle, resizable: true},
				{ type: 'preview', style: pstyle, resizable: true}
			] 
		});
	});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

 

실습2) onHide, onShow

클릭할때마다 토글걸린 영역이 hide, show를 반복한다.

w2ui.layout.toggle('영역');

위의 코드로 토글 설정이 가능하다.

  • type: 어느영역인지 
  • style: 디자인
  • content: 내부에 넣을 값(html가능)
  • size: 영역의 높이같은 크기

> layout02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const pstyle = 'background-color: #f5f6f7; border: 1px solid #dfdfdf; padding 5px';
		$('#wrap').w2layout({	// 이렇게 w2에서 제공하는거 쓰면됨
			name: 'layout',
			panels:[	//type: 어느영역인지 , style: 디자인, content: 내부에 넣을 값(html가능), size: 영역의 높이같은 크기
				{ type: 'top', style: pstyle, resizable: true, content: 'top', size: 150},
				{ type: 'bottom', style: pstyle, resizable: false, content: 'bottom', size: 50},
				{ type: 'left', style: pstyle, resizable: true, content: 'left', size: 200},
				{ type: 'right', style: pstyle, resizable: true, content: 'right', size: 200},
				{ type: 'main', style: pstyle, resizable: true, content: 'main'},
				{ type: 'preview', style: pstyle, resizable: true, content: '<h1>preview</h1>', size: '50%'}
			],
			onHide: function() {
				alert('Hide');
			},
			onShow: function() {
				alert('Show');
			}
		});
		
		$(window).on('click',function(){
			w2ui.layout.toggle('top');
			w2ui.layout.toggle('right');
		});
	});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

 

 

실습3) 자주쓰는 형태의 layout - top, left, main

> layout03.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const pstyle = 'background-color: #f5f6f7; border: 1px solid #dfdfdf; padding 5px';
		$('#wrap').w2layout({	// 이렇게 w2에서 제공하는거 쓰면됨
			name: 'layout',
				{ type: 'top', style: pstyle, resizable: true, content: 'top', size: 150},
				{ type: 'left', style: pstyle, resizable: true, content: 'right', size: 200},
				{ type: 'main', style: pstyle, resizable: true, content: 'main'},
			],
			onHide: function() {
				alert('Hide');
			},
			onShow: function() {
				alert('Show');
			}
		});
		
		$(window).on('click',function(){
			w2ui.layout.toggle('top');
			w2ui.layout.toggle('left');
		});
	});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

 

실습4) content 추가

w2ui.layout.content('영역', ~ );

으로 해당 영역에 ~ 을 주기 

여기선 layout을 클릭할 때마다 main영역의 content에 html이 추가되도록 했다.

> layout04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const pstyle = 'background-color: #f5f6f7; border: 1px solid #dfdfdf; padding 5px';
		$('#wrap').w2layout({	// 이렇게 w2에서 제공하는거 쓰면됨
			name: 'layout',
			panels:[	//type: 어느영역인지 , style: 디자인, content: 내부에 넣을 값(html가능), size: 영역의 높이같은 크기
				{ type: 'top', style: pstyle, size: 50},
				{ type: 'left', style: pstyle, size: 200},
				{ type: 'main', style: pstyle },
			]
		});
		
		const text = '<h1>Hello W2UI</h1>';
		let content = '';
		
		$(window).on('click',function(){
			// layout을 클릭할때마다
			// main 영역에 뭘(여기선 content += text) 해라
			w2ui.layout.content( 'main', (content += text + 'hi')); 	
		});
	});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

 

2-2. Grid

w2grid 사용

데이터를 가져올 때 항상 Ajax로 가져온다.

ajax 버전을 2.1.4로 낮춰야 grid가 잘 적용된다. 

 

실습1) grid 만들어서 값 넣기

  • name:  grid 이름
  • columns: field - 컬럼명, caption - 표시할 이름, size - 컬럼 너비
  • record : 넣을 데이터 (row를 한번에 넣음)

데이터는 반드시 recid를 가지고 있어야하며 recid는 primary key 여야 한다.

 

> grid01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const data = [
			{ recid: 1, name: 'HTML5 + CSS3', author: '홍길동1', publisher: '미디어', price: 3000, point: 30400 },
			{ recid: 2, name: 'HTML5 + CSS3', author: '홍길동2', publisher: '미디어', price: 3000, point: 30400 },
			{ recid: 3, name: 'HTML5 + CSS3', author: '홍길동3', publisher: '미디어', price: 3000, point: 30400 }
		]
		
		$('#wrap').w2grid({
			name: 'grid',
			columns: [
				{ field: 'name', caption: '도서명', size: '40%' },
				{ field: 'author', caption: '저자', size: '10%' },
				{ field: 'publisher', caption: '출판사', size: '20%' },
				{ field: 'price', caption: '가격', size: '10%' },
				{ field: 'point', caption: '포인트', size: '20%' },
			],
			records: data
		});
	});
</script>
</head>
<body>

<div id="wrap"></div>

</body>
</html>

 

실습2) grid의 여러가지 속성 사용

1. show 속성

header, toolbar, footer, columnHeaders, lineNumbers를 보여줄지 말지 true/false로 정해 줄수 있다.

columnHeaders만 default가 true이고 나머진 전부 false이다.

toolbar에 대한 세부 속성 설정도 가능하며 toolbar에 있는 검색창으로 검색도 할수있게 내부적으로 되어있다.

  • toolbarReload: true
  • toolbarSearch: true
  • toolbarAdd: true
  • toolbarDelete: true
show: {
    header: true,
    toolbar: true,
    footer: true,
    columnHeaders: true,	// true가 default
    lineNumbers: true,
    toolbarReload: true,
    toolbarSearch: true,
    toolbarAdd: true,
    toolbarDelete: true
}

 

2. onAdd 속성

function으로 이벤트를 걸어서 toolbar에서 Add New 버튼을 눌렀을 때 데이터를 추가할수 있도록 구현할수 있다.

this.add를 사용한다. 이때 recid는 primary key 여야 하므로 this.total+1을 사용한다.

onAdd: function(){
    console.log( 'onAdd 호출', this.total);
    this.add(
            // recid는 primary key여야 하므로 total을 사용
        { recid: this.total+1, name: 'HTML5 + CSS3', author: '홍길동3', publisher: '미디어', price: 3000, point: 30400 }
    );
}

 

3. onDelete 속성

row 하나를 선택후 delete 버튼을 누르면 삭제되도록 구현하는 것이기 때문에 선택된 row가 뭔지 알아야 한다.

선택된 row가 뭔진 this.getSelection()으로 알 수 있다.

onDelete: function(target, e){
    console.log('onDelete 호출');

    // 선택된게 뭔지 recid값이 출력된다.
    // 근데 json으로 나오기 때문에 string으로 나오도록 해줘야한다.
    // recid - json - string
    console.log(this.getSelection());

    e.preventDefault();
}

 

4. onSearch, onReload

  • onSearch :  검색을 수행할 때 실행된다. e.searchData[0].value 를 하면 입력한 검색어가 나온다.
  • onReload :  페이지가 새로고침될 때 실행된다. 
onSearch: function(target, e){
    // e.searchData[0].value : 검색어가 나온다.
    console.log('onSearch 호출', e.searchData[0].value);
},
onReload: function(){
    console.log('onReload 호출');
}

 

>> 전체 코드

> grid02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		const data = [
			{ recid: 1, name: 'HTML5 + CSS3', author: '홍길동1', publisher: '미디어', price: 3000, point: 30400 },
			{ recid: 2, name: 'HTML5 + CSS3', author: '홍길동2', publisher: '미디어', price: 3000, point: 30400 },
			{ recid: 3, name: 'HTML5 + CSS3', author: '홍길동3', publisher: '미디어', price: 3000, point: 30400 }
		]
		
		$('#wrap').w2grid({
			name: 'grid',
			show: {
				header: true,
				toolbar: true,
				footer: true,
				columnHeaders: true,	// true가 default
				lineNumbers: true,
				toolbarReload: true,
				toolbarSearch: true,
				toolbarAdd: true,
				toolbarDelete: true
			},
			columns: [
				{ field: 'name', caption: '도서명', size: '40%' },
				{ field: 'author', caption: '저자', size: '10%' },
				{ field: 'publisher', caption: '출판사', size: '20%' },
				{ field: 'price', caption: '가격', size: '10%' },
				{ field: 'point', caption: '포인트', size: '20%' },
			],
			records: data,
			onAdd: function(){
				console.log( 'onAdd 호출', this.total);
				this.add(
						// recid는 primary key여야 하므로 total을 사용
					{ recid: this.total+1, name: 'HTML5 + CSS3', author: '홍길동3', publisher: '미디어', price: 3000, point: 30400 }
				);
			},
			onDelete: function(target, e){
				console.log('onDelete 호출');
				
				// 선택된게 뭔지 recid값이 출력된다.
				// 근데 json으로 나오기 때문에 string으로 나오도록 해줘야한다.
				// recid - json - string
				console.log(this.getSelection());
				
				e.preventDefault();
			},
			onSearch: function(target, e){
				// e.searchData[0].value : 검색어가 나온다.
				console.log('onSearch 호출', e.searchData[0].value);
			},
			onReload: function(){
				console.log('onReload 호출');
			}
		});
	});
</script>
</head>
<body>

<div id="wrap"></div>

</body>
</html>

 

 

 

실습3) 동이름으로 주소검색하는 우편번호 검색기 만들기 

> ZipcodeAjaxEx01

> zipcodeSearchW2UI.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<style type="text/css">
	#wrap {
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		let datas = [];
		$('#wrap').w2grid({	// 이안에 function에서 this는 w2grid를 가리킴
			name: 'grid',
			show: {
				toolbar: true,
				footer: true,
				lineNumbers: true,
				toolbarReload: true,
				toolbarSearch: true
			},
			columns: [
				{ field: 'zipcode', caption: '우편번호', size: '10%' },
				{ field: 'sido', caption: '시도', size: '20%' },
				{ field: 'gugun', caption: '구군', size: '20%' },
				{ field: 'dong', caption: '동', size: '15%' },
				{ field: 'ri', caption: '리', size: '15%' },
				{ field: 'bunji', caption: '번지', size: '20%' }
			],
			reloads: datas,
			onSearch: function(target, e){
				console.log('onSearch 클릭');
				
				// ajax
				// ajax 안에서 this하면 그건 grid가 아니고 ajax 객체가된다.
				// 그래서 아래처럼 변수로 정의하고 들어가야한다.
				const grid = this;
				$.ajax({	// 이안에 function에서 this는 ajax하는 url등을 가지는 객체가됨
					
					url:"./data/json.jsp",
					data: {
						'strDong' : e.searchData[0].value
					},
					type: 'get',
					dataType: 'json', 
					success: function(json){
						console.log(json);
						console.log(this);
						// 화면 지워주기
						grid.clear();
						
						$.each(json, function(key, value){
							grid.add({
								recid: grid.grid+1,
								zipcode: value.zipcode,
								sido: value.sido,
								gugun: value.gugun,
								dong: value.dong,
								ri: value.ri,
								bunji: value.bunji
							})
						});
					},
					error: function(){
						alert("에러페이지");
					}
				});
				
			}
		});
	});
</script>
</head>
<body>

<div id="wrap"></div>

</body>
</html>

나중엔 컬럼명을 가지고 검색하는 것도 가능하다.

 

 

 

3. 그 외 많이 쓰이는 라이브러리

javascript는 이렇게 쓸만한 요소들이 많기 때문에 잘 찾아서 써야한다.

 

1)  Sweetalert

디자인 이쁘다. 요즘 많이 쓴다.

https://sweetalert2.github.io 

 

SweetAlert2

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

sweetalert2.github.io

 

2) Highchart

chart는 아래가 이쁘다. 유료다. 디자인 완성도가 높다.

https://www.highcharts.com/

 

Interactive JavaScript charts for your webpage | Highcharts

"I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal marketing stakeholders. The tool is brilliant and the API documentation is super-helpful. I set up some basic, manual reports using Highch

www.highcharts.com

 

3) Bootstrap

jQuery ui를 대체하는 프레임워크이다.

https://www.getbootstrap.com/ 

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

▶ 장점

  • 빠르다.
  • 반응성 웹을 지원한다.

반응성이란, 웹디자인의 개념으로 브라우저의 크기 즉, 해상도(스마트폰, 태블릿, PC)에 따라서 디자인이 바뀌는 것이다.

 

이런 통합 디자인 무조건 좋다? 아니다.  상황에 따라 다르다. 

이런 통합 디자인은 스타트업 같은 곳에서 사용한다. 

반면, NAVER 같은 곳은 사람이 몰릴때 데미지가 크면 안돼서 스트레스를 분산시키기 위해 따로 개발한다.

 

 

 

 

 

 

 

 

 

Bootstrap

bootstrap 사용법은 w3schools.com에 있다. bootstrap4 사용.

모바일 중심적이다.

bootstrap의 특징

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs

 

 

bootstrap 홈페이지에서 다운을 받아도 되고

CDN을 가져다 써도 된다.

 

우린 CDN으로 한다.

 

CDN을 가져오면 css인 link태그와 javascript인 script태그 이렇게 두개가 오는데 

jquery를 위한 script태그를 이 javascript의 script태그 위에 넣어줘야한다.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./css/w2ui-1.5.rc1.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap js -->
<script type="text/javascript" src="./js/w2ui-1.5.rc1.min.js"></script>

 

 

 

> BootstrapEx01

실습1) Containers

container는 grid로 나눠서 쓰여진다.

class 명이 내부적으로 설정되어 있어서 그걸 이용하면 된다. 

1) row : 알아서 한 row씩 들어감

2) col : 한 row를 12개의 column으로 나눠놓은거라고 생각하면 된다. 합이 꼭 12여야한다. (ex) col-3, col-9

3) 반응성 제공 (sm, md, lg, ... )

특정 px을 기준으로 디자인이 적절하게 화면에 맞게 바뀐다.

  • sm : 가장 작을 때
  • md : 중간 크기일 때 
  • lg : 가장 클 때

이거 말고도 있는데 이거 세개를 가장 많이 사용한다.

 

> ex01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>

<!-- sm 576px -->
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3" style="background-color: lavender">.col1</div>
		<div class="col-sm-3" style="background-color: orange">.col2</div>
		<div class="col-sm-3" style="background-color: lavender">.col1</div>
		<div class="col-sm-3" style="background-color: orange">.col2</div>
	</div>
	<div class="row">
		<div class="col-sm-4" style="background-color: lavender">.col1</div>
		<div class="col-sm-8" style="background-color: orange">.col2</div>
	</div>
	<div class="row">
		<div class="col-sm-3 col-md-6" style="background-color: lavender">.col1</div>
		<div class="col-sm-9 col-md-6" style="background-color: orange">.col2</div>
	</div>
	<div class="row">
		<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: lavender">.col1</div>
		<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: orange">.col2</div>
	</div>
</div>

</body>
</html>

 

 

실습2) Text/Typography

1. <h1> - <h6>

display-1

display-2 

등 숫자를 붙여주는데 숫자가 작을수록 글자크기가 크다. 

<!-- <h1>-<h6> -->
<h1 class="display-1">Display-1</h1>
<h1 class="display-2">Display-2</h1>
<h1 class="display-3">Display-3</h1>
<h1 class="display-4">Display-4</h1>

 

 

2. <mark>

하이라이트 표시된것 처럼 나온다.

<p>
    Hello
    <mark>Bootstrap</mark>
    Hello Bootstrap
</p>

 

3.<small>

포함되어있는 태그의 텍스트보다 한단계 작게나온다.

<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text
    in any heading:</p>
<h1>
    h1 heading <small>secondary text</small>
</h1>
<h2>
    h2 heading <small>secondary text</small>
</h2>
<h3>
    h3 heading <small>secondary text</small>
</h3>
<h4>
    h4 heading <small>secondary text</small>
</h4>
<h5>
    h5 heading <small>secondary text</small>
</h5>
<h6>
    h6 heading <small>secondary text</small>
</h6>

 

4. <blockquote>

인용구처럼 나온다.

<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another
    source:</p>
<blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature.
        The world's leading conservation organization, WWF works in 100
        countries and is supported by 1.2 million members in the United
        States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
</blockquote>

 

 

5. <dl>

description list

<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

 

 

>> 전체 코드

> ex04.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
	crossorigin="anonymous">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
	integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
	crossorigin="anonymous"></script>
</head>
<body>

	<div class="container-fluid">
		<!-- <h1>-<h6> -->
		<h1 class="display-1">Display-1</h1>
		<h1 class="display-2">Display-2</h1>
		<h1 class="display-3">Display-3</h1>
		<h1 class="display-4">Display-4</h1>

		<!-- <mark> -->
		<p>
			Hello
			<mark>Bootstrap</mark>
			Hello Bootstrap
		</p>


		<!-- <small> -->
		<h1>Lighter, Secondary Text</h1>
		<p>The small element is used to create a lighter, secondary text
			in any heading:</p>
		<h1>
			h1 heading <small>secondary text</small>
		</h1>
		<h2>
			h2 heading <small>secondary text</small>
		</h2>
		<h3>
			h3 heading <small>secondary text</small>
		</h3>
		<h4>
			h4 heading <small>secondary text</small>
		</h4>
		<h5>
			h5 heading <small>secondary text</small>
		</h5>
		<h6>
			h6 heading <small>secondary text</small>
		</h6>

		<!-- <blockquote> -->
		<h1>Blockquotes</h1>
		<p>The blockquote element is used to present content from another
			source:</p>
		<blockquote class="blockquote">
			<p>For 50 years, WWF has been protecting the future of nature.
				The world's leading conservation organization, WWF works in 100
				countries and is supported by 1.2 million members in the United
				States and close to 5 million globally.</p>
			<footer class="blockquote-footer">From WWF's website</footer>
		</blockquote>

		<!-- <dl> -->
		<h1>Description Lists</h1>
		<p>The dl element indicates a description list:</p>
		<dl>
			<dt>Coffee</dt>
			<dd>- black hot drink</dd>
			<dt>Milk</dt>
			<dd>- white cold drink</dd>
		</dl>
</body>
</html>

 

 

 

 

 

※ 지금까지 배운 javascript 라이브러리

jquery  

          - jquery ui

          - w2ui

          - bootstrap(반응성)

 

 

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

01/20 ! - MyBatis(1) : MyBatis 설정파일(mapper)을 xml로 자바,웹 프로젝트 구현  (0) 2021.02.25
01/19 - Bootstrap(2) : 사용법  (1) 2021.01.31
01/15 - jQuery UI(2) : 사용법, jQuery UI로 model2 게시판 구현하기  (0) 2021.01.31
01/14 - jQuery + Ajax , jQuery UI (1)  (0) 2021.01.31
01/13 - jQuery(2) : 사용법, 우편번호 검색기  (0) 2021.01.31
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more