border-bottom
요소의 하단 테두리를 설정합니다. 리스트 아이템 사이의 구분선, 탭 활성 표시, 섹션 분리 등에 가장 많이 사용되는 방향별 보더입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bb0 | border-bottom: 0 | 하단 보더 제거 |
bb1pxsolidDDDDDD | border-bottom: 1px solid #DDDDDD | 1px 밝은 회색 실선 |
bb1pxsolid27272A | border-bottom: 1px solid #27272A | 1px 다크 실선 (구분선) |
bb2pxsolid27272A | border-bottom: 2px solid #27272A | 2px 다크 실선 (헤더 구분) |
bb2pxsolid6366F1 | border-bottom: 2px solid #6366F1 | 2px 인디고 실선 (활성 탭) |
bb1pxdashed999999 | border-bottom: 1px dashed #999999 | 1px 회색 점선 |
bb3pxsolidFF0000 | border-bottom: 3px solid #FF0000 | 3px 빨강 실선 (에러) |
패턴
bb{크기}{단위}{스타일}{HEX6}너비, 단위, 스타일, 색상(HEX 6자리)을 순서대로 조합합니다.
| 부분 | 설명 | 예시 |
|---|---|---|
| bb | border-bottom 접두사 | bb |
| {크기} | 보더 너비 숫자 | 1, 2, 3 |
| {단위} | px 등 단위 | px |
| {스타일} | solid, dashed, dotted, double | solid |
| {HEX6} | 6자리 HEX 색상 코드 | 27272A |
시각적 비교
다양한 border-bottom 클래스의 시각적 차이를 비교합니다.
bb0 (제거) — bb0
컨텐츠 영역
1px solid 다크 — bb1pxsolid27272A
컨텐츠 영역
2px solid 다크 — bb2pxsolid27272A
컨텐츠 영역
2px solid 인디고 — bb2pxsolid6366F1
컨텐츠 영역
1px dashed — bb1pxdashed999999
컨텐츠 영역
실전 패턴
border-bottom은 리스트 아이템 사이의 구분선으로 가장 많이 사용됩니다.
리스트 아이템 구분선
리스트 아이템 1
리스트 아이템 2
리스트 아이템 3 (마지막, 보더 없음)
탭 활성 표시
테이블 헤더 구분 (bb2pxsolid27272A)
| 이름 | 역할 |
|---|---|
| 홍길동 | 개발자 |
| 김영희 | 디자이너 |
사용 예시
<!-- 리스트 아이템 구분선 -->
<div class="bb1pxsolid27272A py16px">아이템 1</div>
<div class="bb1pxsolid27272A py16px">아이템 2</div>
<div class="py16px">아이템 3 (마지막)</div>
<!-- 탭 활성 표시 -->
<div class="df bb1pxsolid27272A">
<button class="py12px px2rem bb2pxsolid6366F1 cFAFAFA bn bg0F0F17 cp">활성</button>
<button class="py12px px2rem bb0 c71717A bn bg0F0F17 cp">비활성</button>
</div>
<!-- 하단 보더 제거 -->
<td class="bb0">보더 없는 셀</td>
<!-- 섹션 하단 구분 -->
<section class="bb1pxsolid27272A pb2rem mb2rem">
<h2>섹션 제목</h2>
<p>하단 보더로 다음 섹션과 분리</p>
</section>반응형
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 하단 보더를 변경할 수 있습니다.
<!-- 데스크탑에서만 하단 구분선 -->
<div class="bb1pxsolid27272A sm-bb0 pb16px">
데스크탑에서만 하단 보더
</div>
<!-- 모바일에서 구분선 추가 -->
<div class="bb0 sm-bb1pxsolid27272A pb16px">
768px 이하에서만 하단 보더
</div>팁 & 주의사항
구분선 패턴: bb1pxsolid27272A
다크 테마에서 가장 많이 사용되는 구분선 패턴입니다. 리스트 아이템, 테이블 행, 섹션 분리 등에 bb1pxsolid27272A를 사용합니다.
마지막 아이템 처리
리스트에서 마지막 아이템의 하단 보더가 불필요하면, 마지막 요소에만 bb0을 적용하거나 클래스를 생략합니다.
테이블 헤더는 bb2pxsolid
테이블 헤더와 바디를 시각적으로 분리할 때는 bb2pxsolid27272A처럼 2px로 강조하면 구분이 명확합니다.