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 속성을 이용하여 한번에 지정하는 방법도 있습니다



    사용법 : 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;}
    


    위와 같은 방법을 사용하시면 간결하게 사용할수 있으며,보다 간결하게 코드를 작성하실 수 있습니다.

    Posted by 서버이야기