Jun's Blog
BootStrap의 활용 - (2) 본문
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록 조회</title>
<!-- 부트스트랩은 제이쿼리 자바 스크립트를 토대로 적용하므로 jquery.min.js 파일을 먼저 포함시켜야 합니다. -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- bootstrap.min.css 파일은 부트 스트랩을 위한 스타일 시트 파일입니다.-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- bootstrap.bundle.min.js 파일은 부트 스트랩을 위한 자바 스크립트 파일입니다. -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>회원 목록</h2>
<p>회원 목록을 보여 주는 페이지입니다.</p>
<!-- <table class="table table-striped table-borderless"> -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>아이디</th>
<th>이름</th>
<th>비밀 번호</th>
<th>성별</th>
<th>생일</th>
<th>결혼 여부</th>
<th>급여</th>
<th>주소</th>
<th>관리자</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">hong</td>
<td>홍길동</td>
<td>hello123</td>
<td>남자</td>
<td>2023/12/25</td>
<td>미혼</td>
<td>12345</td>
<td>용산</td>
<td>kim9</td>
</tr>
<tr>
<td align="center">park</td>
<td>박영희</td>
<td>world456</td>
<td>여자</td>
<td>2024/07/17</td>
<td>이혼</td>
<td>45678</td>
<td>서대문</td>
<td>soon</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="./../common/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시물 목록 조회</title>
</head>
<body>
<div class="container mt-3">
<h2>게시물 목록</h2>
<p>사용자들이 작성한 게시물 목록을 보여 주는 페이지입니다.</p>
<!-- <table class="table table-striped table-borderless"> -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>글번호</th>
<th>작성자</th>
<th>비밀 번호</th>
<th>글제목</th>
<th>글내용</th>
<th>조회수</th>
<th>작성 일자</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>홍길동</td>
<td>hello123</td>
<td>자바 공부</td>
<td>재밌어요</td>
<td>
<span class="badge rounded-pill bg-primary">20</span>
</td>
<td>2022/10/10</td>
</tr>
<tr>
<td align="center">2</td>
<td>박영희</td>
<td>world456</td>
<td>파이썬</td>
<td>판다스 입문</td>
<td>
<span class="badge rounded-pill bg-primary">15</span>
</td>
<td>2023/11/11</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'WEB > BootStrap' 카테고리의 다른 글
| Bootstrap 기능을 활용하여 메뉴바 적용해보기 (1) | 2025.02.04 |
|---|---|
| BootStrap의 활용 - (4) (0) | 2025.02.04 |
| BootStrap의 활용 - (3) (0) | 2025.01.31 |
| BootStrap의 활용 - (1) (0) | 2025.01.31 |
