HTML│구분선, 절취선, 수평선 속성 변경하기 (CSS <hr>태그 수정)

블로그에 게시물을 작성하다 보니 구분선을 잘 이용하는 게 정보를 효율적으로 구분할 것이라 생각했다. 제목과 부제에 대한 내용 본문, 인용 그리고 출처와 링크까지 구분하는 되는 것이 일반적이니 구분선으로 그 역할을 확실히 할 수 있겠다. <hr> 태그는 구분선을 그어주는 태그로 Horizontal Rules의 줄임말이라 <hr>태그로 HTML 에서 수정할 수 있다.

구분선이 없는 본문구분선을 삽입한 본문

1. 원하는 구분선의 종류를 선택해서 본문에 삽입한다.

2. HTML 체크 박스를 체크해서 태그를 수정한다.

본문에 구분선을 넣으면 위 이미지 처럼 내용이 구분되어 보이는 효과가 있다. 

다음은 HTML 에서 구분선의 속성 값을 변경하는 것이다.

<hr> 태그의 속성

size : 구분선의 두께

width : 구분선의 길이

align : 구분선의 정렬 기준 (left / center / right)

color : 구분선의 색깔 (색상명, #FFFFFF)

noshade : 선 속을 채움

---

기본형

<hr>

---

두께 10px

<hr size="10px">

---

두께 10px (채움)

<hr size="10px" noshade>

---

길이 60%

<hr width="60%">

---

길이 500px (왼쪽)

<hr width="500px" align="left">

---

길이 500px (가운데)

<hr width="500px" align="center">

---

길이 500px (오른쪽)

<hr width="500px" align="right">

---

붉은색

<hr color="red">

---

특정색

<hr color="#0B615E">

---

본문보다 흐린 선을 원하기 때문에 색채는 #EAEAEA를 사용 했다. HTML컬러 차트를 이용해서 원하는 색채를 선택하면 코드을 알 수 있다. 해당 코드를 태그 내에 입력해서 속성을 변경할 수 있다.

HTML 컬러 코드 link; HTML Color Codes

어렵지 않은 내용이지만 처음 접하기도 하고 자주 사용할 것 같아서 연습삼아 기록으로 남겨본다.