732
No
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--
EL(Expression Language, 표현언어)
jstl(Jsp Standard Tag Library, JSP표준태그라이브러리)
jsp의 확장 태그
taglib prefix="태그 접두어" uri="태그 식별자"
set var="변수명" value="값"
-->
<!-- 핵심태그 -->
<%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 포맷태그(날짜,숫자 등의 출력형식) -->
<%@ taglib prefix="fmt"
uri="http://java.sun.com/jsp/jstl/fmt" %>
<!-- 함수태그 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!-- 부트스트랩 css -->
<link rel="stylesheet" href="${path}/include/css/bootstrap.css">
<!-- 부트스트랩은 jquery 기반에서 실행됨 -->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 부트스트랩 javascript -->
<script src="${path}/include/js/bootstrap.js"></script>
ex01_button.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
</head>
<body>
<h2>일반 버튼</h2>
<button type="button">버튼</button>
<h2>부트스트랩 버튼</h2>
<button type="button" class="btn">버튼</button>
<button type="button" class="btn btn-default">버튼</button>
<button type="button" class="btn btn-primary">버튼</button>
<button type="button" class="btn btn-success">버튼</button>
<button type="button" class="btn btn-info">버튼</button>
<button type="button" class="btn btn-danger">버튼</button>
<!-- btn-lg 큰 버튼
btn-sm 작은 버튼
btn-xs x-small -->
<br><br>
<button type="button" class="btn btn-default btn-lg">버튼</button>
<button type="button" class="btn btn-primary btn-sm">버튼</button>
<button type="button" class="btn btn-success btn-xs">버튼</button>
</body>
</html>
ex02_text.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
</head>
<body>
<h2>일반 버튼</h2>
<button type="button">버튼</button>
<h2>부트스트랩 버튼</h2>
<button type="button" class="btn">버튼</button>
<button type="button" class="btn btn-default">버튼</button>
<button type="button" class="btn btn-primary">버튼</button>
<button type="button" class="btn btn-success">버튼</button>
<button type="button" class="btn btn-info">버튼</button>
<button type="button" class="btn btn-danger">버튼</button>
<!-- btn-lg 큰 버튼
btn-sm 작은 버튼
btn-xs x-small -->
<br><br>
<button type="button" class="btn btn-default btn-lg">버튼</button>
<button type="button" class="btn btn-primary btn-sm">버튼</button>
<button type="button" class="btn btn-success btn-xs">버튼</button>
</body>
</html>
ex03_table.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../include/header.jsp"%>
</head>
<body>
<table>
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>1</td>
<td>kim</td>
<td>20</td>
<td>서울시</td>
<td>010-111-5555</td>
</tr>
<tr>
<td>2</td>
<td>park</td>
<td>30</td>
<td>인천시</td>
<td>010-222-5555</td>
</tr>
<tr>
<td>3</td>
<td>lee</td>
<td>40</td>
<td>대전시</td>
<td>010-555-5555</td>
</tr>
</table>
<table class="table">
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>1</td>
<td>kim</td>
<td>20</td>
<td>서울시</td>
<td>010-111-5555</td>
</tr>
<tr>
<td>2</td>
<td>park</td>
<td>30</td>
<td>인천시</td>
<td>010-222-5555</td>
</tr>
<tr>
<td>3</td>
<td>lee</td>
<td>40</td>
<td>대전시</td>
<td>010-555-5555</td>
</tr>
</table>
<div class="container"> <!-- 좌우 여백 처리 -->
<table class="table table-striped">
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>1</td>
<td>kim</td>
<td>20</td>
<td>서울시</td>
<td>010-111-5555</td>
</tr>
<tr>
<td>2</td>
<td>park</td>
<td>30</td>
<td>인천시</td>
<td>010-222-5555</td>
</tr>
<tr>
<td>3</td>
<td>lee</td>
<td>40</td>
<td>대전시</td>
<td>010-555-5555</td>
</tr>
</table>
<div class="text-center"> <!-- 가운데 정렬 -->
<ul class="pagination"> <!-- 페이지 네비게이션 -->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
<a class="btn btn-primary pull-right">글쓰기</a>
<table class="table table-hover">
<tr>
<td>번호</td>
<td>이름</td>
<td>나이</td>
<td>주소</td>
<td>전화번호</td>
</tr>
<tr>
<td>1</td>
<td>kim</td>
<td>20</td>
<td>서울시</td>
<td>010-111-5555</td>
</tr>
<tr>
<td>2</td>
<td>park</td>
<td>30</td>
<td>인천시</td>
<td>010-222-5555</td>
</tr>
<tr>
<td>3</td>
<td>lee</td>
<td>40</td>
<td>대전시</td>
<td>010-555-5555</td>
</tr>
</table>
</body>
</html>
|
댓글 ( 4)
댓글 남기기