본문 바로가기

웹 프로그래밍/HTML

[HTML] 선을 그리는 단일 태그 <hr>

HTML 태그는 시작태그와 종료태그를 명시해줘야 한다.

그러나, 종료 태그 없이 시작 태그만을 가지는 태그도 있다.

이를 빈 태그(empty tag)라고 한다. 단일 태그라고도 불리는 것 같다.

 

단일 태그의 예시로는, <img>, <br>, <hr> 등이 있다.

아래는 선을 그리는 hr 태그의 예시다.

hr : horizontal rule 

화면을 수평으로 가른다는 의미에서 '수평 자'라고 지은 것 같다.

 

hr 태그를 통해 생성한 선은, 가운데 정렬료 표시된다.

선의 너비를 고정적인 크기(픽셀), 화면 내 비율(%)로 표현할 수 있다.

 

또한 size라는 속성을 통해 선의 굵기를 표현하고, color 라는 속성을 통해 선의 색상을 정할 수 있다.

 

width를 비율(%)로 표현하면, 화면을 줄이고 늘릴 때 그에 맞게 표현된다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<br>
    
	<hr> <!-- 화면을 채우는 선 -->    
   	<hr width = "30%">   <!-- x% 라고 적으면, 화면 내 비율로 표시된다. 즉, 가변적이다. -->
	<hr width = "200px">   <!-- 선은 가운데 정렬로 표시된다. / 픽셀은 고정적 크기다.. -->
	<hr width = "60" color ="red"> 
	<hr width = "60" color ="red" size="5">   <!-- size는 선의 굵기를 나타냄. -->
	<hr width = "60" color ="#0080FF" size="5">   <!-- size는 선의 굵기를 나타냄. -->
    
</body>
</html>