티스토리 뷰

Back-end/Spring Boot

[게시판 개발하기] 뷰 만들기

jhkang-dev 2023. 5. 8. 00:29

[BootStrap 다운받기]

https://getbootstrap.com/docs/5.3/getting-started/introduction/

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

- 부트스트랩은 CDN 방식으로 다운 받을 수 있다. 이 경우 서버가 올라갈 때 인터넷을 통해서 부트스트랩을 다운 받는 방법이기 때문에 시간이 오래 걸린다. 그래서 서버내 폴더에 라이브러리를 다운 받는 방법도 있다. 하지만 이번 내 프로젝트에서는 CDN 방식 사용.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

 

 

[부트스트랩 적용하기 위한 시작]

 <main class="container">

이렇게 클래스에 컨테이너를 넣어주고 부트스트랩 코드를 작성해야 한다.

https://getbootstrap.kr/docs/5.0/layout/containers/

 

컨테이너

컨테이너는 지정된 기기 또는 뷰포트 내에서 콘텐츠를 포함하고 채우고 정렬하는 Bootstrap의 기본 구성 요소입니다.

getbootstrap.kr

 

[CSS 적용]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>게시판 페이지</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <link href="/css/search-bar.css" rel="stylesheet">

</head>

위와 같이 특정 폴더에 CSS 파일만 모아두고 링크를 걸어서 가져오게끔한다.

아래 사진이 CSS 파일이 있는 폴더이다.

 

저작자표시

'Back-end > Spring Boot' 카테고리의 다른 글

[게시판 만들기] 추가해야 할 코드  (0) 2023.05.14
[게시판페이지] 게시판 페이지 기능테스트  (0) 2023.05.14
[게시판 만들기] rebase merge  (0) 2023.05.07
09. 게시글 페이지 만들기  (0) 2023.04.05
[게시판 플젝] Querydsl 의존성 추가 및 api 검색 옵션 추가  (0) 2023.04.01
댓글