'테두리 관련 속성' 태그의 글 목록

테두리 관련 속성

편네 2017. 4. 13. 11:42

2017. 4. 13. 11:42

1. border-style 속성 - 테두리 스타일 지정

속성 값	설명
none	테두리가 나타나지 않는다. 기본 값
hidden	테두리가 나타나지 않는다. border-collapse:collapse일 경우, 다른 테두리도 표시되지 않는다.
dashed	테두리를 짧은 선으로 표시한다.
dotted	테두리를 점선으로 표시한다.
double	테두리를 이중선으로 표시한다. 두 선 사이의 간격은 border-width 값으로 지정한다.
groove	테두리를 창에 조각한 것처럼 표시한다. 홈이 파인 듯 입체적으로 보인다.
inset	border-collapse:separate일 경우, 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고 border-collapse:collapse일 경우, groove와 똑같이 표시된다.
outset	border_collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collapse일 경우, ridge와 똑같이 표시된다.
ridge	테투리를 창에서 튀어나온 것처럼 표시한다.
solid	테두리를 실선으로 표시한다.

2. border-width 속성 - 테두리 두께 지정

border-top-width: <크기> | thin | medium | thick

border-right-width: <크기> | thin | medium | thick

border-bottom-width: <크기> | thin | medium | thick

border-left-width: <크기> | thin | medium | thick

border-width: <크기> | thin | medium | thick

3. border-color 속성 - 테두리 색상 지정

border-top-color: <색상>

border-right-color: <색상>

border-bottom-color: <색상>

border-left-color: <색상>

border-color: <색상>

4. border 속성 - 테두리 스타일 묶어 지정

두께와 색상, 스타일 순서는 상관없습니다.

border-top: <두께> | <색상> | <스타일>

border-right: <두께> | <색상> | <스타일>

border-bottom: <두께> | <색상> | <스타일>

border-left: <두께> | <색상> | <스타일>

border: <두께> | <색상> | <스타일>

5. border-radius 속성 - 박스 모서리 둥글게 만들기

border-top-left-radius: <크기> | <백분율>

border-top-right-radius: <크기> | <백분율>

border-bottom-right-radius: <크기> | <백분율>

border-bottom-left-radius: <크기> | <백분율>

border-radius: <크기> | <백분율>

타원 형태로 둥글게 만들고 싶으면 가로 반지름 크기와 세로 반지름 크기를 함께 지정하면 됩니다.

.round1 { border-top-left-radius:100px 50px; }
.round2 { border-bottom-right-radius:50% 30%; }

6. box-shadow 속성 - 선택한 요소에 그림자 효과 내기

box-shadow : none | <그림자 값> [, <그림자 값>]*;

<그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

.box1{ box-shadow:2px -2px 5px 0px black;}
.box2{ box-shadow:5px 5px 15px 5px gray;}

<출처> Do it! HTML5+CSS3 웹 표준의 정석