[프로젝트/JAVA] 3일차 - static경로 설정해주기
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로 옮겨주자.
<style>태그는 그대로 둔 채, h1관련 스타일 설정 코드만 옮겨야한다.
② common.css에 코드를 옮겨주자.
③ main.html에 css의 경로를 설정해주자. 일반적으로 <head>태그 밑에 입력해준다.
④ 타임리프에서는 기존의 스프링프로젝트와 조금 다른 형식이다.
⑤ <link th:href="@{staic 이후의 경로}" rel="stylesheet" /> 이 형식이 기본형식이다.
| <link th:href="@{/css/common.css}" rel="stylesheet" /> |
⑥ 서버를 실행해서 common.css의 경로와 css가 제대로 적용되었는지 확인해보자.
＊ css가 제대로 적용되지 않는다면,
1) main.html과 common.css의 내용을 수정한 후, 저장을 했는지 확인한다.
2) 추가한 코드들에 오타가 없는지 확인한다.
3) 캐시를 삭제한 후, 서버를 다시 시작해본다.
다음시간에는 id와 class의 적용 및 이중클래스 적용에 대해서 작성해보려고 한다.
다음포스팅의 주제
https://limreus.tistory.com/37?category=992550
[프로젝트/JAVA] 4일차 - Controller
2021.05.19 32번째 포스팅 입사 72일차. 오늘은 Controller를 만들어 주소를 만들고, 주소를 매핑하는 방법을 알아보려고 한다. Controller는 웹페이지에서 사용할 주소를 만들고, 연결시켜준다고 생각하
limreus.tistory.com
'포트폴리오 > CCS' 카테고리의 다른 글
| [프로젝트/DB] 5일차 - MySQL 설치하기 (0) | 2021.05.25 |
|---|---|
| [프로젝트/JAVA] 4일차 - Controller (0) | 2021.05.19 |
| [프로젝트/JAVA] 3일차 - package, html, css (0) | 2021.05.12 |
| [프로젝트/JAVA] 2일차 - 개발환경구성 (템플릿엔진, DB) (0) | 2021.05.05 |
| [프로젝트/Kotlin] 1일차 - 개발환경구성 (0) | 2021.04.28 |
