수평선
게시 됨: 2021-09-01HTML 페이지를 더 멋지고 구조적으로 보이게 만드는 방법에는 여러 가지가 있습니다. 보다 구체적으로 말하면, 수평선은 사이트의 콘텐츠를 균형 있고 명확하고 쉽게 탐색할 수 있도록 하는 데 특별한 역할을 할 수 있습니다. 웹사이트에 큰 변화를 주기로 결정할 때마다 선과 같은 작은 요소가 차이를 만들 수 있습니다. 이러한 작은 것들이 사이트의 메시지를 보다 포괄적으로 만듭니다. 게다가 웹 리소스의 시각적 매력과 청중이 데이터를 인식하는 방식을 변경할 수 있습니다.
그러나 웹페이지에 맞게 맞춤화된 선을 만들고 페이지에서 조작하는 공간을 더 잘 이해할 수 있도록 할 수도 있습니다. 즉, HTML 페이지 내에서 수평선을 사용자 정의하는 방법을 자세히 살펴보겠습니다.수평선은 웹 페이지의 장식으로 사용되는 HTML 요소입니다. 그러나 다음과 같은 다른 용도로도 유용할 수 있습니다.
- 콘텐츠의 여러 부분을 시각적으로 구분하고 한 아이디어가 끝나고 다른 아이디어가 시작되는 지점을 강조하는 구분 기호입니다.
- 웹 페이지의 일부 의미 있는 섹션을 강조하는 형광펜.
- 수평선은 웹사이트에서 다양한 목적을 달성하는 가장 인기 있고 가장 쉬운 방법 중 하나로 간주됩니다. 언뜻 보기에는 단순해 보이지만 특정 요구 사항에 따라 조정할 수 있는 다기능 요소입니다. 웹 페이지의 HTML 코드를 간단히 수정하여 수평선의 다음 사양을 조정할 수 있습니다.
길이;
너비;
색깔;
조정.
수평선이 블록 요소를 참조한다는 점도 지적할 가치가 있습니다. 웹 페이지에서 별도의 줄에 배치되고 해당 줄 옆에 추가하는 텍스트가 그 아래에 놓이게 됨을 의미합니다.
수평선은 페이지를 여러 섹션으로 분리하는 데 매우 유용합니다. 간단한 수평선을 추가하려면 < hr >을 입력하기만 하면 됩니다. 그러면 다음과 같은 결과를 얻을 수 있습니다.
수평선을 만드는 방법
간단한 < hr > 태그를 사용하여 라인을 설정할 수 있습니다. "Horizontal Rule"의 약자로 고전적인 외부 매개변수를 설정합니다. 다른 많은 것들과 다른 점은 끝 태그가 필요없고 자체적으로 존재할 수 있다는 것입니다. 태그의 추가 값을 사용하여 요소의 외부 특성을 변경할 수 있습니다.
이렇게 생겼습니다. 예를 들어, 100픽셀의 길이를 원하면 다음과 같은 태그를 설정합니다. hr width = "100.
조정.
왼쪽 또는 오른쪽 가장자리와 중앙에 선을 정렬할 수 있습니다. 이 기능은 전체 페이지 라인을 정렬할 수 없기 때문에 너비 매개변수를 이미 지정한 경우에만 유효합니다. 정렬을 위해 "align" 태그에 추가 속성을 설정하고 여기에 방향을 추가하십시오: center - 가운데, 왼쪽 - 왼쪽 및 오른쪽 - 오른쪽 정렬. 이 경우 완성된 태그는 다음과 같이 보일 것입니다. 길이가 150픽셀인 수평선의 중심 정렬을 설정해야 하는 경우 완성된 태그는 다음과 같습니다. hr align = "center" width = " 150". 속성이 길이 측정 너비에 종속되더라도 정렬을 위한 측정값인 "align"은 위치 1에 배치됩니다.너비.
선택적으로 너비를 지정하여 굵게 또는 가는 밑줄을 만들 수도 있습니다. 이 기준은 어떤 것에도 의존하지 않으며 길이나 정렬을 지정하지 않고 독립적으로 사용할 수 있습니다. 이를 위해 태그의 크기 속성과 원하는 너비(픽셀)와 동일한 숫자 값을 사용합니다. 숫자는 크기 속성과 "=" 기호 뒤에 따옴표로 표시됩니다.
따라서 너비가 15픽셀인 선을 만들어야 하는 경우 hr size = "15" 태그를 만들어야 합니다.
색깔.
또한 독립 지표로 설정됩니다. 변경하려면 색상 속성을 코드 형식 또는 영어로 색상 이름과 함께 사용하십시오. 색상은 "=" 기호 뒤에 따옴표로 표시됩니다.
따라서 표준 흰색 라인에 대한 태그는 두 가지 방법으로 작성할 수 있습니다. hr color = "#FFFFFF" 또는 hr color = "white"
검은색은 코드 # 000000을 사용하여 생성할 수 있습니다.
색깔있는 수평선을 만드는 방법?
가로줄은 한 텍스트 블록을 다른 블록과 구분하는 데 적합합니다. 상단과 하단에 가로줄이 있는 작은 텍스트는 일반 텍스트보다 독자의 주의를 끕니다.
< hr > 태그를 사용하여 수평선을 그릴 수 있으며, 그 모양은 사용된 속성과 브라우저에 따라 다릅니다. 태그는 블록 요소를 참조하므로 줄은 항상 새 줄에서 시작하고 그 이후에는 모든 요소가 다음 줄에 표시됩니다. < hr > 태그의 많은 속성 덕분에 이 태그를 통해 생성된 라인은 조작하기 쉽습니다. 강력한 스타일과 결합하여 문서에 선을 추가하는 것은 매우 쉽습니다.
기본적으로 선은 볼륨 효과와 함께 회색으로 표시됩니다. 이러한 유형의 선이 항상 사이트 디자인에 맞는 것은 아니므로 스타일을 통해 선의 색상 및 기타 매개변수를 변경하려는 개발자의 욕구는 이해할 수 있습니다. 그러나 브라우저는 이 문제에 대해 모호하므로 한 번에 여러 스타일 속성을 사용해야 합니다. 특히 Internet Explorer의 이전 버전은 선 색상에 color 속성을 사용하는 반면 다른 브라우저는 배경 색상을 사용합니다. 하지만 그게 다가 아닙니다. 이 경우 반드시 0 이외의 선 굵기(높이 속성)를 지정하고 border 속성을 없음으로 설정하여 선 주변의 테두리를 제거해야 합니다. hr 선택기에 대한 모든 속성을 통합하면 널리 사용되는 브라우저에 대한 보편적인 솔루션을 얻을 수 있습니다.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> 가로선 색상 < /title > < 스타일 > hr { 테두리: 없음; / * 테두리 제거 * / background-color: red; / * 선 색상 * / 색상: 빨강; / * IE6-7의 선 색상 * / 높이: 2px; / * 선 너비 * / } < /style > < /head > < body > < hr > < p > 문자열 < /p > < hr > < /body > < /html >예:
이것:
< hr color="#c7c34c" size="2" 너비="50%" >이것을 준다:
색상: 라인의 색상:
< hr color="#c7c34c" size="2" 너비="50%" >크기: 픽셀로 표현된 라인의 높이:
< 시간 크기="x" >너비: 백분율(%) 또는 픽셀로 표시되는 선의 너비(내 예에서는 원래 크기의 50%임):
< 시간 너비="x%"> 또는 < 시간 너비="x" >고급:
이것:
< 시간 너비="400" 색상="#000000" 크기="4" >제공:
이 경우 스타일을 사용했습니다.
테두리 너비는 3픽셀(3픽셀)입니다.
점선이다
기본 색상은 검정색 : #000000
파란색 점: #0099CC
여전히 필요한 경우 더 설명하기 위한 마지막 예 ;):
이것
< 시간 너비="400" 색상="#FFFFFF" 크기="6" >제공:
이 경우 바로 위:
테두리 너비는 2픽셀(2픽셀)입니다.
점선이다
기본 색상은 흰색 : #FFFFFF
은색 대시: #C0C0C0
가능한 스타일은 다음과 같습니다.
-점이 찍힌
- 점선
-단단한
-더블
-홈
-시초
-삽입
-산등성이
그것이 내가 수평선에 대해 말할 수 있는 전부입니다!