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

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">
참고
Mingg`s Diary
밍구
공부 목적 블로그