CSS box model

모든 HTML 요소를 box로 간주할 수 있다.

CSS box model

CSS에서 "박스 모델(box model)"이라는 용어는 디자인과 레이아웃에 대해 말할 때 사용된다.

CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스이다. margin, border, padding및 실제 콘텐츠로 구성된다. 아래 이미지는 상자 모델을 보여준다:

서로 다른 부분에 대한 설명:

content - 텍스트와 이미지가 나타나는 상자의 내용
padding - 내용 주위의 영역을 지웁니다. 패딩이 투명합니다
border - 패딩과 내용 주위를 도는 테두리입니다
margin - 테두리 밖의 영역을 지웁니다. 마진이 투명합니다

상자 모델을 사용하면 요소 주위에 경계를 추가하고 요소 사이의 공간을 정의할 수 있습니다.

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

<h2>박스 모델 시연</h2>

<p>CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 박스입니다. 테두리, 패딩, 여백 및 실제 내용으로 구성됩니다.</p>

<div>이 텍스트는 상자의 내용입니다. 우리는 50px 패딩, 20px 마진, 15px 녹색 테두리를 추가했습니다. Utenim ad minim veniam, quisnustrud 운동 ulamco robability is auti liquip exea commodicat. Duis auture irure dolor in reparader it in volptate velites cillum dolore eugugiat nulla pariarator. 신트코케캣 큐피다타를 제외하고는 비선존적이고, 선틴 쿨파퀴 사무실 데무트 연체동물 에스터 연구실.</div>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS 요소의 너비와 높이

모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야 한다.

중요: CSS로 요소의 너비와 높이 속성을 설정할 때는 내용 영역의 너비와 높이만 설정한다. 요소의 전체 크기를 계산하려면 패딩, 테두리 및 여백도 추가해야 한다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>총 너비 계산:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>위의 사진은 350px 폭입니다. 이 요소의 전체 너비도 350px입니다.</div>

</body>
</html>

이 <div> 요소의 총 너비는 350px입니다: 위의 코드를 실행한 결과 화면은 아래 그림과 같다.

계산식은 아래 표와 같다.

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

요소의 총 너비는 다음과 같이 계산해야 한다:
전체 요소 너비 = 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 여백 + 오른쪽 여백

요소의 총 높이는 다음과 같이 계산해야 합니다:
총 요소 높이 = 높이 + 상단 패딩 + 하단 패딩 + 상단 테두리 + 하단 여백 + 하단 여백

이상으로 CSS box model(박스 모델)의 개념과 간단한 실습을 하였다.

반드시 손으로, 눈으로, 머리로 실습을 하시기를 바랍니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS outline-width (0)	2023.07.24
CSS outline (0)	2023.07.23
CSS height, width, max-width 속성 (0)	2023.07.21
CSS 패딩(CSS padding) (0)	2023.07.20
CSS 여백 축소(CSS margin collapse) (0)	2023.07.19