SonMan's IT BBS: Html

레이블이 Html인 게시물을 표시합니다. 모든 게시물 표시

2016년 1월 21일 목요일

Bootstrap : 부트스트랩(Bootstrap) 사용하기 및 참조 사이트

요즘은 홈페이지 프레임워크로 Bootstrap 를 많이 쓴다.
이게 너무 흔하게 사용되서 사이트들이 개성이 죽어버린다는 둥, 프레임워크가 덩치가 너무 커서 사이트 속도가 저하된다는 둥... 해서 사용해서는 안된다고 주장하는 사람들이 있지만, 그만큼 손쉽게 뭔가 있어 보이는 사이트를 만들수 있어 안쓰기도 좀 그렇다.
(사실 IE8 을 지원하는 프레임워크가 흔하지 않아 어쩔수 없이 쓰는 경향이 있음.)

뭐, 그래도 사용법은 익혀 두는게 좋다. 쓸수 있지만 안쓰는것과, 쓸줄 몰라서 안쓰는것의 차이는 크니까.

이런 종류의 프레임웤의 사용법는 다 그렇지만, 그냥 다운받아 링크만 지정해 놓으면 된다.

배포사이트 : http://getbootstrap.com/

여기서 다운 받으면 됨.

다운 받을 수 있는 파일의 종류가 몇가지 있지만, 학술적으로 관심이 있는 사람이 아니라면 그냥 "Bootstrap" 을 받으면 됨.

다운 받은 파일의 압축을 풀어서...

저렇게 사용하고자 하는 사이트에 복사해 넣으면 됨.
그리고 사용할 Html 페이지에서...

상단에 "bootstrap.min.css" 파일을 링크해주고, 하단에 "bootstrap.min.js" 파일을 링크 해주면 기본적인 사용 준비는 끝.

주의 할점은 이게 "jQuery" 기반이라 "jQuery" 링크를 꼭 기록해 주어야 한다는 점.
(사실 자바스크립트 플러그인을 안쓴다면 없어도 되지만, 자바스크립트 플러그인을 안쓰는 경우라면 궂이 이 무거운 bootstrap 을 쓸 이유가 없으니...)
어째서 스타일 시트는 상단에 기록하고, 자바스크립트는 하단에 기록하는지는 모르겠지만, 기본 사용법에 저렇게 하라고 되어 있으니 그냥 그렇게 하도록 하자.

예제 소스는...

배포 사이트의 "Components" 메뉴에 있는 "Dropdowns" 를 사용.
이렇게 해놓고, 웹브라우저에서 보면...

이렇게 뭔가 있어보이는 효과가 적용된 웹페이지를 간단하게 만들수 있음.

원래 배포 사이트는 영문이지만....

한글 부트스트랩 사이트 : http://bootstrapk.com/

여기서 한글로 번역된 내용을 볼 수 있으니, 참고.

2015년 12월 2일 수요일

Html : 재미있는 폰트 아이콘. "Font Awesome"

요즘 보면 참 별의 별게 다 만들어진다.
이런 생각은 어떻게 한 것일까 신기할 정도다.

요즘 폰트 아이콘이란게 쓰이고 있는데, 막상 써보면 기존의 아이콘이랑 다를게 없어 보인다. 근데, 좀 다르다.

기존의 아이콘들은 이미지 파일을 서버에 올려놓고 그 이미지를 링크해 보여 주는것이다.
하지만, 폰트 아이콘은 그것과는 다르다. 근본적인 차이는 폰트 아이콘은 이미지를 사용하지 않는다. 말그대로 웹폰트를 사용한다.

즉, 사용자의 컴퓨터의 폰트를 쓰는게 아니라, 웹에 폰트를 올려 놓고 쓰는 웹폰트를 이용해서, 글자가 아닌 아이콘들의 모임인 웹폰트를 서버에 올려 놓고, 그 웹폰트에 등록되어 있는 문자들을 아이콘으로 사용하는 것이다.

이게 궂이 이렇게 할 이유가 있나? ... 싶지만, 확실한 장점이 있다.

첫째. 이미지가 아니라 사실상 "글자" 이므로 크기의 변경이 자유롭다.

둘째. 웹폰트를 만들때 벡터형식으로 만드므로, 크기의 변경시 자연스럽게 확대된다.
셋째. 폰트파일로 아이콘 패키지처럼 활용 할 수 있어 설치 및 이용이 쉽다.

물론 단점도 있다. "글자" 이기 때문에 "단색" 아이콘 밖에는 쓸수 없고, 등록된 아이콘이 많아서 폰트 크기가 커지면 사이트 전체적으로 로딩이 느려질수 있다.

