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가 사용됩니다.
성공!
여기서 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">