Bootstrap 3.3.7 | 네비게이션과 컴포넌트 | 목록 그룹(list-group)
이전에 버튼 그룹나 툴바 등의 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>
태그를 마련한 것이다. 여러가지 스타일을 지정하고 있기 때문에, 어떻게 항목의 표시가 변하는지 확인하자.