구분선

여백만으로는 두 덩이가 갈라져 보이지 않을 때, 딱 한 줄만 그어 주는 조각.

실제 미리보기

출처

HTML CSS

<div class="dc-divide">
  <p class="dc-divide__text">지원 서류는 회사가 확인한 뒤 연락합니다.</p>
  <hr class="dc-divide__rule" />
  <p class="dc-divide__text">연락이 오지 않으면 7일 뒤에 다시 물어볼 수 있습니다.</p>
</div>

.dc-divide { font-family:var(--dc-font); }
.dc-divide__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-divide__rule { height:1px; margin:var(--dc-5) 0; border:0; background:var(--dc-line); }
.dc-divide__labeled { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-5) 0; }
.dc-divide__labeled::before, .dc-divide__labeled::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-divide__label { font-size:12px; font-weight:600; color:var(--dc-text-mute); }
.dc-divide__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-2); margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-divide__mitem { white-space:nowrap; }
.dc-divide__vr { flex:0 0 auto; width:1px; height:1em; background:var(--dc-line-bold); }

이렇게 씁니다

여백으로 갈라지면 선을 넣지 않는다. 선은 여백이 부족할 때 쓰는 보충 수단이다
선 위아래 여백은 같게 둔다. 한쪽이 넓으면 선이 어느 덩이에 붙는지 헷갈린다
'또는' 처럼 갈라지는 이유를 말해 줄 수 있으면 글자를 얹은 구분선을 쓴다

주의할 점

뜻 없는 선에는 hr 대신 테두리를 쓰고, 장식으로 쓰는 세로선에는 aria-hidden 을 붙인다
선 색은 --dc-line 으로 둔다. 더 진하게 하면 선이 내용보다 먼저 보인다

다음에 볼 것