CSS 박스 모델(Box Model)

CSS 박스 모델(Box Model)이란?

웹문서의 내용을 박스 형태로 정의하는 방법
박스 모델은 마진, 테두리, 패딩, 콘텐츠로 구성
- 마진(margin) 테두리를 기준으로 외부 여백
- 테두리(border) 박스 모델의 외곽선
- 패딩(padding) 테두리를 기준으로 내부 여백
- 콘텐츠(content) HTML 요소의 실질적인 내용
마진, 테두리, 패딩은 각각 상하좌우로 나뉘어 스타일을 지정 가능

웹 브라우저 > 개발자도구 > Computed 탭에서 박스모델을 확인 가능

인라인 레벨(Inline Level) 요소와 블록 레벨(Block Level) 요소

인라인 레벨(Inline Level) 요소
- 콘텐츠의 영역만큼만 자리를 차지
- <span>, <img>, <strong> 등의 태그
블록 레벨(Block Level) 요소
- 한줄의 자리를 차지
- <div>, <h1>, <p> 등의 태그

Untitled

<!DOCTYPE html>
<html lang="ko">
<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>
	<style>
		.line {
			border: 3px solid black;
			margin: 10px;
		}
	</style>
</head>
<body>
	<span class="line">span 태그</span>
	<img class="line" src="./test.PNG" alt="">
	<strong class="line">strong 태그</strong>
	<h1 class="line">h1 태그</h1>
	<div class="line">div 태그</div>
	<p class="line">p 태그</p>
</body>
</html>

box-sizing

박스 모델의 크기를 계산하는 방법을 지정하는 속성
- content-box
  - box-sizing의 default값
  - 콘텐츠 영역에만으로 요소의 크기(width, height)를 결정
  - width를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고, 테두리와 안쪽 여백은 별도로 설정
- border-box
  - 테두리 + 패딩 + 콘텐츠 영역으로 요소의 크기(width, height)를 결정
  - width를 100px로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100px을 유지

<!DOCTYPE html>
<html lang="ko">
<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>
	<style>
		div {
			width: 150px;
			height: 150px;
			border: 5px solid #000;
			padding: 20px;
			margin: 10px;
			background-color: antiquewhite;
		}
		.div-1 {
			box-sizing: border-box;
		}
		.div-2 {
			box-sizing: content-box;
		}
	</style>
</head>
<body>
	<div class="div-1">박스 모델 div(border-box)</div>
	<div class="div-2">박스 모델 div(content-box)</div>
</body>
</html>

Untitled

width와 height

박스 모델의 크기를 지정하는 속성
width는 너비, height는 높이를 조절
고정 길이 단위를 사용할 경우 브라우저의 크기에 영향을 받지 않으나, 상대 길이 단위를 사용할 경우 브라우저의 크기에 영향을 받음

<!DOCTYPE html>
<html lang="ko">
<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">
	<link rel="stylesheet" href="./07_99_tng2_total1.css">
	<title>Document</title>
	<style>
		body {
			width: 100vw;
			height: 100vh;
		}
		div {
			border: 5px solid #000;
			padding: 20px;
			margin: 10px;
			background-color: antiquewhite;
		}
		.div-1 {
			width: 150px;
			height: 150px;
		}
		.div-2 {
			width: 30%;
			height: 30%;
		}
	</style>
</head>
<body>
	<div class="div-1">고정 길이 단위</div>
	<div class="div-2">상대 길이 단위</div>
</body>
</html>

Untitled