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” 대신 닫기 버튼에 선호되는 아이콘이다.

둥근 경고

예제

<div class="w3-panel w3-green w3-round">

카드로 알림

경고를 카드로 표시하려면 w3-card 클래스를 사용하자.

예제

<div class="w3-panel w3-yellow w3-card-4">

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기