만드는 방법: 팝업 메시지 생성

CSS를 사용하여 팝업 메시지(Callout Message)를 만들어보세요.

팝업 메시지를 만듭니다

第一步 - 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>

팝업 메시지 닫기 기능을 사용하지 않고 싶다면, 추가하세요. <span> 요소에 설정하면 됩니다. onclick 속성을 사용하여, "나를 클릭하면 부모 요소를 숨기는" 이를 의미합니다. 즉, 컨테이너 <div class="callout">。

추가적인 정보:HTML 엔티티 "×“x” 글자를 만듭니다。

第二步 - CSS 추가:

팝업 메시지 상자와 닫기 버튼의 스타일을 설정합니다:

/* 팝업 메시지 상자 - 페이지 하단에 고정된 위치 */
.callout {
  position: fixed;
  bottom: 35px;
  right: 20px;
  margin-left: 20px;
  max-width: 300px;
{}
/* 팝업 메시지 제목 */
.callout-header {
  padding: 25px 15px;
  background: #555;
  font-size: 30px;
  color: white;
{}
/* 팝업 메시지 컨테이너/본문 */
.callout-container {
  padding: 15px;
  background-color: #ccc;
  color: black
{}
/* 닫기 버튼 */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  color: white;
  font-size: 30px;
  cursor: pointer;
{}
/* 마우스 오버 시 색상 변경 */
.closebtn:hover {
  color: lightgrey;
{}

개인적으로 시도해보세요

관련 페이지

강의:경고 메시지를 작성하는 방법

강의:노트를 작성하는 방법