[Bootstrap] label, badge

label(라벨)

라벨이란?
글 내용중에 중요하거나 사용자에게 알려줄 필요가 있을때 사용한다.
커뮤니티 게시판이나 블로그에 새로운글이 올라온 경우 새로운 글이 있다는 표시를 해줄수 있다.

사용법) 버튼과 유사하다 버튼이 btn-XXX인거 처럼 라벨은
label-XXX로 사용한다.

label은 다음과 같은 효과를 준다.

.label {
	position: relative;
   top: -1px;
   }
.label-default {
  background-color: #777;
	}

------------------------------------------------------------------------------

새로운 게시물에 new라는 글자라벨을 적용한다면

<td>1</td><td>부트스트랩에서 라벨사용
<span class="label label-default">New</span></td><td>홍길동</td>

이런식으로 사용한다.
-----------------------------------------------------------------------------

중요 게시물에 중요라는 글자라벨을 적용한다면

<td>2</td><td>게시판의 글제목2<span class="label label-danger">중요</span></td><td>테스트</td>

이렇게 사용가능 => (label-danger라서 빨간색이다.) 
----------------------------------------------------------------------------------------------

정보 게시물에 정보라는 글자라벨을 적용한다면

td>3</td><td>게시판의 글제목3<span class="label label-info">정보</span></td><td>임시3</td>

이렇게 사용가능 => (label-info라서 하늘색이다.) 
-----------------------------------------------------------------------------------------

위의 라벨 예시들을 통합해서 게시판 작성

<table class="table"> 
			<thead>
				<tr>
					<td>번호</td><td>글제목</td><td>작성자</td>
				</tr>
			</thead>
			<tbody>
				<tr>								<!-- 새로운 게시물에 new라는 글자라벨을 적용 -->
					<td>1</td><td>부트스트랩에서 라벨사용
											<span class="label label-default">New</span></td><td>홍길동</td>
				</tr>
				<tr>								<!-- 중요 게시물에 중요라는 글자라벨을 적용 -->
					<td>2</td><td>게시판의 글제목2
											<span class="label label-danger">중요</span></td><td>테스트</td>
				</tr>
				<tr>								<!-- 정보 게시물에 정보라는 글자라벨을 적용 -->
					<td>3</td><td>게시판의 글제목3
											<span class="label label-info">정보</span></td><td>임시3</td>
				</tr>
				</tbody>
		</table>

---

badge(배지)

배지

• 배지는 주로 숫자로 구성되어 라벨처럼 읽지않은 메일이나 새로운글이 나타났을때 표시한다.

• span class="badge"를 이용한다.

• 배지는 글자앞에 사용한다.(글자 뒤가아님)

• 배지는 디폴트는 왼쪽이라 오른쪽에 적용할려면 pull-right를 사용해야 한다.

배지의 예제
-알약형으로 수직으로 만들며 배지를 오른쪽에 생성하려면?

<div class="col-xs-3">
	<ul class="nav nav-pills nav-stacked"><!-- 배지는 글자앞에 사용(글자 뒤가아님)--> <!-- 배지는 디폴트는 왼쪽이라 오른쪽에 줄꺼면 pull-right 사용 -->
		<li class="active"><a href="#"><span class="badge pull-right">50</span>메뉴1</a></li>
		<li><a href="#">메뉴2</a></li> 
		<li><a href="#"><span class="badge pull-right">10</span>메뉴3</a></li>
	</ul>
</div>

---

2022-08-11