테이블 테두리 스타일에 대하여 2

125번에서 style="border-style:변수; 를 넣으면 테이블 테두리가 모두 한꺼번에 같은 모양이 되었습니다. style="border-변수-style:변수;" 로 설정하면 테이블 테두리를 상 우 하 좌 로 각각도 설정할수 있습니다. 상하 좌우가 아니고 상,우,하,좌 입니다. 1.상단 테두리 border-top-style:변수 1. border-top-style:double 로 해볼까요? 테두리가 이중인 명령어죠 border-top-style:double 결과보기 border-top-style:double ★윗쪽에만 이중으로 나왔읍니다. 2.border-top-style:dashed 로 한걸 하나 더보겠습니다. border-top-style:dashed 결과보기 border-top-style:dashed ★윗쪽에만 톱니바퀴로 나왔읍니다. 3.이번에는 오른쪽의 테두리도 다른것으로 바꾸어 보죠. 2번에서 border-right-style:double; 을 추가 하면 됩니다. border-top-style:dashed; border-right-style:double; 결과보기 border-top-style:dashed; border-right-style:double; ★오른쪽도 이중 테두리로 나왔지요? 4. 아래쪽의 테두리 바꾸기 위의 예에서 border-bottom-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; ★아랫쪽에 홈이 패인듯한 테두리 5. 왼쪽은 점선인 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; ★ 왼쪽은 점 선 테두리로 나왔읍니다. 6. 간단하게 하는 방법도 있답니다. border-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 이렇게 두개를 사용하면 첫번째 명령은 상 하로 작용하고 두번째 명령은 죄우로 작용 합니다. 예를 볼까요? 7. style="border-style:dashed;" style="border-style:dashed 결과보기 style="border-style:dashed ★이렇게 하나만 지정을 해주면 사방 테두리는 모두 같은것으로 나옵니다. 8. style="border-style:dashed double;" 두개를 넣었을때 style="border-style:dashed double 결과보기 style="border-style:dashed double ★두개를 넣었을 경우 하나는 상,하 에 적용되고 또다른 하나는 좌우로 적용이 되는 것이죠. 여기에서 중요한 기능중의 하나가 none 기능 입니다. 이것은 테두리를 나타내지 말라는 명령어 입니다. 이것도 아주 유용하게 사용할수 있어요. 어느 한쪽의 테두리나 두개, 혹은 3개를 삭제할수 잇습니다. 사용하기에 따라서는 엄청 유용하게 활용할수 있어요. 예를 보면서 설명할께요. 9. 한쪽 테두리 삭제하기 5번의 예가 border-style:dashed double groove dotted 이것이 었죠. 여기에 필요 없는 테두리를 삭제 하겠습니다. 왼쪽 점선이 좀 이상하죠? 빼버릴께요. dotted 대신 none 를 넣어 주면 됩니다. border-style:dashed double groove none; 결과 border-style:dashed double groove none; 10. 오른쪽도 삭제해버립니다. border-style:dashed none groove none; 결과 border-style:dashed none groove none; 11. 하단부분도 역시 하단부분에 속하는 명령어를 none로 바꾸면 삭제됩니다. border-style:dashed none none none; 결과 border-style:dashed none none none; 자료출처:http://mysesang.com/