박스 모델로 간격 정리하기

요소를 둘러싼 공간

웹페이지의 각 요소는 사각형 영역을 차지합니다. CSS의 박스 모델은 이 영역과 그 주변 공간을 설명하는 방법입니다. 안쪽에서 바깥쪽으로 다음과 같이 생각할 수 있습니다.

1. 콘텐츠: 글이나 이미지가 놓이는 영역입니다.
2. padding: 콘텐츠와 테두리 사이의 안쪽 여백입니다.
3. border: 콘텐츠와 padding을 둘러싸는 테두리입니다.
4. margin: 테두리 바깥에서 다른 요소와의 간격을 만드는 여백입니다.

예를 들어 소개 글이 테두리에 너무 붙어 있다면 padding을 늘리고, 소개 영역과 그 아래 관심사 영역이 너무 가깝다면 영역 바깥의 margin을 조절할 수 있습니다.

실습할 영역 준비하기

앞 강의에서 작업한 자기소개 HTML과 연결된 CSS 파일을 사용합니다. 소개 글이 있는 영역과 관심사 목록을 담은 영역을 찾아 각각 intro와 interests 클래스를 추가하세요. 이미 다른 클래스가 있다면 지우지 말고 공백으로 구분해 함께 적습니다.

다음은 구조를 이해하기 위한 예입니다. 기존 페이지의 문구나 요소를 그대로 두고 필요한 클래스만 추가해도 됩니다.

<section class="intro">
  <h2>소개</h2>
  <p>안녕하세요. 웹 개발을 배우고 있습니다.</p>
</section>

<section class="interests">
  <h2>관심사</h2>
  <ul>
    <li>웹 만들기</li>
    <li>산책</li>
    <li>사진</li>
  </ul>
</section>

관심사 영역이 아직 없다면 예처럼 제목과 목록을 추가하세요. 프로필 이미지나 소개 글을 감싸는 기존 요소가 있다면 유지합니다. 다음 강의에서 그 영역의 배치를 다룰 것입니다.

안쪽과 바깥쪽 간격 적용하기

연결된 CSS 파일에 다음 규칙을 추가합니다. 같은 선택자에 이미 규칙이 있다면 기존 내용을 확인하고 필요한 선언을 추가하거나 해당 값을 바꾸세요.

.intro {
  padding: 24px;
  border: 1px solid #b8c5d6;
  margin-bottom: 24px;
}

.interests {
  padding: 24px;
  border: 1px solid #b8c5d6;
  margin-bottom: 24px;
}

padding: 24px는 네 방향 모두에 24픽셀의 안쪽 여백을 줍니다. border의 세 값은 차례로 테두리의 두께, 선 모양, 색상입니다. margin-bottom은 각 영역의 아래쪽 바깥 여백을 지정합니다.

파일을 저장하고 브라우저에서 페이지를 새로고침하세요. 글과 테두리 사이가 떨어졌는지, 소개 영역과 관심사 영역 사이에 공간이 생겼는지 살펴봅니다. 테두리가 배경과 잘 구분되지 않는다면 색상을 조절해 보세요.

두 영역에 같은 값을 적용했지만 역할은 다릅니다. padding은 각 영역의 내용을 테두리에서 떨어뜨리고, 소개 영역의 margin-bottom은 그 아래 영역과의 간격을 만듭니다. 제목과 문단처럼 브라우저가 기본 여백을 주는 요소도 있으므로 눈에 보이는 전체 간격이 지정한 값 하나와 정확히 같지는 않을 수 있습니다.

개발자 도구로 박스 살펴보기

1. 브라우저에서 소개 영역을 마우스 오른쪽 버튼으로 누르고 검사 또는 요소 검사를 선택합니다.
2. 개발자 도구의 요소 목록에서 class="intro"가 있는 요소가 선택됐는지 확인합니다.
3. 스타일이나 계산된 스타일 패널에서 박스 모델 그림을 찾습니다. 브라우저에 따라 위치와 이름은 조금 다를 수 있습니다.
4. 콘텐츠를 둘러싼 padding, border, margin 값을 확인합니다. 관심사 영역도 선택해 같은 방법으로 살펴보세요.

개발자 도구에서 값을 임시로 바꿔 보면 어느 공간이 달라지는지 비교하기 쉽습니다. 그 변경은 CSS 파일에 자동으로 저장되지 않으므로 유지하고 싶은 값은 파일에도 직접 적어야 합니다.

직접 조절해 보기

소개 영역의 padding을 24px에서 12px로 바꾸고 저장한 뒤 새로고침하세요. 이어서 값을 다시 정한 다음, margin-bottom을 바꿔 두 영역 사이의 간격을 비교해 보세요. 각 변경에서 테두리 안쪽과 바깥쪽 중 어느 공간이 달라졌는지 개발자 도구로 확인합니다.

마지막으로 관심사 영역도 읽기 편하게 조절하세요. 영역 안의 글이 테두리에 붙지 않고, 두 영역이 구분될 만큼 떨어져 있다면 됩니다. 다음 강의에서는 프로필 이미지와 소개 글을 Flexbox로 나란히 배치합니다.

이번 강의의 전체 파일

앞 강의의 파일이 없다면 아래 파일로 시작해도 됩니다. 6강 전체 예제 내려받기에서 03 폴더를 열면 이 단계의 파일을 확인할 수 있습니다.

완성 화면 열기 · CSS 파일 보기

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>지민의 자기소개</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <h1>안녕하세요, 지민입니다</h1>
      <p>작은 웹페이지를 만들며 배우는 기록입니다.</p>
    </header>
    <section class="intro">
      <h2>저를 소개합니다</h2>
      <p>저는 웹페이지를 만드는 것을 배우고 있습니다.</p>
      <p>오늘의 목표는 CSS로 읽기 좋은 자기소개 페이지를 완성하는 것입니다.</p>
    </section>
    <section class="interests">
      <h2>관심사</h2>
      <ul>
        <li>웹 만들기</li>
        <li>산책과 사진</li>
        <li>배운 내용을 짧게 기록하기</li>
      </ul>
    </section>
    <footer id="contact">
      <a href="mailto:hello@example.com">연락하기</a>
      <p>예제용 주소입니다. 내 페이지에서는 실제 연락 방법으로 바꾸세요.</p>
    </footer>
  </main>
</body>
</html>

body {
  background-color: #f5f7fa;
  color: #1f2937;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  color: #173b6c;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: #173b6c;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.intro {
  background-color: lightyellow;
}

.intro, .interests {
  padding: 24px;
  border: 1px solid #b8c5d6;
  margin-bottom: 24px;
}

실행으로 본 결과

소개와 관심사 영역에 안쪽 여백·테두리·영역 사이 간격을 적용했습니다.