목록

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개의 색 코드를 넣어야 겠죠.

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


이 게시물을