장단점은 있지만, 암튼 꽤 재미있는 방식이다.

이런 방식의 폰트 아이콘중에 유명한게 "Font Awesome"

http://fontawesome.io/

위의 이미지의 가운데에 보이는 "성" 그림이 있는데, 이게 "이미지"가 아니라 "글자" 다.
즉, "성" 모양을 글자로 폰트에 등록에 그 글자를 이미지 처럼 사용한 것이다.

해당 사이트의 아이콘 메뉴를 보면 현재까지 제작된 아이콘들이 있는데, 계속 추가 되고 있으니 가끔 확인해 보는것도 좋다.

쓰는 방법이야, 그냥 해당 폰트 패키지를 다운 받아 사용할 웹서버에 올려 놓고 쓰면 된다.

배포 파일을 다운받아 압축을 풀어보면 폰트 파일들이 있는것을 볼수 있다.
이 폰트를 웹폰트로 등록해서, 이 폰트 내의 문자들을 아이콘으로 쓴다.
그냥 압축 풀어 웹서버에 올려 놓고, 같이 배포되는 스타일 시트 링크만 기록해 놓으면 간단히 사용 할 수 있다.

그게 귀찮으면...

<!doctype html>
<html lang="ko">
<head>
<title>Icon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div>
    <i class="fa fa-camera-retro"></i> fa-camera-retro<br/>
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg<br/>
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x<br/>
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x<br/>
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x<br/>
    <font color="red"><i class="fa fa-camera-retro fa-5x"></i> fa-5x</font><br/>
</div>
</body>
</html>

그냥 공식사이트에서 쓰고 있는 CSS 파일 링크를 기록만 해줘도 된다.
물론 이렇게 하면 약간 속도가 느림감이 있으므로, 자신이 운영할 서버에 올려 놓고 쓰면 속도 향상에 도움이 된다.
하여간, 이렇게 하면...

이렇게 아이콘으로 활용 할 수 있다.
그리고 마지막 아이콘을 보면 알 수 있듯이, 사실은 이미지가 아니라 "글자" 이기 때문에 글자에 색을 지정할 수 있듯이, 그냥 색을 지정 할 수도 있다.

다른 아이콘을 쓸려면...

아이콘 리스트에서 원하는 아이콘을 선택해보면...

이렇게 클래스 예제가 나오는데, 그 스타이르 클래스를 지정하면 된다. 그러면...

요렇게 해당 폰트가 적용된다.

Html : 스크롤바를 모바일 형태로 꾸며 주는 "perfect-scrollbar"

요즘은 폰으로 웹을 사용하는 것이 일반적이다.
그러다 보니 PC 에서 사용하는 일반적인 웹들도 모바일 페이지를 모사하려는 경향이 있다.
뭐... 모바일 페이지가 좀 세련되어 보이긴 한다...

그 중 하나가 스크롤바.
일반적인 스크롤 바는 이런 형태.

마우스로 클릭하기 편하게 하기 위해 좀 큼지막 하다.

하지만 모바일 페이지에서 스크롤바는 대부분 좀더 가늘다.

(터치로 스크롤하니 사실 거의 필요가 없으니...)

모바일에선 이렇게...

사용성면에선 두꺼운게 좋지만, 미관상으론 얇은게 보기 좋다.

이것을 Pc 에서도 쉽게 구현하게 해주는 "perfect-scrollbar" 이 있다.

https://noraesae.github.io/perfect-scrollbar/

파일은 해당 사이트의 하단에 보면 다운로드 버튼이 있다.

이것도 오픈소스라, 다운로드 버튼을 클릭하면 "GitHub" 로 이동하는데, 거기서 원하는 버젼을 다운 받으면 된다.

어차피 CSS 와 Javascript 라서 아무데나 원하는 곳에 압축을 풀고 경로만 지정하면 쓸수 있다.
원래는 jQuery 없이도 동작하지만, 요즘은 워낙 jQuery 를 많이 쓰니 그냥 쓴다고 셈치고 작업한다. (jQuery 없이 사용하는 소스를 배포 사이트에서 샘플을 보면 된다.)

보다시피 사용은 간단하다.
그냥 스타일시트와 자바스크립트를 링크하고, 스크롤바를 적용할 오브젝트를 지정하기만 하면 끝.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>perfect-scrollbar</TITLE>
<LINK href="./perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<STYLE>
    #Demo {
        position:relative; margin:0px auto;
        padding:0px;
        width: 600px; height: 400px;
        overflow: hidden;
    }
</STYLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./perfect-scrollbar/js/perfect-scrollbar.js"></script>
<SCRIPT>
    $(function() {
        Ps.initialize(document.getElementById('Demo'));
    });
</SCRIPT>
</HEAD>
<BODY>
<div class="description">
    <div id="Demo">
        <img src="Koala.jpg">
    </div>
</div>
</BODY>
</HTML>

이렇게 하면...

그냥 볼때는 아무런 스크롤바가 나타나지 않지만... 마우스를 스크롤바 위치에 올려 놓으면...

이렇게 가느다란 스크롤바가 나타난다.

2015년 9월 10일 목요일

Html : 메타태그로 페이지 자동으로 이동하기.

페이지를 이동하는 방법은 여러가지가 있으나, 특정 페이지를 조회 하자 마자 바로 특정 페이지로 이동하는데는 메타 태그가 많이 쓰인다.

이동하는 여러가지 방법중, 가장 운영체제나 브라우져 같은 환경에 영향을 받지 않는 가장 간단한 방법이기 때문이다.

<meta http-equiv="refresh" content="지연시간;url=이동위치" />

이렇게 한줄만 쓰면 된다.

이렇게 지연시간 "0" 에 이동위치를 "http://son10001.blogspot.kr" 를 지정해 놓고...

페이지를 불러와 보면...

이렇게 바로 지정된 페이지로 이동한다.

2015년 8월 21일 금요일

Html CSS : display:table-cell 에서 height 100% 가 안먹힐 때

display:table-cell 을 이용해서 레이아웃을 짜는데, 평소에는 이상이 없는데, 스크롤 바가 생기면 이상하게 반응 하는 경우가 있다.

[예제]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testDivScroll.aspx.cs" Inherits="web_Tmp_testDivScroll" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * {
            margin:0; padding:0;
            border:0;
        }
        html, body, .form, .wrap, .body
        { height:100%; }

        .wrap   { width:100%;}
        .head   { background-color:aqua;}
        .body   { background-color:aliceblue;; height:100%;}
        .footer { clear:both; background-color:black;}

        .left   { background-color:hotpink; float:left; width:100px; height:100%;}
        .right  { background-color:olive; float:left; width:500px;}

        .divTable  {display:table;}
        .divTr  {display:table-row;}
        .divTd  {display:table-cell;}
    </style>
</head>
<body>
    <form id="form1" class="form" runat="server">
    <div class="wrap divTable">
            <div class="head divTr">head</div>
            <div class="body divTr">
                <div class="left divTd">left</div>
                <div class="right divTd">
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                    right<p/>right<p/>
                </div>
            </div>
            <div class="footer divTr">footer</div>
    </div>
    </form>
</body>
</html>

이렇게 하고 보면.... 스크롤이 없을 때는...

이렇게 정상적으로 보이지만.... 스크롤이 생기면...

height 100% 로 잡아놓은 영역이 희안하게 동작한다.
스크롤이 생기는 순간 100% 속성이 무시됨.
왜 그런지는 모르겠지만, 하여튼 스크롤만 생기면 이렇게 된다.

이걸 바로 잡으려면...

저기 100% 로 잡혀 있는 곳에 속성을 "overflow:auto" 를 추가 해 주면 됨.
그러면....

이렇게 스크롤이 생겼을 때도 형태를 계속 유지함.

Html CSS : 페이지 내의 Div height 를 100% 로 지정하는 방법 : display:table-row

페이지를 보기 좋게 정리할려면 역시 화면 크기에 맞는 가로/세로 100% 크기 상태에서 모든 컨텐츠를 가운데로 정리하는 것이 보기 좋다.

그런데, 예전에는 아주 쉬웠던 이 방법이 요즘에는 꽤나 까나 롭다.
예전에는 table 을 써서 가로/세로 크기 100% 주고 가운데 정렬 하면 손쉽게 구현이 되었으나, 요즘에는 웹 표준이니 뭐니 해서 Div 를 써서 구성 하는데, 이게 좀처럼 생각대로 움직여 주질 않는다.

일단 화면 크그에 맞게 세로 크기를 100% 를 잡으려 하는데, 이게 100% 로 잡히질 않는 경우가 있다.
예전에는 이걸 어떻게 맞춰야 하는지 몰라서 대충 높이를 화면 크기로 잡아 주곤 했으나, 요즘은 모바일도 고려해야 하고 워낙 디바이스의 종류가 다양해서 대충 수치로 잡아 주는걸로는 대응이 안된다.

