[HTML] 구분선, 수평선(Horizontal Rule) + HTML 속성 유형 :: <hr>

hr 태그, Horizontal Rule

• 수평바, 구분자
• 문단과 문단을 구분하는 역할
• 콘텐츠와 콘텐츠를 구분하는 역할
• 단독태그

선 확대해봤을때 이렇게 생김!!! &rarr; 입체감 있는 모습 &rarr; 못생김! 그래서 커스텀 하거나 border-bottom으로 구분선을 적용하곤 한다.

 

hr태그의 속성

1. size: 선의 두께(px)
2. width: 선의 너비(px, %)
3. align: 수평 정렬
4. color: 선의 색상
5. noshade: 그림자 유무 (→ 색상이 있으면 적용X, 값이 없어서 이름만 적음. 적으면 적용. 안적으면 미적용)
6. title: 풍선 도움말(Tooltip, Hover Text)(→ 마우스 커서를 대고 있으면 아래 네모박스 도움말이 뜨는 것_평균 0.2초후 show up)

<hr size="5" width="300" align="left" noshade title="수평바입니다.">
<hr size="1" color="skyblue">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 

기본 <hr> 적용 화면

 

<hr size="5" width="300"> 적용 화면

 

HTML 속성 유형

1. 숫자(단위없음) → 아래 둘 중의 하나의 경우
   • 픽셀(px) → 화소 → 화상(이미지)을 구성하는 최소 단위 → 단일 색상을 가지는 점 1개
   • 글자수
2. 숫자(단위: %)
   • 100%의 기준이 누구인지?
   • 부모 태그의 영역을 100으로 하는 상대 단위
   • 상대값
   • (※ 고정너비의 경우: px 사용, 상대너비(비율따라)의 경우: % 사용)
3. 열거형
   • 정해진 속성값 중 하나를 선택해서 사용
4. 색상
   • 색상명, RGB
5. 플래그형(boolean)
   • 속성명 기재(on), 미기재(off)
6. 문자열
   • 자유롭게 기재
7. URL
   • 자원의 경로

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업