w3.css

패널

패널 클래스

w3-panel 클래스는 HTML 요소에 16px 위쪽 및 아래쪽 여백과 16px 왼쪽 및 오른쪽 패딩을 추가한다.

예제

<div class="w3-panel w3-red">
  <p>I am a panel.</p>
</div>

메모 패널

w3-panel 클래스는 메모를 표시하는 데 적합하다.

메모는 종종 옅은 색상으로 표시된다.

예제

<div class="w3-panel w3-pale-green">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

인용문 패널

w3-panel 클래스는 인용문을 표시하는 데 적합하다.

예제

<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>

경고 패널

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-blue w3-card-4">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

둥근 패널

예제

<div class="w3-panel w3-blue w3-round-xlarge">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

패널 숨기기(닫기)

패널을 숨기는 것은 쉽다.

예제

<div class="w3-panel w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <p>Click on the X to close this panel.</p>
  <p>Click on the X to close this panel.</p>
</div>

패널 표시(열기)

(숨겨진) 패널을 표시하는 것은 쉽다.

패널 표시

예제

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show panel</button>

<div id="id01" class="w3-panel w3-green w3-display-container" style="display:none">
  <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">X</span>
  <p>Click on the X to close this panel.</p>
  <p>Click on the X to close this panel.</p>
</div>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기