<hr> 태그, vw를 사용해서 부모 컴포넌트에 상관없이 width 할당하기

<hr> 태그

hr 태그는 컨텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용합니다.[1]

하나의 페이지에서 여러 다른 내용을 표시할 때, 가장 흔하게 사용할 수 있는 방법이 문단을 구분하는 방법이다.

웹 페이지에서는 문단을 나누는 여러 방법이 있다. 그 중 가장 흔하게 쓰이는 방법이 <br>을 사용하여 줄을 바꾸는 방법일 것이다.

<br>은 엔터를 입력한 것과 같은 효과를 주어 문단을 나누기에 좋은 방법으로 보인다.

 

[그림1] br태그를 활용한 줄 바꿈

 

다른 문단을 나누는 방법으로는 줄바꿈 뿐만 아니라 줄 바꿈 선을 추가해주는 방법 또한 존재한다.

줄 바꿈은 어떤 식으로 추가할 수 있을까. 하나의 컨텐츠를 감싸고 있는 div 또는 p 태그에 border를 추가하는 방식으로도 만들 수 있겠지만 HTML 태그에서 줄 바꿈 및 내용 구분을 지원하는 태그가 하나 있다. 바로 가장 처음에 언급한 <hr> 태그가 바로 그것이다.

단순 줄 바꿈을 할 뿐만 아니라 실제 눈에 보이는 선을 그어 좀 더 확실하게 구분된 내용으로 보이게 할 수 있다.

 

[그림2] hr태그를 활용한 줄 바꿈

 

단순 줄 바꿈만 진행한 br 태그에 비해 hr 태그는 줄 바꿈을 함과 동시에 가로줄을 그어준다. border을 추가한다면 css 코드를 추가해줘야 하지만 단순 <hr /> 작성만으로 훌륭한 줄 바꿈을 얻을 수 있다.

 

부모 컴포넌트에 상관 없이 <hr> 사용하기

그런데 <div>가 화면 전체를 차지하지 않는 경우에는 [그림 3]과 같이 <hr> 태그는 원하는 대로 내용을 구분할 수 없을 지 모른다.

 

[그림 3] 부모 컴포넌트의 width의 영향을 받는 hr 태그

 

[그림 3]은 80%의 width를 가진 <div> 태그 내에 있는 <hr> 태그의 모습을 보여준다. 이렇게 봐도 내용을 구분하는 데는 큰 영향은 없어 보인다. 그렇지만 만약, 저 분리 선을 화면 전체에 긋고 싶다면 어떻게 할 수 있을까?

 

고정 width를 주는 방법을 가장 먼저 떠올릴 수 있다. 하지만 이 경우 반응형으로 만들었을 때 적절히 대응하지 못할 것이다.

% 단위로 width를 사용하는 경우 부모 컴포넌트의 width에 비례해서 width가 정해지기 때문에 이와 같이 부모 컴포넌트를 무시한 채 width를 할당하기는 어렵다.

이 때, %를 대체해서 사용할 수 있는 단위가 바로 vw이다. vw는 viewport width의 약어로 현재 브라우저에 보여지는 뷰포트(view-port)의 너비에 비례하는 단위이다. 만약 내가 보고 있는 브라우저의 너비가 1300px라면 100vw는 1300px이고, 1vw는 1/100인 13px가 된다.[2]

 

좋다. 새로운 지식을 알았으니 바로 실험해보자. hr 태그의 width를 100vw로 설정해보면 [그림 4]와 같은 결과를 얻을 수 있다.

 

[그림 4] 부모 컴포넌트 크기에 상관없이 전체 길이를 차지하는 <hr> 태그

 

원하는 결과를 얻을 수 있다.

 

정리

• <hr> 태그는 <br> 태그 이외의 웹 페이지의 컨텐츠의 내용을 나누는데 사용되는 태그이다. 별도의 css 작성 없이 태그 사용만으로 선으로 내용을 구분할 수 있는 효과를 줄 수 있다.
• % 단위는 부모 컴포넌트의 길이에 종속된다. 그렇기 때문에 부모 컴포넌트를 무시하는 width 값을 줄 수 없다.
• vw는 viewport-width의 약어로, 현재 보여지고 있는 viewport의 너비값을 가져올 수 있어 부모 컴포넌트와 관계 없이 너비를 지정하고 싶은 경우, 또는 viewport 너비를 기준으로 반응형 웹을 작성할 때 사용할 수 있다.

 

References

[1] : TCPschool, HTML <hr> 태그(http://www.tcpschool.com/html-tags/hr)

[2] : MDN web docs, css의 여러 length(https://developer.mozilla.org/en-US/docs/Web/CSS/length)