○ width, height : 콘텐츠 영역의 크기를 지정
우리는 앞의 과정을 통해서, 하나의 요소 안에 콘텐츠 / 패딩 / 박스 / 마진의 영역이 구성된다는 것을 확인했습니다. 그런데 우리가 특정 요소에서 width, height를 통해 어떤 크기를 지정하게 된다면 이것은 어디에 해당하게 되는 것일까요? 바로 '콘텐츠'영역의 크기를 지정하게 됩니다.
width, height 속성 값은 아래와 같은 값을 지정할 수 있습니다.
| 분류 | 내용 |
| auto | 콘텐츠의 분량에 의해 박스 모델의 너비/높이의 값이 자동으로 결정되며, 디폴트 설정입니다. |
| 크기 | px이나 em 단위로 지정합니다. |
| 백분율 | 박스 모델의 부모 요소를 기준으로, 너비/높이의 값을 백분율로 지정합니다. |
해당 속성 값을 지정하는 예시를 만들어 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
border: 1px solid red;
width: 500px;
height: 100px;
}
.box2 {
border: 1px solid red;
width: 50%;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">박스 1입니다.</div>
<div class="box2">박스 2입니다.</div>
</body>
</html>
위의 예제에서 box1 클래스의 div 요소는 width와 height를 모두 px 값으로 지정했고, box2 클래스는 width를 50%로 지정했습니다. 이를 브라우저에서 실행하게 되면, box2는 브라우저의 가로 크기를 변경하면 따라서 브라우저 크기의 50% 수준으로 계속 변화하는 것을 확인할 수 있습니다.
○ box-sizing : 박스 모델의 크기 계산
위에서 설명했다시피, width와 height의 값은 박스 모델을 전체로 보았을 때 콘텐츠 주변 여백, 테두리를 제외한 순수 콘텐츠 영역만의 크기를 가리킵니다. 그렇기 때문에 실제 HTML 문서에서 배치를 진행할 때 전반적인 테두리의 사이즈나 배치에 따라 생기는 공간, 여백 등의 다른 요소들은 반영되어있지 않죠. 실제 레이아웃을 설계하고 배치할 때는 모든 사항들을 고려해야 할 것입니다.
그런데 설마, 개발을 하면서 일일이 이 모든 값들을 계산해야 한다면 엄청나게 복잡한 작업이 진행될 것입니다. 그래서 box-sizing이라는 속성 값을 통해 필요에 따라 계산 방식을 정할 수 있습니다.
예를 들어 아래와 같이 클래스 box1과 box2의 값을 지정했습니다. 두 개의 값은 모두 같게 설정했습니다.
· width : 200px
· height : 100px
· padding : 20px
· border : 10px
그런데 여기서 box1과 box2의 box-sizing 속성 값에 차이를 두었습니다. box1은 content-box, box2는 border-box로 설정했습니다. 두 속성 값의 차이는 아래와 같습니다.
| 분류 | 내용 |
| content-box | 너비 지정 시, 콘텐츠 값만 지정합니다. 패딩, 보더의 값은 독립적으로 계산합니다. 디폴트입니다. |
| border-box | 너비 지정 시, 해당 값이 보더의 값까지를 포함하게 됩니다. |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1 {
box-sizing: content-box;
border: 10px solid red;
width: 200px;
height: 100px;
padding: 20px;
}
.box2 {
box-sizing: border-box;
border: 10px solid blueviolet;
width: 200px;
height: 100px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box1">박스 1입니다.</div>
<br>
<div class="box2">박스 2입니다.</div>
</body>
</html>
위 코드를 실행하면, 값은 똑같이 설정했지만 아래와 같이 다른 사이즈가 출력되는 것을 확인할 수 있습니다.
이는 box-sizing의 속성 값에 따라, [width / height]의 속성 값 "200px/100px"이 다르게 계산되었기 때문입니다. box1과 box2의 실제 사이즈 적용 내역을 다음과 같이 살펴보겠습니다.
위에서 box1처럼 content-box 속성으로 지정되었을 경우, box1의 실제 가로 사이즈를 계산하면 콘텐츠 200px + 패딩 40px + 테두리 20px, 총 260px의 크기로 가로 사이즈를 차지하게 됩니다.
하지만 box2의 경우처럼 border-box 속성으로 지정될 경우, 가로 사이즈를 기준으로 보았을 때 200px - 패딩 40px - 너비 20px 즉 140px이 콘텐츠 영역의 실제 가로 넓이가 되는 것입니다. 세로도 동일하게 계산됩니다.
두 개의 속성의 차이를 이해하셨나요? 콘텐츠 자체의 사이즈가 아주 정밀해야 한다면, content-box 속성 값을 부여하거나 아예 box-sizing을 사용하지 않으면 됩니다. 반대로 편리하게 계산을 해야한다면 border-box 속성 값을 부여하면 됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 3. 박스 모델(4) - 테두리 스타일 1 (0) | 2023.04.09 |
|---|---|
| [CSS] 3. 박스 모델(3) - box shadow (0) | 2023.04.07 |
| [CSS] 3. 박스 모델(1) - 블록 레벨, 인라인 레벨 (0) | 2023.04.03 |
| [CSS] 2. 텍스트 스타일(6) - 표 스타일 (0) | 2023.04.02 |
| [CSS] 2. 텍스트 스타일(5) - 목록 스타일 (0) | 2023.04.01 |
