문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======HOW TO - Callout Message======
<WRAP left notice 80%>
  * description : How TO - Callout Message
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-06-03
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article=====
[[https://www.w3schools.com/howto/howto_js_callout.asp|How To - Callout Message]]\\

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

<code javascript>
  <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>
</code>

=====Create a Callout=====
Step 1) Add %%HTML%%:\\

====Example====
<code javascript>
<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>
</code>
\\
콜아웃 메시지를 닫는 기능을 원하는 경우, "클릭하면 부모 요소를 숨깁니다()"라는 ''%%onclick%%'' 속성을\\  
%%<span>%% 요소에 추가하십시오.\\ 
\\
**Tip:** %%HTML%% 엔티티 "''%%&times;%%''"를 사용하여 철자 "x"를 만듭니다.\\
\\
Step 2) Add CSS:\\
콜아웃 박스와 클로즈 버튼에 스타일을 적용합니다.\\

<code 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>
</code>














 
{{tag>오션,HOW TO - More - Callout Message }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
