[html] 줄 생성 태그 hr 태그에 대하여

이번 글에서는 hrml에서 일자로 된 줄을 표현하는 태그인 hr 태그의 사용방법과 style 송성을 활용한 몇가지 활용방법에 대하여 다루겠습니다.

 

 

# hr 태그

  hr 태그는 <hr> 과 같이 사용합니다. br이나, img 태그와 같이 닫히는 태그 없이 단독으로 사용되며 주로 style 속성을 적용하여 그 형태를 결정합니다. 아래 사진은 이번 글에서 보여드릴 총 4가지의 hr 태그 사용방법을 하나씩 그려놓은 웹페이지입니다.

 

html 사진 1

 

# hr 태그 사용방법

  hr 태그는 style 속성과 함께 사용하면서 웹페이지 내에 일자로 된 줄을 구현합니다. 아래 사진은 기본적인 hr 태그입니다. 

<hr>

html 사진 2

  위 사진과 같은 기본적인 hr 태그가 아니라 외형적인 구분을 하고싶을 때에는 style 속성을 따로 정의해야 합니다. 아래 사진과 코드블럭은 hr 태그에 빨간색을 넣는 방법에 대하여 다루었습니다.

<hr style="border-color:red">

html 사진 3

  border는 html에서는 테두리를 말하지만 위와 같이 css 가 아닌 html 파일 내에 직접적으로 정의할 때에는 위 사용방식과 같이 사용하는 것도 가능합니다.

 

  이번에는 hr 태그의 크기를 조금 키워보겠습니다.

<hr style="border-width:10px">

 

html 사진 4

  width는 '넓이'라는 의미를 가진 영단어입니다. html에서 사용될 때에는 주로 수평 면적을 나타내지만 hr 태그와 사용할 떄에는 위처럼 수직적인 면적을 의미하기도 합니다. 왜냐하면 hr 태그는 삽입 시 웹페이지 내에서 렌더링 되는 영역 전체에 대한 줄을 생성하기 때문입니다.

 

  이제는 위와 아래의 코드를 세미콜론(;) 을 이용하여 합성하여 사용해보겠습니다.

<hr style="border-width:10px ; border-color:red">

html 사진 5

 

여기까지 hrml에서 일자로 된 줄을 표현하는 태그인 hr 태그의 사용방법과 style 송성을 활용한 몇가지 활용방법에 대하여 다루었습니다.