[개인프로젝트] Garden of Books 책들의정원 11(리스트 그룹 - 게시판 리스트)

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

 

리스트 그룹이란 같은 성질을 가진 목록을 담는 그릇 같은 것입니다.
각각의 목록은 링크를 통해 이동이 가능합니다.

한 번 만들어 볼까요?

 

리스트 그룹의 링크 확인하기

앞전에 제가 boolList와 book으로 html을 나뉘어지게 작성해놨었는데, ul > li의 a태그 링크를 bookList.html로 바꿔주고 작업하였습니다.

다른 분들도 해당 html작업을 하기전 내가 작성한 드롭바의 링크속 html과 내가 작성하는 html명이 일치하는지 확인후 작업해주세요.

 

리스트 그룹 만들기

<div class="container">
    <div class="row">
        <ul class="list-group">
            <a href="#" class="list-group-item active">경제/심리학</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>
        </ul>
    </div>
</div>

아무 내용이 없는 bookList.html의 nav태그와 footer태그 사이에 div container을 넣어줍니다.
그 아래로 내가 넣을 list 그룹을 a태그로 작성한 후 첫 줄의 list-group-item만 active(이 하나를 선택한다는 의미)를 넣어 줍니다.
그러면 아래와 같이 최상단의 '<a href="#" class="list-group-item active">경제/심리학</a>'부분이 파란틀로 명시되어 화면에 출력되는 모습을 볼 수 있습니다.

<화면 출력 모습>