W3.CSS 패널
저는 패널입니다.
저는 패널입니다.
나는 컨테이너입니다.
나는 컨테이너입니다.
패널 클래스
w3-panel 클래스는 모든 HTML 요소에 16픽셀 의 위쪽 및 아래쪽 여백과 16픽셀의 왼쪽 및 오른쪽 패딩을 추가합니다.
예시
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
메모용 패널
w3-panel 클래스는 메모 표시에 적합합니다 .
메모는 종종 옅은 색으로 표시됩니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
예시
<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.CSS Notes에 대해 자세히 알아보려면 W3.CSS Notes 장을 방문하십시오.
견적용 패널
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.CSS Quotes에 대한 자세한 내용은 W3.CSS Quotes 장을 참조하십시오.
경고용 패널
w3-panel 클래스 는 경고 표시에 적합합니다.
경고는 종종 강한 색상을 사용하여 표시됩니다.
위험!
빨간색은 종종 위험하거나 부정적인 상황을 나타냅니다.
예시
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
W3.CSS 경고에 대해 자세히 알아보려면 W3.CSS 경고 장을 방문하십시오.
카드로서의 패널
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
예시
<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>
둥근 패널
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
예시
<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>
패널 숨기기(닫기)
패널을 숨기는 것은 쉽습니다.
X를 클릭하여 이 패널을 닫습니다.
X를 클릭하여 이 패널을 닫습니다.
예시
<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>