태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2007.09.20 11:12


선택자{border-style:속성값}

테두리에 색상값을 지정할 때는 위와 같이 border-width 두께 속성과 함께 지정해야 테두리를 확인할 수 있습니다..

네 변의 테두리 색상값을 각각 다르게 설정할 때는 아래와 같이 합니다.

선택자{border-top-style:속성값;border-right-style:속성값;border-bottom-style:속성값;border-left-style:속성값;}

 
 

형태를 지정하는 border-style 속성의 속성값

solid (내부가 채워진 선 모양)
ridge (선이 입체적으로 돌출됨)
dotted (점선 모양으로 표시)
dashed (끊어진 선 모양으로 표시)
double (선을 두줄로 표시)
inset (내부가 약간 들어간 듯하게 선을 표시)
outset (바깥으로 돌출된 듯하게 선을 표시)
groove (홈이 파진 듯하게 선을 표시)
none (나타나지 않거나 혹은 기본적인 선 모양)
hidden (모양을 숨김)



ex)
<HTML>
  <HEAD>
    <TITLE> New Document </TITLE>
<style type='text/css'>
<!--
.t1{border-width:5px;border-color:#0000FF;border-style:solid;}
.t2{border-width:5px;border-color:#0000FF;border-style:ridge;}
.t3{border-width:5px;border-color:#0000FF;border-style:dotted;}
.t4{border-width:5px;border-color:#0000FF;border-style:dashed;}
.t5{border-width:5px;border-color:#0000FF;border-style:double;}
.t6{border-width:5px;border-color:#0000FF;border-style:inset;}
.t7{border-width:5px;border-color:#0000FF;border-style:outset;}
.t8{border-width:5px;border-color:#0000FF;border-style:groove;}
.t9{border-width:5px;border-color:#0000FF;border-style:none;}--></style>
</HEAD>

<BODY>
  <table width="400" height="30" class="t1"><tr><td>solid 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t2"><tr><td>ridge 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t3"><tr><td>dotted 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t4"><tr><td>dashed 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t5"><tr><td>double 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t6"><tr><td>inset 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t7"><tr><td>outset 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t8"><tr><td>groove 형태입니다.</td></tr></table><br>

<table width="400" height="30" class="t9"><tr><td>none 형태로 테두리가 나타나지 않습니다.</td></tr></table><br>

</BODY></HTML>










table boder 간격

border-collapse : collapse - 서로 이웃하는 테이블이나 셀의 테두리션을 겹쳐서 표현

border-collapse : separate - 서로 이웃하는 테이블이나 셀의 테두리션을 분리시켜 표현


default : border-collapse : separate

신고

'웹표준 > CSS' 카테고리의 다른 글

텍스트 wrap  (0) 2007.09.27
postion  (1) 2007.09.21
border-style  (0) 2007.09.20
text-overflow  (0) 2007.09.19
cursor 정리  (2) 2007.09.19
Display type 설정  (0) 2007.09.19
Posted by 고시랑

티스토리 툴바