만드는 동안 HTML 페이지디자인이 중요한 역할을 합니다. 특히 다양한 기호와 장식에 대해 이야기할 때: 이러한 작은 요소는 페이지의 "언어"를 보다 쉽게 ​​액세스할 수 있고 명확하게 만드는 데 도움이 될 뿐만 아니라 인식을 크게 바꾸고 모습일반적으로. 가장 중요한 디자인 요소 중 하나는 수평선인데, 다음으로 html로 수평선을 어떻게 사용하는지, 어떻게 수평선을 만드는지 자세히 알아보겠습니다.

수평선이란 무엇이며 왜 필요한가요?

html의 수평선은 다음과 같은 여러 기능을 수행하는 페이지 디자인 요소입니다.

1. 장식. 페이지에 매력을 더하는 데 도움이 됩니다.
2. 나누기. 서로 다른 의미의 정보를 효과적으로 분리하는 데 기여합니다.
3. 강조 또는 강조. 그것은 필요하고 가장 중요한 정보에 페이지 방문자의 주의를 끌 것입니다.

가장 많이 고려되는 수평선이다. 접근 가능한 방법다양한 기능을 구현합니다. 만들기가 매우 간단하고 외견상 매우 수익성이 높아 보입니다. HTML 코드를 간단히 변경하여 다음을 제어할 수 있습니다.

• 길이;
• 너비;
• 색상 특성;
• 하나 또는 다른 가장자리에 정렬.

수평선은 블록 요소를 나타냅니다. 이것은 페이지에서 새 줄을 차지하고 그 뒤에 오는 텍스트가 아래로 이동함을 의미합니다.

HTML에서 수평선 만들기

삼각형 괄호 안에 간단한 태그 - hr을 사용하여 라인을 설정할 수 있습니다. "Horisontal Rule"의 약자로 고전적인 외부 매개변수를 설정합니다. 닫는 태그가 필요없고 독립적으로 존재할 수 있다는 점에서 다른 많은 것들과 다릅니다. 태그의 추가 값을 사용하여 요소의 외부 특성을 변경할 수 있습니다.

1. 길이. 선 길이가 전체 페이지를 덮지 않도록 하려면 원하는 크기를 픽셀 또는 백분율로 설정할 수 있습니다. 이는 태그에 "width"라는 추가 단어와 인용 부호로 묶인 "=" 기호 뒤에 지정된 길이의 숫자 표시기를 사용하여 수행됩니다.

이렇게 생겼습니다. 예를 들어, 100픽셀의 길이가 필요한 경우 다음 태그를 설정합니다. hr width="100"

1. 조정. 왼쪽 또는 오른쪽 가장자리와 중앙에서도 정렬이 가능합니다. 이 특성이미 설정한 경우에만 작동합니다. 폭 매개변수, 전체 페이지 행을 정렬할 수 없기 때문입니다. 정렬을 위해 "align" 태그에 추가 속성을 설정하고 여기에 방향을 추가합니다. 중앙 - 중앙, 왼쪽 - 왼쪽 및 오른쪽 - 오른쪽 정렬.

이 경우 완성된 태그는 다음과 같습니다. 예를 들어 중심 정렬을 설정하려는 경우 수평선 150픽셀 길이의 완성된 태그는 hr align="center" width="150"과 같습니다.

속성이 너비 메트릭에 종속되더라도 정렬을 위한 메트릭인 "align"은 1로 설정됩니다.

1. 너비. 선택적으로 너비를 지정하여 굵게 또는 가는 밑줄을 만들 수도 있습니다. 이 기준은 어떤 것에도 의존하지 않으며 길이나 정렬을 지정하지 않고 독립적으로 사용할 수 있습니다. 이를 위해 태그의 크기 속성과 원하는 너비(픽셀)와 동일한 숫자 값을 사용합니다. 숫자는 크기 속성과 "=" 기호 뒤에 따옴표로 묶여 지정됩니다.

따라서 너비가 15픽셀인 선을 만들려면 hr size="15" 태그를 만들어야 합니다.

1. 색깔. 또한 독립 지표로 설정됩니다. 이를 변경하려면 색상 속성을 코드 형태로 색상 이름과 함께 사용하거나 영어. 색상은 "=" 기호 다음에 인용 부호로 지정됩니다.

따라서 표준 흰색 라인에 대한 태그는 hr color="#FFFFFF" 또는 hr color="white"의 두 가지 방법으로 작성할 수 있습니다.

검은색은 코드 #000000을 사용하여 생성할 수 있습니다.

1. 치워 그림자. 그림자가 포함되지 않은 요소가 필요한 경우 태그에 noshade 속성을 사용해야 합니다. 단독으로 사용하거나 다른 요소와 조합하여 사용할 수 있습니다. 이를 사용하는 표준 라인의 태그는 다음과 같습니다. hr noshade

비디오로 수평선 만들기

그리고 보다 시각적인 형식으로 정보를 얻으려면 수평선 작업 가능성을 자세히 설명하는 다음 비디오를 참조하십시오.

수평선의 필요한 치수를 결정한 후에는 정보가 구조화되고 시각적으로 잘 구성된 방식으로 사이트의 페이지를 정렬할 수 있습니다. 이를 통해 방문자는 제공된 정보를 쉽게 인식하고 귀하의 사이트를 다른 사이트와 구별할 수 있습니다.

