Html에서 공지알람 (Notification Badges) 달기

요즘 스마트폰을 보면 뭔가 메시지가 왔을때 붉은색 동그라미에 받은 메시지 수를 표시하고 있는 것을 흔히 볼수 있다.
이게 바로 공지알람 (Notification Badges) 이라는 것인데, 이게 웹에서도 생각보다 제법 유용하다.

게다가 달기도 별로 어렵지 않다.
직접 만들어 써도 되겠지만, 이미 만들어져 있는 소스를 갓다 쓰는것도 좋다.

cssflow(http://www.cssflow.com/) 에서 툴킷을 배포하고 있는데, 간단하게 뱃지 부분만 갖다 쓸수 있다. (http://www.cssflow.com/snippets/app-navigation-with-notification-badges)

쓰는 방법이야 워낙 간단하니, 링크된 사이트의 도움말을 참고하면 될 것이다.

나의 경우는 저기에 나와있는 스타일 시트도 다 필요없고 해서, 간단하게 붉은색 알람 부분만을 추출해서 사용했다.

<style>
.nav-counter {
 position:absolute;
 top: -1px;
 right: 1px;
 min-width: 8px;
 height: 20px;
 line-height: 20px;
 margin-top: -11px;
 padding: 0 6px;
 font-weight: normal;
 font-size: small;
 color: white;
 text-align: center;
 text-shadow: 0 1px rgba(0, 0, 0, 0.2);
 background: #e23442;
 border: 1px solid #911f28;
 border-radius: 11px;
 background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
 background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
 background-image: -o-linear-gradient(top, #e8616c, #dd202f);
 background-image: linear-gradient(to bottom, #e8616c, #dd202f);
 -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
 box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
}

.button {
 box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
 background-color: #EEE;
 display: inline-block;
 vertical-align: middle;
 border: 1px solid #d4d4d4;
 height: 32px;
 line-height: 30px;
 padding: 0px 25.6px;
 font-weight: 300;
 font-size: 14px;
 font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 color: #666;
 text-shadow: 0 1px 1px white;
 margin: 0;
 text-decoration: none;
 text-align: center;
}
</style>
<br>
<p class="docbtn">
 <a href="#" class="button" style="width:50px; position:relative;">공지<span class="nav-counter">30</span></a>
</p>

이렇게 사용하면 되며, 위의 스타일 시트중 ".button" 부분은 버튼에 대한 스타일 시트이므로 사실상 ".nav-counter" 부분만 있으면 알림뱃지를 달수 있다.
단, 주의 할 것은 뱃지를 달 영역의 바로윗 영역(위의 예제에서는 ... 태그부분) 의 "position" 속성이 "relative" 가 되어 있어야 한다는 것만 주의 하면된다. (버튼위에 뱃지가 달려 있으야 하므로)

웹브라우져에서 보면 이렇게 나타난다.
아, 참... 이것은 IE9 이상에서 사용가능하며, IE8 이하버전에도 쓸수는 있지만, 둥글게 나타나지 않고 숫자 부분이 사각형으로 출력된다.