스토리텔링

초코의 풀스택 도전기 8: CSS 박스 모델과 레이아웃의 이해

ETHub 2024. 10. 3. 10:05

도입

초코는 CSS 선택자와 우선순위를 공부한 후, 웹페이지의 요소들이 어떻게 서로 배치되고, 크기가 결정되는지 궁금해졌다.

 

"멘토님, 이제 요소들이 화면에서 어떻게 자리 잡는지 알고 싶어요. 어떻게 하면 요소들을 더 잘 배치할 수 있죠?" 초코가 물었다.

 

멘토는 미소를 지으며 대답했다. "좋은 질문이야, 초코야! 웹 요소들은 '박스 모델(Box Model)'이라는 개념을 사용해서 크기와 배치가 결정돼. 이걸 이해하면 웹페이지의 레이아웃을 훨씬 자유롭게 다룰 수 있어. 이제 한번 자세히 알아보자!"

 

1. 박스 모델이란?

멘토는 그림을 그리며 설명을 시작했다.

 

"모든 HTML 요소는 눈에 보이지 않는 상자(Box) 안에 들어 있어. 이 상자가 바로 박스 모델이야. 이 모델은 네 가지 주요 요소로 구성되지."

  1. Content: 요소의 실제 내용이 들어가는 공간이야. 텍스트나 이미지가 바로 여기에 위치해.
  2. Padding: 콘텐츠 주위에 있는 여백으로, 콘텐츠와 경계선(Border) 사이의 공간이야.
  3. Border: 요소를 둘러싸고 있는 경계선이야. 테두리를 설정할 수 있지.
  4. Margin: 요소와 다른 요소 사이의 외부 여백이야. 이 여백은 다른 요소들과의 간격을 결정해.

"이 네 가지 요소가 하나의 상자처럼 서로를 둘러싸고 있어."

 

멘토는 박스 모델을 더 명확히 이해할 수 있도록 간단한 예시를 보여주었다.

<style>
  .box {
    width: 200px; /* 요소의 콘텐츠 너비 */
    padding: 10px; /* 콘텐츠와 경계선 사이의 여백 */
    border: 5px solid black; /* 경계선 */
    margin: 20px; /* 요소 외부의 여백 */
  }
</style>

<div class="box">이 상자는 박스 모델의 예시입니다.</div>

 

멘토가 설명했다. "이 코드는 .box라는 클래스를 가진 요소에 박스 모델을 적용한 거야. 여기서 width는 콘텐츠 영역의 너비고, padding은 그 주위에 있는 여백을 뜻해. border는 경계선을 설정했고, margin은 요소 간의 외부 여백을 지정한 거지."

 

초코는 코드를 보고 나서 눈이 반짝였다. "아, 이제 콘텐츠가 어떻게 표시되는지 알겠어요! 경계선 밖에 여백을 주면 다른 요소와 떨어질 수도 있겠군요."

 

2. 박스 모델이 레이아웃에 미치는 영향

멘토는 다시 설명을 이어갔다.

 

"박스 모델은 요소들이 화면에 어떻게 배치되는지 결정하는 중요한 역할을 해. 요소의 크기를 계산할 때 content + padding + border가 전체 요소의 너비와 높이를 결정하지."

 

초코는 멘토의 설명을 듣고 예제를 떠올렸다. "그럼 이렇게 계산되는 거군요!"

<style>
  .box {
    width: 200px; /* 콘텐츠의 너비 */
    padding: 20px; /* 콘텐츠 주위 여백 */
    border: 10px solid black; /* 경계선 */
    margin: 30px; /* 외부 여백 */
  }
</style>

<div class="box">이 상자의 전체 너비는 얼마일까요?</div>

 

멘토는 설명을 덧붙였다. "이 예시에서 전체 너비는 content(200px) + padding(20px * 2) + border(10px * 2)로 계산돼. 즉, 200px + 40px + 20px = 260px이 전체 너비야."

 

초코는 계산을 하며 고개를 끄덕였다. "그래서 박스 모델을 이해하면 요소들이 어떻게 배치되는지 예측할 수 있겠군요!"

 

멘토는 추가로 설명했다. "여기서 중요한 건, box-sizing이라는 속성을 사용하면 크기 계산이 달라진다는 거야. 기본적으로 **box-sizing: content-box;**가 설정되어 있으면, 콘텐츠 크기만 너비로 계산돼. 반면 **box-sizing: border-box;**를 사용하면 패딩과 경계선까지 포함한 크기로 계산되지."

 

멘토는 다시 코드를 보여주었다.

.box {
    width: 200px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
    box-sizing: border-box; /* 패딩과 경계선을 포함한 계산 */
}

 

"이렇게 설정하면 요소의 전체 크기를 더 쉽게 관리할 수 있어!"

 

3. 레이아웃 흐름과 배치

멘토는 레이아웃을 배치하는 방법으로 Flexbox를 소개했다.

 

"이제 Flexbox라는 레이아웃 방식을 배워볼 시간이야. Flexbox는 박스 모델을 사용하면서도 요소들을 유연하게 배치할 수 있게 도와줘. 레이아웃을 만들 때 매우 유용한 방식이지."

 

멘토는 Flexbox의 기본 개념을 설명하며 간단한 예시를 보여주었다.

<style>
  .container {
    display: flex; /* Flexbox 사용 */
    justify-content: space-around; /* 요소들을 균등하게 배치 */
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

 

멘토는 말했다. "여기서는 .container라는 요소가 Flexbox를 사용하고 있어. justify-content: space-around;는 요소들이 균등하게 배치되도록 하는 거지."

 

 

초코는 웹페이지에서 상자들이 자동으로 배치되는 것을 보고 놀랐다. "와, 정말 신기해요! Flexbox를 사용하면 요소들을 쉽게 정렬할 수 있군요."

 

멘토는 추가로 설명했다. "Flexbox는 justify-content뿐만 아니라 align-items 속성을 사용해서도 세로 방향으로 요소들을 정렬할 수 있어."

.container {
    display: flex;
    justify-content: center; /* 가로 방향 가운데 정렬 */
    align-items: center; /* 세로 방향 가운데 정렬 */
    height: 200px; /* 전체 컨테이너 높이 */
}

 

"이렇게 하면 요소들이 가로와 세로 모두 중앙에 정렬되도록 설정할 수 있어."

 

결론

초코는 오늘 박스 모델과 Flexbox를 사용한 레이아웃 배치를 배우며, 요소들이 화면에서 어떻게 자리 잡고 크기가 결정되는지 완전히 이해하게 되었다.

 

"박스 모델 덕분에 요소들이 어떻게 화면에서 배치되고 크기가 정해지는지 알게 되었어요. Flexbox도 정말 유용하네요!"

 

멘토는 미소 지으며 말했다. "맞아, 박스 모델과 Flexbox를 이해하면 CSS로 웹페이지 레이아웃을 더 자유롭게 다룰 수 있지. 이제 다음 시간에는 CSS 그리드 시스템과 더 고급 레이아웃 기술을 배워보자!"