CSS - CSS 테두리 스타일 border
CSS - CSS 테두리 스타일 알아보기
이번 포스팅에서는 테두리 스타일을 주는 방법에 대해서 알아보도록 하겠습니다
CSS에서는 border를 이용하여 테두리에 스타일을 줄수 있습니다
CSS - CSS border 테두리 |
border는 사각형의 구성으로 위 / 오른쪽 / 아래 / 왼쪽 으로 되어 있습니다
또한, 테두리의 특정 방향을 따로 지정할 수 있습니다
border-top : 위쪽 테두리
border-right : 오른쪽 테두리
border-bottom : 아래쪽 테두리
border-left : 왼쪽 테두리
CSS - CSS border 속성 |
border 속성의 다음과 같이 속성을 가지고 있습니다
1. border-width - 테두리의 두께를 지정합니다
@charset "utf-8";
#border {border-width: 3px;}
2. border-color - 테두리의 색상을 지정합니다
@charset "utf-8";
#border {border-color:blue;}
3. border-style - 테두리의 스타일을 지정합니다 (실선, 점선, 이중선)
선의 속성값
solid : 실선으로 표시됩니다
dotted : 점선으로 표시됩니다
dashed : 바느질선으로 표시됩니다
double : 이중선으로 표시됩니다
groove : 선이 입체적으로 표시됩니다
ridge : groove의 음영 값이 반대로 표시됩니다
inset : 요소 전체가 안으로 표시됩니다
outset : 요소 전체가 밖으로 표시됩니다
File : my.html
<html> <head> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <div id="border"> <div class="solid">solid</div> <br /> <div class="dotted">dotted</div> <br /> <div class="dashed">dashed</div> <br /> <div class="double">double</div> <br /> <div class="groove">groove</div> <br /> <div class="ridge">ridge</div> <br /> <div class="inset">inset</div> <br /> <div class="outset">outset</div> </div> </body> </html>
File : my.css
@charset "utf-8";
#border .solid {border-width:4px; border-color:blue; border-style:solid;}
#border .dotted {border-width:4px; border-color:blue; border-style:dotted;}
#border .dashed {border-width:4px; border-color:blue; border-style:dashed;}
#border .double {border-width:4px; border-color:blue; border-style:double;}
#border .groove {border-width:4px; border-color:blue; border-style:groove;}
#border .ridge {border-width:4px; border-color:blue; border-style:ridge;}
#border .inset {border-width:4px; border-color:blue; border-style:inset;}
#border .outset {border-width:4px; border-color:blue; border-style:outset;}
위와같이 속성을 직접지정하는 방법이 있으며, 3개의 border 속성을 이용하여 한번에 지정하는 방법도 있습니다
File : my.html
<html> <head> <link rel="stylesheet" type="text/css" href="my.css"> </head> <body> <div id="border"> border_Line </div> </body> </html>
File : my.css
@charset "utf-8";
#border {border:4px solid blue;}
위와 같은 방법을 사용하시면 간결하게 사용할수 있으며,보다 간결하게 코드를 작성하실 수 있습니다.
