CSS #2 Box Model

웹 서버/웹 기초 (HTML, CSS)

CSS #2 Box Model

코다람쥐 2022. 4. 22. 14:46

1. CSS Box Model

Content : 이미지나 텍스트의 영역

Padding = Boreder와 Conter사이의 거리

Border = Content를 둘러싸는 선

Margin = Border와 외부 Content사이의 거리

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

width를 설정안하면 박스모델이 가로로 화면을 꽉 채우게 되는데 이렇게 꽉 채우려는 성질을 블록 엘레먼트라고 하고,

width가 고정이되어서 자기만의 영역을 가지는 성질을 일라인 엘레먼트라고 한다.