본문 바로가기
SpringBoot

[연재] SpringBoot diary - BootStrap 을 이용한 html 페이지 구성

iwoohaha 2024. 3. 21. 20:49
728x90
반응형

원문은 Bootstrap 을 이용한 html 페이지 구성 에서 확인할 수 있습니다.

 

html 페이지를 구성할 때 기본적인 태그만으로도 가능하다. 그런데 예쁘지 않다!!!

예쁘게 구성하려면 CSS 가 필요하다. 간혹 이벤트를 처리하기 위해서 JS 도 필요하다.

Bootstrap 은 CSS, JS 를 사용하여 예쁘게 html 을 구성할 수 있게 해준다.

https://getbootstrap.com/

Bootstrap 에서 제공하는 CSS, JS 를 이용하기 위해서 html 에 링크를 삽입해줘야 한다.

CSS

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous"
    >
    <!-- -->

위 코드를 삽입해줄 부분은 html 코드의 <head> </head> 영역이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- 모바일에서의 적절한 반응형 동작을 위해 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- -->

    <title>Title</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous"
    >
    <!-- -->

</head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″> 코드는 모바일에서 적절한 반응형 동작을 위한 태그이다.

JS

자바스크립트 번들(드롭다운, 팝오버 및 툴팁 위치 지정을 위한 Popper 포함)을 위해서 자바스크립트를 삽입할 필요가 있다.

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
</script>
<!-- -->

이 스크립트가 추가될 영역은 </body> 바로 앞이다.

<body>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
</script>
<!-- -->

</body>
</html>

Popper 와 JS 를 나누어 포함시키는 방법도 있다.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

Bootstrap 을 사용하기 위해서 필요한 기본적인 코드가 삽입된 템플릿 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- 모바일에서의 적절한 반응형 동작을 위해 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- -->


    <title>Title</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous"
    >
    <!-- -->

</head>
<body>

<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
        crossorigin="anonymous"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" 
        integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" 
        crossorigin="anonymous"></script>

</body>
</html>

폼 구성해보기

study.diary 프로젝트에서 작성한 일기내용 작성 폼 html 을 Bootstrap 을 이용해서 꾸며볼 생각이야.

원래 코드 대비해서 추가된 코드를 굵은 글꼴로 표시해뒀으니 참고해.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- 모바일에서의 적절한 반응형 동작을 위해 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- -->


    <title>Diary Form</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous"
    >
    <!-- -->

</head>
<body>

<div class="container">

<form action="/diary" method="POST">
    <div class="mb-3">
    <label for="date" class="form-label">날짜:</label>
    <input type="text" class="form-control" id="date" name="date" />
    </div>
    <div class="mb-3">
    <label for="content" class="form-label">내용:</label>
    <textarea class="form-control" rows="10" id="content" name="content"></textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="저장" />
</form>

</div>

<!-- Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
        crossorigin="anonymous"></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
        integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
        crossorigin="anonymous"></script>


</body>
</html>

이렇게 코드를 추가한 html 의 모습은 아래와 같아.

반응형

'SpringBoot' 카테고리의 다른 글

[연재] SpringBoot diary - UI 개선 front-end (bootstrap + thymeleaf)  (0) 2024.03.23
[연재] SpringBoot diary - mybatis resultType="map"  (1) 2024.03.23
[연재] SpringBoot diary - mybatis  (0) 2024.03.21
spring boot : file upload – form enctype  (1) 2024.03.05
spring boot + gradle Project 만들기  (0) 2024.03.05

'SpringBoot' Related Articles

티스토리툴바