HTML 코드
<p>위쪽 내용</p>
<hr class="line">
<p>아래쪽 내용</p>
<div class="label"><span>또는</span></div>
<p>소셜 로그인</p>
<style>
p{margin:8px 0;color:var(--muted)}
.line{border:0;border-top:1px solid var(--border);margin:16px 0}
.label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0}
.label::before,.label::after{content:"";flex:1;border-top:1px solid var(--border)}
</style>AI에게 이렇게 요청하세요
로그인 폼의 이메일 로그인과 소셜 로그인 사이에 가운데 '또는' 글자가 들어간 가로 구분선 넣어줘
<p>위쪽 내용</p>
<hr class="line">
<p>아래쪽 내용</p>
<div class="label"><span>또는</span></div>
<p>소셜 로그인</p>
<style>
p{margin:8px 0;color:var(--muted)}
.line{border:0;border-top:1px solid var(--border);margin:16px 0}
.label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:16px 0}
.label::before,.label::after{content:"";flex:1;border-top:1px solid var(--border)}
</style>언제 쓰나
설정 화면의 그룹 사이, 목록 항목 사이, 로그인 방식 구분 등. 여백만으로 구분이 약할 때.
비슷한 것과 차이
- 여백(spacing)으로 충분하면 선을 넣지 않는 게 더 깔끔함
- 푸터는 페이지 하단 영역 전체, 구분선은 선 한 줄