spring boot에서 templates폴더는 view엔진이 thymeleaf파일들을 저장해두는 폴더이다.
static폴더는 content들을 두는 곳으로 보통 이미지, css나 js파일을 저장하는 두는 폴더이다.
하지만 localhost:8080으로 접속했을때 기본적으로 spring boot에서 불러오는 파일은 static>index.html파일이다.
application.properties은 웹 애플리케이션을 실행하면서 자동으로 로딩되는 파일이다.
톰캣설정, 데이터베이스설정 등등을 웹 애플리케이션을 실행할때 자동으로 로딩하면서 설정하고 시작할 수 있다.
templates>boardWrite.html이라는 파일을 하나 만들어준다.
boardWrite.html파일은 아래 코드와 같이 작성해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<body>
<div class="layout">
<input type="text">
<textarea></textarea>
<button>작성</button>
</div>
</body>
</html>
이제 희한한 구성인 이 상태를 css 코드를 통해 이렇게 바꾸어준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<style>
.layout{
<!-- 크기는 500px-->
width : 500px;
<!-- 위아래 0 양옆은 자동으로-->
margin : 0 auto;
margin-top : 40px;
}
.layout > input {
width : 100%;
box-sizing : border-box;
}
.layout > textarea{
width:100%;
margin-top:10px;
min-height:100px;
}
</style>
<body>
<div class="layout">
<input type="text">
<textarea></textarea>
<button>작성</button>
</div>
</body>
</html>box-sizing: border-box;는 500px에 맞추어 안쪽으로 들어가는 그런 설정이다.
box-sizing: content-box는 500px 바깥으로 둘러싸는 그런 설정이다.
아래 링크를 참고하자
https://www.codingfactory.net/10630
CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit conten
www.codingfactory.net
이제 이 boardWrite.html이 어느 링크일때 실행이 될 것인지를 작성해 주기 위해 boardController를 작성해준다.
저번에 작성한 hello world 지워버리고 아래와 같이 작성해준다.
package com.study.board.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class BoardController {
@GetMapping("/board/write")//localhost:8080/board/write
public String boardWriteForm(){
return "boardWrite";
}
}@GetMapping을 통해 boardWrite.html파일은 url이 localhost:8090/board/write일때 불러오게 된다.
return "boardWrite"를 통해 templates>boardWrite.html파일로 이동할 수 있도록 한다.
(근데 .html을 떼고 들어가네)
아직 디자인이 거지 같지만 이게 아직 css를 잘 모르는 내 한계다 일단 이렇게 거지 같은 게시판 만들어두고 css 공부를 해서 보강해야겠다
'spring boot를 이용한 게시판' 카테고리의 다른 글
| 게시글 리스트 (0) | 2023.01.27 |
|---|---|
| 게시글 DB에 저장하기 (0) | 2023.01.26 |
| maria db에 테이블 생성하기 (0) | 2023.01.25 |
| spring boot 프로젝트 생성하기 (0) | 2023.01.25 |
| mysql workbench 설치하고 스키마 만들기 (0) | 2023.01.25 |
