CSS 상자 크기 조정
CSS 상자 크기 조정
CSS box-sizing속성을 사용하면 요소의 전체 너비와 높이에 패딩과 테두리를 포함할 수 있습니다.
CSS box-sizing 속성 없이
기본적으로 요소의 너비와 높이는 다음과 같이 계산됩니다.
너비 + 패딩 + 테두리 = 요소의 실제 너비
높이 + 패딩 + 테두리 = 요소의 실제 높이
이것은 다음을 의미합니다. 요소의 너비/높이를 설정할 때 요소가 설정한 것보다 더 크게 나타나는 경우가 많습니다(요소의 테두리와 패딩이 요소의 지정된 너비/높이에 추가되기 때문입니다).
다음 그림은 지정된 너비와 높이가 같은 두 개의 <div> 요소를 보여줍니다.
위의 두 <div> 요소는 결과에서 다른 크기로 끝납니다(div2에 지정된 패딩이 있기 때문에).
예시
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
box-sizing속성은 이 문제를 해결합니다 .
CSS box-sizing 속성 사용
이 box-sizing속성을 사용하면 요소의 전체 너비와 높이에 패딩과 테두리를 포함할 수 있습니다.
요소에 설정 box-sizing: border-box;하면 너비와 높이에 패딩과 테두리가 포함됩니다.
box-sizing: border-box;
다음은 두 <div> 요소 에 추가된 위와 동일한 예 입니다.
예시
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
사용 결과가 box-sizing: border-box;훨씬 더 좋기 때문에 많은 개발자는 페이지의 모든 요소가 이러한 방식으로 작동하기를 원합니다.
아래 코드는 모든 요소의 크기가 보다 직관적인 방식으로 조정되도록 합니다. 많은 브라우저에서 이미 box-sizing: border-box;많은 양식 요소를 사용하고 있습니다(전부는 아니지만, 이것이 입력과 텍스트 영역이 너비: 100%;)에서 다르게 보이는 이유입니다.
이것을 모든 요소에 적용하는 것은 안전하고 현명합니다.
예시
* {
box-sizing: border-box;
}
CSS 상자 크기 속성
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |