How To - 콜아웃 메시지

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;
}

기본 예시

예제 보기