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

HTML

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

 

환경: Eclipse Mars, Android 4.2.2

 

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 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법


Posted by 녹두장군