테두리 관련 속성들

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 테두리 스타일 지정 - border-style
• 2) 테두리 두께 지정 - border-width
• 3) 테두리 색상 지정 - border-color
• 4) 테두리 스타일 묶어 지정 - border
• 6) 선택한 요소에 그림자 효과 내기 - box-shadow

 

1. 테두리 관련 속성들

테두리는 텍스트 단락뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 다양하게 적용할 수 있다.

 

1) 테두리 스타일 지정 - border-style

테두리 스타일의 기본값은 none이기 때문에 테두리를 그리기 위해서는 제일 먼저 테두리 스타일을 지정해야 한다.

선택자 { border-style: 속성 값 }

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

 

 

2) 테두리 두께 지정 - border-width

테두리의 상하좌우 그리고 테두리의 전체 두께를 각각 지정할 수 있다.

border-with속성을 이용해 한꺼번에 표시할 때 속성 값이 2개라면 상하와 좌우를 묶어 지정하고 4개라면 위 방향부터 시계 방향으로 적용한다. 

선택자 { border-width: 크기 | thin | medium | thick }
선택자 { border-top-width: 크기 | thin | medium | thick }
선택자 { border-right-width: 크기 | thin | medium | thick }
선택자 { border-bottom-width: 크기 | thin | medium | thick }
선택자 { border-left-width: 크기 | thin | medium | thick }

 

 

3) 테두리 색상 지정 - border-color

선택자 { border-color: 색상 }
선택자 { border-top-color: 색상 }
선택자 { border-right-color: 색상 }
선택자 { border-bottom-color: 색상 }
선택자 { border-left-color: 색상 }

 

 

4) 테두리 스타일 묶어 지정 - border

선택자 { border: 두께 색상 스타일 }
선택자 { border-top: 두께 색상 스타일 }
선택자 { border-right: 두께 색상 스타일 }
선택자 { border-bottom: 두께 색상 스타일 }
선택자 { border-left: 두께 색상 스타일 }

 

 

5) 박스 모서리 둥글게 만들기 - border-radius

둥글게 만들고 싶은 박스 모서리의 두 방향과 반지름을 뜻하는 radius를 사용해 속성을 표기한다.

선택자 { border-top-right-radius: 크기 | 백분율 }
선택자 { border-top-left-radius: 크기 | 백분율 }
선택자 { border-bottom-right-radius: 크기 | 백분율 }
선택자 { border-bottom-left-radius: 크기 | 백분율 }
선택자 { border-radius: 크기 | 백분율 }

 

속성 값	설명
크기	둥글게 처리할 반지름 크기 px이나 em같은 단위와 함께 수치로 표시한다.
백분율	현재 요소의 크기를 기준으로 둥글게 처리할 반지름 크기를 %로 지정한다.
가로크기 세로크기	- 타원 형태로 둥글게 만들고 싶다면 가로 반지름 크기와 세로 반지름 크기를 함께 지정한다. - 각 모서리마다 따로 지정한다면 가로반지름과 세로반지름을 차례로 입력하면 되지만, border-radius로 네 방향을 한꺼번에 지정할 땐 가로반지름과 세로반지름 사이에 /를 넣어 구분해야 한다.

 

 

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

box-shadow속성을 이용해 선택한 요소 뒤에 그림자 효과를 넣을 수 있는데, box-shadow속성 값에 따라 그림자의 위치나 색상, 흐림정도를 조절할 수 있다.

선택자 { box-shadow: 속성 값 }

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