HR 태그를 사용하여 웹 페이지에서 재미있는 표정을 짓기
웹 사이트에 가로형의 분리 기호 스타일 선을 추가해야하는 경우 몇 가지 옵션이 있습니다. 해당 행의 실제 이미지 파일을 페이지에 추가 할 수는 있지만 브라우저에서 해당 파일을 검색하여로드해야 사이트 성능에 부정적인 영향을 줄 수 있습니다.
CSS 테두리 속성을 사용하여 요소의 위쪽 또는 아래쪽에 선으로 작용하는 테두리 를 추가하여 효과적으로 구분선을 만들 수 있습니다.
마지막으로 가로 요소에 HTML 요소를 사용할 수 있습니다.
수평 규칙 요소
웹 페이지에 요소를 추가 한 적이 있다면 이러한 행이 표시되는 기본 방법이 이상적이지 않은 것을 발견했을 것입니다. 즉, 이러한 요소의 시각적 모양을 사용자가 원하는 모양과 일치하도록 조정하려면 CSS로 전환해야합니다.
기본 HR 태그는 브라우저가 표시하려는 방식으로 표시됩니다. 최신 브라우저는 일반적으로 너비 100 %, 높이 2px 및 선을 만들기 위해 검은 색으로 된 3D 테두리가있는 스타일이없는 HR 태그를 표시합니다.
다음은 표준 HR 요소의 예입니다. 이 이미지에서 현대적인 브라우저에서 스타일이없는 HR이 어떻게 보이는지 확인할 수 있습니다.
너비와 높이는 브라우저에서 일관 적입니다.
웹 브라우저에서 일관된 스타일은 폭 과 스타일뿐입니다. 이것들은 라인의 크기를 정의합니다. 너비와 높이를 정의하지 않으면 기본 너비는 100 %이고 기본 높이는 2px입니다.
이 예에서 너비는 상위 요소의 50 %입니다 (아래의 모든 예는 인라인 스타일을 포함하고 있습니다. 프로덕션 설정에서 이러한 스타일은 실제로 모든 페이지에서 관리하기 쉽게 외부 스타일 시트에 작성됩니다).
style = "width : 50 %;">
이 예제에서 높이는 2em입니다.
style = "height : 2em;">
국경 변경은 어려울 수 있음
최신 브라우저에서는 브라우저가 테두리를 조정하여 선을 만듭니다. 따라서 스타일 속성으로 테두리를 제거하면 페이지에서 선이 사라집니다. 다음 예제에서 볼 수 있듯이 (선이 보이지 않기 때문에 아무 것도 볼 수 없습니다) :
style = "border : none;">
테두리 크기, 색상 및 스타일을 조정하면 선이 달라 보이고 모든 최신 브라우저에서 동일한 효과를냅니다. 예를 들어,이 데모에서는 테두리가 빨간색, 점선 및 1 픽셀 폭입니다.
style = "border : 1px 점선 # 000;">
그러나 테두리와 높이를 변경하면 스타일이 최신 브라우저에서보다 오래된 브라우저에서 약간 다르게 보입니다. 이 예제에서 알 수 있듯이 IE7 이하 버전에서 (보기 좋게 구식이며 Microsoft에서 더 이상 지원하지 않는 브라우저) 다른 브라우저 (IE8 이상 포함)에 표시되지 않는 사선이 있습니다. :
style = "height : 1.5em; width : 25em; border : 1px solid # 000;">
그 antiqued 브라우저는 웹 디자인에있는 관심사의 다량 아닙니다 오늘 현대 선택권으로 크게 대체 되었기 때문에, 오늘이다.
배경 이미지로 장식 선 만들기
색상 대신 HR에 대한 배경 이미지를 정의하여 원하는대로 정확하게 표시 할 수 있지만 여전히 의미 상으로 마크 업에 표시됩니다.
이 예에서는 세 개의 물결 모양이있는 이미지를 사용했습니다. 반복없이 배경 이미지 로 설정하면 책에서 볼 수있는 것과 거의 같은 모양으로 내용이 중단됩니다.
스타일 = "높이 : 20 픽셀, 배경 : #fff url (aa010307.gif) 반복없는 스크롤 센터, 테두리 : 없음;">
HR 요소 변환
CSS3를 사용하면 라인을보다 재미있게 만들 수 있습니다. HR 요소는 전통적으로 수평선 이지만 CSS 변형 속성을 사용하면 모양을 바꿀 수 있습니다. HR 요소에서 선호하는 변환은 회전을 변경하는 것입니다.
HR 요소를 약간 대각선으로 회전 할 수 있습니다.
hr {
-moz-transform : rotate (10deg);
-webkit-transform : rotate (10deg);
-o-transform : 회전 (10도);
-ms-transform : rotate (10deg);
변형 : rotate (10deg);
}
또는 완전히 수직으로 회전 할 수 있습니다.
hr {
-moz-transform : rotate (90deg);
-webkit-transform : rotate (90deg);
-o-transform : 회전 (90도);
-ms-transform : rotate (90deg);
변형 : 회전 (90도);
}
이 기능은 문서의 현재 위치를 기반으로 HR을 회전하므로 위치를 조정하여 원하는 위치로 가져와야 할 수 있습니다. 이 기능을 사용하여 디자인에 수직선을 추가하는 것은 좋지 않지만 흥미로운 효과를 얻는 방법입니다.
귀하의 페이지에서 라인을 얻는 또 다른 방법
HR 요소를 사용하는 대신 어떤 사람들이하는 일 중 하나는 다른 요소의 경계에 의존하는 것입니다. 그러나 때로 인적 자원은 국경을 설정하는 것보다 훨씬 편리하고 사용하기 쉽습니다. 일부 브라우저의 박스 모델 문제로 인해 국경을 더 까다롭게 만들 수 있습니다.