html hr 세로선 세로줄 긋는 법

가로줄은 <hr>태그로 만들 수 있으나 세로줄을 만드는 태그는 없어서 만들어줘야 합니다. 세로선이 없는 이유는 HTML의 구조적 속성 때문입니다. 이에 따라 많은 개발자들이 세로선을 만들 때는 여러 편법을 사용해 구현하곤 합니다.

 

1. <div> 태그의 오른쪽에만 선을 부여 (border-right)

 

2. <div> 태그 자체의 너비를 선 너비만큼 설정하고 높이를 지정

 

<style>
	.updown {
    	border: 5px solid black;
        width: 0.1px;
        height: 50px;
    }
</style>

<div class="updown"></div>

 

3. <table> 태그를 이용해 선을 부여