CSS - padding과 margin 알아보기
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의 속성을 사용하면 지정영역, 특정 요소를 가운데 정렬을 할 수 있으며, 주로 좌우정렬시 사용하게 됩니다
