box-sizing과 요소 영역의 관계에 대하여
모든 요소들은 각자가 너비와 높이 값을 가지고 있습니다. CSS box=sizing 속성은 해당 요소의 너비와 높이를 어떻게 계산하는지를 결정하는 속성입니다. 크롬 개발자 도구에서 Elements - Styles 탭으로 들어가 가장 아래로 스크롤을 내리면 다음과 같은 그림을 볼 수 있는데, 이를 통해 요소의 너비(width)와 높이(height)를 결정할 수 있는 후보 속성들이 어떤 것들이 있는지 알 수 있습니다.
후보들에는 margin, border, padding css속성 값과 content 고유 영역이 있습니다. 그런데 이 중에 margin (바깥 여백)은 요소의 width와 height을 결정하는 데에 사용되지는 않습니다. 그럼 이제 margin, border, padding에 대해 각각 알아보고 그다음 box-sizing으로 요소의 크기를 결정하는 방법에 대해 알아보겠습니다.
테두리를 만드는 border 속성
border속성은 요소에 테두리를 만들어주는 속성입니다.
이 속성을 사용할 때 주의할 점은 border의 두께만큼 실제로 자리를 차지하기 때문에 해당 요소가 그 두께만큼 더 뚱뚱해지는 효과가 생기겠죠? 이로 인해 인접한 요소끼리 서로 자리가 밀려서 레이아웃이 깨지는 경우가 생길 수도 있습니다. 따라서 border를 사용할 때에는 border가 실제로 자리를 차지한다는 점을 꼭 상기해야 합니다.
물론 이 현상은 box-sizing 속성이 default 값일 경우에만 발생하는데, 이에 대해서는 뒷부분에서 자세히 다뤄보겠습니다.
border 속성의 사용법은 다음과 같습니다.
border: 두께값 line스타일 색상값;
따로따로 사용하려면 -를 이용해 세부적으로 속성네임을 지정해주면 됩니다.
border-width: 두께값;
border-style: line스타일;
border-color: 색상값;
border-width: 두께값;
단위는 px를 주로 사용합니다.
border-style: 스타일;
값으로는 solid, dotted, dashed, double, groove, ridge, inset, outset 등을 사용합니다.
이 값에 따라서 선의 종류가 실선, 점선 등으로 달라집니다.
border-color: 색상값;
rgb() 나 rgba() 혹은 16진수 컬러코드를 이용해 색상값을 넣어줍니다.
* 예시코드
border-width: 5px;
border-style: solid;
border-color: #ccc;
/* rgb를 이용하면 */
border-color: rgb(204, 204, 204);
border는 기본적으로 동서남북 모든 방향으로 테두리가 생깁니다.
특정 방향에만 테두리를 만들려면 다음과 같이 사용해야 합니다.
border-top
border-bottom
border-left
border-right
* 예시 코드
<head>
<style>
div { width: 100px; height: 100px; margin: 10px; border: 1px dashed #aaa; }
.all { border: 1px solid black; }
.top { border-top: 1px solid black; }
.red { border-top-color: red;}
</style>
</head>
<body>
<div class="all"></div>
<div class="top red"></div>
</body>
* 결과
margin과 padding의 차이
margin은 요소의 바깥쪽 여백의 값을, padding은 요소의 안쪽 여백의 값을 나타냅니다.
따라서 margin은 요소의 바깥쪽 여백이므로 요소의 크기를 결정하는 속성에 포함되지 않습니다. 하지만 여백의 크기는 여백으로서 실효하게 됩니다.
어떤 요소에 margin값과 padding값을 설정하면 그 값만큼 여백이 생겨 그 여백공간에는 다른 외부 요소가 위치할 수 없게 됩니다. 물론 position 등의 CSS 속성을 이용하면 위치시킬 수 있긴 하나, 일반적으로 CSS 속성을 따로 주지 않은 요소의 경우는 다른 요소의 여백공간에 들어가지 못합니다.
margin과 padding의 사용법은 다음과 같습니다.
margin: top여백값 right여백값 bottom여백값 left여백값;
padding: top여백값 right여백값 bottom여백값 left여백값;
각 자리에 값을 넣어주면 됩니다. 단위는 offset단위와 같습니다. (px, %, auto)
border와 마찬가지로 margin-top, padding-left 이런 식으로 margin이나 padding 옆에 -top, -right, -bottom, -left를 붙여서 사용할 수도 있습니다.
* 예시 코드
/*top, right, bottom, left 모두에게 동일한 값 적용하기*/
margin: 50px;
padding: 10%;
/*서로 다른 값 적용하기*/
margin: 10px 0 10px 50px;
padding: 10px auto 10px 30px;
/*개별적으로 적용하기*/
margin-top: 10px;
margin-right: 5%;
padding-bottom: 40px;
padding-left: auto;
margin, padding의 값으로 4개가 아닌 1개, 2개, 3개를 넣어줄 수도 있는데 이 경우 각각
1개: top, right, bottom, left 모두에 적용
2개: 첫 번째 값은 top, bottom에 적용, 두 번째 값은 right, left에 적용
3개: 첫 번째 값은 top, 두번째 값은 right, left에 적용, 세 번째 값은 bottom
이렇게 적용이 됩니다.
box-sizing의 속성 값에 따른 요소 크기의 차이
이제 border, margin, padding에 대해 배웠으니 요소의 크기를 정확히 잡을 수 있습니다.
box-sizing의 속성은 두 가지가 있는데요. content-box (default)와 boder-box가 있습니다.
default인 content-box는 요소의 컨텐트 크기만 width, height 값에 포함시킵니다.
반면 border-box는 요소의 컨텐트 크기 + padding + border까지 width, height 값에 포함시킵니다.
width와 height 값이 100px인 어떤 요소가 있다고 생각해봅시다.
이 요소에 padding 20px, border 5px을 부여하면 실제로 이 요소의 width, height값은
content-box 인 경우 100px + (20px * 2) + (5px * 2) = 150px이 됩니다.
border-box 인 경우는 100px 그대로 유지가 됩니다. 왜냐면 width에 이미 padding, border를 포함하는 것이 이 속성의 특징이기 때문이죠. 단 이 경우, padding, border의 크기만큼 실제 컨텐츠 영역은 줄어들게 되겠죠.
content-box가 default 값이기 때문에 우리가 CSS를 다루다 보면 기본적으로는 padding과 border 속성을 부여할 때 요소의 크기가 커지게 되는 것을 경험할 수 있습니다.
한편, margin은 어떻게 하든 width와 height 값에 포함되지는 않습니다. 말 그대로 바깥 여백이기 때문이죠.
* 예시 코드
div {
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
border: 5px solid red;
}
.content-box {
box-sizing: content-box;
/* width or height: 100px + (2 * 20px) + (2 * 5px) = 150px
Content box width or height: 100px */
}
.border-box {
box-sizing: border-box;
/* width or height: 100px
Content box width or height: 100px - (2 * 20px) - (2 * 5px) = 50px */
}
최근댓글