[giruboy] bootstrap 템플릿 커스터마이징

현재 프로젝트의 테마는 startbootstrap에서의 포트폴리오 테마를 이용중인데 Footer의 내용과 구성을 커스터마이징 할 필요가 있어 bootstrap의 class들을 이용하여 아래와 같이 코드를 수정하였다.

<변경 전>

<footer class="footer py-4">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4 text-lg-start">Copyright &copy; Your Website 2022</div>
            <div class="col-lg-4 my-3 my-lg-0">
                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Twitter"><i
                        class="fab fa-twitter"></i></a>
                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Facebook"><i
                        class="fab fa-facebook-f"></i></a>
                <a class="btn btn-dark btn-social mx-2" href="#!" aria-label="LinkedIn"><i
                        class="fab fa-linkedin-in"></i></a>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a>
                <a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
            </div>
        </div>
    </div>
</footer>

<변경 후>

<footer class="footer pt-0 btn-dark">
    <div class="container">
        <div class="row">
            <span class="row-cols-lg-4 text-lg-start navbar-brand fw-bold link-warning">SHARE BLOG</span>

            <div class="row-cols-lg-4 text-lg-start mt-1">
                <span class="text-decoration-none me-3">******  |</span>
                <span class="text-decoration-none me-3" href="#!">**************</span>
                <a class="text-decoration-none me-3 link-light" href="https://github.com/toughhyeok/vue-django-blog/" target="_blank">Github</a>
                <a class="text-decoration-none me-3 link-light" href="https://hotamul.tistory.com/" target="_blank">Blog</a>
            </div>

            <div class="row-cols-lg-4 text-lg-start">
                <span class="text-decoration-none me-3">****** |</span>
                <span class="text-decoration-none me-3" href="#!">************</span>
                <a class="text-decoration-none me-3 link-light" href="https://github.com/giruboy" target="_blank">Github</a>
                <a class="text-decoration-none me-3 link-light" href="https://velog.io/@cgw7976" target="_blank">Blog</a>
            </div>
            <div class="col-lg-4 text-lg-start mt-2">2022. ******* all rights reserved.</div>
        </div>
    </div>
</footer>

+)혹시 모를 보안을 위해 웹페이지에 들어가는 text들은 * 처리 하였다.

참고로 기반이 되었던 bootstrap은 링크와 같다.

이와 같이 bootstrap의 class들을 이용하면 테마를 사용자에 맞게 쉽게 수정할 수 있으나 원하는 기능에 맞게 bootstrap의 class들을 찾아야 한다. 예를 들어, font-size를 변경 원하는 경우 style.css 파일에서 ctrl+f키를 통한 font-size 검색 후 원하는 class를 찾아 html에 적용시켜주는 것이다.