일단 이것은 웹표준 상에서는 특정 오브젝트의 100% height 가 부모오브젝트의 height 의 영향을 받기 때문이라서, 그냥 100% 로 맞출려는 모든 상위 오브젝트의 height 를 100% 로 잡아 주면 된다.

대충 이런 식인데, "wrap" 이라는 오브젝트의 크기를 화면 크기의 100% 로 잡고 싶다면 그 상위 오브젝트인 "html" 과 "body" 를 100% 로 잡아 주어야 하고, 만약 그걸 감싸고 있는 오브젝트가 있다면 그것의 크기로 100% 로 잡아 주어야 원하는 항목의 height 를 100% 로 잡을 수 있다. 중간에 하나라도 100% 가 아니면 100% 로 잡히지 않는다.

... 그런데... 아주 예전에는 이렇게만 해도 되었었는데, 요즘엔 이것도 잘 먹히지 않는다.
100% 가 잡히기는 하는데....

요렇게 3개의 판넬을 배치하고 중간에 있는 "content" 항목의 크기를 height 100% 로 잡으면...

이렇게 페이지 크기가 100% 를 넘어 버린다.
이건 저 "content" 의 height 가 100% 로 되어 버리면서 "header" , "footer" 의 높이가 추가 되기 때문. (상위 오브젝트 크기를 높이 100% 값으로 가져 오니 어찌보면 당연함.)

현재로선 저 height 에서 "header" , "footer" 의 높이 만큼을 빼주는 수 밖에 없음.
그래서, jQuery 를 이용하거나, 아니면 "content" 영역에 padding 을 "-" 값으로 지정해 맞추는 등 온갖 편법이 다 동원되고 있는데...

그중의 한가지 방법으로 "display:table-row " 를 사용하는 방법이 가장 간단하다.

이렇게 가장 바깥의 영역을 "display:table" 로 지정하고, 그 안쪽 영역인 "header" , "content", "footer" 를 "display:table-row" 로 지정하는 것이다.
간단히 설명하자면 "wrap" 를 테이블로 설정하고, "header" , "content", "footer" 를 테이블의 셀로 설정함으로 해서, 예전에 테이블로 레이아웃을 구성했던 방식으로 구현 한것.

이렇게 하면...

요렇게 깔끔하게 딱맞는 페이지를 구성 할 수 있다.
※안타깝게도 XP (IE8 이하) 에선 통하지 않기 때문에 호환성에 문제가 있을 수도 있다.

2015년 8월 19일 수요일

Html CSS : 스타일 시트만으로 만든 드롭다운 메뉴

요즘 가장 흔히 사용하는 메뉴의 형태.

대충 이런 모습.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menuTest.aspx.cs" Inherits="web_page_menuTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
    * {
        margin:0;
        padding:0;
        border:0;
        font: 맑은고딕;
        text-decoration:none;
        letter-spacing:0px;
    }
    html {height:100%;}

    .wrap
    {
        width:100%;
        font-size:14px;
        font-weight:bold;
    }

    .menubar
    {
        width:1024px;
        margin: 0 auto;
        border:none;
        background: #1D375F;
        overflow: hidden;
    }

    .menuLogo
    {
        width:100px;
        float:left;
    }

    .menuItem
    {
        float:right;
    }

    .menubar ul
    {
        background: #1D375F;
        height:50px;
        list-style:none;
    }

    .menubar li
    {
        float:left;
    }

    .menubar a
    {
        color:#FFFFFF;
        display:block;
        font-weight:normal;
        line-height:49px;
        padding:1px 25px;
        text-align:center;
    }

    .menubar li a:hover,
    .menubar ul li:hover a {
        background: #636363;
        color:#FFFFFF;
    }

    .menubar li:hover ul
    {
        display:block;
    }

    .menubar li:hover li a
    {
        background:none;
    }

    .menubar li ul
    {
        background: #1D375F;
        display:none;
        height:auto;
        position:absolute;
        z-index:999;
    }

    .menubar li li a ,
    .menubar li li
    {
        background: #1D375F;
        display:block;
        float:none;
        min-width:135px;
    }

    .menubar li ul a
    {
        display:block;
        height:50px;
        font-size:12px;
        font-style:normal;
        padding:0px 10px 0px 15px;
        text-align:left;
    }

    .menubar li ul a:hover,
    .menubar li ul li:hover a{
        background: #636363;
        border:0px;
        color:#ffffff;
    }

    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div class="wrap">
        <div class="menubar">
            <div class="menuLogo">
                <a href="#">Logo</a>
            </div>
            <ul class="menuItem">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">MainMenu01</a>
                    <ul>
                        <li><a href="#">SubMenu01</a></li>
                        <li><a href="#">SubMenu02</a></li>
                        <li><a href="#">SubMenu03</a></li>
                        <li><a href="#">SubMenu04</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">MainMenu02</a>
                    <ul>
                        <li><a href="#">SubMenu01</a></li>
                        <li><a href="#">SubMenu02</a></li>
                    </ul>
                </li>
                <li><a href="#">LogOut</a></li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

