작성 방법: 경고 메시지

CSS를 사용하여 경고 메시지를 생성하는 방법을 배웁니다。

경고

경고 메시지는 사용자에게 특별한 사항(위험, 성공, 정보 또는 경고)을 알릴 수 있습니다。

× 위험!위험하거나 부정적인 영향을 미칠 수 있는 작업을 나타냅니다。
× 성공!성공이나 긍정적인 작업을 나타냅니다。
× 정보!중립적인 정보 변경이나 작업을 나타냅니다。
× 경고!주의해야 할 경고를 나타냅니다。

직접 시도해보세요

알림 메시지를 생성합니다

第一步 - 추가 HTML：

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  이것은 알림 상자입니다.
</div>

알림 메시지를 닫고 싶다면, onclick 속성을 나타냅니다 <span> 요소는 "나를 클릭하면 부모 요소를 숨기는" - 즉 컨테이너 <div class="alert">。

안내:HTML 엔티티 "×"를 사용하여 글자 "x"를 생성합니다。

第二步 - 추가 CSS：

경고 상자와 닫기 버튼의 스타일을 설정합니다：

/* 경고 메시지 상자 */
.alert {
  padding: 20px;
  background-color: #f44336; /* 빨간색 */
  color: white;
  margin-bottom: 15px;
}
/* 닫기 버튼 */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* 마우스가 닫기 버튼에 올라갈 때 */
.closebtn:hover {
  color: black;
}

직접 시도해보세요

여러 경고

صف면에 여러 경고 메시지가 있는 경우, 각 경고에 대해 사용하지 않고 다음 스크립트를 추가할 수 있습니다. <span> 요소의 onclick 속성의 경우 다른 경고를 닫을 수 있습니다.

그리고, 경고를 클릭할 때缓慢하게 배경지우기를 원한다면, 불투명도와 전환을 추가하여 alert 클래스 중:

예제

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 밀리초 배경지우기 */
}
</style>
<script>
// class="closebtn"의 모든 요소를 가져옴
var close = document.getElementsByClassName("closebtn");
var i;
// 모든 닫기 버튼을 순회 Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // 모든 닫기 버튼을 순회
  close[i].onclick = function(){
    // <span class="closebtn">의 부모 요소(<div class="alert">)를 가져옴
    var div = this.parentElement;
    // div의 불투명도를 0(투명)으로 설정
    div.style.opacity = "0";
    // 600 밀리초 후 div를 숨기기(배경지우기에 필요한 시간과 동일)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

직접 시도해보세요

관련 페이지

강의:메모지 만들기 방법