<hr> 태그 완벽 정리 (초급자용)

<hr> 태그 완벽 정리 (초급자용)

📝 <hr> 태그란?

<hr> 태그는 HTML에서 수평선을 나타내는 태그입니다. 문서에서 구분선을 만들 때 사용됩니다.

---

📌 <hr> 태그의 특징

• 내용이 없는 태그 (닫는 태그 없음) → <hr> 단독 사용
• 수평선을 삽입하여 문서 내용을 구분함
• 기본 스타일: 회색의 얇은 선
• CSS로 스타일 변경 가능 (색상, 두께, 길이 등 조정 가능)

---

✅ 기본 사용법

html

복사편집

<p>첫 번째 문단입니다.</p> <hr> <p>두 번째 문단입니다.</p>

🔹 결과
첫 번째 문단과 두 번째 문단 사이에 수평선이 표시됩니다.

---

🎨 CSS를 활용한 스타일 변경

html

복사편집

<hr style="border: 2px solid black; width: 50%;">

🔹 설명

• border: 선의 두께(2px), 스타일(solid), 색상(black) 지정
• width: 선의 길이를 50%로 설정 (화면 가로 너비의 절반)

---

📌 <hr> 태그의 활용 예시

1. 블로그나 기사에서 내용 구분
2. html
   복사편집
   <h2>오늘의 뉴스</h2> <p>중요한 뉴스 내용...</p> <hr> <h2>어제의 뉴스</h2> <p>어제 있었던 사건...</p>
3. 웹사이트에서 섹션을 나눌 때
4. html
   복사편집
   <h1>회사 소개</h1> <p>우리는 최고의 IT 기업입니다.</p> <hr> <h1>문의하기</h1> <p>이메일: contact@example.com</p>

---

🚀 <hr> 태그 활용 팁

✅ 너비 조정: width 속성으로 조정 가능
✅ 색상 변경: border-color 또는 background-color 활용
✅ 두께 변경: border 속성으로 변경 가능
✅ 여백 추가: margin 속성 활용 (margin: 20px 0;)

 

hr 태그 활용

<hr style="width: 70%; height: 5px; background-color: #B28365; border: none;"/>
<hr style="width: 70%; height: 3px; background-color: #8B5A2B; border: none;"/>
12345

<br/><br/><br/>
<hr style="width: 65%; height: 1px; background-color: #654321; border: none; margin: 0;"/>
<hr style="width: 15%; height: 5px; background-color: #D2B48C; border: none; margin: 0;"/>
12345

<br/><br/><br/>

<hr style="width: 75%; height: 4px; background-color: #A67B5B; border: none; margin: 0;"/>
<hr style="width: 20%; height: 6px; background-color: #8B5A2B; border: none; margin: 0;"/>
12345

<br/><br/><br/>

<hr style="width: 60%; height: 2px; background-color: #C19A6B; border: none; margin: 0;"/>
<hr style="width: 25%; height: 5px; background-color: #B28365; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 80%; height: 3px; background-color: #8B5A2B; border: none; margin: 0;"/>
<hr style="width: 10%; height: 5px; background-color: #654321; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 70%; height: 5px; background-color: #B28365; border: none; margin: 0;"/>
<hr style="width: 5%; height: 6px; background-color: #A67B5B; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 68%; height: 1px; background-color: #C19A6B; border: none; margin: 0;"/>
<hr style="width: 30%; height: 5px; background-color: #8B5A2B; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 72%; height: 3px; background-color: #D2B48C; border: none; margin: 0;"/>
<hr style="width: 15%; height: 6px; background-color: #654321; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 66%; height: 2px; background-color: #8B5A2B; border: none; margin: 0;"/>
<hr style="width: 20%; height: 5px; background-color: #B28365; border: none; margin: 0;"/>
12345

<br/><br/><br/>
<hr style="width: 74%; height: 4px; background-color: #A67B5B; border: none; margin: 0;"/>
<hr style="width: 10%; height: 5px; background-color: #C19A6B; border: none; margin: 0;"/>
12345