CSS - padding과 margin 알아보기





    이번 포스팅에서는 padding 속성과 margin 속성에 대해서 알아보도록 하겠습니다


    CSS에서는 여백을 지정할때 안쪽여백과 바깥여백을 지정할수 있으며, padding은 안쪽여백을 margin은 바깥여백을 지정할 수 있습니다.



    * 정 의


    - padding : 안쪽여백

    - margin   : 바깥여백






     CSS - CSS padding 안쪽여백





    padding은 border를 기준으로 위 / 오른쪽 / 아래 / 왼쪽으로 구성되어 있으며, 안쪽여백을 특정 방향을 따로 지정할 수 있습니다



    padding-top : 안쪽 위쪽 여백


    padding-right : 안쪽 오른쪽 여백


    padding-bottom : 안쪽 바닥 여백


    padding-left : 안쪽 왼쪽 여백




    또한, 4가지의 방향을 한번에 지정하는 방법도 있습니다



    사용법 - padding : [위] [오른쪽] [아래] [왼쪽]







     CSS - CSS padding 속성값




    padding의 속성값 지정방법은 다양한 방법이 있습니다



    File : padding.html


    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>
    <div id="padding"></div>
    </body>
    </html>
    



    file : my.css


    @charset "utf-8";
    #padding {width:300px;height:300px; border:5px solid black;}
    


    출력결과 :






    HTML - 페이지에 출력하였을때 테두리를 통해 구분을 하기위해서 div의 작성하였습니다.


    CSS - 길이, 높이, 테두리를 지정하여 안쪽여백을 주어도 구별할수 있도록 하였습니다.


    출력내용 - 출력내용에서는 테두리가 출력되어 있는것을 확인하실수 있으며, padding을 주었을때 확인하기 쉽도록 크롬 개발자 도구를 활성화 하였습니다.





    1. padding의 길이


    file : my.css


    @charset "utf-8";
    #padding {width:300px;height:300px; border:5px solid black;}
    #padding {padding-top:10px;}
    



    크롬 개발자도구에서 padding 위쪽에 10px 여백이 생긴것을 확인할수 있습니다.




    2. padding : [백분율 - % ]



    @charset "utf-8";
    #padding {width:300px;height:300px; border:5px solid black;}
    #padding {padding-right:20%;}
    




    크롬 개발자도구에서 padding 오른쪽에 20% 여백이 생긴것을 확인할수 있습니다.









     CSS - CSS margin 바깥여백





    margin은 border를 기준으로 위 / 오른쪽 / 아래 / 왼쪽으로 구성되어 있으며, 바깥여백을 특정 방향을 따로 지정할 수 있습니다



    margin-top : 안쪽 위쪽 여백


    margin-right : 안쪽 오른쪽 여백


    margin-bottom : 안쪽 바닥 여백


    margin-left : 안쪽 왼쪽 여백




    또한, 4가지의 방향을 한번에 지정하는 방법도 있습니다



    사용법 - margin : [위] [오른쪽] [아래] [왼쪽]






     CSS - CSS margin 속성값




    margin 속성삾 지정은 padding과 동일합니다.



    File : margin.html


    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="my.css">
    </head>
    <body>
    <div id="margin"></div>
    </body>
    </html>
    



    file : my.css


    @charset "utf-8";
    #margin {width:300px;height:300px; border:5px solid black;}
    


    출력결과 :





    HTML - 페이지에 출력하였을때 테두리를 통해 구분을 하기위해서 div의 작성하였습니다.


    CSS - 길이, 높이, 테두리를 지정하여 margin(바깥여백)을 주어도 구별할수 있도록 하였습니다.


    출력내용 - 출력내용에서는 테두리가 출력되어 있는것을 확인하실수 있으며, margin을 주었을때 확인하기 쉽도록 크롬 개발자 도구를 활성화 하였습니다.





    1. margin의 길이


    file : my.css


    @charset "utf-8";
    #margin {width:300px;height:300px; border:5px solid black;}
    #margin {margin-top:10px;}
    


    크롬 개발자도구에서 margin 위쪽에 10px 여백이 생긴것을 확인할수 있습니다.



    2. margin : [백분율 - % ]


    @charset "utf-8";
    #margin {width:300px;height:300px; border:5px solid black;}
    #margin {margin-right:20%;}
    




    크롬 개발자도구에서 margin 오른쪽에 20% 여백이 생긴것을 확인할수 있습니다.



    3. margin : [자동설정 - auto ]



    @charset "utf-8";
    #margin {width:300px;height:300px; border:5px solid black;}
    #margin {margin-right:auto;}
    


    auto의 속성을 사용하면 지정영역, 특정 요소를 가운데 정렬을 할 수 있으며, 주로 좌우정렬시 사용하게 됩니다


    Posted by Server-talk 서버이야기