728x90
🔴 부트스트랩 연결 전
이렇게 기본적 기능만하고 못생긴 페이지가 있다고 하자.
이제 이 아이를 간단하게 예쁘게 만들어 줄 수 있는 것이 부트스트랩이다
🟢 부트스트랩 연결 후
이렇게 깔끔한 디자인으로 바뀌었다.
📌 부트스트랩 연결 방법
https://getbootstrap.kr/docs/5.0/getting-started/introduction/
시작하기
세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.
getbootstrap.kr
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
(부트스트랩 사이트에 들어가면 여러 방법이 있는데, 그 중 CSS링크를 끌어다 쓰는 방법을 작성해보겠습니다.)
일단 변화주길 원하는 html파일 <head>부분에 상단 링크를 붙여넣어주면된다.
이러면 간단하게 부트스트랩 연결 완료.
부트스트랩 사이트에 들어가면 제공하는 스타일들이 있는데 거기에 맞게 class를 부여하고 값을 써주면 된다.
부트스트랩 적용 예제 코드
<!-- 질문 -->
<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>
위에 작성된 것처럼 부트스트랩에 저장된 스타일에 맞는 class를 붙여넣고 적용시켰다.
CSS를 딥하게 작성할 때 말고 간단히 예쁘게만 만들 때 아주 편할듯하다.
📌 + CSS 연결 방법
부트스트랩을 사용해도 더 상세히 꾸미려면 css파일이 있는 것이 좋은데, 이런 경우 어떻게 연결하는지에 대한 방법을 간단히 서술하겠다.
1. 일단 STS 내 static폴더에 style.css파일을 하나 만들어준다.
2. html 내에 경로 심어주기
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
이런식으로 타임리프문법과 기존 문법들을 혼용한 link 태그를 심어주면 된다!
'Coding > Spring(Boot)' 카테고리의 다른 글
| [Spring Boot]Open api 데이터가 예상보다 적게 들어오는 경우 (0) | 2024.07.11 |
|---|---|
| [Spring Boot]Open api 데이터 용량 초과로 인한 불러오기 실패 문제 해결법 (0) | 2024.07.10 |
| [Spring Boot] STS4에서 html 파일 생성이 뜨지 않는 경우 해결법 (0) | 2024.06.21 |
| [Spring Boot] Mac에서 H2 database 연결하기 (STS4) (0) | 2024.06.20 |
| [Spring Boot] Mac STS4 lombok 임포트 안되는 문제 해결방법 (0) | 2024.06.20 |