어제 오늘 내일

[HTML/CSS] 세로줄 긋기 본문

IT/HTML&CSS

[HTML/CSS] 세로줄 긋기

hi.anna 2022. 2. 23. 18:30

 

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를 이용하여

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

 

 

 

 

반응형
Comments