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 픽셀 너비의 컨테이너에 맞게 줄 바꿈되는 것을 확인할 수 있습니다.

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

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

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

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

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

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

간격을 위한 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 이 요소 간의 간격을 제어하는 데 어떻게 사용되는지를 보여줍니다.

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 에 능숙해지기 위해 이러한 개념을 계속 연습하십시오.