HTML에서 HR 태그의 두께 사용자 지정

  2. 어떻게
  3. HTML 하우투
  4. HTML에서 HR 태그의 두께 사용자 지정
Aimen Fatima 2023년6월20일
HTML HTML Tag
  1. HTML의 hr 태그
  2. HTML에 가로줄 삽입
  3. HTML에서 가로줄 사용자 지정
HTML에서 HR 태그의 두께 사용자 지정

이 문서에서는 HTML의 <hr> 태그에 대해 설명합니다. 또한 <hr> 태그의 속성과 CSS의 사용자 지정, 즉 두께, 색상 및 불투명도 변경에 대해서도 설명합니다.

HTML 프로젝트를 만들고 <hr> 태그를 구현하여 시연합니다.

HTML의 hr 태그

HTML의 <hr> 태그를 사용하면 문서 부분을 분리하거나 분할하기 위해 주제 나누기 또는 수평 규칙을 추가할 수 있습니다.

사용자 정의하려면 적절한 CSS가 필요합니다. 종료 태그가 필요하지 않습니다. 기본 구문은 다음과 같습니다.

<hr property: value;> ...

속성:

  1. 정렬: 이 속성은 페이지의 수평선을 정렬할 수 있습니다. Left, center 및 right는 align 속성에 사용할 수 있는 값입니다.
  2. noshade: 음영 효과가 없는 선을 지정합니다.
  3. 크기: 수평선의 높이를 지정합니다.
  4. 폭: 수평선의 폭을 지정합니다.
  5. 색상: 수평선의 색상을 지정합니다.

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>

출력:

관련 문장 - HTML Tag