[Html] 수평선 긋기 HR태그 사용법
- Web/HTML, CSS
- 2018. 6. 15.
문단을 나눌때 영역을 나누고 싶을때 자주 사용하는것이 바로 수평선 그리기 HR태그입니다. 닫는 태그 없이 한번의 태그 사용으로 간단하게 수평선을 구현할 수 있어 많이들 사용하는 방법입니다. 수평선에 색을 입히거나 비율 수평선의 굵기까지 지정할 수 있습니다.
수평선 긋기 HR태그 사용법
| 태그 | 속성 | 비고 |
| <HR>태그 | <hr width = "비율 or 크기"> | 수평선 화면 비율/크기 조절 |
| <hr color = "색상"> | 수평선의 색 교체 | |
| <hr size = "크기"> | 수평선 크기 조절 |
HR태그에는 여러가지 속성이 있으나 위의 3가지 속성이 대표적입니다.
1. width속성은 width="500px" 크기를 지정하거나 width="50%" 화면에 나타날 비율을 정할 수 있습니다.
2. color은 HR태그의 색상을 설정할 수 있습니다.
3. size속성을 활용하여 수평선의 굵기도 설정해줄 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>문서에 줄을 그어봅시다.</title>
</head>
<body>
1. 웹브라우저의 종류<br>
<hr width = "90%" color = "red">
1. 1 인터넷 익스플로러 <br>
1. 2 파이어폭스 <br>
1. 3 오페라
<hr width = "100%" color = "blue" size = "3">
2. 운영체제의 종류<br>
<hr width = "90%" color = "red">
2. 1 Windows XP<br>
2. 2 리눅스<br>
2. 3 맥 OS<br>
</body>
</html>
[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등
[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)
[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 옆으로 움직이는 텍스트 만들기 (MarQuee) (5) | 2018.06.18 |
|---|---|
| [Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태) (2) | 2018.06.16 |
| [Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등 (1) | 2018.06.14 |
| [Html] input type 종류 & 예제 총정리 (2) | 2017.10.12 |