CSS 박스 모델: 크기 및 간격 마스터하기

소개

CSS 박스 모델 실습에 오신 것을 환영합니다! 웹 디자인에서 모든 HTML 요소는 하나의 박스로 간주될 수 있습니다. CSS 박스 모델은 이러한 박스가 웹 페이지에 어떻게 렌더링되는지를 설명하는 기본적인 개념입니다. 박스 모델은 콘텐츠 영역 (content area), 패딩 (padding), 테두리 (border), 마진 (margin) 의 네 가지 주요 부분으로 구성됩니다.

이 실습에서는 각 구성 요소를 조작하여 요소의 크기와 간격을 제어하는 방법을 배우게 됩니다. index.html 파일과 style.css 파일을 사용합니다. 모든 변경 사항은 style.css 파일에서 이루어지며, LabEx 인터페이스의 Web 8080 탭으로 전환하여 즉시 결과를 확인할 수 있습니다.

시작해 봅시다!

div 요소에 width 속성 설정하기

이 단계에서는 요소의 콘텐츠 영역 크기를 정의하는 것부터 시작하겠습니다. CSS 의 width 속성은 요소의 콘텐츠 박스 너비를 설정합니다. 박스 모델의 다른 구성 요소 (패딩, 테두리, 마진) 는 이 콘텐츠 영역 주위에 추가됩니다.

먼저 WebIDE 왼쪽의 파일 탐색기에서 style.css 파일을 찾으십시오. 파일을 클릭하여 편집기에서 엽니다.

이제 style.css 파일에 다음 CSS 규칙을 추가합니다. 이 규칙은 box 클래스를 가진 div 요소를 대상으로 하며 너비를 300 픽셀로 설정합니다.

.box {
  width: 300px;
}

코드를 추가한 후 파일을 저장합니다 (Ctrl+S 또는 Cmd+S). 효과를 보려면 Web 8080 탭을 클릭하십시오. 이제 상자 안의 텍스트가 300 픽셀 너비의 컨테이너에 맞게 줄 바꿈되는 것을 확인할 수 있습니다.

box tag

일정한 값으로 padding 속성 적용하기

이 단계에서는 콘텐츠와 요소의 경계 사이에 공간을 추가할 것입니다. 이 공간을 padding이라고 합니다. padding 속성은 콘텐츠 주위에 영역을 비웁니다. 이 영역은 요소의 테두리 안에 있습니다.

상자의 네 면 모두에 20 픽셀의 패딩을 추가해 보겠습니다. style.css 파일에서 기존의 .box 규칙을 수정하여 padding 속성을 포함시키십시오.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* 시각적 개선을 위해 추가됨 */
}

또한 콘텐츠 영역과 패딩 영역을 더 잘 보이게 하기 위해 background-color를 추가했습니다. 파일을 저장하고 Web 8080 탭으로 전환하십시오. 이제 상자 안의 텍스트 콘텐츠를 둘러싸는 20 픽셀의 하늘색 공간이 생긴 것을 볼 수 있습니다. 패딩이 콘텐츠 너비 위에 추가되므로 상자의 전체 가시 너비가 증가했음을 주목하십시오.

box tag

border 속성을 style, width, color 와 함께 사용하기

이 단계에서는 요소의 패딩과 콘텐츠 주위에 border를 추가할 것입니다. border 속성은 테두리의 너비, 스타일, 색상을 한 번에 설정할 수 있는 축약형입니다.

두께가 2 픽셀인 실선 검정색 테두리를 추가해 보겠습니다. style.css 파일에서 .box 규칙을 아래와 같이 업데이트하십시오.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

border 속성의 값은 각각 border-width, border-style, border-color입니다.

파일을 저장하고 Web 8080 탭을 새로고침하십시오. 이제 상자의 패딩 영역 주위에 그려진 검은색 선이 보일 것입니다. 이 새로운 테두리를 수용하기 위해 요소의 전체 너비가 다시 증가했습니다.

box tag

간격을 위한 margin 속성 구현하기

이 단계에서는 요소 테두리 바깥쪽의 공간을 제어할 것입니다. 이는 margin 속성을 사용하여 수행됩니다. margin 은 요소 주위에 빈 공간을 만들어 다른 요소들을 밀어냅니다.

상자 전체를 제목과 페이지 가장자리에서 분리하기 위해 모든 면에 50 픽셀의 margin 을 추가해 보겠습니다. style.css의 .box 규칙에 margin 속성을 추가하십시오.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

파일을 저장하고 Web 8080 탭을 확인하십시오. 이제 전체 상자가 <h1> 요소에서 아래로 밀려나고 브라우저 창의 왼쪽 가장자리에서 떨어져 있는 것을 볼 수 있습니다. 이는 margin 이 요소 간의 간격을 제어하는 데 어떻게 사용되는지를 보여줍니다.

box tag

padding 포함을 위한 box-sizing: border-box 추가하기

이 단계에서는 일반적인 레이아웃 문제를 해결할 것입니다. 기본적으로 요소의 width 및 height 속성은 콘텐츠 상자에만 적용됩니다. 패딩과 테두리는 그 위에 추가되므로 크기 조정이 예측 불가능해질 수 있습니다. 우리 상자의 경우 현재 총 너비는 300px (width) + 40px (좌/우 패딩) + 4px (좌/우 테두리) = 344px입니다.

이를 단순화하기 위해 box-sizing 속성을 사용할 수 있습니다. 이를 border-box로 설정하면 브라우저에 요소의 전체 너비와 높이에 패딩과 테두리를 포함하도록 지시하는 것입니다.

.box 규칙에 box-sizing: border-box; 속성을 추가하십시오.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

파일을 저장하고 Web 8080 탭을 확인하십시오. 상자가 줄어드는 것을 볼 수 있습니다. 이제 패딩과 테두리를 포함한 상자의 총 너비는 정확히 300 픽셀입니다. 브라우저는 콘텐츠 영역을 자동으로 조정하여 맞춥니다. 이 동작은 레이아웃을 만드는 데 훨씬 더 직관적입니다.

요약

실습을 완료하신 것을 축하드립니다! CSS 박스 모델의 기본 사항을 성공적으로 학습했습니다.

이번 실습에서는 다음을 연습했습니다.

요소 콘텐츠 영역의 width 설정하기.
콘텐츠와 테두리 사이에 공간을 만들기 위한 padding 적용하기.
패딩과 콘텐츠 주위에 border 추가하기.
요소 테두리 바깥쪽에 공간을 만들기 위한 margin 사용하기.
더 예측 가능하고 직관적인 요소 크기 지정을 위한 box-sizing: border-box 활용하기.

박스 모델을 이해하는 것은 웹 페이지에서 요소의 레이아웃과 간격을 제어하는 데 매우 중요합니다. CSS 에 능숙해지기 위해 이러한 개념을 계속 연습하십시오.