[basic] BS4 - List Group (BS리스트그룹)

목차

1. List Group 기본
2. List Group Active (활성화 = 현재위치 표시)
3. List Group Link (링크)
4. List Group Link Disable (링크비활성화 = 클릭방지)
5. List Group Border Remove (외곽 테두리 제거)
6. List Group Horizon (가로로 나열 = 나란히 배치)
7. List Group Color (색깔) - 배경색
8. List Group Badge (배지)
9. List Group 종합예제 - 단순리스트 / 활성화 / 테두리제거 / 배지
10. List Group 예제 - 링크리스트 / 활성화 / 클릭방지

 

List Group 기본

 

<ul class="list-group">

    <li class="list-group-item">HTML</li>

    <li class="list-group-item">CSS</li>

    <li class="list-group-item">JS</li>

</ul>

예제보기

 

List Group Active (활성화 = 현재위치 표시)

 

<ul class="list-group">

    <li class="list-group-item active">HTML</li>

    <li class="list-group-item">CSS</li>

    <li class="list-group-item">JS</li>

</ul>

 

예제보기

List Group Link (링크)

 

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">HTML</a>

    <a href="#" class="list-group-item list-group-item-action">CSS</a>

    <a href="#" class="list-group-item list-group-item-action">JS</a>

</div>

 

예제보기

---

[설명]

 

1. <ul><li> 태그 대신, <div><a> 형태의 태그 사용.

2. .list-group-item-action 클래스 : 링크 허버시 회색.

 

 

List Group Link Disable (링크비활성화 = 클릭방지)

 

<div class="list-group">

    <a href="#" class="list-group-item disabled">HTML</a>

    <a href="#" class="list-group-item">CSS</a>

    <a href="#" class="list-group-item">JS</a>

</div>

 

예제보기

 

List Group Border Remove (외곽 테두리 제거)

<ul class="list-group list-group-flush">

    <li class="list-group-item">HTML</li>

    <li class="list-group-item">CSS</li>

    <li class="list-group-item">JS</li>

</ul>

 

예제보기

 

List Group Horizon (가로로 나열 = 나란히 배치)

<ul class="list-group list-group-horizontal">

    <li class="list-group-item">HTML</li>

    <li class="list-group-item">CSS</li>

    <li class="list-group-item">JS</li>

</ul>

 

예제보기

 

List Group Color (색깔) - 배경색

[링크 X]

 

<ul class="list-group">

    <li class="list-group-item list-group-item-success">녹색</li>

    <li class="list-group-item list-group-item-secondary">회색</li>

    <li class="list-group-item list-group-item-info">청록색</li>

    <li class="list-group-item list-group-item-warning">주황색</li>

    <li class="list-group-item list-group-item-danger">빨간색</li>

    <li class="list-group-item list-group-item-primary">파란색</li>

    <li class="list-group-item list-group-item-dark">진회색</li>

    <li class="list-group-item list-group-item-light">연회색</li>

</ul>

 

---

[링크O]

 

<div class="list-group">

    <a href="#" class="list-group-item list-group-item-action">흰색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-success">녹색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">회색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-info">청록색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">주황색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">빨간색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">파란색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">진회색</a>

    <a href="#" class="list-group-item list-group-item-action list-group-item-light">연회색</a>

</div>

 

 

List Group Badge (배지)

<ul class="list-group">

    <li class="list-group-item d-flex justify-content-between align-items-center">

        HTML <span class="badge badge-primary badge-pill">12</span>

    </li>

    <li class="list-group-item d-flex justify-content-between align-items-center">

        CSS <span class="badge badge-primary badge-pill">50</span>

    </li>

    <li class="list-group-item d-flex justify-content-between align-items-center">

        JS <span class="badge badge-primary badge-pill">99</span>

    </li>

</ul>

 

 

List Group 종합예제 - 단순리스트 / 활성화 / 테두리제거 / 배지

 

<ul class="list-group list-group-flush list-group-horizontal">

    <li class="list-group-item active">

          홈짱닷컴 <span class="badge badge-primary badge-pill">1</span>

    </li>

    <li class="list-group-item list-group-item-success">

          Homzzang.com <span class="badge badge-primary badge-pill">2</span>

    </li>

    <li class="list-group-item">

         홈페이지 제작관리 <span class="badge badge-primary badge-pill">1</span>

    </li>

</ul>

 

결과보기

---

[list-group-item 클래스 옆]

 

active

현재선택된 리스트 (= 활성화된 리스트)

 

list-group-flush

리스트 테두리 제거

 

ist-group-horizontal

리스트 옆으로 나란히. (※ 이 클래스 없으면 세로로 나열)

 

[색깔]

list-group-item-success 연녹색배경

list-group-item-secondary 연회색배경

list-group-item-info 연청록배경

list-group-item-warning 연주황배경

list-group-item-danger 연분홍배경

list-group-item-primary 연하늘배경

list-group-item-dark 진회색배경

list-group-item-light 흰색배경

 

[뱃지]

<span class="badge badge-primary badge-pill">1</span>

badge 뱃지
badge-primary 뱃지색 (연하늘색) 
badge-pill 뱃지모양 (알약형태)

 

 

List Group 예제 - 링크리스트 / 활성화 / 클릭방지

 

<div class="list-group">

  <a href="#" class="list-group-item list-group-item-action active">HTML</a>

  <a href="#" class="list-group-item list-group-item-action disabled">CSS</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-success">JS</a>

</div>

 

결과보기

---

 

1.

링크리스트 경우엔, <ul> 대신 <div> 태그, <li> 대신 <a> 태그를 사용.

 

2.

list-group-item-action 클래스

리스트 마우스허버 시 연회색 배경색 추가.

 

3.

disabled 클래스

링크클릭 방지

 

4.

[색깔] - a태그에 사용 시 hover 자동  반영.

list-group-item-success 연녹색배경

list-group-item-secondary 연회색배경

list-group-item-info 연청록배경

list-group-item-warning 연주황배경

list-group-item-danger 연분홍배경

list-group-item-primary 연하늘배경

list-group-item-dark 진회색배경

list-group-item-light 흰색배경