HTML:알림버튼 만들기

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

1. HTML:태그
2. HTML:head
3. HTML:리스트 만들기
4. HTML:태그 속성
   1. HTML:링크
   2. HTML:앵커
5. 컨텐츠 삽입
   1. HTML:이미지
   2. HTML:음악
6. 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>