본문 바로가기
Spring Framework

스프링 부트 css, js 파일 따로 배치하는 방법. 폴더구조

by 자유코딩 2018. 9. 8.

한눈에 보는 스프링 부트 폴더구조

 

포인트만 짚겠다.

 

그냥 복붙하면 바로 css읽는데 문제가 없게 해드리겠습니다.

 

첫 번

src/main/java 파일 안에 컨트롤러 , 서비스 등등의 클래스가 들어간다.

PrimianbootApplication.java 라는 파일이 있다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
package com.primianboot;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;
 
@SpringBootApplication
public class PrimianbootApplication extends WebMvcConfigurerAdapter{
 
    public static void main(String[] args) {
        SpringApplication.run(PrimianbootApplication.class, args);
    }
    
    @Bean
    public ViewResolver viewResolver() {
        ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
        templateResolver.setTemplateMode("XHTML");
        templateResolver.setPrefix("templates/");
        templateResolver.setSuffix(".html");
        SpringTemplateEngine engine = new SpringTemplateEngine();
        engine.setTemplateResolver(templateResolver);
 
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(engine);
        return viewResolver;        
    }
}
 
 
 
 
cs

 

 

@Bean아래 viewResolver 내용을 그대로 씁니다.

setPrefix 는 폴더 경로입니다. 프로젝트 상황에 맞게 고치세요

setSuffix 는 여러분의 웹페이지 파일 확장자입니다. jsp 인지 html인지 맞춰서 고치세요.

 

@SpringBootApplication 애너테이션이 붙어있는 클래스는

 

무조건 컨트롤러 클래스보다 한 단계 바깥에 놓으세요.

 

 

두 번째

src/main/resources

여기는 웹페이지 , css를 놓는 곳이다.

static 폴더 안에는 css 폴더를 넣으면 된다.

templates에는 웹페이지가 들어간다.

 

이제

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<title>index</title>
  <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 
    <!-- Custom Fonts -->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"/>
    <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css"/>
 
    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.min.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
</head>
cs

 

웹페이지 head 부분에 static/ *** /***

 

static 폴더 다음부터 경로를 입력하세요

 

예를 들어서 vendor / bootstrap / .. / ..

 

 

 

 

 

댓글