박스 모델 활용 레이아웃 디자인

박스 모델을 활용한 레이아웃 디자인 기법에 대해 알아보겠습니다 🙂

블록 요소를 화면 중앙에 배치하려면 margin: 0 auto을 사용합니다.

auto 속성은 위아래로는 적용되지 않고, 좌우 방향으로만 적용됩니다.

Copy
.box {
  width: 300px;
  margin: 0 auto; /* 위아래 마진은 0, 좌우 마진은 자동으로 가로축 중앙 정렬 */
}

카드 형식의 요소를 디자인할 때 padding, border, margin을 활용합니다.

Copy
.card {
  padding: 20px; /* 내부 여백 */
  border: 1px solid #ddd; /* 테두리 */
  margin: 20px 0; /* 외부 여백 */

  /* 그림자 효과 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 0: 수평, 4px: 수직, 8px: 흐림 정도, rgba: 색상과 투명도 */
}

기본적으로 박스의 너비(width)는 내용(Content)의 너비만을 뜻합니다.

따라서 padding이나 border를 추가하면 박스의 총 너비가 늘어나게 됩니다.

박스의 총 너비가 늘어나지 않고 요소의 크기에 padding과 border를 포함시키려면, box-sizing: border-box 속성을 사용해야 합니다.

Copy
.border-box-example {
  box-sizing: border-box; /* padding과 border를 포함한 크기로 지정 */
  width: 200px; /* 요소의 너비는 200px */
  height: 200px; /* 요소의 높이는 200px */
  padding: 20px;
  border: 10px solid black;
}

이 경우 실제로 보이는 박스의 전체 너비는 200px로, padding과 border가 지정된 너비 안에 포함됩니다.

이렇게 box-sizing: border-box를 사용하면 padding과 border 때문에 요소의 크기가 예상보다 커지는 문제를 방지할 수 있습니다.