23.05.22 : jQuery 마무리 / Bootstrap

이준영·2023년 5월 22일

jQuery UI -> jQuery (don, event, ajax)
...

w2ui

http://w2ui.com/web/ <-- 다양한 UI 종류와 소스코드 참고할 수 있는 사이트

https://github.com/vitmalina/w2ui에서 데모 소스 다운받고 압축풀고 webapp에 전부 붙이기

data -> 데이터 부 / examples -> 디자인 부

w2ui 라이브러리

http://w2ui.com/web/ 홈화면에서 다운로드

이클립스 -> 프로젝트 만들고 js, css 폴더 만들기, js에는 js라이브러리 넣기

w2ui 압축풀고 css 파일은 css폴더에, js는 js폴더에 각각 분리하여 넣기(에러 무시, 이클립스가 언어적 해석을 못하는 것)

3.jsp파일 하나 만들고 js 넣은 것처럼 넣기

w2ui : grid

grid 형태를 만들 수 있다.

<script type="text/javascript">
	$(document).ready(function() {
		$('#wrap').w2grid({
			name: 'grid',
			columns: [
				{ field: 'title', text: '도서명'},
				{ field: 'author', text: '저자'},
				{ field: 'publisher', text: '출판사'},
				{ field: 'price', text: '가격'}
			],
			// 보통 배열 안에 객체 형식으로 많이 넣음
			records: [
				{recid: 1, title: '모던 웹을 위한 HTML5 + CSS3 입문', 
					author: '유비', publisher: '삼국미디어', price: 30000}
			]
		});
	});
</script>

--------------------------------------------------------------------------------------

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

records 안의 내용 변수에 넣고 선언 가능

<script type="text/javascript">
	$(document).ready(function() {
		const data = [
			{recid: 1, title: '모던 웹을 위한 HTML5 + CSS3 입문', 
				author: '유비', publisher: '삼국미디어', price: 30000}
		];
		$('#wrap').w2grid({
			name: 'grid',
			columns: [
				{ field: 'title', text: '도서명'},
				{ field: 'author', text: '저자'},
				{ field: 'publisher', text: '출판사'},
				{ field: 'price', text: '가격'}
			],
			// 보통 배열 안에 객체 형식으로 많이 넣음
			records: data
		});
	});
</script>

데이터를 추가하면 grid 안의 내용도 추가된다.

<script type="text/javascript">
	$(document).ready(function() {
		const data = [
			{recid: 1, title: '모던 웹을 위한 HTML5 + CSS3 입문', 
				author: '유비', publisher: '삼국미디어', price: 30000},
			{recid: 2, title: '용의자 x의 헌신', 
				author: '히가시노 게이고', publisher: '일본어딘가', price: 21000},
			{recid: 3, title: '너의 췌장을 먹고 싶어', 
				author: '일본인', publisher: '모름', price: 18000}
		];
		$('#wrap').w2grid({
			name: 'grid',
			columns: [
				{ field: 'title', text: '도서명'},
				{ field: 'author', text: '저자'},
				{ field: 'publisher', text: '출판사'},
				{ field: 'price', text: '가격'}
			],
			// 보통 배열 안에 객체 형식으로 많이 넣음
			records: data
		});
	});
</script>

그 밖의 기능

size: grid 열의 사이즈를 정할 수 있음

editable: grid 안 내용 더블클릭시 수정 가능

