<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- left -->
<div class="col-1"></div>
<!-- middle start -->
<div class="col-10">
<!-- navbar -->
<div class="row navbar">
<div class="col px-0">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid px-0">
<a class="navbar-brand" href="#">민짱 첫 게시판</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</div>
<!-- title -->
<div class="row my-3">
<div class="col text-center fs-1 fw-bold"> 게시판 </div>
</div>
<!-- search -->
<div class="row">
<div class="col-1 px-0">
<div class="dropdown d-grid">
<a class="btn btn-outline-primary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
제목
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">글쓴이</a></li>
<li><a class="dropdown-item" href="#">조회수</a></li>
<li><a class="dropdown-item" href="#">날짜</a></li>
</ul>
</div>
</div>
<div class="col-10">
<input class="form-control" type="text" placeholder="입력">
</div>
<div class="col-1 d-grid px-0">
<button class="btn btn-primary" type="button">검색</button>
</div>
</div>
<!-- list -->
<div class="row my-2">
<div class="col px-0">
<table class="table">
<thead>
<tr style="border-bottom: 2px solid black;" class="text-center">
<th scope="col">글 번호</th>
<th scope="col">구분</th>
<th scope="col">제목</th>
<th scope="col">글쓴이</th>
<th scope="col">조회</th>
<th scope="col">날짜</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">5</th>
<td>잡담</td>
<td>민지짱
<span style="color: skyblue;">[99]</span>
<span class="badge bg-danger">New</span>
</span>
</td>
<td class="text-center">민지최고</td>
<td class="text-end">7777</td>
<td class="text-end">2023-10-05</td>
</tr>
<tr>
<th scope="row">4</th>
<td>질문</td>
<td>질문있어용</td>
<td class="text-center">한조</td>
<td class="text-end">12</td>
<td class="text-end">2023-10-04</td>
</tr>
<tr>
<th scope="row">3</th>
<td>질문</td>
<td>질이링리이무우우ㅜㄴ</td>
<td class="text-center">메르시</td>
<td class="text-end">1004</td>
<td class="text-end">2023-10-03</td>
</tr>
<tr>
<th scope="row">2</th>
<td>잡담</td>
<td>복붙복붙</td>
<td class="text-center">후여여여영</td>
<td class="text-end">123,454</td>
<td class="text-end">2023-10-01</td>
</tr>
<tr>
<th scope="row">1</th>
<td>상담</td>
<td>고민고민하지마
<span style="color: skyblue;">[99]</span>
</td>
<td class="text-center">민짱</td>
<td class="text-end">7777</td>
<td class="text-end">2023-07-04</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- page, write -->
<div class="row">
<div class="col-1">
</div>
<div class="col">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center mb-0">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-1 d-grid px-0">
<button class="btn btn-primary" type="button">글쓰기</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-1"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
</body>
</html>
게시판
| 글 번호 | 구분 | 제목 | 글쓴이 | 조회 | 날짜 |
|---|---|---|---|---|---|
| 5 | 잡담 | 민지짱 [99] New | 민지최고 | 7777 | 2023-10-05 |
| 4 | 질문 | 질문있어용 | 한조 | 12 | 2023-10-04 |
| 3 | 질문 | 질이링리이무우우ㅜㄴ | 메르시 | 1004 | 2023-10-03 |
| 2 | 잡담 | 복붙복붙 | 후여여여영 | 123,454 | 2023-10-01 |
| 1 | 상담 | 고민고민하지마 [99] | 민짱 | 7777 | 2023-07-04 |