http://cafe.naver.com/q69/63086

1) 테두리의 색상, 형식 두께를 지정하는 border 속성<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />


 


★ border 속성을 이용한 테두리 색상 설정하기



속성

형식


{ border-color:[색상명 | 색코드]{1,4} }

테두리 색상을 한꺼번에 설정


{ border-top-color:색상명 | 색코드 }

위쪽 테두리의 색상 설정


{ border-bottom-color:색상명 | 색코드 }

아래쪽 테두리의 색상 설정


{ border-left-color:색상명 | 색코드 }

왼쪽 테두리의 색상 설정


{ border-right-color:색상명 | 색코드 }

오른쪽 테두리의 색상 설정


 


★ border 속성을 이용한 테두리 형식 설정하기



속성

형식


{ border-style:속성값{1,4} }

테두리 스타일을 한꺼번에 설정


{ border-top-style:속성값 }

테두리 위쪽 스타일 설정


{ border-bottom-style:속성값 }

테두리 아래쪽 스타일 설정


{ border-left-style:속성값 }

테두리 왼쪽 스타일 설정


{ border-right-style:속성값 }

테두리 오른쪽 스타일 설정


 


★ border 속성을 이용한 테두리 두께 설정하기



속성

형식


{border-width:[thin | medium | thick | 길이]{1,4}}

테두리두께를 한꺼번에 설정


{border-top-width:thin | medium | thick | 길이}

테두리 위쪽 두께 설정


{border-bottom-width:thin | medium | thick | 길이}

테두리 아래쪽 두께 설정


{border-left-width:thin | medium | thick | 길이}

테두리 왼쪽 두께 설정


{border-left-width:thin | medium | thick | 길이}

테두리 오른쪽 두께 설정


★ border 속성을 이용한 테두리 일괄적으로 설정하기



속성

형식


{ border:테두리 두께 색상스타일}

테두리 일괄 설정


{ border-top:테두리두께색상스타일}

위쪽 테두리 일괄 설정


{ border-bottom:테두리두께색상스타일}

아래쪽 테두리 일괄 설정


{ border-left:테두리두께색상스타일}

왼쪽 테두리 일괄 설정


{ border-right:테두리두께색상스타일}

아래쪽 테두리 일괄 설정


 


① 테두리 색상 설정


테두리의 색상을 설정하려면 border-color를 이용한다. {1,4}는 최소 1개에서 최대 4개 들어간다는 뜻이다. 네 개를 모두 지정하면 그 순서 의미는 top, right, bottom, left이다.


 


 


② 테두리 스타일 설정


 


테두리의 스타일을 설정하려면 border-style을 이용한다.


 


 



속성

형식