HTML에 세로 공간 삽입

HTML 요소 사이에 세로 간격을 두려면 CSS의 margin 또는 padding을 사용하세요. HTML 소스에 빈 줄을 여러 개 넣어도 브라우저가 일반 공백을 하나로 처리하므로 레이아웃 간격이 일정하게 생기지는 않습니다. 주소처럼 내용 자체에 줄바꿈이 필요할 때는 <br>을 사용하세요. <hr>은 주제 전환을 나타내고, 공백과 줄바꿈을 보존해야 하는 텍스트에는 <pre>를 사용합니다.

HTML <br> 요소로 줄바꿈하기

<br> 요소는 같은 텍스트 블록 안에서 다음 줄을 시작합니다. 우편 주소처럼 각 줄이 의미 있는 콘텐츠에 적합합니다.

<p>HubSpot, Inc.<br>35 St. 2<br>California, USA</p>

서로 다른 블록을 구분하거나 블록 사이의 레이아웃 간격을 조절하려면 별도의 문단이나 CSS를 사용하세요. 콘텐츠를 아래로 밀기 위해 <br>을 반복해서 넣으면 표현 방식이 마크업에 묶여 간격을 일관되게 조정하기 어려워집니다.

CSS의 margin과 padding으로 세로 간격 조절하기

레이아웃 간격에는 CSS를 사용하면 텍스트와 별개로 일관된 값을 지정하고 조정할 수 있습니다. margin은 요소 테두리 바깥에 공간을 만들고, padding은 테두리와 콘텐츠 사이, 즉 테두리 안쪽에 공간을 만듭니다. 기존 CSS 박스 모델 그림은 이 층위를 보여 줍니다.

예를 들어 각 문단 뒤에 간격을 두려면 아래쪽 margin을 지정합니다.

p { margin-bottom: 1rem; }

margin-bottom 속성은 문단 테두리 바깥에 공간을 만듭니다. 루트 글꼴 크기에 따라 조정되는 1rem 같은 값을 선택한 다음 주변 디자인에 맞게 조절하세요. 서로 인접한 세로 margin은 겹쳐 합쳐질 수 있으므로, 두 블록 사이에 보이는 간격은 두 값의 합이 아니라 더 큰 값이 될 수 있습니다.

배경이나 테두리가 그 공간까지 이어지도록 요소 안쪽에 여유 공간을 두려면 padding-bottom을 사용하세요.

p { padding-bottom: 1rem; }

padding은 요소의 상자 크기를 늘려 전체 크기에 영향을 줄 수 있습니다. 간격 방식이 적절한지 판단할 때는 적용할 요소나 컴포넌트, 그리고 의도한 배경과 테두리를 함께 고려하세요.

마크업과 스타일을 한 페이지에 함께 둘 수도 있습니다. 다음 JavaScript 예제는 문단 간격이 일정하게 설정된 작은 HTML 페이지의 소스를 출력합니다.

const page = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p { margin-bottom: 1rem; }
  </style>
</head>
<body>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>
</html>`;
console.log(page);

스크립트가 출력하는 것은 HTML 소스입니다. 이 소스를 페이지로 열면 브라우저가 CSS를 적용합니다. 텍스트 출력만으로는 실제 렌더링된 간격을 확인할 수 없습니다.

CSS 클래스로 간격 규칙 재사용하기

일부 요소에만 같은 간격이 필요하다면 모든 문단의 스타일을 바꾸는 대신 재사용할 클래스를 정의하세요.

.spacer { margin-bottom: 1rem; }

예를 들어 간격이 필요한 곳에 다음과 같이 적용할 수 있습니다. <p class="spacer">First paragraph.</p><p>Second paragraph.</p>. .spacer 클래스는 값을 하나의 규칙에 모으므로, 해당 간격을 함께 조정할 수 있습니다. 특정 컴포넌트에 사용하는 규칙이라면 그 역할을 설명하는 이름을 선택하세요.

<hr>과 <pre>를 본래 용도에 맞게 사용하기

<hr> 요소는 페이지의 두 부분 사이에서 주제나 장면이 바뀌는 지점을 나타냅니다. 브라우저는 보통 이를 가로선으로 표시하며, 기본 간격은 CSS로 조정할 수 있습니다. 단순한 빈 공간을 만들기 위한 요소가 아니므로, 주제나 장면의 전환이 의미 있을 때 사용하세요.

<pre> 요소는 미리 서식이 지정된 텍스트를 표시하며, 텍스트 콘텐츠의 공백과 줄바꿈을 보존합니다. 코드처럼 서식이 중요한 텍스트에 유용합니다. 주변 HTML의 빈 줄을 일반적인 레이아웃 기법처럼 보존해 주는 것은 아닙니다. <pre> 블록 주변에 간격을 두려면 해당 요소에 CSS margin이나 padding을 지정하세요.