테이블(2신) - 펌

테이블 테두리 1신은 모두 익히셨어요?
복사해서 사용하지 마시고 직접 타이핑해서 만드세요.
그래야 실력이 늘어요!!
1신에서 style="border-style:변수; 를 넣으면 테이블 테두리가 모두 한꺼번에
같은 모양이 되었습니다.
style="border-변수-style:변수;" 로 설정하면
테이블 테두리를 상 우 하 좌 로 각각도 설정할수 있습니다.
상하 좌우가 아니고 상우하좌라는걸 일단 명심 하셔야 해요.

  1.상단 테두리 border-top-style:변수; ☞변수에 1신에 나온 테두리 모양의 이름을 넣으면 됩니다.
    예 1 : border-top-style:double 로 해볼까요? 테두리가 이중인 명령어죠
     style="border-top-style:double;">
        
border-top-style:double 

    결과보기

border-top-style:double 

    

    예 2 : border-top-style:dashed 로 한걸 하나 더보겠습니다.
     style="border-top-style:dashed;">
        
border-top-style:dashed 

   2. 이번에는 오른쪽의 테두리도 다른것으로 바꾸어 보죠.
      예2에서 border-right-style:double; 을 추가 하면 됩니다.

     style="border-top-style:dashed; border-right-style:double;">
        
border-top-style:dashed; border-right-style:double; 

   3. 아래쪽의 테두리 바꾸기
      위의 예에서 border-bottom-style:을 추가 하면 됩니다.
      음---
      어떤것으로 바꾸어 볼까요....
      groove으로 해보겠습니다.

     style="border-top-style:dashed; border-right-style:double; border-bottom-style:groove;">
        
border-top-style:dashed; border-right-style:double; border-bottom-style:groove; 

   4. 왼쪽도 다른것으로 해보죠
      역시 위에서 border-left-style:을 추가 하면 됩니다.
      왼쪽은 점선인 dotted로 해볼까요?

     style="border-top-style:dashed; border-right-style:double; border-bottom-style:groove;
        border-left-style:dotted;">
        
border-top-style:dashed; border-right-style:double; border-bottom-style:groove; border-left-style:dotted; 

우와~~
소스가 너무 길죠?
이걸 어떻게 다 타이핑해.
그래서 간단하게 하는 방법도 있답니다.
border-style:로 저의 하고 상 우 좌 하의 변수만 넣어 주면 간단히 됩니다.
뭔 말인지 잘 모르시겠다구요?
^^
그래요 
아직은 이해가 안되실겁니다.
예를 봐가면서 설명하지요.

   5. border-style:dashed double groove dotted 이렇게 하면

     style="border-style:dashed double groove dotted;">
        
border-style:dashed double groove dotted; 

지금까지 긴 소스로 한것과 똑 같이 나왔습니다.
border-style을 한꺼번에 지정하는 방법 입니다.
처음에 명심하시란말 기억 하세요?
한꺼번에 지정할려면 순서를 기억 해야 합니다.
상단 오른쪽 하단 왼쪽의 순으로 컴이 기억하여 표현합니다.
style="border-style:dashed(상단)  double(오른쪽) groove(하단) dotted(왼쪽);"
첫번째 시간에
style="border-style:dashed 라고 하나만 지정하면 모든 테두리가 같은 모양이 됩니다.
style="border-style:dashed double
이렇게 두개를 사용하면 첫번째 명령은 상 하로 작용하고
두번째 명령은 죄우로 작용 합니다.
예를 볼까요?

   6. style="border-style:dashed;" 1신의 내용

     style="border-style:dashed;">
        
style="border-style:dashed 

   6. style="border-style:dashed double;" 두개를 넣었을때

     style="border-style:dashed double;">
        
style="border-style:dashed double 

이해가 가시나요?
조금더 해보기로 하겠습니다.
중요한 기능중의 하나가 none 기능 입니다.
이것은 테두리를 나타내지 말라는 명령어 입니다.
이것도 아주 유용하게 사용할수 있어요.
어느 한쪽의 테두리나 두개, 혹은 3개를 삭제할수 잇습니다.
사용하기에 따라서는 엄청 유용하게 활용할수 있어요.
예를 보면서 설명할께요.

   7. 5번의 예가 border-style:dashed double groove dotted 이것이 었죠.
      여기에 필요 없는 테두리를 삭제 하겠습니다.
      왼쪽 점선이 좀 이상하죠?
      빼버릴께요. dotted 대신 none 를 넣어 주면 됩니다.

     style="border-style:dashed double groove none;">
        
border-style:dashed double groove none; 

   8. 오른쪽도 삭제해버립니다.

     style="border-style:dashed none groove none;">
        
border-style:dashed none groove none; 

   9. 하단부분도..
      역시 하단부분에 속하는 명령어를 none로 바꾸면 삭제됩니다.

     style="border-style:dashed none none none;">
        
border-style:dashed none none none; 

이 방법외에도 테두리를 삭제 하는 방법이 있습니다.
홈페이지 만드실때 상당히 유용하게 응용할수 있는 방법 입니다.
그것은 다음에 다시 설명을 드리죠.
이것으로  border-style 지정법은 마치고
다음은 테두리에 색넣는법에 관하여 알아 보겠습니다.
다음 시간까지 안녕히~~


아래는 숙제 입니다^^