안녕하세요! 오늘은 컨텐츠의 영역과 위치의 기준을 정할 수 있는 css box-sizing 속성에 대해 정리해 보려 합니다.
css에서 다음과 같이 속성을 설정 할 경우 화면상에 실제 요소의 크기는 어떻게 나타날까요?
[html]
<style>
.box {
width: 200px;
height: 120px;
border: 20px solid black;
padding: 30px;
}
</style>
<body>
<div class="box">
</div>
</body>
아래의 왼쪽 이미지 처럼 내부 width 길이가 200px로 잡히고 padding영역과 border영역이 더해져
전체 width 길이가 300px로 나타 날까요?
오른쪽 이미지 처럼 전체 길이가 200px로 잡히고 내부 영역의 길이가 100px로 나타 날까요?
결과 화면은 box-sizing 속성과 관련이 있습니다. box-sizing 속성을 별도로 지정하지 않을 경우
content-box속성으로 설정 되기 때문에 결과 화면은 왼쪽 화면 처럼 나타나게 됩니다!
그럼 box-sizing의 두가지 속성에 대해 알아 볼까요?
box-sizing은 다음 두가지 속성을 가지고 있습니다.
- content-box
- border-box
content-box 속성을 지정할 경우 컨텐츠 영역을 기준으로 크기를 결정합니다.
즉 내부 컨텐츠의 길이가 지정한 길이로 지정 되기 때문에 위 이미지의 왼쪽 처럼 크기가 지정됩니다.
border-box 속성을 지정할 경우 테두리를 기준으로 크기를 결정합니다.
border와 padding 영역을 포함한 전체길이가 지정한 만큼 설정 되기 때문에 위 이미지의 오른쪽 처럼
크기가 지정됩니다.
아무것도 설정하지 않으면 기본값으로 content-box 속성이 지정되기 때문에 위 예제의 경우 왼쪽의
이미지 처럼 결과화면이 나타나게 됩니다!
box-sizing 속성에 대해 정리해 보았습니다~
다음에 또다른 내용으로 찾아 오겠습니다 :)
'css' 카테고리의 다른 글
| CSS 세로 가운데 정렬 방법 정리 (0) | 2022.12.29 |
|---|---|
| CSS box-shadow 속성 사용방법 정리 (0) | 2022.12.28 |
| CSS margin 속성 사용법 정리 (0) | 2022.12.27 |
| CSS 초기화 (Reset CSS) (0) | 2022.12.14 |
| CSS float 해제 방법 정리 (0) | 2022.12.13 |
댓글