1. build.gradle 의존성 추가
타임리프 레이아웃 기능을 사용하려면 thymeleaf-layout-dialect가 필수임. 없으면 layout:decorate 속성이 무시됨.
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'2. 기본 레이아웃 HTML 설정
레이아웃 파일(부모)에서 xmlns:layout 선언과 CSS 경로 설정이 정확해야 함.
파일: src/main/resources/templates/layout.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<link rel="stylesheet" th:href="@{/css/layout.css}">
<meta charset="UTF-8">
<title>Layout</title>
<th:block layout:fragment="css"></th:block>
<th:block layout:fragment="script"></th:block>
</head>
<body class="layout-body">
<div th:replace="fragments/header :: header"></div>
<main class="layout-content" layout:fragment="content"></main>
<footer class="layout-footer"
th:replace="fragments/footer :: footer">
</footer>
</body>
</html>
3. 정적 파일(CSS) 위치 확인
CSS 파일은 templates가 아닌 static 폴더에 위치해야 함.
• 올바른 경로: src/main/resources/static/css/style.css
html, body {
height: 100%;
margin: 0;
}
.layout-body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.layout-content {
flex: 1;
padding: 20px;
}
.layout-footer {
text-align: center;
padding: 15px 0;
background-color: #f5f5f5;
font-size: 20px;
color: #555;
}
4. Spring Security 설정 (CSS 차단 문제 해결)
Spring Security를 사용 중이라면 보안 설정 때문에 CSS 파일 접근이 막힐 수 있음. 정적 리소스에 대한 접근 권한을 열어줘야 함.
/* 🔐 Security Filter Chain */
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.authenticationProvider(authenticationProvider())
//csrf-> cross Site Request Forgery ...로그인 상태에서 요청을
// 보내게 만드는 공격...은행에서 로그인시 악성 사이트 접근 방지
//하기 위해 부트는 csrf토큰을 사용함!!..입력시 이부분을 추가해야 됨
.csrf(csrf -> csrf.disable())
.authorizeHttpRequests(auth -> auth
.requestMatchers("/", "/memberInput",
"/memInsert", "/login","/scoresave",
"/image/**").permitAll()
//관리자 전용페이지
.requestMatchers("/admin/**").hasRole("ADMIN")
.requestMatchers("/user/**").hasAnyRole("USER", "ADMIN")
.anyRequest().authenticated()
)
5. 기타
(1) css. 에서 html 여부
html, body {
height: 100%;
margin: 0;
}
(2) top 에서 fragment 여부
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:fragment="menu"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
(3) 타임리프식 표현을 했는지 여부
(4) layout 에서 css.적용 + header(top:menu), main, footer 적용 되고 있는 지 확인
끝.
'AI딥러닝 > SporingBoot' 카테고리의 다른 글
| SpringBoot Thymleaf Oracle' Image CRUD+S 처리하는 법 (0) | 2026.01.10 |
|---|---|
| 스프링부트 엔티티와 인터페이스로 페이징 처리기술 (0) | 2026.01.10 |
| Spring Boot, 초보개발자 API 정복하기! (0) | 2026.01.09 |
| Spring Security를 활용한 로그인 및 로그아웃 구현 (0) | 2026.01.06 |
| 스프링부트 권한주기 메뉴제어하기 Kakao Map API 연동하기 (0) | 2026.01.02 |