테두리 형태 지정(border-style)
border-style속성을 사용하면 테블이나 여러가지의 입력양식의 테두리형태를 선, 점 등으로 지정할수 있어요
<STYLE> <!-- Selector {border-style:옵션} --> </STYLE>
속성 옵션
none : 테두리없음
dotted : 점으로 나타남
dashed : 점선으로 나타남
solid : 한줄의 선으로 나타남
double : 두줄의 선으로 나타남
groove : 입체감있게 나타남
ridge : 테두리가 볼록하게됨
inset : 전체가 들어가보임?
outset : 전테가 튀어나와보임
border-color의 색상값을 1개만 지정하면 테두리 전체가 지정되고 2개만 지정하면 [상,하] [좌,우]에 적용되요
4개를 지정하면 top, right, bottom, left 순서로 시계방향으로 적용됩니다.
<STYLE> <!-- Selector {border-color:색상1, 색상2, 색상3, 색상4} --> </STYLE>
테두리 두께를 방향별루 지정할 경우 border-style를 먼저 설정한 후에 할수 있어요
두께를 지정할때 원하는 수치로 직접 지정하는 방법과 thin(두께가얇은선), medium(중간굵기인선), thick(두꺼운선)으로 지정하는 방법이있음
<STYLE> <!-- Selector {border-width:top두께 right두께 bottom두께 left두께} --> </STYLE> 참고 border-width:10px 3px 10px 25px;
옵션값은 위에 설명한 border-color와 같은 원리에요 시계방향 한개일때 두개일때...
'HTML / CSS / Java Script' 카테고리의 다른 글
CSS 하이퍼링크 꾸미기 및 색상과 밑줄표시 (2) | 2014.07.18 |
---|---|
CSS 여백설정방법과 문단 위치조절 (2) | 2014.07.17 |
CSS로 목록 꾸미기 (목록의 머리 기호) (0) | 2014.07.15 |
스타일시트(Cascade Style Sheet)로 배경꾸미기? (4) | 2014.07.14 |
스타일시트(CSS)로 text-decoration 꾸미기? (2) | 2014.07.13 |