게시판 구도 계획
<게시판 만들기 순서>
1. 기본 게시판
- 답변형
- 데이터 처리 게시판
- 검색기능
2. 기본 게시판을 업데이트
<erp시스템 - view 종류>
1. 리스트 보기
2. 상세보기
3. 글쓰기
4. 수정화면
게시판 만들기(1) - 레이아웃 템플릿 생성하기
1. 필요없는 파일 먼저 삭제하기
(1) src/main/java -> controller패키지에 들어있던 homeController삭제
(2) src-> webapp -> views -> home.jsp도 삭제
2. 리스트를 보기위한 UI 탬플릿 만들기
- Views 폴더에 board 폴더 생성
- board 폴더에 template.jsp 파일 생성
- appServlet 폴더에 member 폴더 생성
3. 레이아웃 설정하기
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
-> Tutorial
-> Learn BootStrap
-> B4클릭
-> BS4 Cards 클릭
기본적으로 부트스트랩을 사용할려면 링크를 걸어야함
하단 내려서
-> try it yourself 클릭
전체 복사하여 template.jsp파일에 붙여넣기
이제 , 안에 내용은 자유롭게 본인이 변경
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Spring MVC01</h2>
<div class="card">
<div class="card-header">BOARD</div>
<div class="card-body">Content</div>
<div class="card-footer">AI.BigData 취업역량강화_조정은</div>
</div>
</div>
</body>
</html>
'스마트인재개발원 > Spring' 카테고리의 다른 글
| [Spring] 게시판 만들기(2) - 리스트 레이아웃 만들기 (0) | 2022.10.19 |
|---|---|
| [Spring]오류- Save could not be complete. Try file->save as... if the problem persists. (0) | 2022.10.19 |
| [Spring]API 버전 추가하기 (0) | 2022.10.19 |
| [Spring] pom.xml이용하여 springframework버전 바꾸기/ 자바 버전바꾸기 / 업데이트 하는법 (0) | 2022.10.19 |
| [Spring]스프링 Run as 실행오류/ web.xml 오류 / Tomcat오류 (0) | 2022.10.19 |
