① box-sizing : 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
.box1 {
width: 600px;
height: 100px;
background-color: skyblue;
margin-bottom: 20px;
padding: 20px;
border: 10px solid red;
box-sizing: border-box;
}
.box2 {
width: 600px;
height: 100px;
background-color: skyblue;
padding: 20px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
- width와 height는 엘리먼트의 컨텐츠의 크기를 지정한다.
테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.
출처)
box-sizing - 생활코딩
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하
opentutorials.org
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_28] reset.css (0) | 2021.03.10 |
|---|---|
| [코딩 공부_27] box-shadow가 무엇일까 (0) | 2021.03.10 |
| [코딩 공부_24] CSS Selector, 가상 셀렉터 (0) | 2021.03.09 |
| [코딩 공부_23] CSS, 복합 셀렉터에 대해 알아보자 (0) | 2021.03.08 |
| [코딩 공부_22] CSS, display 속성에 대하여 (0) | 2021.03.08 |
댓글