02M. 부트스트랩 관련

• 부트스트랩 설치
• 부트스트랩 적용

---

2-13. 부트스트랩

---

점프 투 스프링부트 - WikiDocs

---

pahkey/sbb3 - 2-13

웹 디자이너 없이 혼자서 웹 프로그램을 작성해 보았다면 화면 디자인 작업에 얼마나 많은 시간과 고민이 필요한지 알고 있을 것이다. 이번에 소개하는 부트스트랩(Bootstrap)은 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. 부트스트랩은 트위터(Twitter)를 개발하면서 만들어졌고 현재 지속적으로 관리되고 있는 오픈소스 프로젝트이다.

부트스트랩을 적용하여 SBB 서비스를 이쁘게 만들어 보자.

---

부트스트랩 설치

우선 다음 URL에서 부트스트랩을 다운로드 하자.

📎참고링크: 부트스트랩 다운로드

::: warn 부트스트랩 주의사항

부트스트랩은 3.x, 4.x, 5.x 등의 버전이 존재하고 메이저 번호(3, 4, 5)에 따라 그 사용방법이 다르다. 이 책은 부트스트랩 버전 5 기준으로 실습을 진행한다. 다른 부트스트랩 버전을 사용하면 이 책의 예제는 정상 동작하지 않는다.

:::

부트스트랩 다운로드 페이지 접속후 "Download" 버튼을 누르면 다음과 같은 파일이 다운로드 된다.

bootstrap-5.2.3-dist.zip

이 책을 작성하는 시점의 부트스트랩 최신 버전은 5.2.3 이다. 압축파일 안에는 많은 파일들이 있는데 이 중에서 bootstrap.min.css 파일을 카피하여 스태틱 디렉터리에 저장하도록 하자.

구분	파일 위치
압축파일내 경로	bootstrap-5.2.3-dist.zip/bootstrap-5.2.3-dist/css/bootstrap.min.css
카피할 경로	/sbb/src/main/resources/static/bootstrap.min.css

13_2

나중에 진행되는 챕터에서 bootstrap.min.js 파일도 필요하니 bootstrap-5.2.3-dist.zip 파일을 삭제하지 말자.

---

부트스트랩 적용

먼저 질문 목록 템플릿에 부트스트랩을 다음처럼 적용하자.

파일명: /sbb/src/main/resources/templates/question_list.html

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div class="container my-3">
    <table class="table">
        <thead class="table-dark">
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성일시</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="question, loop : ${questionList}">
                <td th:text="${loop.count}"></td>
                <td>
                    <a th:href="@{|/question/detail/${question.id}|}" th:text="${question.subject}"></a>
                </td>
                <td th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></td>
            </tr>
        </tbody>
    </table>
</div>

테이블 항목으로 "번호"를 추가했다. 번호는 loop.count를 사용하여 표시했다. 그리고 날짜를 보기 좋게 출력하기 위해 타임리프의 #temporals.format 유틸리티를 사용했다. #temporals.format은 다음과 같이 사용한다.

• #temporals.format(날짜객체, 날짜포맷) - 날짜객체를 날짜포맷에 맞게 변환한다.

그리고 가장 윗줄에 bootstrap.min.css 스타일시트를 사용할수 있도록 링크를 추가했다. 그리고 위에서 사용된 class="container my-3", class="table", class="table-dark" 등은 부트스트랩 스타일시트에 정의되어 있는 클래스들이다. 부트스트랩에 대한 자세한 내용은 다음 URL을 참조하자.

• https://getbootstrap.com/docs/5.2/getting-started/introduction/

앞으로 템플릿 작성시에 계속 부트스트랩 스타일들을 사용할 것이다. 물론 사용하는 부트스트랩 클래스들에 대해서 간단한 설명은 하겠지만 위 문서를 간단하게라도 한번 먼저 읽어보기를 당부한다.

이제 다음처럼 부트스트랩이 적용된 질문 목록을 볼 수 있을 것이다.

이어서 질문 상세 템플릿에도 다음처럼 부트스트랩을 적용하자.

파일명: /sbb/src/main/resources/templates/question_detail.html

<link rel="stylesheet" type="text/css" th:href="@{/bootstrap.min.css}">
<div class="container my-3">
    <!-- 질문 -->
    <h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${question.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(question.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변의 갯수 표시 -->
    <h5 class="border-bottom my-3 py-2" 
        th:text="|${#lists.size(question.answerList)}개의 답변이 있습니다.|"></h5>
    <!-- 답변 반복 시작 -->
    <div class="card my-3" th:each="answer : ${question.answerList}">
        <div class="card-body">
            <div class="card-text" style="white-space: pre-line;" th:text="${answer.content}"></div>
            <div class="d-flex justify-content-end">
                <div class="badge bg-light text-dark p-2 text-start">
                    <div th:text="${#temporals.format(answer.createDate, 'yyyy-MM-dd HH:mm')}"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 답변 반복 끝  -->
    <!-- 답변 작성 -->
    <form th:action="@{|/answer/create/${question.id}|}" method="post" class="my-3">
        <textarea name="content" id="content" rows="10" class="form-control"></textarea>
        <input type="submit" value="답변등록" class="btn btn-primary my-2">
    </form>
</div>

이번에는 수정사항이 좀 많다. 부트스트랩으로 화면을 구성하다 보면 가끔은 이렇게 많은 양의 HTML코드를 작성해야 한다. 하지만 어렵지 않으니 찬찬히 살펴보자. 질문이나 답변은 하나의 뭉치에 해당하므로 부트스트랩의 card 컴포넌트를 사용했다.

Cards · Bootstrap v5.2

---

부트스트랩 card 컴포넌트

질문 상세 템플릿에 사용한 부트스트랩 클래스를 다음처럼 표로 정리하였다.

부트스트랩 클래스	설명
card, card-body, card-text	부트스트랩 Card 컴포넌트
badge	부트스트랩 Badge 컴포넌트
form-control	부트스트랩 Form 컴포넌트
border-bottom	아래방향 테두리 선
my-3	상하 마진값 3
py-2	상하 패딩값 2
p-2	상하좌우 패딩값 2
d-flex justify-content-end	컴포넌트의 우측 정렬
bg-light	연회색 배경
text-dark	검은색 글씨
text-start	좌측 정렬
btn btn-primary	부트스트랩 버튼 컴포넌트

그리고 질문 내용과 답변 내용에는 style="white-space: pre-line;" 과 같은 스타일을 지정해 주었다. 글 내용의 줄 바꿈을 정상적으로 보여주기 위해 적용한 스타일이다.

부트스트랩을 적용한 질문 상세 화면은 다음과 같다.

부트스트랩을 사용하면 정말 빠르게 만족스러운 화면을 만들 수 있다.

---