Spring Boot - BootStrap 이용하기

2022-07-28(29일차)

---

💁‍♀️ 부트스트랩을 이용해봅시다.

◾ 부트스트랩을 사용하려면 필요한 요소가 'container' 입니다. 상위 요소에 container 클래스를 지정해주세요.

---

◾  row 안에 들어가는 아이템의 col-md-숫자 값의 합은 12 가 되어야합니다.

---

💡 CSS, JS 추가

🔸 CSS 파일 - head
 <link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.min.css">

🔸 JS 파일 - body 끝나기 전 
 <script src="./bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js">

◾ 스크립트는 페이지가 만들어지고 밑에 넣어주어야 한다.
◾ 스크립트 실행 자체를 페이지 로드 후에 실행하도록 한다.

---

📂 부트스트랩 파일

◾ example파일은 html

◾ dist파일은 css, js

 

⭐CSS, JS는 static이 최상단 파일이고, html은 templetes가 최상단 파일이다.

bootstrap-5.0.2-examples.zip

1.19MB

bootstrap-5.0.2-dist.zip

1.26MB

---

💡 부트스트랩 위치 변경

◾ shop/src/main/resources/static/bootstrap-5.0.2-dist

◾ dist 파일은 하단에 넣어준다.

정적 파일

---

◾ src/main/resources/templetes/member/memberLoginForm.html

◾ 해당 파일을 부트스트랩을 이용하여 수정할 것이다.

---

◾ CSS를 추가한다.

 <!-- Bootstrap core CSS -->
<link href="/bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    
     <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

◾ 하나씩 추가하는 과정이다.

---

◾ CSS의 경로를 바꿔준다.

◾ CSS의 경로는 shop/src/main/resources/static 안에 넣어준다.

---

◾ <main> 태그로 <form> 태그를 감싸고 있으므로 추가한다.

---

◾ 로고를 추가하였으므로 이미지의 경로를 바꿔준다.

◾ bootstrap-5.0.2-examples/assets/brand --> shop/src/main/resources/static/images/bootstrap-logo.svg

◾ 경로를 바꿔서 추가한다.

◾ src = "/images/bootstrap-logo.svg"

---

💁‍♀️ 지금까지는 본래 있던 html안에 부트스트랩을 뽑아서 추가해 보았는데, 이번에는 만들어진 파일에서 해보겠습니다.

◾ example폴더에 있던 sign-in폴더를 shop/src/main/resources/templates/sign-in 경로로 넣어준다.

◾ CSS, JS, img 파일도 필요하므로 assets을 복사해서 shop/src/main/resources/static/assets 경로로 넣어준다.

◾ 편의상 sign-in 안에 있는 index.html폴더를 desing.html로 바꾼다.

---

◾ TestController.java 파일 안에 @GetMapping으로 /test03 url에 접근했을 때 design.html을 띄운다.

---

◾ CSS의 경로를 수정한다.

---

▪️ CSS가 적용되지 않아서 signin.css의 경로를 확인하고 파일을 추가합니다.

▪️ 경로 수정

▪️ css가 적용된 것을 확인할 수 있다.

 

---

https://codepen.io/

CodePen

https://getbootstrap.com/docs/5.0/examples/

Examples

 

https://replit.com/

The collaborative browser based IDE

https://replit.com/languages/java10

Java Online Compiler & Interpreter

---