[HTML5 & CSS3] 테두리 관련 속성들

▶ 테두리 관련 속성들

​

*border-style 속성 - 테두리 스타일 지정하기

​

기본형) border-style : none / hidden / dashed / dotted / groove / inset / outset / ridge / solid

속성 값	설명
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	테두리를 실선으로 표시한다.

​​

테두리 스타일 지정하기

 

​

 

​

*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

 

​

 

*border-color 속성 - 테두리 색상 지정하기

​

기본형)

border-top-color : <색상> border-right-color : <색상> border-bottom-color : <색상> border-left-color : <색상> border-color : <색상>

 

테두리 색상 지정하기

 

​

​

 

*border 속성 - 테두리 스타일 묶어 지정하기

​

기본형)

border-top : <두께> <색상> <스타일> border-right : <두께> <색상> <스타일> border-bottom : <두께> <색상> <스타일> border-left : <두께> <색상> <스타일> border : <두께> <색상> <스타일>

 

 

 

 

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

​

기본형)

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

속성 값	설명
<크기>	둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시한다.
<백분율>	현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정한다.

​

​

 

*타원 형태로 둥글게 만들기

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

​

기본형)

border-top-left-radius : <가로 크기> <세로 크기> border-top-right-radius : <가로 크기> <세로 크기> border-bottom-right-radius : <가로 크기> <세로 크기> border-bottom-left-radius : <가로 크기> <세로 크기> border-radius : <가로 크기> <세로 크기>

 

모서리의 가로와 세로를 각각 둥글게 처리하기

 

​

 

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

box-shadow 속성에서 수평 거리와 수직 거리는 반드시 지정해야 하며(필수) 기타 속성 값은 옵션이므로 필요할 때만 사용하면 된다.

​

기본형)

box-shadow : none / <그림자 값> [, <그림자 값>]*; <그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

 

속성 값	설명
<수평 거리>	그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지)이다. 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만든다. 필수 속성.
<수직 거리>	그림자의 수직 옵셋 거리(수평으로 얼마나 떨어져 있는지)이다. 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만든다. 필수 속성.
<흐림 정도>	그림자의 흐림 정도(blur radius)를 지정한다. 이 값을 생략하면 0을 기본 값으로 해 진한 그림자를 표시한다. 이 값이 커질수록 부드러운 그림자를 표시하며 음수 값은 사용할 수 없다.
<번짐 정도>	그림자의 번지는 정도를 나타낸다. 양수 값을 사용하면 그림자가 모든 방향을 퍼져 나가기 때문에 그림자가 박스보다 크게 표시된다. 반대로 음수 값은 그림자가 모든 방향으로 축소되어 보인다. 기본 값은 0이다.
<색상>	그림자의 색상을 지정한다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 개의 색상을 지정할 수도 있다. 필요한 경우에만 사용하는 옵션 값이며 기본 값은 현재 글자 색이다.
inset	이 키워드를 함께 표시하면 안쪽 그림자로 그린다. 필요한 경우에만 사용하는 옵션 값이다.

​

그림자 효과 추가하기