테두리(border) 속성

테두리(border) 속성
테두리 속성들은 박스의 테두리 지역 너비, 색상 스타일을 지정한다. 이 속성은 모든 엘레멘트에 적용된다.

주석. 특히 HTML에서, 사용도구들은, 일반적인("ordinary") 엘레멘트들에서와는 다르게, 일부 엘레멘트(예: button, menu, 등)에서는, 테두리들을 읽어 표현할 수 있다.

8.5.1 테두리 너비:

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width'
테두리 너비 속성은 테두리 지역의 너비를 지정한다, 이 항목에서 정의된 속성은 값 타입 <border-width>를 참조하며, 다음 중 하나의 값을 갖는다:

thin
얇은(thin) 테두리.
medium
보통(medium) 테두리.
thick
두꺼운(thick) 테두리.
<길이>
테두리의 두께는 명시적인 값이다. 명시적 테두리 너비는 음수가 될 수 없다.
앞의 세가지 값들의 해석은 사용도구에 따라 다르나, 다음 관계를 준수하여야 한다:

'thin' <='medium' <= 'thick'.

나아가, 이 너비들은 한 문서를 통하여 균일하여야 한다.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
값: <border-width> | inherit
최초값: medium
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

이 속성들은 박스의 맨위, 오른쪽, 바닥, 왼쪽 테두리 너비를 시계방향으로 설정한다.

'border-width'
값: <border-width>{1,4} | inherit
최초값: 각 속성들을 보라
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

이 속성은 스타일쉬트에서 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'를 한번에 설정하는 약식속성이다.

값이 하나 만 있으면, 모든 면들에 적용된다.
값이 두개이면, 맨위와 바닥 테두리는 첫 값으로, 오른쪽과 왼쪽 테두리는 두째 값으로 설정된다.
값이 세개이면, 맨위는 첫 값으로, 왼쪽과 오른쪽은 두째 값으로, 바닥은 세째 값으로 설정된다.
값이 네개이면, 각각은 맨위, 오른쪽, 바닥, 왼쪽의 순서(시계방향)로 설정된다.

예제:

아래 예제에서, 주석(comment)들은 결과적인 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비를 순서대로 나타낸다:

H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thick */
8.5.2 테두리(border) 색상:

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color', 'border-color'
테두리 색상 속성은 박스의 테두리 색상을 지정한다.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
값: <색상> | inherit
최초값: 그 'color' 속성값
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

'border-color'
값: <색상>{1,4} | transparent | inherit
최초값: 각 속성들을 보라
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

'border-color'는 네 테두리들의 색상 속성을 지정하며, 값들은 다음의 의미를 갖는다:

<색상>
색상값을 지정한다.
transparent
이 테두리는 너비를 가질 수 있지 만 투명(transparent)하다.
'border-color' 속성은 네가지 값의 종류들 중 한가지를 가질 수 있고, 그 값들은, 'border-width'에서와 같은 방식으로, 다른 면들의 색상들을 설정한다.

엘레멘트의 테두리 색상이 테두리 속성에서 지정되지 않았으면, 사용도구들은, 테두리 색상의 계산된 값과 같이, 그 엘레멘트의 'color' 속성값을 사용하여야 한다.

예제:

이 예제에서, 테두리는 두꺼운 검정 실선이 된다.

P {
color: black;
background: white;
border: solid;
}
8.5.3 테두리(border) 스타일:

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'border-style'
이 테두리 스타일 속성들은 박스 테두리 줄의 스타일(solid, double, dashed, 등)을 지정한다. 이 항목에서 정의된 속성은 <border-style> 값 타입을 참조하며, 다음 중 하나가 될 수 있다:

