반응형
Notice
Recent Posts
Recent Comments
Link
지구정복
[Bootstrap] 1/18 | SPA개념 및 특징, W2UI사용하기(레이아웃, 이벤트, 영역 안에 데이터넣기, 그리드, 우편번호검색기), BootStrap사용하기(반응성, typography, mark, blockquote, dl) 본문
데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js
[Bootstrap] 1/18 | SPA개념 및 특징, W2UI사용하기(레이아웃, 이벤트, 영역 안에 데이터넣기, 그리드, 우편번호검색기), BootStrap사용하기(반응성, typography, mark, blockquote, dl)
nooh._.jl 2021. 1. 18. 17:29728x90
반응형
복습 및 배울내용
web2.0
ajax
- javascript application
- window application
- 디자인 - ecmascript
=> SPA(Single Page Application)
jQuery를 이용한 UI
1. jQueryUI(pc) -> jQueryMobile
2. w2ui ( http://w2ui.com/web )1. SPA(Single Page Application)
더보기
https://blog.naver.com/dktmrorl/222085340333
1. SPA란?
싱글페이지 애플리케이션(SPA)은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를
동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
전통적인 웹 방식은 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시
렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용서잉 좋지 않으며, 변경이 필요없는 부분을
포함하여 전체 페이지를 갱신하므로 비효율적이다.
2. SPA특징
ㅇ 라우팅
라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다. 애플리케이션의 라우팅은 사용자가
태스크를 수행하기 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한
기능을 의미한다. 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위한
데이터를 취득하기 위해 서버에 필요데이터를 요청하고 화면을 전환하는 일련의 행위를 말한다.
요청 URI에 따라 브라우저에 돔을 변경하는 방식이다.
ㅇ 컴포넌트
컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다.
예를 들면 index.html 파일 하나에 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이
특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념
ㅇ spa 장점
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.
- 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인
트래픽이 감소
- 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아
네이티브 앱과 유사한 사용자 경험을 제공
ㅇ spa 단점
- 최초에 한 번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
- spa는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델이기 때문에 검색엔진 최적화 이슈가 있다.
1. SPA란?
싱글페이지 애플리케이션(SPA)은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를
동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.
전통적인 웹 방식은 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시
렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용서잉 좋지 않으며, 변경이 필요없는 부분을
포함하여 전체 페이지를 갱신하므로 비효율적이다.
2. SPA특징
ㅇ 라우팅
라우팅이란 출발지에서 목적지까지의 경로를 결정하는 기능이다. 애플리케이션의 라우팅은 사용자가
태스크를 수행하기 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한
기능을 의미한다. 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위한
데이터를 취득하기 위해 서버에 필요데이터를 요청하고 화면을 전환하는 일련의 행위를 말한다.
요청 URI에 따라 브라우저에 돔을 변경하는 방식이다.
ㅇ 컴포넌트
컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다.
예를 들면 index.html 파일 하나에 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이
특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념
ㅇ spa 장점
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.
- 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인
트래픽이 감소
- 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아
네이티브 앱과 유사한 사용자 경험을 제공
ㅇ spa 단점
- 최초에 한 번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
- spa는 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델이기 때문에 검색엔진 최적화 이슈가 있다.
2. W2UI 사용하기
더보기
1. 다운로드 및 기본사이트 사용하기
New JavaScript UI Library
w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5
w2ui.com
코드를 다운로드 받는다.
그리고 이클립스에서 새로운 다이나믹 웹 프로젝트를 만든다.
그리고 다운로드받은 알집을 풀고 그 안에 파일 및 폴더들을 새로운 웹프로젝트의
웹콘텐츠폴더 안에 붙여넣기 한다.
index.html을 실행하면 w2UI의 기본사이트를 사용할 수 있다.
2. 실습
새로운 다이나믹 웹프로젝트를 만든다.
New JavaScript UI Library
w2ui JavaScript UI Library for the Modern Web Download w2ui 1.5
w2ui.com
해당 파일을 다운받고 압축을 푼다.
그리고 새로 만든 웹 프로젝트의 웹콘텐츠 폴더에서 css, js 폴더를 만든다.
그리고 아래와 같이 붙여넣기한다.
그리고 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">
</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() {
alert( 'Hello W2UI' );
});
</script>
</head>
<body>
</body>
</html>
ㅇ레이아웃 사용하기
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() {
$( '#wrap' ).w2layout({
name: 'layout',
panels: [
{ type: 'top', style: 'background: #add6ff' },
{ type: 'bottom', style: 'background: #add6ff' },
{ type: 'left', style: 'background: #add6ff' },
{ type: 'right', style: 'background: #add6ff' },
{ type: 'main', style: 'background: #add6ff' },
{ type: 'preview', style: 'background: #add6ff' }
]
})
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>다음과 같이 옵션값을 변수로 설정해서 사용할 수 있다.
<%@ 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({
name: 'layout',
panels: [
{ type: 'top', style: pstyle, resizable: true },
{ type: 'bottom', style: pstyle, resizable: true },
{ 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>
다양한 옵션과 변수에 css까지 포함시켜보자.
<%@ 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({
name: 'layout',
panels: [
{ type: 'top', style: pstyle, resizable: true, content: 'top', size: 50 },
{ type: 'bottom', style: pstyle, resizable: true, 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%' }
]
})
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
이벤트 설정하기
웹브라우저 아무대나 클릭하면 top과 right div가 사라지고 나타나도록 이벤트를 설정해보자.
<%@ 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({
name: 'layout',
panels: [
{ type: 'top', style: pstyle, resizable: true, content: 'top', size: 50 },
{ type: 'bottom', style: pstyle, resizable: true, 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>
영역안에 데이터 넣기
윈도우 어느부분을 클릭하면 메인영역에 설정된 text값이 계속 추가된다.
<%@ 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({
name: 'layout',
panels: [
{ 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() {
//윈도우 어느부분을 클릭하면 text를 content에 계속 집어넣는다.
//w2ui에서 name이 layout인 것의 content를 설정.
w2ui.layout.content( 'main', ( content += text ) );
})
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>
ㅇ 그리드 사용하기
먼저 ajax의 버전을 2.1.4로 낮춰준다.
웹브라우저에서 이클립스 새로 작성한 내용이 적용안될 때는 ctrl + shift + r을 누르면 강력한 새로고침이 된다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><%@ 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 + CSS', author: '홍길동1',
publisher: '미디어', price: 30000, point: 30400 },
{ recid: 1, name: 'HTML5 + CSS', author: '홍길동2',
publisher: '미디어', price: 30000, point: 30400 },
{ recid: 1, name: 'HTML5 + CSS', author: '홍길동3',
publisher: '미디어', price: 30000, point: 30400 }
]
$( '#wrap' ).w2grid({
name: 'grid',
columns: [ //recid는 고유값이어서 설정하지 않는다.
{ 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>
-기능추가하기(툴바, 헤더, 풋터 등)
<%@ 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 + CSS', author: '홍길동1',
publisher: '미디어', price: 30000, point: 30400 },
{ recid: 2, name: 'HTML5 + CSS', author: '홍길동2',
publisher: '미디어', price: 30000, point: 30400 },
{ recid: 3, name: 'HTML5 + CSS', author: '홍길동3',
publisher: '미디어', price: 30000, point: 30400 }
]
$( '#wrap' ).w2grid({
name: 'grid',
show: {
header: true,
toolbar: true,
footer: true,
columnHeaders: true, //컬럼명
lineNumbers: true, //행 번호
toolbarReload: true, //툴바 새로고침
toolbarSearch: true, //툴바 검색창
toolbarAdd: true, //툴바 추가기능
toolbarDelete: true //툴바에서 특정행 삭제하기
},
columns: [ //recid는 고유값이어서 설정하지 않는다.
{ 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() { //툴바에서 add를 누르면 이벤트발생
console.log( 'onAdd 호출', this.total ); //현재 행의 총 개수
this.add(
{ recid: this.total+1, name: 'HTML5 + CSS', author: '홍길동3',
publisher: '미디어', price: 30000, point: 30400 }
)
},
onDelete: function( target, e ) { //툴바에서 delete누르면 이벤트 발생
console.log( 'onDelete 호출' );
//선택한 recid값이 나온다.(recordId) json형태, 이를 string으로 바꿔준다.
console.log( JSON.stringify( this.getSelection() ) );
e.preventDefault(); //기본기능인 삭제 없애고 console만 출력
},
onSearch: function( target, e ) {
console.log( 'onSearch 호출', e.searchData[0].value );
},
onReload: function() {
console.log( 'onReload 호출' );
}
})
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
ㅇ우편번호 검색기 W2UI로 만들기
먼저 새로운 jsp파일 만들고 ajax 버전은 2.1.4로 낮춰서 불러온다.
아래와 같이 만든다.
ㅇ내 코드
context.xml과 mariaDB, json 라이브러리를 추가한다.
-context.xml
<?xml version="1.0" encoding="utf-8" ?>
<Context>
<Resource
name = "jdbc/mariadb2"
auth = "Container"
type = "javax.sql.DataSource"
driverClassName = "org.mariadb.jdbc.Driver"
url = "jdbc:mysql://localhost:3307/sample"
username = "root"
password = "!123456"
/>
</Context> -zipcode.jsp (data 폴더)
<%@ page language="java" contentType="text/json; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%
request.setCharacterEncoding( "utf-8" );
String strDong = request.getParameter("strDong");
//String strDong = "개포";
%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.sql.DataSource" %>
<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
JSONArray jsonArray = new JSONArray();
try {
Context initCtx = new InitialContext();
Context envCtx = (Context)initCtx.lookup("java:comp/env");
DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
conn = dataSource.getConnection();
String sql = "select zipcode, sido, gugun, dong, ri, bunji, seq from zipcode where dong like ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString( 1, strDong + "%" );
rs = pstmt.executeQuery();
while ( rs.next() ) {
JSONObject obj = new JSONObject();
obj.put( "seq", rs.getString( "seq" ) );
obj.put( "zipcode", rs.getString( "zipcode" ) );
obj.put( "sido", rs.getString( "sido" ) );
obj.put( "gugun", rs.getString( "gugun" ) );
obj.put( "dong", rs.getString( "dong" ) );
obj.put( "ri", rs.getString( "ri" ) );
obj.put( "bunji", rs.getString( "bunji" ) );
jsonArray.add( obj );
}
} catch(NamingException e) {
System.out.println( "[에러] : " + e.getMessage() );
} catch(SQLException e) {
System.out.println( "[에러] : " + e.getMessage() );
} finally {
if ( rs != null ) rs.close();
if ( pstmt != null ) pstmt.close();
if ( conn != null ) conn.close();
}
out.println( jsonArray );
%>-zipcodeSearch01 (메인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({
name: 'grid',
show: {
header: true,
toolbar: true,
footer: true,
columnHeaders: true,
lineNumbers: true,
toolbarReload: true,
toolbarSearch: true,
toolbarAdd: true,
toolbarDelete: 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%'}
],
records: datas,
onSearch: function( target, e ) {
console.log( 'onSearch 클릭' );
let strDong = e.searchData[0].value;
func = this
$.ajax({
url: './data/zipcode.jsp?strDong='+strDong,
type: 'get',
dataType: 'json',
success: function( json ) {
console.log( 'onSearch 클릭' );
for( let i=0; i<json.length; i++) {
func.add({
recid: func.total+1,
zipcode: json[i].zipcode,
sido: json[i].sido,
gugun: json[i].gugun,
dong: json[i].dong,
ri: json[i].ri,
bunji: json[i].bunji
})
}
e.preventDefault();
},
error: function() {
console.log( '서버 error' );
}
})
},
onReload: function() {
console.log( 'onReload 호출' );
}
})
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>ㅇ강사님코드
<%@ 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({
name: 'grid',
show: {
header: true,
toolbar: true,
footer: true,
columnHeaders: true,
lineNumbers: true,
toolbarReload: true,
toolbarSearch: true,
toolbarAdd: true,
toolbarDelete: 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%'}
],
records: datas,
onSearch: function( target, e ) {
console.log( 'onSearch 클릭' );
let grid = this
//ajax
$.ajax({
url: './data/zipcode.jsp',
type: 'get',
data: { strDong: e.searchData[0].value },
dataType: 'json',
success: function( json ) {
grid.clear();
$.each( json, function( key, value ) {
grid.add({
recid: this.grid+1,
zipcode: value.zipcode,
sido: value.sido,
gugun: value.gugun,
dong: value.dong,
ri: value.ri,
bunji: value.bunji
})
})
},
error: function() {
alert( '서버에러' );
}
})
e.preventDefault();
},
onReload: function() {
console.log( 'onReload 호출' );
}
})
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
참고
ㅇ여러가지 디자인 라이브러리
-alert창 디자인
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
- 차트 디자인
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 사용하기
더보기
1. 다운로드 및 기본 사용
www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
Bootstrap 4 Grid Basic
Bootstrap 4 Grids Bootstrap 4 Grid System Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: span 1 s
www.w3schools.com
위 사이트를 보면 grid가 총 12개로 나눠져있는데 브라우저에 크기별로 12개의 영역을 합치거나 나눠서
브라우저 크기에 맞게 표현할 수 있다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
아래 페이지에 들어간다.
아래로 내려가서 빨간 동그라미 부분을 copy한다.
ㅇ 반응성
하나의 웹을 만들고 그 웹이 해상도에 따라 변하는 것을 반응성이라한다.
새로운 다이나믹 웹 프로젝트를 만들고 jsp파일을 하나 만든다.
부트스트랩 디자인 원칙을 가장 먼저 세운다.
가장 큰 영역을 container-fluid를 설정하고 그 안에 row별로 나눈다.
이때 col에 영역값을 줄 경우 합이 12가 되어야 한다.
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid"><!-- 내장되어있는 클래스/ 해당영역을 잡고 사용한다는 의미 -->
<div class="row"><!-- 해당영역을 행으로 만들기 -->
<div class="col" style="background-color: lavender">.col1</div>
<div class="col" style="background-color: orange">.col2</div>
<div class="col" style="background-color: lavender">.col3</div>
</div>
<div class="row"><!-- 해당영역을 행으로 만들기 -->
<div class="col-3" style="background-color: lavender">.col1</div>
<div class="col-9" style="background-color: orange">.col2</div>
</div>
</div>
</body>
</html>
모바일 같은 경우 아래처럼 한다.
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></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">.col3</div>
<div class="col-sm-3" style="background-color: lavender">.col3</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>
</body>
</html>크기를 줄일경우 아래처럼 변한다.
아래와 같이 sm:작은화면, md:중간화면, lg:큰화면 별로 사이즈를 나눌 수 있다.
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<!-- sm기준점(= 화면이 변하는 기준점) : 576px -->
<div class="container-fluid"><!-- 내장되어있는 클래스/ 해당영역을 잡고 사용한다는 의미 -->
<div class="row"><!-- sm은 가장 작은 화면, md는 중간크기 화면, lg는 가장 큰 화면 -->
<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">.col3</div>
<div class="col-sm-3" style="background-color: orange">.col4</div>
</div>
<div class="row"><!-- 해당영역을 행으로 만들기 -->
<div class="col-sm-4" style="background-color: lavender">.col5</div>
<div class="col-sm-8" style="background-color: orange">.col6</div>
</div>
<div class="row"><!-- 해당영역을 행으로 만들기 -->
<div class="col-sm-3 col-md-6" style="background-color: lavender">.col7</div>
<div class="col-sm-9 col-md-6" style="background-color: orange">.col8</div>
</div>
<div class="row"><!-- 해당영역을 행으로 만들기 -->
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color: lavender">.col9</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color: orange">.col10</div>
</div>
</div>
</body>
</html>
ㅇText/Typography
부트스트랩에 선언된 클래스를 사용하면 된다.
글자를 더 큰 사이즈로 만들기
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<!-- sm기준점(= 화면이 변하는 기준점) : 576px -->
<div class="container-fluid"><!-- 내장되어있는 클래스/ 해당영역을 잡고 사용한다는 의미 -->
<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>
</div>
</body>
</html>
글자를 더 작은 크기로 만들기
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<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>
</body>
</html>
특정 글자에 마킹하기
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<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>
<p>Hello <mark>Bootstrap</mark> Hello Bootstrap </p>
</div>
</body>
</html>
인용구 사용하기
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<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>
<p>Hello <mark>Bootstrap</mark> Hello Bootstrap </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>
</div>
</body>
</html>
사전 형식으로 나타내기
<%@ 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>
<!-- 부트스트랩 css와 js파일 / jquery ajax js파일 -->
<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://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.5/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Mlik</dt>
<dd>- white cold drink</dd>
</dl>
</div>
</body>
</html>
[출처]
blog.naver.com/dktmrorl/222085340333
728x90
반응형
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles
more
Comments