2015년 8월 18일 화요일

Html CSS : "div" 태그의 내용을 세로로 가운데 정렬. display:table 로 해결 한다.

요즘 Html5 니 뭐니 해서, html 을 만들때 table 을 쓰지 않고 Div 를 사용 한다.
분명히 좀더 편리하고 쓰기 좋게 하고자 그러는 걸텐데, 쓰면 쓸수록 불편하기만 하다.

Table 로 구현 할때보다 불편한 것 중, 대표적인것이 세로 가운데 정렬.
원래는 "vertical-align:middle;" 하면 가운데 정렬이 되어야 하는데, "div" 태그는 이게 안된다.

그렇기 때문에 온갖 편법이 다 동원되는데... (주로 margin 넣기, position:absolute 로 위치 맞추기 등...)
이런것 결국 편법이라 뭔가 변경 사항이 있을때 틀어지기 쉽다.

결국 제일 쉬운 해결법은 그냥 "Table" 태그를 쓰는것... 이지만, 테이블은 절대 안된다고 하는 곳이 있으니, 아쉬운대로 Div 태그에 Table 속성을 부여 해서 해결 한다.

#div {display:table-cell; width:150px; height:45px;}

이런식으로 가운데 정렬할 div 에 display:table-cell 속성을 지정하면, div 태그내의 내용이 마치 테이블 셀처럼 정렬이 된다.

근데... 버그인지 몰라도 width 값이 숫자 값이면 문제가 없는데, width 값이 100% 처럼 비율값일 경우 이상하게도 넓이 값이 지정이 안된다.

이럴경우...

이렇게 가운데 정렬을 할려는 div 를 div 로 감싼뒤 그 div 의 속성을 "display:table" 로 지정해 주고, 그 하위 div 의 속성을 "display:table-cell" 로 지정하면 넓이를 100% 로 지정할 수 있다.

그러면 이렇게 가운데 정렬이 됨.

2015년 4월 28일 화요일

Html 나눔 웹폰트 적용

그러다 보니 자연스럽게 웹마져 나눔폰트를 쓰고 있는데, 각 사용자의 컴퓨터에 나눔폰트를 강제로 설치하게 할 수는 없으니, 결국 웹폰트를 쓰게 된다.

요즘은 구글에서 웹폰트까지 배포를 해주니 별 어려움 없이 웹폰트를 적용할 수 있다.
일단 기본적으로 아무런 스타일 지정없이 페이지를 만들면...

요렇게 했을때는 시스템 폰트로 나오게 된다.

요렇게...
그럼 http://www.google.com/fonts/earlyaccess 여기로 가보면...

지원하는 폰트들의 목록중에서 나눔폰트를 찾을 수 있다.
저기서

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script';

이부분을 사용하면 된다.

이렇게 스타일 시트를 지정하면 된다.
예제는 닷넷의 경우이므로 스타일 시트를 지정할 때, CssClass="showFont" 이렇게 지정했지만, 일반적인 경우라면 class="showFont" 이렇게 지정할 것이다.

암튼 이렇게 지정하면...

이렇게 나눔폰트가 적용된다. (웹폰트라서 로딩되는데 제법 시간이 좀 걸린다.)
만약, 여러종류를 지정할려면...

이렇게 원하는 만큼 import 시키고, 지정되어 있는 font-family 를 스타일로 지정하면 된다.
그러면...

이렇게 지정한 폰트가 지정된다.

참고로, Import 된 스타일 시트 파일을 열어 보면...

이렇게 되어 있다.
사실상 Import 된 파일은 웹폰트 경로를 지정하는 역할을 할 뿐이다.
그래서, 한글 웹폰트가 제법 큰 관계로 페이지 로딩에 시간이 걸리니, 조금이라도 로딩 시간을 줄이기 위해, 위의 폰트 파일을 다운받아 자신의 웹서버에 올려 놓고...

이런식으로 웹서버에 스타일 시트 파일을 만들어서 로컬 서버의 폰트를 지정해 쓸수도 있다.

2015년 2월 2일 월요일

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 이하버전에도 쓸수는 있지만, 둥글게 나타나지 않고 숫자 부분이 사각형으로 출력된다.