23일차

프로젝트

23일차

사랑박 2023. 3. 14. 19:45

오늘은 Part 2. 게시판 서비스 강의의 `뷰에 디자인 붙이기` 부분을 학습하였다.

부트스트랩 example을 활용해서 뷰에 디자인을 입혔다. 백엔드를 공부하는 입장에서 최소한의 정도만 가이드를 따라서 프로젝트에 적용하였다. 부트스트랩을 따로 설치하지 않고 적용하는 방법을 선택하였는데 속도의 하락은 감수하기로 한다.

부트스트랩

부트스트랩은 반응형 웹페이지를 위한 무료 소프트웨어이며 HTML, CSSM JS 템플릿을 모아둔 프레임 워크이다.
프론트엔드를 공부하는 사람이라면 모르는 사람이 없을 것이다.
쉽게 말하면, 다른 사람이 만들어논 CSS를 가져와서 사용하는 것이다.

부트스트랩 사용법

부트스트랩 다운로드
CDN을 통해 불러오기

* CDN이란 웹사이트 서버가 아닌 다른 공유 공간에서 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다. 따라서 별도의 다운로드가 필요 없다.

프로젝트 헤더와 푸터에 부트스트랩 예제 적용

헤더 - https://getbootstrap.com/docs/5.3/examples/headers/

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Header template</title>
</head>
<body>
    <header class="p-3 bg-dark text-white">
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="/" class="nav-link px-2 text-secondary">Home</a></li>
                </ul>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-light me-2">Login</button>
                    <button type="button" class="btn btn-warning">Sign-up</button>
                </div>
            </div>
        </div>
    </header>
</body>
</html>

푸터 - https://getbootstrap.com/docs/5.3/examples/footers/

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Footer template</title>
</head>

<body>
    <footer class="container d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <p class="col-md-4 mb-0 text-muted">&copy; 2022 sarang682, Inc</p>

        <ul class="nav col-md-4 justify-content-end">
            <li class="nav-item"><a href="/" class="nav-link px-2 text-muted">Home</a></li>
        </ul>
    </footer>
</body>
</html>