Border 속성
보더 부분의 폭을 지정하는 속성으로, 크게 border-width, border-color, border-style, border로 나누고, 각각 세분화된다.
기호 설명
A | B:A 또는 B 중의 하나이다.
[ ]:일반적인 의미의 괄호이다.
A{1,4}:A가 최소한 1번에서 최대한 4번 들어간다.
<A>:A 속성의 값이 들어간다.
A || B:A 또는 B 중의 하나, 또는 두 개가 다 들어갈 수 있다.
Border-width 관련 속성
border-top-width:thin | medium | thick | 길이
윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-right-width:thin | medium | thick | 길이
오른쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-bottom-width:thin | medium | thick | 길이
아랫쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-left-width:thin | medium | thick | 길이
왼쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-width:[thin | medium | thick | 길이]{1,4}
네 곳의 보더 폭을 동시에 정한다.{1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다.
즉, thin, medium, thick이나 길이를 1번에서 4번까지 쓸 수 있다는 뜻이다.
네 번을 썼을 때 순서는 top, right, bottom, left이다.
모든 element에 적용할 수 있고, 유전되지 않는다.
대표속성에는 초기값이 없다.
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 */
Border-color 관련 속성
윗쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 자신의 color 속성 또는 부모 element의 color 속성의 값이다.
윈도우의 기본 16색인
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow는 이름을 그대로 쓸 수 있다. 이상 16색 외에도
orange
pink 등이 있다.
색 이름을 쓰면 그대로 나오는 것들이 더 있는데 브라우저에 따라서 지원되지 않을 수도 있으므로 주의해야 한다.
나머지 색은 색의 RGB값을 쓴다. RGB란 색상을 red, green, blue의 조합으로 나타내는 것으로 #뒤에 6자리의
숫자나 문자의 조합으로 만들어진다.
오른쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-bottom-color:색이름 | RGB값
아랫쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 자신의 color 속성 또는 부모 element의 color 속성의 값이다.
왼쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 자신의 color 속성 또는 부모 element의 color 속성의 값이다.
border-color:[색이름 | RGB값]{1,4}
네 곳의 보더 색을 동시에 정한다.{1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다. 색이름이나 RGB값을 1번에서 4번까지 쓸 수 있다는 뜻이다. 네 번을 썼을 때 순서는 top, right, bottom, left이다.
모든 element에 적용할 수 있고, 유전되지 않는다.
대표속성에는 초기값이 없다.
H1{border-color:black} /* black black black black */
H1{border-color:black yellow} /* black yellow black yellow */
H1{border-color:black yellow pink} /* black yellow pink yellow */
Border-style 관련 속성
border-top-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset
윗쪽 보더의 모양을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 없다.
border-right-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset
오른쪽 보더의 모양을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 없다.
border-bottom-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset
아랫쪽 보더의 모양을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 없다.
border-left-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset
왼쪽 보더의 모양을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 없다.
border-style:[none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
네 곳의 보더 모양을 동시에 정한다.{1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다.
즉, thin, medium, thick이나 길이를 1번에서 4번까지 쓸 수 있다는 뜻이다.
네 번을 썼을 때 순서는 top, right, bottom, left이다.
색은 color 속성의 값을 사용한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
대표속성에는 초기값이 없다.
P{border-style:dotted}
P.solid{border-style:solid}
P.dashed{border-style:dashed}
P.double{border-style:double}
P.groove{border-style:groove}
P.ridge{border-style:ridge}
P.inset{border-style:inset}
P.outset{border-style:outset}
Border 관련 속성
border-top:<border-top-width>|| <border-top-style>|| color
윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 각각의 속성의 초기값이다.
border-right:<border-right-width>|| <border-right-style>|| color
오른쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 각각의 속성의 초기값이다.
border-bottom:<border-bottom-width>|| <border-bottom-style>|| color
아랫쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 각각의 속성의 초기값이다.
border-left:<border-left-width>|| <border-left-style>|| color
왼쪽 보더의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 각각의 속성의 초기값이다.
border:[<border-width>|| <border-style>|| color]{1,4}
네 곳의 보더 폭을 동시에 정한다.{1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다.
즉, thin, medium, thick이나 길이를 1번에서 4번까지 쓸 수 있다는 뜻이다.
네 번을 썼을 때 순서는 top, right, bottom, left이다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 각각의 속성의 초기값이다.
P{border:solid red} /*보더 선은 굵은 선, 색은 빨강색.*/
border를 가늘게 표기하는 스타일: border-collaspe
표기 방법: {border-collapse:collapse}
border-collaspe 속성은 셀 외곽선의 표시 형식을 설정하는 속성으로 인접한 외곽선들을 중복하여
표시하는 형식과 간격을 두고 각각 표시하는 형식이 있습니다.
collapse 테이블 전체의 주변 외곽선이나 각 셀의 외곽선을 그 경계에 중복하여 표시합니다.
너비나 형식이 다른 외곽선이 중복된 경우 표시되는 우선순위는 다음과 같습니다.
☞ border-style 속성값이 hidden 으로 설정되어 있는 외곽선이 있으면 그것이 최우선이 되고
다음에 다른것 보다 넓은 외곽선이 있으면 그것이 표시됩니다.
☞ 너비가 같은 경우에는 그 형식이 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표시됩니다.
☞ 색만 다른 경우에는 셀, 가로열, 가로열 그룹, 새로열, 새로열 그룹, 테이블 순서로 표시됩니다.