none
테두리가 없슴. 이 값은 'border-width'의 계산된 값를 강제로 '0'으로 만든다.
hidden
'none'과 같으나, 테이블(table) 엘레멘트의 테두리의 해상도 마찰(conflict resolution)에서는 예외이다.
dotted
테두리가 점선이다.
dashed
테두리가 짧은 선 조각들의 연속이다.
solid
테두리는 단일한 줄이다.
double
테두리가 두개의 실선(solid) 줄로 된다. 두 줄들의 합계와 그 사이의 공간은 'border-width'의 값과 같다.
groove
테두리가 창(canvas)에서 조각(파진)된 것처럼 보인다.
ridge
'grove'의 반대: 테두리가 창에서 튀어나온 것처럼 보인다.
inset
테두리가 창에서 전체 박스가 깔려있는(embed) 것처럼 보인다.
outset
'inset'의 반대: 테두리가 창에서 전체 박스가 튀어나온 것처럼 보인다.
모든 테두리들은 박스 배경의 맨위 그려진다. 'groove', 'ridge', 'inset', 'outset' 값들에 따라 그려진 테두리의 색상은 그 엘레멘트의 'color' 속성에 따라 다르다.

규격에 부합하는 HTML 사용도구들은 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset', 'outset'들을 'solid'로 해석해도 된다.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
값: <border-style> | inherit
최초값: none
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

'border-style'
값: <border-style>{1,4} | inherit
최초값: 각 속성들을 보라
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

'border-style' 속성은 네 테두리의 스타일을 설정한다. 이는 네가지 값 중의 하나가 될 수 있으며, 그 값들은, 위에 기술된 'border-width'에서와 같이 다른 면들을 설정한다.

예제:

#xy34 { border-style: solid dotted }
위 예제에서, 수평 테두리들은 'solid'가 되고, 수직 테두리들은 'dotted'가 된다.

테두리 스타일의 최초값이 'none' 이므로, 테두리 스타일이 설정되지 않는 한, 테두리는 보이지 않는다.

8.5.4 테두리(border) 약식속성:

'border-top', 'border-bottom', 'border-right', 'border-left', 'border'
'border-top', 'border-right', 'border-bottom', 'border-left'
값: [ <'border-top-width'> || <'border-style'> || <색상> ] | inherit
최초값: 각 속성들을 보라
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

이는 박스 맨위, 오른쪽, 바닥, 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약식속성이다.

예제:

H1 { border-bottom: thick solid red }
위 명령은 H1 엘레멘트의 아래쪽 테두리의 너비, 스타일, 색상를 설정한다. 생략된 값은 그들의 최초값들로 설정된다. 다음 명령은 테두리 색상을 지정하지 않았으므로, 이 테두리는 'color' 속성에 의하여 지정된 색상을 갖는다:

H1 { border-bottom: thick solid }
'border'
값: [ <'border-width'> || <'border-style'> || <색상> ] | inherit
최초값: 각 속성들을 보라
적용: 모든 엘레멘트들
전달: 안됨
백분율: 사용 못함
메디아: visible(보이는)

'border' 속성은 박스의 모든 네 테두리들에 같은 너비, 색상, 스타일을 설정하는 약식속성이다. 'margin', 'padding' 속성의 약식 명령들과는 달리, 이 'border' 속성은 네 테두리들에 다른 값들을 설정할 수 없다. 그렇게 하기 위하여서는, 하나이상의 다른 테두리 속성들을 사용하여야 한다.

예제:

예를 들어, 아래 첫번째 명령은 그 다음에 있는 네개의 명령들에 의하여 설정된 것과 같다:

P { border: solid red }

P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
이 속성들은, 어느 정도 기능성이 중첩되어 있어 어떤 명령들을 어떤 순서로 지정하는가는 중요하다.

예제:

이 예제를 보자:

BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
}
위 예제에서, 왼쪽 테두리의 색상은 검정이며, 다른 테두리들은 적색이다. 이는 'border-left'가 너비, 스타일, 색상을 설정하였기 때문이다. 'border-left' 속성에 의하여 색상값이 주어지지 않았으므로, 그 'color' 속성으로 부터 가져 온다. 'color' 속성이 'border-left' 속성 다음에 설정되지 않았기 때문이다.