목차

HOW TO - Callout Message

  • description : How TO - Callout Message
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-03


The source of this article

How To - Callout Message

Callout

콜아웃 메시지(callout message)는 종종 사용자에게 팁/트릭, 할인, 필요한 조치 등 특별한 사항을 알리기 위해 페이지 하단에 배치됩니다.

  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
 
    .callout {
      position: fixed;
      bottom: 35px;
      right: 20px;
      margin-left: 20px;
      max-width: 300px;
      border: 1px solid #000;
    }
 
    .callout-header {
      padding: 25px 15px;
      background: #555;
      font-size: 30px;
      color: white;
    }
 
    .callout-container {
      padding: 15px;
      background-color: #ccc;
      color: #000;
    }
 
    .closebtn {
      position: absolute;
      /* x */
      top: 5px;
      right: 15px;
      color: white;
      font-size: 30px;
      cursor: pointer;
    }
 
    .closebtn:hover {
      color: lightgrey;
    }
  </style>
</head>
 
<body>
 
  <h2>Callout Messages</h2>
 
  <p>Some content text, blabla.</p>
  <p>Some content text, blabla.</p>
  <p>Clickon the "x" symbol to close the callout message.</p>
  <div class="callout">
    <div class="callout-header">Callout Header</div>
    <span class="closebtn" onclick="this.parentElement.style.display='none';">x</span>
    <div class="callout-container">
      <p>Some text to describe the callout message. <a href="#">Learn more</a> or close it if it is in your way.</p>
    </div>
  </div>
 
</body>

Create a Callout

Step 1) Add HTML:

Example

<div class="callout">
  <div class="callout-header">Callout Header</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <div class="callout-container">
    <p>Some text...</p>
  </div>
</div>


콜아웃 메시지를 닫는 기능을 원하는 경우, “클릭하면 부모 요소를 숨깁니다()“라는 onclick 속성을
<span> 요소에 추가하십시오.

Tip: HTML 엔티티 ”&times;“를 사용하여 철자 “x”를 만듭니다.

Step 2) Add CSS:
콜아웃 박스와 클로즈 버튼에 스타일을 적용합니다.

<style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
 
    /* Callout box- fixed position at the bottom of the page */
    .callout {
      position: fixed;
      bottom: 35px;
      right: 20px;
      margin-left: 20px;
      max-width: 300px;
      border: 1px solid #000;
    }
 
    .callout-header {
      padding: 25px 15px;
      background: #555;
      font-size: 30px;
      color: white;
    }
 
    .callout-container {
      padding: 15px;
      background-color: #ccc;
      color: #000;
    }
 
    .closebtn {
      /* x */
      position: absolute;
      top: 5px;
      right: 15px;
      color: white;
      font-size: 30px;
      cursor: pointer;
    }
 
    .closebtn:hover {
      color: lightgrey;
    }
  </style>
, , , , , ,