w3.css
테두리
I have borders.
I have only a left border.
I have a green top and bottom border.
I have blue borders.
Red border that turns green on hover.
W3.CSS 테두리 클래스
W3.CSS는 다음과 같은 테두리 클래스를 제공한다.
| 클래스 | 정의 |
|---|---|
| w3-경계 | 요소에 테두리(상단, 오른쪽, 하단, 왼쪽)를 추가한다. |
| w3-경계-상단 | 요소에 위쪽 테두리를 추가한다. |
| w3-경계-오른쪽 | 요소에 오른쪽 테두리를 추가한다. |
| w3-경계-하단 | 요소에 아래쪽 테두리를 추가한다. |
| w3-경계-왼쪽 | 요소에 왼쪽 테두리를 추가한다. |
| w3-경계-0 | 모든 테두리를 제거한다. |
| w3-경계- 색상 | 지정된 색상(빨간색, 파란색 등)으로 테두리를 표시한다. |
| w3-hover-경계- 색상 | 호버링 가능한 테두리 색상을 추가한다. |
| w3-하단바 | 요소에 두꺼운 아래쪽 테두리를 추가한다. |
| w3-왼쪽 막대 | 요소에 두꺼운 왼쪽 테두리를 추가한다. |
| w3-오른쪽 막대 | 요소에 두꺼운 오른쪽 테두리를 추가한다. |
| w3-톱바 | 요소에 두꺼운 위쪽 테두리를 추가한다. |
테두리 추가
w3-border 클래스는 HTML 요소에 테두리를 추가하는 데 사용된다.
나에겐 테두리 있다.
왼쪽 테두리만 있다.
위쪽 및 아래쪽 테두리가 있다.
예제
<div class="w3-panel w3-border"> <p>I have borders.</p> </div> <div class="w3-panel w3-border-left"> <p>I have only a left border.</p> </div> <div class="w3-panel w3-border-top w3-border-bottom"> <p>I have top and bottom borders.</p> </div>
테두리 색상
w3-border-color 클래스는 테두리에 색상을 추가하는 데 사용된다.
빨간색 테두리가 있다.
파란색 왼쪽 테두리가 있다.
녹색 위쪽 및 아래쪽 테두리가 있다.
빨간색 왼쪽 테두리와 연한 빨간색 배경색이 있다.
예제
<div class="w3-panel w3-border w3-border-red"> <p>I have red borders.</p> </div> <div class="w3-panel w3-border-left w3-border-blue"> <p>I have a blue left border.</p> </div> <div class="w3-panel w3-border-top w3-border-bottom w3-border-green"> <p>I have a green top and bottom border.</p> </div>
둥근 테두리
둥근 테두리를 추가하려면 w3-round-size 클래스 중 하나를 추가한다.
나는 정상적인 테두리를 가지고 있다.
작은 둥근 테두리가 있다.
나는 둥근 테두리를 가지고 있다.
나는 큰 둥근 테두리를 가지고 있다.
나는 매우 큰 둥근 테두리를 가지고 있다.
나는 xxlarge의 둥근 테두리를 가지고 있다.
예제
<div class="w3-panel w3-border"> <p>My borders are normal.</p> </div> <div class="w3-panel w3-border w3-round-small"> <p>My borders are rounded (small).</p> </div> <div class="w3-panel w3-border w3-round"> <p>My borders are rounded.</p> </div> <div class="w3-panel w3-border w3-round-large"> <p>I have large rounded borders.</p> </div> <div class="w3-panel w3-border w3-round-xlarge"> <p>I have xlarge rounded borders.</p> </div> <div class="w3-panel w3-border w3-round-xxlarge"> <p>I have xxlarge rounded borders.</p> </div>
두꺼운 테두리
w3-topbar, w3-bottombar, w3-leftbar 및 w3-rightbar 클래스는 요소에 두꺼운 테두리를 추가하는 데 사용된다.
예제
<div class="w3-panel w3-leftbar"> <p>I have a thick left border.</p> </div> <div class="w3-panel w3-leftbar w3-border-blue"> <p>I have a thick blue left border.</p> </div> <div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue"> <p>I have a thick blue left border and a pale-blue background color.</p> </div> <div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red"> <p>I have a thick red top and bottom border and a pale-red background color.</p> </div>
호버링 가능한 테두리
w3-hover-border-color 클래스는 마우스를 올리면 테두리 색상을 변경한다.
마우스를 올리면 빨간색으로 변하는 테두리다.
마우스를 올리면 녹색으로 변하는 빨간색 테두리다.
예제
<div class="w3-panel w3-border w3-hover-border-red"> <p>Border that turns red on hover</p> </div> <div class="w3-panel w3-border w3-border-red w3-hover-border-green"> <p>Red border that turns green on hover</p> </div>
예제
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green"> <p>Thick (invisible) left border that turns green on hover.</p> </div> <div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green"> <p>Thick (invisible) bottom border that turns green on hover.</p> </div>
마우스를 올리면 녹색으로 변하는 두꺼운 흰색(보이지 않는) 테두리다.
마우스를 올리면 검은색으로 변하는 두꺼운 흰색(보이지 않는) 테두리다.
예제
<div style="border:16px solid white" class="w3-panel w3-hover-border-green"> <p>Thick (invisible) border that turns green on hover.</p> </div> <div style="border:16px solid white" class="w3-panel w3-hover-border-black"> <p>Thick (invisible) border that turns black on hover.</p> </div>
참고
