[개인프로젝트] Garden of Books 책들의정원 5 (footer)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

 

오늘은 지난번 네비바 및 외부 스타일 적용 이후 푸터를 만들어보고자 합니다.

 

푸터 (footer)

<footer style="background-color: lightgrey; color: rgb(58, 58, 58);">
    <div class="container">
        <br>
        <div class="row">
            <div class="col-sm-2" style="text-align: center;"><h5>Copyright &copy; 2023</h5><h5>김소연</h5></h5></div>
            <div class="col-sm-4"><h4>대표자 소개</h4><p>저는 책들의 정원의 대표 김소연입니다. 저는 사람들에게 도움을 주고 유용한 기능을 구현할 수 있는 멋진 개발자가 되고 싶습니다.</p></div>
            <div class="col-sm-2"><h4 style="text-align: center;">네비게이션</h4>
                <div class="list-group">
                    <a href="#" class="list-group-item">소개</a>
                    <a href="#" class="list-group-item">베스트셀러</a>
                    <a href="#" class="list-group-item">새로나온 책</a>
                    <a href="#" class="list-group-item">도서목록</a>
                    <a href="#" class="list-group-item">고객센터</a>
                </div>
            </div>
            <div class="col-sm-2"><h4 style="text-align: center;">SNS</h4>
                <div class="list-group">
                    <a href="#" class="list-group-item">인스타그램</a>
                    <a href="#" class="list-group-item">유튜브</a>
                    <a href="#" class="list-group-item">네이버</a>
                </div>
            </div>
            <div class="col-sm-2"><h4 style="text-align: center;"><span class="glyphicon glyphicon-ok" style="color: gray;"></span>&nbsp; by 김소연</h4></div>
        </div>
    </div>
</footer>

지난번 네비바 만들었던 코드 아래에 footer 코드를 추가해줍니다.
이전에 만들어본 부트스트랩 활용 적용 포스팅에서 배웠던 부분이 사용됩니다.
한 줄의 여러개 열이 들어갈 수 있도록 해줄 수 있습니다. col으로 한줄의 구역을 부여할 수 있습니다. col의 구역은 총 12만큼의 구역을 가지고 있고 이를 나누면서 div박스 클래스 네임에 사용할 너비만큼의 숫자를 부여해줍니다.

그리고 h태그, p태그, span태그 등을 함께 사용할 수 있습니다.

span태그 안에 glyphicon-ok을 이용하여 체크 표시된 아이콘을 표현할 수 있습니다.
&nbsp을 이용하면 1칸에 해당하는 빈칸을 구현할 수 있습니다.

 

<화면 출력 모습>