HTML에서 구분선을 넣는 태그, <hr> 완전 해부!
웹 페이지를 읽다 보면 ‘여기서 한 호흡 쉬어야겠다’ 싶은 지점이 있죠. 글의 분위기를 바꾸거나, 본문과 요약을 나누거나, 여러 항목을 정돈하는 데 꼭 필요한 것이 바로 구분선입니다.
HTML에서는 이 구분선을 <hr> 태그 하나로 삽입할 수 있어요. 이름부터 직관적인데요, horizontal rule, 즉 수평선을 의미하죠.
단순한 선 한 줄이지만, 독자에게는 ‘이전 내용과는 다른 뭔가가 시작된다’는 시각적 신호가 됩니다. 특히 모바일이나 빠르게 스크롤하는 사용자에게는 이런 시각적 리듬이 콘텐츠의 몰입도를 크게 높여줘요.
이번 포스트에서는 <hr> 태그의 기본 개념부터, CSS로 감각 있게 꾸미는 다양한 활용법까지 한 번에 정리해드립니다.
Step 1. hr 태그의 기본 개념
이 태그는 단독으로 사용되며, 시각적으로는 얇은 선을 하나 화면에 표시합니다.
의미론적으로는 HTML5부터 내용의 단락 전환이나 주제 분리를 의미하는 시맨틱 태그로 간주되죠.
즉, 단순한 디자인 요소가 아니라 앞뒤 내용이 주제적으로 전환된다는 의미를 갖습니다.
<h2>공지사항</h2>
<p>8월 1일부터 운영시간이 변경됩니다.</p>
<hr>
<p>고객센터: 1234-5678</p>공지사항
8월 1일부터 운영시간이 변경됩니다.
고객센터: 1234-5678
💡 Tip:
<hr>은<br>처럼 닫는 태그 없이 단독으로 사용됩니다.
Step 2. CSS로 다양한 구분선 만들기
기본 수평선은 회색이고 얇지만, CSS를 활용하면 다양한 분위기의 구분선을 만들 수 있어요.
아래는 블로그, 뉴스, 제품 소개 페이지 등에서 자주 활용되는 구분선 디자인입니다.
✏️ 강조용 굵은 컬러 구분선
<hr style="height: 4px; background-color: #1e88e5; border: none;">→ 섹션 제목 아래 강조용으로 자주 사용됩니다. 블로그 포스트나 제품 소개 페이지에 잘 어울립니다.
📎 점선 스타일 구분선
<hr class="dashed">→ FAQ 구간, 항목 간 구분 등에서 부드러운 느낌을 줄 때 적합합니다.
🔹 도트 스타일 구분선
<hr class="dotted">→ 문단을 은은하게 나눌 때 사용되며, 정보성 콘텐츠에 적합합니다.
🌈 그라데이션 구분선
<hr class="gradient">→ 디자인이 중요한 랜딩페이지, 브랜드 페이지 등에서 시각적 포인트로 사용됩니다. 컬러 대비가 강해 가독성도 높습니다.
💡 디자인 팁: 포스트 섹션 구분, 이벤트 안내, 요약 정리 등에서 분위기에 맞게 구분선 스타일을 바꿔보세요.
Step 3. hr 태그는 언제 쓰면 좋을까?
- 콘텐츠 흐름이 전환될 때
- 글머리와 본문 사이 구분할 때
- 요약과 상세 내용을 구분할 때
- 블로그 글에서 분위기 전환이 필요할 때
특히 HTML 기반 포스트를 시각적으로 정돈하고 싶을 때, <hr>은 깔끔한 장식 역할까지 해냅니다.
그리고 CSS와 함께 사용하면 단순한 선이 아니라, 정보 전달력과 디자인 감각을 동시에 살릴 수 있는 도구로 활용할 수 있습니다.
📌 실전 활용 예시: FAQ 스타일 콘텐츠
<h2>제품 Q&A</h2>
<p><strong>Q.</strong> 배송은 얼마나 걸리나요?</p>
<p><strong>A.</strong> 평균 2~3일 소요됩니다.</p>
<hr class="dotted">
<p><strong>Q.</strong> 교환은 어떻게 하나요?</p>
<p><strong>A.</strong> 고객센터를 통해 접수하시면 됩니다.</p>제품 Q&A
Q. 배송은 얼마나 걸리나요?
A. 평균 2~3일 소요됩니다.
Q. 교환은 어떻게 하나요?
A. 고객센터를 통해 접수하시면 됩니다.
정리하며: <hr>는 단순한 선 그 이상입니다
단순한 수평선 같지만, <hr>은 콘텐츠의 흐름을 정리하고 독자에게 정보를 구분 지어 주는 중요한 도구입니다.
CSS로 감각적으로 꾸미면 정보 전달력도, 시각적 완성도도 한층 높일 수 있어요.
HTML 태그의 이름이 가진 의미까지 이해하고 스타일링까지 활용하면, 진짜 프로처럼 콘텐츠를 만들 수 있겠죠?