부트스트랩5 우측정렬, 좌측정렬, 중앙정렬, 세로 중앙정렬
정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.
부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.
다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.
위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 5 정렬 테스트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.alignment-box {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin-bottom: 20px;
padding: 10px;
}
.vertical-box {
height: 200px;
background-color: #e9ecef;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">부트스트랩 5 정렬 테스트</h1>
<h2 class="mt-4">수평 정렬</h2>
<div class="alignment-box text-start">
<p>좌측 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>좌측 정렬 테이블</td></tr>
</table>
</div>
<div class="alignment-box text-center">
<p>중앙 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>중앙 정렬 테이블</td></tr>
</table>
</div>
<div class="alignment-box text-end">
<p>우측 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>우측 정렬 테이블</td></tr>
</table>
</div>
<h2 class="mt-4">수직 정렬</h2>
<div class="alignment-box vertical-box d-flex align-items-start">
<div>
<p>상단 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>상단 정렬 테이블</td></tr>
</table>
</div>
</div>
<div class="alignment-box vertical-box d-flex align-items-center">
<div>
<p>중앙 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>중앙 정렬 테이블</td></tr>
</table>
</div>
</div>
<div class="alignment-box vertical-box d-flex align-items-end">
<div>
<p>하단 정렬 텍스트</p>
<table class="table table-bordered">
<tr><td>하단 정렬 테이블</td></tr>
</table>
</div>
</div>
<h2 class="mt-4">테이블 내부 셀 정렬</h2>
<table class="table table-bordered">
<tr>
<td class="text-start align-top">좌측 상단</td>
<td class="text-center align-middle">중앙</td>
<td class="text-end align-bottom">우측 하단</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
