w3.css
콜아웃 메시지
CSS를 사용하여 콜아웃 메시지를 만드는 방법을 알아보자.
콜아웃 만들기
1단계) HTML 추가
<div class="callout"> <div class="callout-header">Callout Header</div> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> <div class="callout-container"> <p>Some text...</p> </div> </div>
콜아웃 메시지를 닫을 수 있는 기능이 필요하다면 “when you click on me, hide my parent element”라는 onclick 속성을 갖는 <span> 요소를 추가하자. 부모 요소는 컨테이너 <div> (class=”alert”)이다.
⭐ HTML 엔터티 ” ×”를 사용하여 문자 “x”를 만들자.
2단계) CSS 추가
콜아웃 상자와 닫기 버튼의 스타일을 지정한다.
/* Callout box - fixed position at the bottom of the page */ .callout { position: fixed; bottom: 35px; right: 20px; margin-left: 20px; max-width: 300px; } /* Callout header */ .callout-header { padding: 25px 15px; background: #555; font-size: 30px; color: white; } /* Callout container/body */ .callout-container { padding: 15px; background-color: #ccc; color: black } /* Close button */ .closebtn { position: absolute; top: 5px; right: 15px; color: white; font-size: 30px; cursor: pointer; } /* Change color on mouse-over */ .closebtn:hover { color: lightgrey; }
기본 예시
예제 보기참고
W3C School - How TO - Callout Message