안녕하세요 여러분! 오늘은 html을 이용하여 수평선을 만드는 방법을 알려드리겠습니다.

실제로, 예를 들어 텍스트의 한 부분을 다른 부분과 분리해야 하는 경우와 같이 수평선을 만들어야 하는 경우가 많습니다.

CSS를 사용한 가로줄과 세로줄

당신은 이것을 할 수 있습니다 CSS. 이를 위해 div 태그를 사용하여 블록에 필요한 텍스트 섹션을 묶은 다음 style.css 파일에서 또는 직접 html 코드에서 border-top을 사용하여 상단 또는 하단 테두리에 대한 이 블록의 속성을 규정합니다. 그리고 경계 하단. 다음은 예입니다.

이 경우 html 코드에서 직접 css로 스타일을 지정하고 위쪽 테두리를 실선으로 아래쪽 테두리를 점선으로 했습니다.

페이지에 표시되는 방식은 다음과 같습니다.

CSS가 있는 가로줄.

이 방법에는 다음과 같은 장점이 있습니다.

• 거의 모든 유형의 선을 설정할 수 있는 광범위한 설정;
• 가로와 세로를 모두 만들 수 있습니다. 수직선. 세로선을 만들려면 border-top을 border-left로, border-bottom을 border-right로 변경해야 합니다.

단점은 코드의 상대적 부피를 포함합니다.

그러나 밝혀진 바와 같이 html을 사용하여 텍스트에 수평선을 삽입할 수 있습니다. 동시에 CSS로 올라갈 필요조차 없습니다. 이를 위해 태그가 사용됩니다.

---

.

html 태그가 있는 수평선

---

이 태그의 첫 번째 특징은 한 쌍의 끝 태그가 없다는 것입니다. 태그 사이의 html 코드 어디에서나 사용할 수 있습니다. 그리고.

이 태그에는 다음과 같은 속성이 있습니다.

• 너비- 수평선의 길이를 픽셀 또는 백분율로 정의합니다.
• 색깔– 선의 색상을 정의합니다.
• 맞추다– 라인의 정렬을 오른쪽 가장자리 - 오른쪽, 왼쪽 가장자리 - 왼쪽, 중앙 - 중앙으로 설정합니다.
• 크기– 픽셀 단위의 선 두께.

여기 HTML 예제- 코드.

작업

페이지에 수평선을 만듭니다.

해결책

가로줄은 한 텍스트 블록을 다른 블록과 구분하는 데 적합합니다. 위와 아래에 가로줄이 있는 작은 텍스트는 일반 텍스트보다 독자의 관심을 더 많이 끕니다.

태그 첨부

---

브라우저뿐만 아니라 사용된 속성에 따라 모양이 달라지는 수평선을 그릴 수 있습니다. 태그는 블록 요소이므로 행은 항상 다음으로 시작합니다. 새로운 라인, 그 뒤에 모든 요소가 다음 줄에 표시됩니다. 많은 태그 속성 사용

---

이 태그를 통해 생성된 라인은 관리하기 쉽습니다. 스타일의 힘도 연결하면 문서에 선을 추가하는 것이 간단한 작업이 됩니다.

기본 라인

---

볼륨 효과와 함께 회색으로 표시됩니다. 이러한 유형의 선이 항상 사이트 디자인에 맞는 것은 아니므로 스타일을 통해 선의 색상 및 기타 매개변수를 변경하려는 개발자의 욕구는 이해할 수 있습니다. 그러나 브라우저는 이 문제에 대해 모호한 접근 방식을 사용하므로 한 번에 여러 스타일 속성을 사용해야 합니다. 특히, 브라우저의 이전 버전 인터넷 익스플로러 color 속성은 선 색상에 사용되며 나머지 브라우저는 background-color 속성을 사용합니다. 하지만 그게 다가 아닙니다. 반드시 선 굵기(높이 속성)를 0이 아닌 다른 값으로 지정하고 border 속성을 없음으로 설정하여 선 주위의 테두리를 제거하십시오. hr 선택기에 대한 모든 속성을 통합하면 널리 사용되는 브라우저(예제 1)에 대한 범용 솔루션을 얻을 수 있습니다.

예 1. 수평선

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

텍스트 문자열

---

결과 이 예그림에 나와 있습니다. 하나.

쌀. 1. 컬러 수평선

수평선짝을 이루지 않은(닫는 태그는 필요하지 않음) 태그로 구성됩니다.

---

매우 독특한 디자인 요소가 될 수 있습니다. 텍스트를 가로 HTML 라인으로 장식하면 페이지에 텍스트 표현의 특정 논리가 부여될 뿐만 아니라 독자가 순차적으로 공부해야 하는 정보 블록을 강조 표시하기가 더 쉬워집니다. 꼬리표

---

다양한 색상, 두께 및 길이의 수평선을 형성할 수 있습니다. 그리고 이를 수행하는 것은 아래 예에서 볼 수 있듯이 매우 간단합니다.

그건 그렇고, 당신은 또한 블록 스타일 속성을 사용할 수 있습니다

그리고 그리고