반응형
[참조사이트] https://dinfree.com/lecture/frontend/122_css_exam.html
Quiz-3) 부트스트랩 테이블 구조 만들기
부트스트랩의 container, table, button, pagnation등을 이용해 데이터 목록을 보여주는 화면을 만들어 봅니다.
- 전체 콘텐츠는 중앙정렬된 그림자가 있는 박스로 구성
- 테이블은 헤더를 어둡게 설정하고 짝홀수 로우의 배경색을 다르게 설정
- 마우스가 지나가는 로우의 배경색을 변경
- 페이지 목록 이동을 위한 페이지네이션 추가
✅실행 결과
✅코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-varify1</title>
<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>
<style>
#container{
display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 50px;
}
.item2 {
margin-bottom: 15px;
}
.btn.btn-primary{
background-color: rgb(46, 197, 184);
border: none;
}
h1{
font-weight: bold;
}
.item4{
margin: auto;
}
.item3 tr td:first-child {
color: blue;
}
</style>
</head>
<body>
<div class="container shadow p-3 mb-5 bg-body rounded" id="container">
<div class="item1">
<h1>AddressBook::List</h1>
<hr>
</div>
<div class="item2">
<button type="button" class="btn btn-primary">New Entry</button>
</div>
<div class="item3">
<table class="table table-striped table-hover table table-striped">
<tr class="table-dark">
<th>#No</th>
<th>Name</th>
<th>CellPhone</th>
<th>Birth Date</th>
<th>Company</th>
<th>Memo</th>
</tr>
<tr>
<td>9</td>
<td>Kang</td>
<td>011-7777-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
<tr>
<td>9</td>
<td>Kang</td>
<td>011-7777-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
<tr>
<td>8</td>
<td>Hwang</td>
<td>010-9999-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
<tr>
<td>9</td>
<td>Kang</td>
<td>011-7777-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
<tr>
<td>9</td>
<td>Kang</td>
<td>011-7777-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
<tr>
<td>9</td>
<td>Kang</td>
<td>011-7777-8888</td>
<td>2018-11-07</td>
<td>Facebook</td>
<td>Developer</td>
</tr>
</table>
</div>
<div class="item4">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link"><<</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></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="#">>></a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>반응형
'Front-End > HTML & CSS' 카테고리의 다른 글
| Bootstrap 실습 (0) | 2023.04.03 |
|---|---|
| html과 css를 이용하여 웹 화면 구현해보기(2) (0) | 2023.02.10 |
| html과 css를 이용하여 웹 화면 구현해보기(1) (0) | 2023.02.07 |
댓글