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

테이블(2신) - 펌

오작교 18412

0
Table 에관하여 2신
Table 테두리 두번째 시간.
테이블 테두리 상하좌우 설정에 대하여

테이블 테두리 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
결과 보기
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;
결과 보기
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;
결과 보기
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-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: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
결과 보기
style="border-style:dashed

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

     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;
결과 보기
border-style:dashed double groove none;

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

     style="border-style:dashed none groove none;">
        
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:dashed none none none;

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


아래는 숙제 입니다^^
                             



바람이 오면 오는 대로 두었다가 가게 하세요 그리움이 오면 오는 대로 두었다가 가게 하세요 아픔도 오겠지요 머물러 살겠지요 살다간 가겠지요 세월도 그렇게 왔다간 갈거예요 가도록 그냥 두세요



                                                                                       출처 : 이양호님의 홈
공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 202202
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 287444 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 346497 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 291120 +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 40479 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 35718 0
291 HTML
normal
오작교 11.06.03.10:44 40521 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 35997 0
285 CSS
normal
오작교 11.01.24.10:40 35117 0
284 HTML
normal
오작교 11.01.24.10:39 36844 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