728x90
반응형
개인프로젝트 - BucketList
요구사항 정의서, 기능정의서, 화면구성도는 추후 작성할 예정.
기능 및 페이지
- 메인 - 버킷리스트 메인페이지 - 회원가입, 친구추가, 공개 & 비공개 만들예정
UI 구성중 바로 적용시켜 보려고 인텔리제이에 바로 바로 적용하면서 만들어 보는중.
- 처음부터 보기 편하기 위해서 하나하나 나누어서 작성, 그전에는 한 html 이나 전부 다 넣어두고 다하고 빼려고 하다보니 불편하여 미리미리 빼면서 하는 작업을 진행함.
- 주석을 바로바로 어느부분인지 작성하여 보기 편하게 진행중.
controller로 화면을 띄워서 보기 위해 maincontroller 만들어서 연결.
package com.MyProject.BucketList.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MainController {
@GetMapping({"/"})
public String main(Model model) {
return "main";
}
}
Main.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My BucketList</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- 헤더 -->
<header th:insert="header.html"></header>
<!--친구추가-->
<div class="search-group">
<input type="search" name="friend-seach">
<button class="searchBtn">친구추가</button>
</div>
<!--버킷리스트 추가 -->
<div class="list-group">
<div class="bucketlist">
<input id="bucket-search" type="search" name="bucket-search" placeholder="이루고 싶은 목표를 입력하세요!">
<button class="bucketBtn">버킷리스트 등록</button>
</div>
</div>
<!-- content 영역 -->
<div class="content">
</div>
</body>
</html>
728x90
반응형
'프로젝트' 카테고리의 다른 글
| 개인프로젝트 - BucketList - 1 (0) | 2023.07.25 |
|---|---|
| 1개월 프로젝트 - 2023/05/01 ~ 2023/05/31 (0) | 2023.05.05 |
| 2주 프로젝트 - 12일차, 13일차 (0) | 2023.04.23 |
| 2주 프로젝트 - 11일차 (0) | 2023.04.23 |
| 2주 프로젝트 - 10일차 (0) | 2023.04.20 |