이미지, 테이블, 레이어 등의 테두리 형식, 색상, 두께를 지정하는 속성입니다.
이와같은 형태로 스타일, 두께 색상을 한번에 또는 상하좌우 따로 설정이 가능합니다.
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
<div style="border:1px solid red">네 변의 테두리 속성을 동일하게 한번에 설정</div>
<div style="border-style:solid;border-width:1px">네 변의 테두리 속성을 동일하게 한번에 설정</div>
<div style="border:1px solid red;border-width:2px 1px 2px 1px">네 변의 테두리 두깨를 달리 한번에 설정</div>
<div style="border:1px solid red;border-width:2px 1px">상하,좌우 두께가 같을때 약식 설정</div><div style="border-top:2px solid red">상단 테두리 설정</div><div style="border-right:1px solid red">우측 테두리 설정</div><div style="border-bottom:2px solid red">하단 테두리 설정하</div><div style="border-left:1px solid red">좌측 테두리 설정하기</div>이와같은 형태로 스타일, 두께 색상을 한번에 또는 상하좌우 따로 설정이 가능합니다.
1. 테두리 스타일 (border-style)
|
속성 |
설명 |
|
none |
테두리를 사용하지 않음, border-width 의 값은 0이 된다. |
|
dotted |
점선 |
|
dashed |
굵은 점선 |
|
solid |
실선 (가장 많이 사용하는 속성) |
|
double |
이중 실선 |
|
groove |
오목하게 들어간 액자 테두리 모양 |
|
ridge |
볼록하게 나온 액자 테두리 모양 |
|
inset |
내용이 잠긴 느낌의 입체선 모양 |
|
outset |
내용이 튀어나온 느낌의 입체선 모양 |
2. 테두리 색상 (border-color)
색상명(black) 또는 색상코드(#000000)로 지정한다.
3. 테두리 두께 (border-width)
크기 단위 또는 중 하나를 선택하여 지정한다. (0은 테두리를 사용하지 않음)
<div style="border-width : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-top : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-right : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-bottom : [ thin | medium | thick | 크기단위 ]"></div>
<div style="border-width-left : [ thin | medium | thick | 크기단위 ]"></div>
※ 로그인 하시면 원본파일을 볼 수 있습니다. ※
코멘트 0
