스프링에서 BootStrap 적용하기
1. BootStrap 이란?
BootStrap은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크로, HTML, CSS, JS를 사용하여 웹 페이지를 구현할 때 필요한 다양한 컴포넌트와 스타일을 제공해줍니다. 스프링 프레임워크와 함께 사용하면 손쉽게 웹 애플리케이션을 개발할 수 있습니다.
2. 스프링 프로젝트 생성하기
먼저 스프링 프로젝트를 생성해야 합니다. 이를 위해 STS(스프링 툴 슈트)나 IntelliJ 등의 통합개발환경을 사용할 수 있습니다. 새로운 스프링 프로젝트를 생성하고 Maven이나 Gradle을 설정해줍니다.
3. BootStrap 의존성 추가하기
스프링 프로젝트에는 BootStrap 의존성을 추가해야 합니다. 이를 위해 Maven의 pom.xml이나 Gradle의 build.gradle 파일에 아래의 의존성을 추가해줍니다.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.1.3</version>
</dependency>4. BootStrap 적용하기
이제 BootStrap을 실제로 적용해보겠습니다. 스프링 프로젝트의 웹 페이지 파일인 .html 파일에서 BootStrap의 클래스, 스타일 등을 사용할 수 있습니다. 예를 들어, 다음과 같이 웹 페이지의 헤더에 BootStrap의 CSS 파일을 추가해줍니다.
<head>
<link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css">
</head>그리고 웹 페이지의 내용에서 각종 BootStrap 컴포넌트를 사용할 수 있습니다. 아래의 예시는 버튼을 만드는 방법입니다.
<button type="button" class="btn btn-primary">Primary</button>5. 스프링 컨트롤러에서 BootStrap 사용하기
스프링 컨트롤러에서도 BootStrap을 사용할 수 있습니다. 예를 들어, 컨트롤러에서 모델에 데이터를 담아 웹 페이지로 전달할 때, BootStrap의 테이블 컴포넌트를 사용할 수 있습니다. 이를 위해 .html 파일에서 다음과 같이 테이블을 생성할 수 있습니다.
<table class="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${items}">
<td th:text="${item.id}"></td>
<td th:text="${item.name}"></td>
</tr>
</tbody>
</table>마무리
이렇게 스프링 프로젝트에 BootStrap을 적용하는 방법에 대해 알아보았습니다. BootStrap은 다양한 컴포넌트와 스타일을 제공하기 때문에 웹 개발을 효율적으로 할 수 있습니다. 스프링 컨트롤러에서도 BootStrap을 사용하여 보다 다양한 기능을 구현할 수 있습니다.
댓글