테두리 속성

목차

1) 테두리 스타일 지정하기

border-style 속성

① 기본 값이 none이기 때문에 화면에 테두리가 표시되지 않음

② 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정

③ 기본형 border-style : none | hidden | dashed | dotted | double | groove | insert | outset | ridge | solid

④ border-style에 지정 가능한 속성 값들

속성 값	설명	속성 값	설명
none	테두리가 나타나지 않음. 기본 값(아예 선이 없음)	groove	테두리를 창에 조각한 것처럼 표시.
hidden	테두리가 나타나지 않음. (선이 있으나 숨김)	insert	border-collapse:separate일 경우 전체 박스 테두리가 창에 박혀있는 것처 럼 표시 border-collapse:collapse일 경우 groove와 동일하게 표시
dashed	테두리를 짧은 선(직선모양의 점선)으로 표시	outset	border-collapse:separate일 경우 전체 박스 테두리가 창에서 튀어나온 것 처럼 표시 border-collapse:collapse일 경우 ridge와 동일하게 표시
dotted	테두리를 점선으로 표시.	ridge	테두리를 창에서 튀어나온 것처럼 표시
double	테두리를 이중선으로 표시. 두 선 사이의 간격은 border-width 값으로 설정	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

 

② 변형] border-width 속성 값의 개수에 따른 변화

- 1개 : 네 방향이 모두 동일한 두께

- 2개 : 위아래, 좌우 묶어서 두께 적용

- 4개 : top -> right -> bottom -> left순(시계방향) 으로 두께 적용

 

3) 테두리 색상 지정하기

border-color 속성

① 기본형

border-top-color : <색상>

border-right-color : <색상>

border-bottom-color : <색상>

border-left-color : <색상>

border-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 : <크기> | <백분율>

 

② 각 모서리의 반 지름이 border-radius의 속성 값이 됨

<크기> - 둥글게 처리할 반지름의 크기를 px이나 em같은 단위와 함께 수치로 표시

<백분열> - 현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정

 

6) 타원 형태로 둥글게 만들기

① 가로 반지름 크기와 세로 반지름 크기를 함께 지정

② 기본형

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

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

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

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

border-radius : <가로크기> <세로크기>

 

7) 선택한 요소에 그림자 효과 내기

box-shadow 속성

① 기본형

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

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

② 수평 거리와 수직 거리는 필수 값이고 기타 속성은 옵션

속성 값	설명
<수평 거리>	그림자의 수평 옵셋 거리(가로로 얼마나 떨어져 있는지) 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽으로 그림자 생성
<수직 거리>	그림자의 수직 옵셋 거리(세로로 얼마나 떨어져 있는지) 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽으로 그림자 생성
<흐림 정도>	그림자의 흐림 정도(blur radius) 지정. 기본 값은 0으로 가장 진한 그림 자 표시. 값이 커질 수록 부드러운 그림자 표현. 음수 값 사용불가.
<번짐 정도>	그림자의 번짐정도 지정. 양수 값은 모든 방향으로 퍼져 나가서 박스보 다 크게 표시. 음수 값은 모든 방향으로 축소되어 표시. 기본 값 0
<색상>	그림자의 색상 지정. 한 가지 색상이나 공백으로 구분해 여러 개 색상 지 정 가능. 기본 값은 현재 글자 색
inset	안쪽 그림자 그리기