요소에 적용되는 테두리. 지정하지 않으면 패딩박스 위에 나타난다.
border-width, border-style, border-color을 한 번에 쓸 수 있는 축약 속성이다. (순서 상관X)
border-width
선의 두께를 뜻한다. 여러가지 단위 값으로 조정할 수 있다. 필수 속성.
border-style
선의 모양을 뜻한다. 필수 속성.
| 속성명 | 예시 | 설명 |
|---|---|---|
| none |
- 테두리를 없앤다. - 주변칸이 테두리를 가진다면 가진다. - hidden보다 우선 순위가 낮음.
|
|
| hidden | - 테두리를 무조건 없앤다. | |
| dotted |
- 작은 점으로 이루어진 선. - 점의 반지름은 선 두께의 절반값이다. |
|
| dashed |
- 작은 직사각형으로 이루어진 선. |
|
| solid | - 평범한 직선. | |
| double | - 두 줄의 평행한 직선. | |
| groove | - 테두리 부분이 파인 것처럼 표현됨. | |
| ridge |
- 테두리 부분이 튀어나온 것처럼 표현됨. - 액자틀 같은 느낌. |
|
| inset | - 요소 부분이 파인 것처럼 표현됨. | |
| outset | - 요소 부분이 튀어나온 것처럼 표현됨. |
border-color
선 색상을 지정할 수 있다. 따로 지정하지 않으면 검은색으로 나온다.
컬러 입력 방법은 아래 링크 참고.
border-style을 지정하지 않으면 다른 값을 잘 써도 화면에 나타나지 않는다. 반드시 써야함.
요소의 테두리의 테두리를 지정하는 속성. 보더 박스 위에 나타난다.
outline-width, outline-style, outline-color, outline-offset 을 한 번에 쓸 수 있는 축약 속성이다. (순서 상관X)
각각의 세부 속성은 border와 같기 때문에 설명은 생략한다.
outline-offset은 보더와 아웃라인 간의 간격을 뜻한다.
outline-style도 보더와 마찬가지로 지정하지 않으면 다른 값을 잘 써도 화면에 나타나지 않는다. 반드시 써야함.
아웃라인은 요소 크기에 계산되지 않는다.
Follow your own star.
너 자신의 별을 좇아라.
Don't sweat the small stuff.
사소한 일에 집착하지 말아라.
Better late than never.
아예 안하는 것 보다 늦게라도 하는 것이 낫다.
Whenever you are asked if you can do a job, tell "Certainly I can!" Then get busy and find out how to do it. (Theodore Roosevelt)
당신이 어떤 일을 해낼 수 있는지 누군가가 물어보면 대답해라. "물론이죠!" 그 다음 어떻게 그 일을 해낼 수 있을지 부지런히 고민하라. (시어도어 루스벨트)