반응형
👋 들어가기 전
뜬금 없지만, 요즘 이메일 내용들이 날이 갈수록 화려해지고 있다..
이제 제목, 본문, 파일정도의 내용으로는 만족할 수 없다.
그래서 이 구현과정이 매우 궁금했고, 찾아보니 스프링의 타임리프 템플릿 엔진을
통해 해당 기능을 구현할 수 있다고한다.
템플릿을 쓴다는건 당연히 html+css 조합을 사용한다는 것이므로, template에 css를 적용하는 법을
이번 포스팅에서 간단히 알아보자.
문법 내용은 많이 다루지 않을 예정... 요즘 AI가 훨씬 잘 알려준다.
🗂️ css 파일 선언 위치 및 연결
- 스프링에서는 resources/static 디렉토리 안에 선언한다.
🎨 부트스트랩 연결하기
💡 부트스트랩이란?
웹사이트를 쉽고 빠르게 만들 수 있게 도와주는 오픈소스 프런트엔트 프레임워크
Twitter 개발자들이 처음만들었다고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>디테일</title>
<head>
<meta charset="UTF-8">
<title>My Spring Page</title>
<!--부트스트랩 연결-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- 로컬 CSS 연결-->
<link rel="stylesheet" th:href="@{/style.css}">
</head>
</head>
<body>
<!--부트스트랩 연결-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>출처
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
반응형