[프로젝트/JAVA] 3일차 - static경로 설정해주기

728x90

2021.05.16

31번째 포스팅

입사 69일차.

오늘은 스프링부트 + 타임리프에서 static의 경로를 설정해보려고 한다.

일반적으로 이미지, css, 자바스크립트는 static안에 폴더를 만들어서 관리한다.

css와 javascript를 따로 common.css, common.js로 만들어서 관리하면 여러 html에서 공통으로 사용하는 파일들을 쉽게 관리할 수 있다.

1. static 경로설정

① src/main/resources > application.properties를 열어 아래의 코드를 추가하자.

spring.web.resources.static-locations=classpath:static/

2. css 만들기

① src/main/resources > static 폴더에 css, img, js폴더를 만들어주자.

② static 폴더에 마우스 오른쪽 버튼을 누른 후, New > Folder를 눌러주면 된다.

③ 만들어진 css폴더에 common.css를 만들어주자.

④ New < File을 클릭해준 후, 파일 이름에 common.css를 입력해주자.

3. html에 css경로 설정하기

① 지난시간에 만들었던 <style>태그안의 h1관련 css를 common.css로 옮겨주자.

② common.css에 코드를 옮겨주자.

③ main.html에 css의 경로를 설정해주자. 일반적으로 <head>태그 밑에 입력해준다.

④ 타임리프에서는 기존의 스프링프로젝트와 조금 다른 형식이다.

⑤ <link th:href="@{staic 이후의 경로}" rel="stylesheet" /> 이 형식이 기본형식이다.

⑥ 서버를 실행해서 common.css의 경로와 css가 제대로 적용되었는지 확인해보자.

＊ css가 제대로 적용되지 않는다면,

1) main.html과 common.css의 내용을 수정한 후, 저장을 했는지 확인한다.

2) 추가한 코드들에 오타가 없는지 확인한다.

3) 캐시를 삭제한 후, 서버를 다시 시작해본다.

다음시간에는 id와 class의 적용 및 이중클래스 적용에 대해서 작성해보려고 한다.

다음포스팅의 주제

[프로젝트/JAVA] 4일차 - Controller

2021.05.19 32번째 포스팅 입사 72일차. 오늘은 Controller를 만들어 주소를 만들고, 주소를 매핑하는 방법을 알아보려고 한다. Controller는 웹페이지에서 사용할 주소를 만들고, 연결시켜준다고 생각하

limreus.tistory.com

728x90