![](https://maz.kr/wp-content/uploads/2024/01/w3.css-alerts-thumbnail.png)
w3.css
경고
w3-panel 클래스는 모든 유형의 경고를 표시하는 완벽한 클래스다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
경고는 종종 강한 색상을 사용하여 표시된다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
예제
<div class="w3-panel w3-red"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p> </div>
경고 표시
노란색은 주의가 필요할 수 있는 경고를 나타내는 경우가 많다.
노란색은 주의가 필요할 수 있는 경고를 나타내는 경우가 많다.
예제
<div class="w3-panel w3-yellow"> <h3>Warning!</h3> <p>Yellow often indicates a warning that might need attention.</p> </div>
성공 표시
녹색은 종종 성공이나 긍정적인 것을 나타낸다.
녹색은 종종 성공이나 긍정적인 것을 나타낸다.
예제
<div class="w3-panel w3-green"> <h3>Success!</h3> <p>Green often indicates something successful or positive.</p> </div>
정보 표시
파란색은 중립적인 정보 변경이나 조치를 나타내는 경우가 많다.
파란색은 중립적인 정보 변경이나 조치를 나타내는 경우가 많다.
예제
<div class="w3-panel w3-blue"> <h3>Information!</h3> <p>Blue often indicates a neutral informative change or action.</p> </div>
컨테이너 사용
w3-container 클래스를 사용하여 경고를 표시할 수도 있다.
예제
<div class="w3-container w3-red"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p> </div>
모든 색상의 경고
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
예제
<div class="w3-panel w3-blue-grey"> <h3>Danger!</h3> <p>Red often indicates a dangerous or negative situation.</p> </div>
알림 닫기
경고 상자를 닫으려면 오른쪽 상단에 있는 X를 클릭한다.
빨간색은 종종 위험하거나 부정적인 상황을 나타낸다.
경고를 닫는 X를 만들려면 w3-button 클래스 와 onclick 이벤트가 있는 <span> 요소를 추가하자.
예제
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">×</span>
⭐ HTML × 엔터티는 문자 “X” 대신 닫기 버튼에 선호되는 아이콘이다.
둥근 경고
여기서는 w3-round가 사용된다.
여기서는 w3-round-large가 사용된다.
여기서는 w3-round-xxlarge가 사용된다.
예제
<div class="w3-panel w3-green w3-round">
카드로 알림
경고를 카드로 표시하려면 w3-card 클래스를 사용하자.
노란색은 주의가 필요한 사항을 나타내는 경우가 많습니다.
예제
<div class="w3-panel w3-yellow w3-card-4">