columns: [
				{ field: 'title', text: '도서명', size: '40%', editable: { type: 'text'}},
				{ field: 'author', text: '저자', size: '30%', editable: { type: 'text'}},
				{ field: 'publisher', text: '출판사', size: '20%', editable: { type: 'text'}},
				{ field: 'price', text: '가격', size: '10%', editable: { type: 'text'}}

size / editable 적용 모습

show:

<script type="text/javascript">
	$(document).ready(function() {
		const data = [
			{recid: 1, title: '모던 웹을 위한 HTML5 + CSS3 입문', 
				author: '유비', publisher: '삼국미디어', price: 30000},
			{recid: 2, title: '용의자 x의 헌신', 
				author: '히가시노 게이고', publisher: '일본어딘가', price: 21000},
			{recid: 3, title: '너의 췌장을 먹고 싶어', 
				author: '일본인', publisher: '모름', price: 18000}
		];
		$('#wrap').w2grid({
			name: 'grid',
			show: {
				header: true,
				toolbar: true,
				footer: true,
				
				columnHeaders: true,
				lineNumbers: true,    ---> 행 넘버 삽입
                
				toolbarAdd: true,
				toolbarDelete: true,
				toolbarSave: true
			},
			columns: [
				{ field: 'title', text: '도서명', size: '40%'},
				{ field: 'author', text: '저자', size: '30%'},
				{ field: 'publisher', text: '출판사', size: '20%'},
				{ field: 'price', text: '가격', size: '10%'}
			],
			// 보통 배열 안에 객체 형식으로 많이 넣음
			records: data
		});
	});
</script>

toolbarAdd / toolbarDelete / toolbarSave 적용 모습( delete시 진짜 지워지는 게 아닌 메모리에서만 지워짐)

onAdd

툴바에서 add 클릭시 동작

...
...
records: data,
onAdd: function(target, event) {
	1.
	alert('Add 클릭');
   
    console.log(this.total);  //데이터 개수 출력
    
    3. 클릭시 add 실행( 추가 )
	this.add( 
		{recid: this.total + 1, title: '안녕하세요', 
		author: '안녕', publisher: '반갑미디어', price: 10000}
		);
}

onDelete

툴바에서 delete 클릭시 동작(delete는 위치 값을 알아야 한다)

onDelete: function(target, event) {
	console.log('Delete 클릭');
				
	console.log(this.getSelection()); //인덱스값은 아니다.
				
	event.preventDefault(); //delete 클릭시 나오는 창이 뜨지 않음(기본적인 실행을 막는다.)
}

event.preventDefault() 적용하면 저 확인창이 뜨지 않는다.

onSearch

show:에 적기
// true가 기본임
toolbarSearch: false, // 검색 기능 없앰
toolbarReload: false  // 리로드 기능 없앰
--------------------------------------------------------------------------------------

onSearch: function(target, event) {
				console.log('Search 클릭');
                console.log(event.detail.searchValue); //검색한 결과 출력
			}

onReload

onReload: function(target, event) {
				console.log('reload 클릭');
			}

응용 : emp 테이블 grid로 표현

1.to/dao 만들고 xml/json중 하나 선택하여 만들고 실행창 만들기

<%@ 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-2.0.css" />
<style type="text/css">
	#wrap	{
		margin: 0 auto;
		width: 960px;
		height: 500px;
	}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-2.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		const data = [
			
		];
		$('#wrap').w2grid({
			name: 'grid',
			url: './data/emp_json.jsp',
			show: {
				header: true,
				toolbar: true,
				footer: true,
				
				columnHeaders: true,
				lineNumbers: true
			},
			columns: [
				{ field: 'empno', text: '사원번호'},
				{ field: 'ename', text: '사원명'},
				{ field: 'job', text: '출판사'},
				{ field: 'hiredate', text: '입사일'},
				{ field: 'sal', text: '월급'},
				{ field: 'comm', text: '보너스'},
				{ field: 'deptno', text: '부서번호'}
			],
			onRender: function(event) {
				console.log('render 호출');
				
				//여기서 ajax 처리 해줘도 됨 (방법1)
			},
			//records: data,
			//데이터 호출 후에 발생 이벤트
			onLoad: function(event) { (방법2)
				console.log('load 호출');
			},
			
			onSearch: function(event) { 
				console.log(event.detail.searchValue); // 검색한 값 출력
				
				//삭제
				this.clear();
				//this.add({recid : this.total + 1 ,"ename":"SMITH","comm":null,"mgr":"7902","empno":"7369",
					//"job":"CLERK","hiredate":"2010-12-17",
					//"deptno":"20","sal":"800.00"});
				
				event.preventDefault();
			}
		});
	});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

그 밖의 UI / 디자인

carousel

전체 화면 변경되어 보임

https://swiperjs.com/ <-- 참고 (오픈 소스)

alert

https://sweetalert2.github.io <-- 참고 (alert창 디자인)

chart

https://www.highcharts.com/demo <-- svg태그로 그래픽 구현함

등등 ...

Bootstrap

https://getbootstrap.com/ <-- 참고
https://getbootstrap.kr/ <-- 한글어

response web

모니터(해상도) 크기에 최적화되어 화면 표현해 줌

디자인 까다로움 / 소규모 ~ 대규모로 갈수록 의미가 없어짐(ex> 네이버는 안씀, 모바일이 분리되어 있음)

반응형 웹 디자인 : 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식
적응형 웹 디자인 : 브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형

dom에 대한 선택
	- jQuery( 낮은 버전 )
    - querySelector, querySelectAll(높은 버전)

소스 예제 사용하기

홈페이지 -> docs -> 다운로드에서 해당 파일 다운
압축 풀고 프로젝트 webapp에 전부 복사해서 붙이기
grid에서 예제 실행해보기

화면을 줄이면 알아서 자동으로 크기를 최적화해줌

Bootstrap

https://getbootstrap.com/docs/5.2/getting-started/download/ 에서 cdn 찾아서 파일 생성시 붙이기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

grid 통하여 반응형 만듦

Bootstrap : grid

분할 / 균등분할

<!-- ...-scale=1.0으로 맞춰줌 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0" />

----------------------------------------------------------------------------------------------------------------------


<body>

<div class="container"> 
	<div class="row">
		<!-- 균등분할 -->
		<div class="col-4" style="background-color: lavender">.col</div>
		<div class="col-4" style="background-color: orange">.col</div>
		<div class="col-4" style="background-color: lavender">.col</div>
	</div>
	
	<div class="row">
		<!-- 분할값 정해줌 / col이 사이즈 -->
  		
		<div class="col-3" style="background-color: lavender">.col</div>
		<div class="col-9" style="background-color: orange">.col</div>
	</div>
