[HTML/CSS] 세로줄 긋기

 

CSS를 이용하여 

세로줄 긋는 방법을 소개합니다.

 

---

CSS를 이용하여 세로줄 그리기

가로줄은 <hr> 태그를 이용해서

비교적 쉽게 그릴수 있었는데요.

 

세로줄을 그려주는 HTML 태그는 없기 때문에

여기서는 CCS를 이용해서 세로줄을 그리는 방법을 소개합니다.

 

 

 border-left 속성 

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

.v-line {
  border-left : thick solid #32a1ce;
  height : 50px;
}

 

 

세로줄을 그리기 위해서

<div>를 하나 생성하고,

css의 border-left 속성을 사용하여

div의 왼쪽 border의 스타일을 지정해주었습니다.

 

border-left에는 3개의 값을 지정할 수 있습니다.

1. 첫번째 값 : width
   • 기본값 : medium
   • 허용값 
     • 키워드 값
       • thin : 얇은 테두리
       • medium : 중간 테두리
       • thick : 굵은 테두리
     • length 값 : em, vmax, px 
       • ex) 10px
     • 전역값
       • inherit
       • initial
       • unset
2. 두번째 값 : style
   • 기본값 : none
   • 허용값
     • 키워드 값
       • none
       • hidden
       • dotted
       • dashed
       • solid
       • double
       • groove
       • ridge
       • inset
       • outset
     • 전역값
       • inherit
       • initial
       • unset
3. 세번째 값 : color
   • 기본값 : currentcolor
   • 허용값
     • 컬러값
     • 전역값

 

이것을 각각

border-left-width, border-left-style, border-left-color 속성을 이용할 수도 있습니다.

 

각 속성의 좀 더 자세한 사용법은 아래 링크의 포스팅을 참조하세요.

[HTML/CSS] div 테두리 그리기 (border, outline)

 

 

---

 

지금까지 HTML과 CSS를 이용하여

세로줄을 표현하는 방법을 알아보았습니다.