Bootstrap 3.3.7 | Bootstrap의 입력 구성 요소 | 아이콘(icon)와 배지(badge)


이는 인터페이스는 아니지만, 인터페이스의 표시를 강화하는 것으로 ‘아이콘(icon)‘와 ‘배지(badge)‘와 에 대해 설명한다.

아이콘(icon)

Bootstrap에는 200개 이상의 아이콘이 포함되어 있다. 이것들은 <span> 태그에 클래스를 지정하여 간단히 표시할 수 있다.

<span class="glyphicon glyphicon-xxxx"></span>

클래스에는 class="glyphicon glyphicon-xxxx"와 같이 클래스를 지정한다. glyphicon는 그래픽 아이콘의 기본 클래스이다. 여기에 사용하는 아이콘을 표시하는 클래스 이름을 “glyphicon-xxxx"와 같이 추가한다(xxxx에는 표시하는 아이콘 이름을 지정한다).

예를 들어, 체크 마크를 표시하는 경우는 이런 식으로 작성하면 된다.

<span class="glyphicon glyphicon-ok"></span>

준비되어 있는 아이콘은 Bootstrap 사이트에서 확인할 수 있다. 매우 많이 있으므로, 실제로 몇개를 지정하여 보도록 하자.

http://getbootstrap.com/components/#glyphicons

배지(badge)

배지는 텍스트 옆에 붙이는 작은 표시이다. 예를 들어, Facebook의 “좋아요"버튼은 그 옆에 “좋아요"를 한 숫자가 풍선처럼 나타난다. 그것이 배지이다.

이 배지는 매우 간단히 붙일 수 있다. 이런 느낌이다.

<span class="badge">배지</span>

<span> 태그에 class="badge"라는 클래스를 붙이면, 그것으로 배지가 된다. 매우 간단하다.

그럼 아래에 아이콘과 배지의 이용한 예제를 보도록 하자.

<!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>Badge</h2>
        </div>
         
        <div class="form-group">
        <a href="#"><span class="glyphicon glyphicon-ok"></span>
        BadgeLink <span class="badge">7</span></a>
        </div>
        <div class="form-group">
            <button class="btn btn-default">
            <span class="glyphicon glyphicon-heart"></span>
            Click <span class="badge">ok</span></button>
        </div>
        <div class="form-group">
            <button class="btn btn-default btn-primary">
            <span class="glyphicon glyphicon-tags"></span>
            Click <span class="badge">ok</span></button>
        </div>
        <p><span class="glyphicon glyphicon-star"></span>
        this is <span class="badge">Badge</span> content.</p>
    </div>
</div>
     
</div>
 
</body>
</html>

실제로 해보면 알 수 있는 것은 “스타일이 자동 조정된다"는 것이다. 일반에 텍스트에 아이콘 및 배지를 넣으면, 검은색 바탕에 흰색 문자가 표시된다. 그리고 버튼으로 btn-primary 클래스를 설정한 경우, 흰색 바탕에 푸른색 문자로 아이콘, 배지가 표시된다. 추가된 태그의 스타일에 따라 배지의 표시도 자동 조정되는 것을 알수 있다.