Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 목록 그룹(list-group)

Tags:

이전에 버튼 그룹나 툴바 등의 GUI 컴포넌트에 대해 설명을 하였다. 그런데, Bootstrap에는 아직 GUI 컴포넌트가 포함되어 있다. 이번에는 그 중에서 많은 페이지를 정리하고 이동하는 “사이트 네이게이션에 관한 것"에 대해 설명 나가기로 하겠다.

목록 그룹 (list-group)

우선 “목록 그룹"에 관한 것이다. 목록 그룹이라는 것은 “항목을 그룹화해하여 보기 쉽게 정리한 목록"이다. 아무튼, 보통의 목록처럼 생각하면 된다.

iPhone이나 Android 앱 등에는 목록 페이지를 이동하기 위한 인터페이스로 이용하고 있다. 목록 그룹도 단순히 어떤 목록을 표시하는 것보다는, 거기에서 선택한 항목으로 이동하기 위한 인터페이스로 사용하는 경우가 많은 것이다.

이 목록 그룹은 다음과 같은 형태로 작성된다.

<ul class="list-group">
    <li class="list-group-item">항목</li>
    ...... 중략 ......
</ ul>

전체 목록인 <ul>는 class="list-group"을 지정하고, 거기에 표시되는 항목인 <li>에는 class="list-group-item"을 지정한다. 이 두 클래스의 지정만 잘 되어 있으면 목록 그룹을 볼 수 있다.

사실 클래스만 지정하면 꼭 <ul> 태그일 필요는 없다. 여기에서는 알기 쉽게 목록으로 예를 들어 놓았지만 이외에 다른 태그를 사용해도 전혀 문제 없다.

<div class="list-group">
    <a href="#" class="list-group-item">항목</a>
    ...... 중략 ......
</ div>

예를 들어, 이렇게 하면 <a> 태그가 목록의 항목으로 되어 있는 목록 그룹이 생성된다.

이 밖에 표시에 관한 클래스도 일부 포함되어 있다. 아래에 간단하게 정리할 수 있다.

상태

클래스	설명
active	항목을 선택할 수 있는 상태로 한다.
disabled	항목을 선택할 수 없는 상태로 한다.

색상

클래스	색상	용도
list-group-item-success	밝은 녹색	뭔가 처리에 성공했을 때의 표시이다.
list-group-item-info	밝은 파란색	정보 표시를 위한 것이다.
list-group-item-warning	밝은 노랑색	경고 표시이다.
list-group-item-danger	밝은 빨강색	위험한 작업에 대한 것이다.

그럼 간단한 사용 예제는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>List Group</h2>
        </div>
         
        <ul class="list-group">
            <li class="list-group-item list-group-item-success"><a href="#">Success</a></li>
            <li class="list-group-item list-group-item-info">Info</li>
            <li class="list-group-item list-group-item-warning">Warning</li>
            <li class="list-group-item list-group-item-danger">Danger</li>
        </ul>
 
        <div class="list-group">
            <a href="#" class="list-group-item">One</a>
            <a href="#" class="list-group-item active">two</a>
            <a href="#" class="list-group-item disabled">Three</a>
            <a href="#" class="list-group-item">Four</a>
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에 2개의 목록 그룹을 표시하고 있다. <li>에 의한 것과 <div> 내에 <a> 태그를 마련한 것이다. 여러가지 스타일을 지정하고 있기 때문에, 어떻게 항목의 표시가 변하는지 확인하자.