#3. CSS Box Model

 

Box Model은 HTML 요소가 화면에서 어떻게 보일지 결정하는 기본 개념입니다.

Box Model은 요소의 콘텐츠, 패딩, 테두리, 마진을 포함하는 박스로 생각할 수 있습니다.

 

1. margin: 박스의 주변을 둘러싸는 공간입니다. margin은 다른 요소와의 거리를 정의하며, 마진은 박스 자체의 크기에는 포함되지 않습니다.
2. padding: 콘텐츠와 테두리 사이의 공간입니다. padding은 박스의 크기에 포함됩니다.
3. border: 테두리를 정의합니다. 테두리는 박스의 크기에 포함됩니다.
4. width: 박스의 가로 크기를 정의합니다.
5. height: 박스의 세로 크기를 정의합니다.

예제 코드:

div {
  width: 200px;
  height: 200px;
  padding: 20px;
  margin: 20px;
  border: 1px solid black;
}

위의 코드는 div 요소의 너비와 높이, 패딩, 마진, 테두리를 정의하고 있습니다.

이 속성을 적용하면 div 요소가 화면에서 200x200 px 크기의 박스로 렌더링되고, 패딩 20px, 마진 20px, 1px 두께의 검은색 테두리가 적용될 것입니다.

이외에도 CSS Box Model에는 box-sizing 속성이나 border-radius 속성 등이 있습니다.

이 속성들은 CSS Box Model의 형태를 변형시키는 데 사용됩니다.

예를 들어, box-sizing 속성을 사용하면 width와 height 속성이 padding과 border를 포함하지 않도록 정의할 수 있습니다.

border-radius 속성을 사용하면 박스의 테두리를 둥글게 만들 수 있습니다.

CSS Box Model은 HTML 요소의 레이아웃을 정의하는 데 사용되며, 개발자는 원하는 박스 형태를 쉽게 정의할 수 있습니다.