여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - 알림
How To – 알림
4주전 작성
1개월전 수정

w3.css

알림

CSS를 사용하여 알림 메시지를 만드는 방법을 알아보자.

알림 메시지 만들기

알림 메시지는 사용자에게 위험, 성공, 정보 또는 경고 등 특별한 사항을 알리는 데 사용될 수 있다.

1단계) HTML 추가
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  This is an alert box.
</div>

 

경고 메시지를 닫는 기능을 원한다면 “you click on me, hide my parent element”라는 온클릭 속성이 있는 <span> 요소(컨테이너 <div> (class=“alert”)를 추가하자.

2단계) CSS 추가

알림 상자와 닫기 버튼의 스타일을 지정한다.

/* The alert message box */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}
기본 예시
예제 보기

많은 알림

한 페이지에 알림 메시지가 여러 개 있는 경우 다음 스크립트를 추가하여 각 <span> 요소에 onclick 속성을 사용하지 않고도 각 알림을 닫을 수 있다.

그리고 알림을 클릭했을 때 알림이 천천히 사라지게 하려면 .transition 클래스 에 opacity 및 alert를 추가하자.

예제
<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600ms to fade out */
}
</style>

<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // When someone clicks on a close button
  close[i].onclick = function(){

    // Get the parent of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Set the opacity of div to 0 (transparent)
    div.style.opacity = "0";

    // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그