블로그 가독성 2배 높이기: 문단 사이 여백(Margin) 깔끔하게 넣는 HTML 비법

 

블로그 가독성 2배 높이기: 문단 사이 여백(Margin) 깔끔하게 넣는 법

정보가 많은 글일수록 적절한 '쉼표'가 필요합니다. 문단과 문단 사이, 혹은 이미지와 텍스트 사이에 적절한 여백을 배치하면 독자의 시선이 편안해지고 글의 집중도가 올라갑니다. 블로그스팟에서 여백을 자유자재로 다루는 3가지 방법을 소개합니다.

1. 엔터(Enter)보다 확실한 비어있는 공간 (<br /> 태그)

가장 간단한 방법은 HTML 모드에서 줄 바꿈 태그를 사용하는 것입니다.

• 방법: 문단이 끝나는 지점에 <br />를 입력하세요.
• 팁: 더 넓은 간격을 원한다면 <br /><br />처럼 연속해서 사용하면 됩니다. 하지만 너무 많이 사용하면 관리가 어려우므로 아래의 CSS 방법을 권장합니다.

2. CSS 마진(Margin)으로 정밀하게 조절하기 (추천)

특정 문단 아래에만 고정적인 여백을 주고 싶을 때 사용하는 가장 전문적인 방법입니다.

[여백 조절 코드]

<p style="margin-bottom: 40px;">
  이 문단 아래에는 40픽셀만큼의 여백이 생깁니다.
</p>
    

• margin-bottom: 아래쪽 여백의 크기를 조절합니다. 보통 30px~50px 사이가 가장 보기 좋습니다.
• margin-top: 위쪽 여백을 조절하고 싶을 때 사용합니다.

3. 블로그 전체 문단 간격 고정하기

글을 쓸 때마다 코드를 넣기 귀찮다면, 테마 설정에서 모든 문단의 간격을 한 번에 조정하세요.

1. 관리자 메뉴 [테마] -> [맞춤설정] -> [고급] -> [CSS 추가]로 이동합니다.
2. 아래 코드를 복사하여 붙여넣으세요.

/* 모든 문단(p 태그) 아래에 일정한 여백 부여 */
.post-body p {
  margin-bottom: 25px !important;
}

/* 모든 소제목(h2 태그) 위에 여백을 주어 구분 명확화 */
.post-body h2 {
  margin-top: 50px !important;
  margin-bottom: 20px !important;
}

💡 가독성을 위한 여백 활용 전략

• 주제가 바뀔 때: 소제목(H2) 위에는 본문 사이 간격보다 2배 더 넓은 여백을 주어 내용이 전환됨을 시각적으로 알리세요.
• 이미지 주변: 이미지 위아래에 여백이 없으면 글이 답답해 보입니다. 이미지에도 margin을 적용해 숨통을 틔워주세요.
• 모바일 배려: 모바일 화면은 좌우가 좁기 때문에 상하 여백이 충분해야 글자가 뭉쳐 보이지 않습니다.

비어있는 공간은 낭비가 아니라 '배려'입니다. 적절한 여백 설계로 독자가 끝까지 읽고 싶은 블로그를 만들어보세요!