프로젝트 생성하자. 일단 기본적으로 늘 사용해왔던 6개 항목을 체크하여 만 프로젝트를 생성해주었다.
프로젝트 생성후 셋팅하고 가져와 줄것들
1
application.properties 파일에 이전에 사용했던 것들을 가지고온 후 username을 이번 DB에 저장한 이름으로 바꿔준다.
2
mappers와 log4jdbc.log4j2.propertis 파일, logback.xml 파일을 복사해서 가지고와준다.
이후 mapper에 있는 xml 파일을 비워준다.
3
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' // fragment 사용하기 위해 추가
implementation 'org.bgee.log4jdbc-log4j2:log4jdbc-log4j2-jdbc4:1.16' // 쿼리 로그 라이브러리
build.gradle 파일로 와서 두개 코드를 복사해서 가지고 온다.
이후 프로젝트에서 Gradle 을 해주는 것을 잊지 말자.
셋팅을 해보자. templates 파일안에서 content, fragment 등과 같이 폴더와 html을 만들었다.
admin_layout.html에는 기본적으로 위와 같이 기본적으로 셋팅을 해준다. 여기서 조금씩 바꿔나갈 것들이다.
메뉴나 사이드처럼 고정적으로 열리는 것은 th:replace를 사용하는 것이다.
기준은 template 폴더이다. :: 뒤의 내용은 이름 설정한 것을 맞춰준 것이다.
header.html
admin_side.html
reg_item.html
layout : fragment는 내용과 같이 매번 바뀌므로 이렇게 사용한다.
그리고 컨트롤러에서는 반드시
content의 admin안에있는 reg_item이 html로 열리도록 경로를 줘야 모두 실행된다.
/css/common.css 로 가서 폰트를 적용해보자
눈누
상업용 무료한글폰트 사이트
noonnu.cc
눈누에서 폰트를 다운받아왔다.
admin_layout.html에서 class 이름을 container로 준것은 하나의 약속이다. 부트스트랩에서 쓰는 것이니
반드시 이름을 이렇게 설정하자.
부트스트랩은 class가 container 안에 있는 것을 적용하라고 한다.
부트스트랩의 col은 내부적으로 행을 12등분을 한다. 아무 설정을 안해주면 각각 일정한 비율로 나뉜다.
admin_layout.html
따라서 class="col"에 각각 col-3 과 col-9를 줘보았다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- bootstrap css 로딩 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <!-- admin_layout과 열리는 모든 페이지에 공통 적용되는 css --> <link rel="stylesheet" href="/css/common.css"> <!-- content 페이지가 열릴 때 같이 열리는 css 이다. --> <th:block layout:fragment="content_css"></th:block> </head> <body> <div class="container"> <div class="row"> <!-- 행 --> <div class="col"> <th:block th:replace="~{fragment/header::headerFragment}"></th:block> </div> <!-- 열 --> </div> <div class="row"> <div class="col-3"> <th:block th:replace="~{fragment/admin_side::adminSideFragment}"></th:block> </div> <div class="col-9"> <th:block layout:fragment="content"></th:block> </div> </div> </div> <!-- jquery 문법 로딩 --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <!-- bootstrap js 로딩 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <!-- content 페이지가 열릴 때 같이 열리는 js 이다. --> <th:block layout:fragment="content_js"></th:block> </body> </html> | cs |
header를 손봐주자.
이렇게 bootstrap을 사용해서 디자인을 해주는데, 디자인이 따로 필요한 것은 class명을 따로 지정해주고,
admin_layout에 가서 경로를 지정한 후,
부트스트랩에서 위 Nav 바를 복사해와서
메뉴가 있는 곳에 복사 붙여넣기를 해준다. 이후 라인을 맞추기 위해 컨트롤 + 쉬프트 + F 를 눌러주면 자동으로 맞춰진다.
해당 List group에 있는 Active items의 코드값들을 복사해와서
admin_side.html
이곳에 붙여넣기를 해준다.
그럼 위와 같이 깔끔하게 페이지가 만들어진 것을 확인해 볼 수 있다.
부트스트랩에서 테이블 코드도 하나 복사해오자.
cate-manage.html
cate-manage.html 파일의 해당 빨간 박스 부분에 붙여넣기하자.
쇼핑몰 프로젝트에서 본격적으로 데이터를 주고 받기 까지 레이아웃 구성과 부트스트랩을 통해 디자인을 완성해보았다.
'✨ Back-end > Spring-Boot' 카테고리의 다른 글
| [Spring] 쇼핑몰 -3 카테고리 등록 (INSERT) (0) | 2023.03.26 |
|---|---|
| [Spring] 쇼핑몰 -2 카테고리 조회 (SELECT) (0) | 2023.03.26 |
| [Spring] 보드게시판 만들기(10) 비밀글 여부 표시하기 ****** (0) | 2023.03.26 |
| [Spring] 보드게시판 만들기(9) 게시글 삭제하기 (0) | 2023.03.26 |
| [Spring] 보드게시판 만들기(8) 댓글 Session 삭제, 수정 (0) | 2023.03.26 |
댓글