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

w3.css

테두리

I have borders.

I have only a left border.

I have a green top and bottom border.

I have blue borders.

I have a thick left border.

I have a thick blue top and bottom border.

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