• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
HTML

테이블(4신) - 테두리 색상

오작교 20325

0
Table 에관하여 4신
Table 테두리 네번째 시간입니다.
스타일을 이용한 테이블 테두리(frame)색지정에 관하여 알아봅니다.

테두리 색 지정은 style내에 border-top-color:색상코드; border-right-color:색상코드; border-bottom-color:색상코드; border-left-color:색상코드; 로 넣어주면 테두리의 색이 각각 지정됩니다. 예를 보면서 설명하겠습니다.

  1. 테두리 상단색 지정. border-top-color:색상코드;
     보드 스타일은 solid로 하고 상단 프레임색을 orange로 해보겠습니다.
     style="border-style:solid; border-top-color:orange;

     
style="border-style:solid; border-top-color:orange;

   결과 보기
style="border-style:solid; border-top-color:orange;


 결과에서 보듯이 
 테이블의 상단만 색이 정해지고 정의하지 않은 다른 테두리는
 기본적인 색이 나옵니다.

  2. 테두리 오른쪽 프레임색 지정. 
     1번의 예에서 border-right-color:색상코드; 를 추가 하면 됩니다.
     오른쪽은 프레임색을 green으로 해보겠습니다.
     style="border-style:solid; border-top-color:orange; border-right-color:green;

     
style="border-style:solid; border-top-color:orange; border-right-color:green;

   결과 보기
            style="border-style:solid; 
            border-top-color:orange; border-right-color:green;
          


  3. 테두리 아래쪽 프레임색 지정. 
     2번의 예에서 border-bottom-color:색상코드; 를 추가 하면 됩니다.
     아래쪽은 프레임색을 blue으로 해보겠습니다.
     style="border-style:solid; 
     border-top-color:orange; border-right-color:green; border-bottom-color:blue;

     
style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue;

   결과 보기
            style="border-style:solid; border-top-color:orange; 
                   border-right-color:green; border-bottom-color:blue;
          


  4. 테두리 왼쪽 프레임색 지정. 
     3번의 예에서 border-left-color:색상코드; 를 추가 하면 됩니다.
     왼쪽은 프레임색을 red으로 해보겠습니다.
     style="border-style:solid; 
     border-top-color:orange; border-right-color:green; 
     border-bottom-color:blue; border-left-color:red;

     
style="border-style:solid; border-top-color:orange; border-right-color:green; border-bottom-color:blue; border-left-color:red;

   결과 보기
  style="border-style:solid; border-top-color:orange; 
         border-right-color:green; border-bottom-color:blue;
         border-left-color:red;
          


이 테이블 테두리 색상도 스타일을 한꺼번에 지정할수 있습니다. 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개의 색 코드를 넣어야 겠죠.

다음 시간엔 테두리의 넓이를 조절하는 방법에 관하여 알아 보겠습니다.
안녕히~~
 
                                                                  출처 : 이양호님의 홈


공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 202202
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 287444 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 346494 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 291118 +14
300
normal
오작교 23.12.10.09:32 14332 0
299 Script
normal
오작교 23.12.10.09:29 19470 0
298 CSS
normal
오작교 21.01.09.14:18 40478 0
297 HTML
normal
오작교 15.09.17.08:58 116084 0
296 HTML
normal
오작교 15.09.13.21:38 21388 0
295 HTML
normal
오작교 15.09.13.21:30 24967 0
294 HTML
normal
오작교 15.08.30.12:19 52562 0
293 Script
normal
오작교 15.05.12.14:06 20912 0
292 HTML
file
오작교 12.03.08.13:51 35715 0
291 HTML
normal
오작교 11.06.03.10:44 40519 0
290 CSS
normal
오작교 11.06.03.10:29 70415 0
289 Script
normal
오작교 11.03.22.11:19 43234 0
288 Script
normal
오작교 11.03.22.11:15 37974 0
287 Script
normal
오작교 11.03.22.11:07 36859 0
286 HTML
normal
오작교 11.01.25.10:27 35996 0
285 CSS
normal
오작교 11.01.24.10:40 35117 0
284 HTML
normal
오작교 11.01.24.10:39 36843 0
283 Script
normal
오작교 11.01.24.10:34 37864 0
282 CSS
normal
오작교 11.01.24.10:31 37491 0
281 CSS
normal
오작교 11.01.24.10:27 35984 0