테두리 색 지정은 style내에
border-top-color:색상코드;
border-right-color:색상코드;
border-bottom-color:색상코드;
border-left-color:색상코드;
로 넣어주면 테두리의 색이 각각 지정됩니다.
예를 보면서 설명하겠습니다.
결과에서 보듯이
테이블의 상단만 색이 정해지고 정의하지 않은 다른 테두리는
기본적인 색이 나옵니다.
2. 테두리 오른쪽 프레임색 지정.
1번의 예에서 border-right-color:색상코드; 를 추가 하면 됩니다.
오른쪽은 프레임색을 green으로 해보겠습니다.
style="border-style:solid; border-top-color:orange; border-right-color:green;
이 테이블 테두리 색상도 스타일을 한꺼번에 지정할수 있습니다.
border-color:상단색코드 오른쪽색코드 하단색코드 왼쪽색코드;
전번 시간에 배우신 테이블 테두리형태를 지정하는방법과 같아요.
상단 오른쪽 하단 왼쪽순으로 표현 합니다.
예 : border-color:orange green blue red;
border-color:orange green blue red;
결과 보기
style="border-style:solid; border-color:orange green blue red;
4번의 복잡한 소스로 만든 예와 똑 같습니다.
border-color:orange 와 같이 색을 하나만 넣으면 모든 테두리 색이 동일하게 됩니다.
border-color:orange green 이렇게 두가지의 색을 지정하면 orange는 상하로 나타나고
green은 오른쪽과 왼쪽으로 나타 납니다.
border-color:orange 와 같이 색을 하나만 넣었을때 결과
style="border-style:solid;
border-color:orange
border-color:orange green 이렇게 두가지의 색을 지정한 결과
style="border-style:solid;
border-color:orange green
정리를 해보면
1. 한가지색으로 지정 할려면
border-color:orange 와 같이 하나만 넣으면 되고.
2. 상하 와 좌우를 다른색으로 할경우는
border-color:orange green 과 갚이 두개의 색 코드를 넣으면 됩니다.
3. 모든 프레임의 색을 달리할 경우
border-color:orange green blue red; 이렇게 4개의 색 코드를 넣어야 겠죠.
다음 시간엔 테두리의 넓이를 조절하는 방법에 관하여 알아 보겠습니다.
안녕히~~