브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다. 따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다.
박스 모델은 너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.
CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며, CSS는 영역 별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공한다.
안쪽부터 콘텐츠(content), 안쪽여백(padding), 경계선(테두리(border)), 바깥쪽 여백(margin) 이라 한다.
각 세부 영역별로 예제를 통해 자세히 알아보겠습니다.
<콘텐츠 영역>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>박스 모델이란</title>
<style>
.area{
/*
% : 내가 속한 영역을 기준으로 백분율 계산
=> 내가 속한 영역에 관련 값이 있어야 적용 가능!
*/
width: 30%;
height: 100%;
}
</style>
</head>
<body>
<h2>현진영 - 흐린 기억 속의 그대</h2>
<p>안개빛 조명은 흐트러진 내 몸을 감싸고</p>
<p class="area">술에 취해 비틀거리는 나의 모습 이제는 싫어</p>
</body>
</html>
<테두리 영역>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>테두리 스타일</title>
<style>
.area{
width: 200px;
height: 100px;
}
.red{
border-width: 3px;
border-style: solid;
border-color: red;
}
.green{
/* 단축속성은 공백으로 속성값을 서로 구분! */
border: 3px solid green;
border-radius: 60px;
}
</style>
</head>
<body>
<h2>현진영 - 흐린 기억 속의 그대</h2>
<p class="red">안개빛 조명은 흐트러진 내 몸을 감싸고</p>
<p class="area green">술에 취해 비틀거리는 나의 모습 이제는 싫어</p>
</body>
</html>
<여백 영역>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>여백 다루기</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px 20px 30px 40px;
/*
top bottom left right
*/
padding-top: 20px;
padding-right: 50px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
