Bootstrap이란?
웹 페이지를 꾸마가 위해 CSS cascading 스타일 시트를 사용할 수 있습니다.
Bootstrap은 가장 널리 사용되는 cascading 스타일 시트 프레임워크입니다.
(현재 2023.12.29 최신 버전은 Bootstrap5입니다)
사용을 위한 사전 준비
과거(수동 다운로드)
과거에 Spring에서 Bootstrap을 사용하려면 관련 리소스를 static 디렉토리에 넣어줘야 했으며,
새 버전을 적용하려면, 이 과정을 반복해야 했으므로 편하면서도 까다로웠습니다.
따라서 webjars라는 프로세스가 등장하며 인기를 끌게 되었습니다.
현재(webjars 의존성)
그 이유는, webjars를 통해 Bootstrap을 수동으로 다운로드하지 않아도 되기 때문입니다.
사용을 위해 아래 의존성을 설정합니다.
(사용하려는 bootstrap의 버전을 명시합니다)
implementation 'org.webjars:bootstrap:5.2.3'
implementation 'org.webjars:jquery:3.6.4'사용
Bootstrap은 각종 태그에 대해 많은 클래스를 제공합니다.
사용 방법은 다음과 같습니다.
먼저 의존성 설치가 되었는지 확인하고,
사용하려는 파일의 경로를 지정합니다.
예시
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<link href="webjars/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<title>List Todos Page</title>
</head>
<body>
<div class="container">
<h1>Your Todos are</h1>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>Description</th>
<th>Target Date</th>
<th>Is Done?</th>
</tr>
</thead>
<tbody>
<c:forEach items="${todos}" var="todo">
<tr>
<td>${todo.id}</td>
<td>${todo.description}</td>
<td>${todo.targetDate}</td>
<td>${todo.done}</td>
</tr>
</c:forEach>
</tbody>
</table>
<a href="add-todo" class="btn btn-success">Add Todo</a>
</div>
<script src="webjars/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<script src="webjars/jquery/3.6.4/jquery.min.js"></script>
</body>
</html>아래는 Bootstrap이 적용된 웹페이지입니다.
이처럼 Bootstrap을 활용하면,
웹 화면을 정말 빠르게 구성할 수 있습니다.
728x90
'Dictionary' 카테고리의 다른 글
| Shebang #! (0) | 2024.01.11 |
|---|---|
| Session vs Request Scopes (0) | 2024.01.06 |
| OAuth 2.0 개요 (1) | 2023.10.15 |
| JSON Web Tokens, JWT란? (3) | 2023.10.14 |
| 클라우드의 서비스 제공 형태 XaaS, SaaS, PaaS, IaaS (0) | 2023.09.26 |