box-sizing에 대하여 알아보기
CSS에서 box-sizing이란 무엇이고 언제 사용하게 될까? MDN에서는 box-sizing 속성을 아래와 같이 정의하고 있다.
box-sizingCSS속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.라고 되어있다.
CSS 박스 모델은 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 그 크기만 큼 더하여 화면에 그리게 된다.
따라서 내가 같은 크기의 div 영역을 만들고 padding이나 border를 서로 다르게 준다면 같은 크기의 div일지라도
그 크기가 달라지게 되는것이다.
box-sizing에는 2가지 키워드가 있다. content-box와 border-box 맨 처음에 이 속성을 알게 된 것도
저 border-box 키워드 덕분이다.
- content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
- border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
이게 무슨 말인가.. 한번 테스트를 해보자.
조금이라도 CSS 직접 작성하여 웹 화면을 디자인해본 개발자라면 몇 개의 div 영역이 padding이나 border가 다르더라도
같은 크기가 유지되고 싶은 상황이 존재할 것이다.
그럼 테두리와 안쪽 여백의 크기도 요소로 고려하는 border-box 키워드를 통해서 div를 두 개 만들고 한쪽에 padding이나 border를 줘도 유지가 되는지 확인해보자.
간단하게 div2개를 만들고 각각 width: 100px씩 주고 영역을 보기 위해서 각각 컬러를 입혔다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./box.css" rel="stylesheet" />
</head>
<body>
<div id="small">box</div>
<div id="large">box</div>
</body>
</html>div {
width: 100px;
}
#small {
/* border: 10px solid black; */
padding: 0px 20px 0px 20px;
background-color: aqua;
}
#large {
/* border: 30px solid black; */
padding: 0px 10px 0px 10px;
background-color: tomato;
}그렇다면 화면은 어떻게 나올까? 아래와 같이 20px을 준 위에 div 영역 같은 경우 padding 속성이 아래 div 영역보다 10px씩
많기 때문에 해당 영역이 포함된 width로 영역이 잡혀버린다.
그럼 padding, border 속성에 의해 추가된 크기들이 원래 지정된 div 영역에 width 속성에 포함되게 해 보자.
각 div에 box-sizing: border-box 속성을 줘보자.
div {
width: 100px;
/* box-sizing 속성추가 */
box-sizing: border-box;
}
#small {
/* border: 10px solid black; */
padding: 0px 20px 0px 20px;
background-color: aqua;
}
#large {
/* border: 30px solid black; */
padding: 0px 10px 0px 10px;
background-color: tomato;
}
box-sizing: border-box; 해당 속성을 추가함으로써. 테두리와 안쪽 여백의 크기도 요소의 크기로 고려하여 같은 사이즈가 되게 된다.
카드 형식의 목록이나 서로 다른 내부 속성을 가지고 있지만 영역의 크기를 같게 고려할 때 사용하면 될 것 같다.
'Develop > HTML&CSS' 카테고리의 다른 글
| [Develop/HTML&CSS] Mobile input focus 시 zoom 막기 및 mobile meta tag 정보 (0) | 2021.08.05 |
|---|
