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 관련 속성
border-top-color : 색이름 | RGB값
윗쪽 보더의 색을 정한다.
모든 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자리의 숫자나 문자의 조합으로 만들어진다.
RGB표를 참고한다.
border-right-color : 색이름 | RGB값
오른쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 medium이다.
border-bottom-color : 색이름 | RGB값
아랫쪽 보더의 색을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 자신의 color 속성 또는 부모 element의 color 속성의 값이다.
border-left-color : 색이름 | RGB값
왼쪽 보더의 색을 정한다.
모든 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-color 속성은 익스플로러 4.0에서 아직 지원되지 않는다.
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에 적용할 수 있고, 유전되지 않는다.
span { border-style : dottted }
span.solid { border-style : solid }
span.dashed { border-style : dashed }
span.double { border-style : double }
span.groove { border-style : groove }
span.ridge { border-style : ridge }
span.inset { border-style : inset }
span.outset { border-style : outset } 이렇게 나와요
※ 익스플로러 4.0에서 제대로 나오지 않는다.
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 } /*보더 선은 굵은 선, 색은 빨강색.*/
◀ ▶