Please Enable JavaScript!
Gon[ Enable JavaScript ]

HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법

웹 프로그래밍/HTML
반응형

html 문서를 작성할 때 단락 구분으로 사용할 수 있는 선이 있습니다. 수평선으로 그어서 표현할 수 있는데, 글 아래에 밑줄을 그을 때도 사용합니다. 이 태그가 바로 <hr> 입니다. <hr> 태그는 자동으로 줄바꿈이 되기 때문에 <br> 이나 <p> 태그를 사용하지 않아도 됩니다. 그래서 단락을 구분하는 용도로 많이 사용합니다. 

 

 

<hr> 태그는 <br> 과 마찬가지로 독립적인 사용이 가능합니다. 그래서 <hr/> 처럼 “/” 역슬레쉬를 넣어야 합니다. 이것이 닫는다는 의미가 있기 때문에 혼자 쓰이는 태그에는 꼭 넣어 줘야 합니다. 물론 입력하지 않아도 에러가 나지 않지만 서로 간의 약속이기 때문에 넣어 주는 것이 좋습니다. 형식은 다음과 같습니다.

 

<hr width=”길이” color=”색상코드” noshade />

 

 

 

¤  width: 수평선의 길이 값을 지정합니다.

¤  color: 선의 색상을 지정합니다. 100% 로 지정하면 브라우저 크기가 됩니다.

¤  noshade: 입체감을 없애서 평평하게 보이도록 만듭니다.

 

 

 

 

 아래 소개한 샘플은 총 5가지가 있습니다. 첫 번째는 가장 기본적인 기능인 단락 구분을 위한 선 긋기 입니다. 두 번째는 noshade 옵션을 적용해서 그림자 효과를 없앤 것입니다. 그렇게 되면 입체감이 없어지고 평면으로 보입니다. 세 번째는 반대로 border 값을 크게 하고 색깔을 넣어서 입체감이 드러나도록 값을 셋팅 했습니다. 네 번째와 다섯 번째는 CSS 애니메이션 속성을 이용하여 선과 색이 실시간으로 변형이 될 수 있도록 했습니다. 이 부분은 CSS 애니메이션 관련 아티클을 다룰 때 자세히 언급하겠습니다. 이번에는 hr 태그가 이런 것까지 가능하다는 것을 알리기 위해 샘플에 추가한 것입니다.

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 정렬 </title>
 </head>
 <body>
<p>1. 가장 기본적인 수평선 긋기 입니다.단락을 구분하죠.</p>
<hr/>
<p>hr 로 구분이 된 두 번째 단락입니다.</p>

<p>2. 입체값을 없애는 noshade 적용입니다.</p>
<hr width="100%" color="red" noshade/>

<p>3. CSS 이용해서 선의 높이와 입체감을 만들었습니다.</p>
<hr style="height: 15px; 
	border: 5px outset #d2d0d1; 
	background-color: #1ed434"/>

<p>4.선이 늘어났다가 줄어드는 애니메이션 효과를 만들었습니다.</p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-width {
   from {
      width: 100%;
   }
   to {
      width: 5%;
   }
}
hr.animated-width {
   height: 6px;
   border: 0;
   text-align: center;
   background-color: #ff0000;
   -webkit-animation-name: animated-width;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-out;
}
</style>
<hr class="animated-width"/>
</div>

<p>5. 네온사인처럼 색상이 변경되는 애니메이션 효과입니다. </p>
<div>
<style scoped="scoped">
@-webkit-keyframes animated-gradient {
   from {
      background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   }
   to {
      background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#00ff00));
   }
}
hr.animated-gradient {
   height: 28px;
   border: 7px inset #d2d0d1;
   text-align: center;
   background-color: #835823;
   background: -moz-linear-gradient(left top, #00ff00, #003300);
   background: -webkit-gradient(linear, left top, right bottom, from(#00ff00), to(#003300));
   -webkit-animation-name: animated-gradient;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   -webkit-animation-duration: 1.0s;
   -webkit-animation-timing-function: ease-in-out;
}
</style>
<hr class="animated-gradient"/>
</div>
 </body>
</html>

 

HTML 구분선&#44; 수평선을 그을 때 이용하는 hr 태그 사용법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법
HTML 입력양식 input 태그 HTML5 추가된 type 타입 대한 설명
HTML 단락 들여쓰기 blockquote 태그 사용하는 방법
HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기
HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법
반응형
Posted by 녹두장군1
,