세로 구분선
세로 구분선 (Vertical rule)
<hr> 요소처럼 세로 구분선을 만들 수 있는 커스텀 세로 구분선 헬퍼예요.
출처: 문서
본문
동작 원리 (How it works)
세로 구분선은 <hr> 요소에서 영감을 받아, 일반적인 레이아웃에서 세로 구분선을 만들 수 있게 해 줘요. <hr> 요소처럼 스타일이 적용돼요:
- 너비는 1px
- 최소 높이
1em - 색상은
currentColor와 opacity로 설정
필요하면 추가 스타일로 커스터마이즈할 수 있어요.
예시 (Example)
<div class="vr">
</div>
세로 구분선은 flex 레이아웃에서 높이가 함께 늘어나요:
<div class="d-flex" style="height: 200px;">
<div class="vr">
</div>
</div>
스택과 함께 (With stacks)
stacks에서도 사용할 수 있어요:
<div class="hstack gap-3">
<div class="p-2">
First item
</div>
<div class="p-2 ms-auto">
Second item
</div>
<div class="vr">
</div>
<div class="p-2">
Third item
</div>
</div>
Sass 변수 (Sass variables)
세로 구분선의 Sass 변수를 커스터마이즈해서 너비를 바꿀 수 있어요.
scss/_variables.scss
$vr-border-width: var(--#{$prefix}border-width);