</div>

</body>
</html>

분할 규정

ex>
<body>

<div class="container"> 
	<div class="row">
		<!-- 균등분할 -->
		<div class="col-4" style="background-color: lavender">.col</div>
		<div class="col-4" style="background-color: orange">.col</div>
		<div class="col-4" style="background-color: lavender">.col</div>
	</div>
	
	<!-- 열이 행으로 바뀐다. -->
	<div class="row">
		<!--화면 너비가 576이하로 갈 경우 한 줄로 표현 됨 -->
		<div class="col-sm-4" style="background-color: lavender">.col</div>
		<div class="col-sm-4" style="background-color: orange">.col</div>
		<div class="col-sm-4" style="background-color: orange">.col</div>
	</div>
	
	<div class="row">
		<!-- 4 이하로 가면 sm으로 표현 -->
		<div class="col-sm-4" style="background-color: lavender">.col</div>
		<div class="col-sm-4" style="background-color: orange">.col</div>
		<div class="col-sm-4" style="background-color: orange">.col</div>
	</div>
</div>

</body>

영역 잡아주기

브라우저의 크기에 따라 나뉘는 비율이 달라진다.

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

3ㅡ9 - > 6-6 -> 4-8 -> 한줄로 브라우저 크기에 따라 비율이 달라짐( 작아질수록 )

행 안에 열로 나눈경우 / 컬럼안에 컬럼

<div class="container-fluid mt-3">
 	<h2>Nested Columns</h2>
 	<p>Add columns inside other columns:</p>	
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-8 bg-warning p-4">
      .col-8
      <div class="row">
        <div class="col-6 bg-light p-2">.col-6</div>
        <div class="col-6 bg-secondary p-2">.col-6</div>
      </div>
    </div>
    <div class="col-4 bg-success p-4">.col-4</div>
  </div>
</div>

크기를 늘리거나 줄여도 행, 열의 형태는 그대로 유지

Mix and Match

<div class="container-fluid mt-3">
  <h1>Mix and Match</h1>
  <p>Resize the browser window to see the effect.</p> 
  <p>This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-6 col-sm-9 bg-success">col-6 col-sm-9</div>
      <div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices.</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
      <div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
    </div>
  </div>
  <br>
  <p>This example demonstrates a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%).</p>      
  <div class="container-fluid">     
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
      <div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
    </div>
  </div>
</div>

화면 축소시

design - template

디자인 템플릿 참고 사이트들

https://html5up.net
https://startbootstrap.com/templates/

참고하여 일부분 추출하여 수정해서 만들기

Bootstrap : Text/Typography

글씨 크기 조절 가능

1. 기본
<h1>Mix and Match</h1>
<h2>Mix and Match</h2>
<h3>Mix and Match</h3>
<h4>Mix and Match</h4>
<h5>Mix and Match</h5>
<h6>Mix and Match</h6>

2. class로 표현
<p class="h1">heading</p>
<p class="h2">heading</p>
<p class="h3">heading</p>
<p class="h4">heading</p>
  
3.기본 보다 더 큰
<h1 class="display-1">heading</h1>
<h1 class="display-2">heading</h1>
<h1 class="display-3">heading</h1>

4. 작은
<p>heading</p>
<p class="small">heading</p>

1,2.

3,4.

이 밖의 효과로는 kbd(키보드 효과), pre(인용), code 등이 있다.(w3school 참고)

Bootstrap : color

<div class="container-fluid mt-3">
	<p class="text-muted">muted color</p>
	<p class="text-primary">primary color</p>
	<p class="text-success">success color</p>
	<p class="text-info">info color</p>
  <br><hr><br>
</div>

border에 색깔 입히기


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
 <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
 </style>

-------------------------------------------------------------------------

<body>
<div class="container mt-3">
  <h2>Borders</h2>
  <p>Use a contextual border color to add a color to the border:</p> 
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
</div>
</body>

( Radius도 줄 수 있음, 나중에 참고하기 )

이준영

끄적끄적

이전 포스트

23.05.19

다음 포스트

23.05.22 : jQuery 마무리 / Bootstrap

w2ui

w2ui 라이브러리

w2ui : grid

records 안의 내용 변수에 넣고 선언 가능

데이터를 추가하면 grid 안의 내용도 추가된다.

그 밖의 기능

show:

onAdd

onDelete

onSearch

onReload

응용 : emp 테이블 grid로 표현

그 밖의 UI / 디자인

carousel

alert

chart

Bootstrap

response web

소스 예제 사용하기

Bootstrap

Bootstrap : grid

분할 / 균등분할

분할 규정

영역 잡아주기

행 안에 열로 나눈경우 / 컬럼안에 컬럼

Mix and Match

design - template

Bootstrap : Text/Typography

Bootstrap : color

border에 색깔 입히기

23.05.19

23.05.23 : Bootstrap

0개의 댓글