HTML:알림버튼 만들기

틀:HTML HTML에 대한 문서들 모음집

HTML:태그
HTML:head
HTML:리스트 만들기
HTML:태그 속성
1. HTML:링크
2. HTML:앵커
컨텐츠 삽입
1. HTML:이미지
2. HTML:음악
HTML:요소 꾸미기
1. HTML:헤더, 네비게이터
2. HTML:알림버튼 만들기

개요

알림메시지를 보여주는 버튼 만들기.

단계

설명

코드

CSS짜기

.bell{
}

.bell:before{
    ...
    content:'1';
    ...
    }
    
.notice{
    position:absolute;
    /*상단에 띄워주기*/
}

HTML짜기

<div class='bell'>    <!--종모양 벨을 담을 공간-->
    <span class='icon-bell'></span>    <!--아이콘은 css에서 처리-->
    <div class='notice'>
        <div class='icon-top'></div>
        <h3>알림</h3>
    </div>
</div>