방법 - 콜아웃 메시지
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>
콜아웃 메시지를 닫는 기능을 원하면 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;
}
팁: 경고 메시지 도 확인하십시오 .
팁: 참고 사항 도 확인하세요 .