티스토리 뷰

* CSS에서는 다양한 border 스타일들을 제공하고 있다. 일단 border 스타일의 종류를 먼저 예제로 간단하게 알아보고 그 아래에 좀더 상세하게 살펴보자.

: 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 제대로 표시되지 않을 수 있다.

 

* 각 스타일에 대한 예제이다.

border-style:dotted


border-style:solid


border-style:double


border-style:groove


border-style:ridge


border-style:inset


border-style:outset

 


 

* 보더의 넓이에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-width:5px


border-style:solid;border-width:thin


border-style:solid;border-width:memium


border-style:solid;border-width:thick

 


 

* 보더의 색에 대한 예제이다. border-style과 같이 쓰지 않으면 아무런 효과가 없다.

border-style:solid;border-color:red


border-style:solid;border-color:gray


border-style:solid;border-color:black


border-style:solid;border-color:rgb(255,0,0)


border-style:solid;border-color:#ff0000

 


 

* 보더의 넓이, 스타일, 색을 한줄로 나타내기

border:dotted #ff0000 3px

 


 

* 각 방향의 보더를 다르게 설정

border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style:ridge


border-style:dotted solid double ridge

 


 

* 아래는 각 스타일에 대한 설명이다.

* 보더의 형태를 나타낸다.

border-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 넓이

border-width

: 5px, thin, medium, thick

 

* 색

border-color

: red, blue, green, gray, black, lightgray, rgb(255,0,0), #ff0000

 

* 각 방향의 스타일을 다르게 설정

border-top-style, border-right-style, border-bottom-style, border-left-style

: none, dotted, solid, double, groove, ridge, inset, outset

 

* 위의 스타일을 간단하게 나타내기

border-style: dotted solid double dashed;

: 위는 dotted, 오른쪽은 solid, 아래는 double, 왼쪽은 dashed의 스타일을 가짐

 

* 짧게 넓이, 스타일, 색을 나타태기

border: 5px dotted red;

: 넓이는 5px, 스타일은 dotted, 색은 red (style은 필수)

 

 

 

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함