CSS는 웹 페이지의 레이아웃과 디자인을 다루는 데 중요한 역할을 합니다. 여기에는 박스 모델이라고 하는 중요한 컨셉이 포함되어 있습니다. 박스 모델은 요소의 내용(content), 안쪽 여백(padding), 테두리(border), 밖쪽 여백(margin)으로 구성됩니다.

박스 모델 속성

1. width, height

박스의 너비와 높이를 설정하는 속성입니다.

예시:

.box {
  width: 200px;
  height: 150px;
}

2. padding

요소 내부의 여백을 설정합니다.

예시:

.box {
  padding: 20px;
}

3. border

테두리의 두께, 스타일 및 색상을 설정합니다.

예시:

.box {
  border: 2px solid #000;
}

4. margin

요소 주위의 여백을 설정합니다.

예시:

.box {
  margin: 10px;
}

결론

박스 모델 속성은 웹 페이지의 레이아웃을 구성하는 데 중요한 역할을 합니다. 각 속성을 적절히 활용하여 요소의 배치와 공간 활용을 최적화할 수 있습니다.

참고 문헌:

• MDN Web Docs