Port 변경

서버를 실행 시킬 때 내장 톰캣은 8080으로 실행을 하게 됩니다. 하지만 8080은 사용하고 있는 프로그램이 많아서 충돌이 일어날 수 있어 포트 번호를 변경해줍니다.

application.properties에 아래 코드를 추가해줍니다.
server.port = 8088

이제 url을 입력하는 창에 localhost:8088을 입력하여 접속할 수 있습니다.

의존성 수정

아직은 DB 관련된 내용이 없기 때문에 jpa 의존성을 주입한채로 서버를 실행시키면 오류가 발생하게 돼서 jpa 관련 의존성은 일단 주석처리를 해줍니다.

BootStrap을 사용한 Index 페이지

resources.static 폴더에 index.html을 생성한 후
부트스트랩에서 https://getbootstrap.com/docs/5.3/examples/carousel/ 이 페이지를 가져와줍니다. Ctrl + u를 눌러 소스코드를 복사하여 붙여 넣으면 아직은 css가 적용되지 않은 페이지가 뜨게 됩니다.

여기에 css 서식과 js가 적용되게 하기 위해 CDN을 추가해줍니다.

css 관련 CDN은 head에 넣어주고 js는 body 부분에 넣어줍니다.

CSS CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

JS CDN

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

소스 코드 다운

BootStrap에서 상단 메뉴바에 있는 Examples를 클릭하고 소스 코드를 다운로드 해줍니다.

resource.static 밑에 css, js 폴더를 생성합니다.
css 폴더 아래에는 다운로드한 코드 중에 carousel.css 코드를 붙여 넣어줍니다.

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: rgb(var(--bs-tertiary-color-rgb));
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
    letter-spacing: -.05rem;
}

/* rtl:end:remove */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
    .featurette-heading {
        margin-top: 7rem;
    }
}

js 폴더 아래에는 color-modes.js 코드를 찾아서 넣어줍니다.

/*!
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
    'use strict'

    const getStoredTheme = () => localStorage.getItem('theme')
    const setStoredTheme = theme => localStorage.setItem('theme', theme)

    const getPreferredTheme = () => {
        const storedTheme = getStoredTheme()
        if (storedTheme) {
            return storedTheme
        }

        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    const setTheme = theme => {
        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark')
        } else {
            document.documentElement.setAttribute('data-bs-theme', theme)
        }
    }

    setTheme(getPreferredTheme())

    const showActiveTheme = (theme, focus = false) => {
        const themeSwitcher = document.querySelector('#bd-theme')

        if (!themeSwitcher) {
            return
        }

        const themeSwitcherText = document.querySelector('#bd-theme-text')
        const activeThemeIcon = document.querySelector('.theme-icon-active use')
        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
            element.classList.remove('active')
            element.setAttribute('aria-pressed', 'false')
        })

        btnToActive.classList.add('active')
        btnToActive.setAttribute('aria-pressed', 'true')
        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

        if (focus) {
            themeSwitcher.focus()
        }
    }

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        const storedTheme = getStoredTheme()
        if (storedTheme !== 'light' && storedTheme !== 'dark') {
            setTheme(getPreferredTheme())
        }
    })

    window.addEventListener('DOMContentLoaded', () => {
        showActiveTheme(getPreferredTheme())

        document.querySelectorAll('[data-bs-theme-value]')
            .forEach(toggle => {
                toggle.addEventListener('click', () => {
                    const theme = toggle.getAttribute('data-bs-theme-value')
                    setStoredTheme(theme)
                    setTheme(theme)
                    showActiveTheme(theme, true)
                })
            })
    })
})()

지금 상태에서는 style에서 --bs-white를 찾지 못하는 문제가 있습니다. --bs-white의 값을 bootstrap 문서에서 찾아서 넣어줍니다.

:root {
            --bs-white: #fff;
        }

파비콘 설정

파비콘은 웹 사이트에 표시되는 아이콘입니다.

파비콘을 설정하기 위해 구글에서 하트 모양 사진을 검색 후 이미지 주소를 복사해줍니다.

그 후 파비콘 부분에 아래처럼 코드를 작성해줍니다.

link href="data:image/jpeg;base64,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"
          rel="icon">