HTML에서 HR 태그의 두께 사용자 지정
이 문서에서는 HTML의 <hr> 태그에 대해 설명합니다. 또한 <hr> 태그의 속성과 CSS의 사용자 지정, 즉 두께, 색상 및 불투명도 변경에 대해서도 설명합니다.
HTML 프로젝트를 만들고 <hr> 태그를 구현하여 시연합니다.
HTML의 hr 태그
HTML의 <hr> 태그를 사용하면 문서 부분을 분리하거나 분할하기 위해 주제 나누기 또는 수평 규칙을 추가할 수 있습니다.
사용자 정의하려면 적절한 CSS가 필요합니다. 종료 태그가 필요하지 않습니다. 기본 구문은 다음과 같습니다.
<hr property: value;> ...
속성:
정렬: 이 속성은 페이지의 수평선을 정렬할 수 있습니다.Left,center및right는align속성에 사용할 수 있는 값입니다.noshade: 음영 효과가 없는 선을 지정합니다.크기: 수평선의 높이를 지정합니다.폭: 수평선의 폭을 지정합니다.색상: 수평선의 색상을 지정합니다.
hr 태그 기능을 배우기 위한 실용적인 예
<hr> 태그를 구현하기 위한 샘플 HTML 프로젝트를 생성해 보겠습니다. Notepad/Notepad++(PC) 또는 TextEdit(Mac)과 같이 OS에서 지원하는 HTML 편집기를 엽니다.
편집기에서 다음과 같은 간단한 HTML 코드를 작성하고 파일을 Filename.html로 저장한 다음 지원되는 웹 브라우저에서 저장된 파일을 엽니다.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<p>Paragraph to split.</p>
</center>
</body>
</html>
출력:
HTML에 가로줄 삽입
소스 파일에 <hr> 태그를 삽입하여 제목과 단락 사이에 가로 나누기를 설정합니다.
위에서 만든 HTML 파일에 다음 코드 스니펫을 복사합니다.
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr>
<p>Paragraph to split.</p>
</center>
</body>
</html>
출력:
제목과 단락 사이에 수평선이 표시됩니다. 이 막대는 색상, 크기, 너비, 정렬의 기본값을 갖습니다.
HTML에서 가로줄 사용자 지정
속성(align, color, size, width, noshade)은 원하는 출력에 따라 사용자 지정할 수 있습니다. 문서에서 가로줄의 모양을 수정하려면 CSS를 사용해야 합니다.
<hr>의 높이 속성은 막대의 두께를 지정합니다. 막대의 가시성은 opacity 속성을 사용하여 설정할 수 있습니다.
예를 들어 문서에서 눈에 잘 띄지 않는 막대를 원하는 경우 불투명도 값은 1보다 작아야 합니다.
수평자 두께
CSS의 높이 속성은 가로줄의 두께를 지정하는 데 사용됩니다. height의 최소값은 1px입니다.
다음은 CSS 스타일 시트의 코드 스니펫입니다.
hr {
position: relative;
top: 10px;
border: none;
height: 1px;
background: green;
margin-bottom: 30px;
width: 30em;
}
top 속성은 수평선과 문서 상단 사이의 간격을 지정합니다. CSS의 배경은 HTML의 색상 속성에 대한 대안입니다.
막대의 색상을 지정합니다. 이러한 속성을 보여주는 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<p>Paragraph to split.</p>
</center>
</body>
</html>
출력:
수평선의 불투명도
CSS의 opacity 속성은 수평선의 투명도를 지정합니다. 불투명도 값 1은 투명도를 나타내지 않고 불투명도 값 0은 완전한 투명도를 나타냅니다.
다음은 opacity 속성의 구문입니다.
hr
{
background-color: gray;
opacity: 0.5;
}
예:
<!DOCTYPE html>
<html>
<head>
<title> Document </title>
<style>
hr.class1 {
position: relative;
top: 10px;
border: none;
height: 1px;
background: red;
margin-bottom: 30px;
width: 30em;
}
hr.class2{
position: relative;
border: none;
height: 10px;
background: green;
margin-bottom: 30px;
width: 30em;
}
hr.class3{
position: relative;
border: none;
height: 10px;
background: green;
width: 30em;
opacity: .25;
}
</style>
</head>
<body>
<center>
<h1>Sample Task to Practice hr Tag</h1>
<hr class=class1>
<hr class=class2>
<hr class=class3>
<p>Paragraph to split.</p>
</center>
</body>
</html>
출력: