CSS day10

패딩(padding)

마진(margin)

box-sizing

패딩(padding)

패딩이란 콘텐츠와 테두리 사이의 여백을 설정하는 속성으로 상하좌우 4 방향의 패딩을 한꺼번에 지정할 수 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어로 top, right, bottom, left를 사용해서 특정 방향에만 지정하여 패딩을 적용할 수 있다.

padding-top:상
padding-right:우
padding-bottom:하
padding-left:좌
padding:상 우 하 좌 모든 방향 설정    

<!--생략-->
...
#padding1{ padding: 10px 30px 50px 70px; }
#padding2{ padding: 10px 50px; }
#padding3{ padding: 40px; }
...
<div id="padding1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eum, quasi.
</div>
<div id="padding2">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eum, quasi.
</div>
<div id="padding3">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eum, quasi.
</div>
...
<!--생략-->

위 예제를 보면 각 방향 별로(padding1), 한번에(padding3) 패딩을 적용할 수 있는 것을 볼 수 있다. 또 padding2와 같이 속성값을 두개만 기입하면 순서대로 상하, 좌우로 지정할 수도 있다.

마진(margin)

마진이란 요소 주변의 여백을 의미한다. 마진을 이용하면 요소와 요소 사이의 간격을 조절 할 수 있다. 마진도 패딩과 마찬가지로 상하좌우 4 방향의 마진을 한꺼번에 지정할 수 있고, 속성 뒤 특정 방향과 함께하여 표기가 가능하다.

margin-top:상
margin-right:우
margin-bottom:하
margin-left:좌
margin:상 우 하 좌 모든 방향 설정  

마진의 특징적인 부분으로는 좌우로 배치된 요소간에는 각 좌우 마진이 겹치지 않으나 상하로 배치된 요소간에는 마진이 겹쳐지는 현상이 있다.

<!--생략-->
...
.margin1{margin: 30px 50px;}
.margin2{margin: 30px 50px;}
.margin3{margin: 0 auto;}
...
<div class="margin1">1</div>
<div class="margin2">2</div>
<div class="margin3">3</div>
...
<!--생략-->

위 처럼 세로마진 겹친현상을 확인 할 수 있고 좌우 속성값으로 auto를 주게된다면 요소가 웹 문서에서 가운데 정렬이 되는 것을 확인 할 수 있다.

박스 사이징(box-sizing)

원래 width와 height 값은 padding 이나 border 영역을 포함 하지않는다. 그래서 웹 문서에 여러 요소를 배치할때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 콘텐츠와 padding, border 두께까지 계산을 해야했었다. 그러나 css3부터는 box-sizing 속성이 추가되었고 속성값으로 border-box를 주어지게되면 padding와 border영역도 width와 height 영역에 포함시킬 수 있게되었다.

box-sizing: border-box | content-box(기본값)

종류	설명
border-box	테두리까지 포함해서 너비값을 지정
content-box	컨텐츠 영역만 너비값을 지정

<!--생략-->
...
.boxsizing1{ box-sizing: content-box;}
.boxsizing2{ box-sizing: border-box;}
...
<div class="boxsizing1">box-sizing='content-box'</div>
<div class="boxsizing2">box-sizing='border-box'</div>
...
<!--생략-->

content-box의 컨텐츠영역 너비 300px, 높이 150px가 적용되었고 border-box는 테두리 영역을 포함하여 너비 300px, 높이 150px가 적용된 것을 볼 수 있다.