HTML에서 세로선 만들기

1. border-left CSS 속성을 사용하여 HTML에서 세로선 만들기
2. hr 태그를 조정하여 HTML에서 세로줄 만들기

이 기사에서는 HTML에서 세로줄을 만드는 몇 가지 방법을 소개합니다.

border-left CSS 속성을 사용하여 HTML에서 세로선 만들기

HTML에서는 hr 태그를 사용하여 수평선을 생성하지만 수직선을 생성하는 태그는 없습니다. 그러나 border-left CSS 속성을 사용하여 수직선을 시뮬레이션할 수 있습니다.

border-left 속성은 왼쪽 테두리의 스타일을 지정하는 데 사용됩니다. 속성은 border-left width, border-left style 및 border-left color의 약어입니다.

border-left 속성만 사용하면 수직선이 생성됩니다. HTML로 컨테이너를 만들고 선택하고 속성을 적용하여 수직선을 만들 수 있습니다.

예를 들어, HTML에서 v-line 클래스가 있는 div를 만든 다음 v-line을 선택하고 여기에 몇 가지 스타일을 적용합니다. border-left 속성을 thick solid #000으로 설정합니다.

다음으로 height를 100%로, left를 50%로 설정합니다. 마지막으로 position 속성을 absolute로 설정합니다.

여기에서는 웹 페이지 중간에 검은색 테두리가 있습니다. 이런 식으로 HTML의 border-left CSS 속성을 사용하여 수직선을 만들 수 있습니다.

예제 코드:

<div class="v-line">
</div>

.v-line{
 border-left: thick solid #000;
 height:100%;
 left: 50%;
 position: absolute;
}

hr 태그를 조정하여 HTML에서 세로줄 만들기

hr 태그를 조정하고 HTML에 세로줄을 만들 수 있습니다.

hr 태그는 수평선을 만드는 데 사용됩니다. hr 태그의 height에 대한 최대값과 width에 대한 최소값을 사용할 수 있습니다.

이런 식으로 수평선의 높이는 늘어나고 너비는 줄어듭니다. 수평선과 경계선에 동일한 색상을 적용하여 수직으로 보이게 할 수 있습니다.

예를 들어 HTML에서 hr 태그를 만듭니다. CSS에서 hr 태그의 height를 100vh로, width를 .5vw로 설정합니다.

다음으로 border-width를 0으로 설정합니다. 마지막으로 라인의 color와 background-color를 #000으로 설정합니다.

여기서 0 값을 border-width로 설정하여 수직선이 더 가늘어지도록 합니다. 이런 식으로 HTML에서 hr 태그를 사용하여 세로줄을 만들었습니다.

예제 코드:

<hr>

hr{
 height:100vh;
 width:.5vw;
 border-width:0;
 color:#000;
 background-color:#000;
}