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' 카테고리의 다른 글
| HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 (1) | 2024.03.07 |
|---|---|
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
