border-top
요소의 상단 테두리를 설정합니다. bt0으로 제거하거나, bt1pxsolidDDDDDD처럼 너비+스타일+색상을 한 클래스로 지정합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bt0 | border-top: 0 | 상단 보더 제거 |
bt1pxsolidDDDDDD | border-top: 1px solid #DDDDDD | 1px 밝은 회색 실선 |
bt1pxsolid27272A | border-top: 1px solid #27272A | 1px 다크 실선 (구분선) |
bt2pxsolid6366F1 | border-top: 2px solid #6366F1 | 2px 인디고 실선 (강조) |
bt2pxdashed000000 | border-top: 2px dashed #000000 | 2px 검정 점선 |
bt3pxsolid34D399 | border-top: 3px solid #34D399 | 3px 그린 실선 (성공) |
bt3pxsolidFBBF24 | border-top: 3px solid #FBBF24 | 3px 옐로 실선 (경고) |
패턴
bt{크기}{단위}{스타일}{HEX6}너비, 단위, 스타일, 색상(HEX 6자리)을 순서대로 조합합니다. 각 부분을 빠짐없이 지정해야 합니다.
| 부분 | 설명 | 예시 |
|---|---|---|
| bt | border-top 접두사 | bt |
| {크기} | 보더 너비 숫자 | 1, 2, 3 |
| {단위} | px 등 단위 | px |
| {스타일} | solid, dashed, dotted, double | solid |
| {HEX6} | 6자리 HEX 색상 코드 | DDDDDD |
시각적 비교
다양한 border-top 클래스가 요소에 어떤 영향을 주는지 비교합니다.
bt0 (제거) — bt0
컨텐츠 영역
1px solid — bt1pxsolid27272A
컨텐츠 영역
2px solid 인디고 — bt2pxsolid6366F1
컨텐츠 영역
2px dashed — bt2pxdashed000000
컨텐츠 영역
3px solid 그린 — bt3pxsolid34D399
컨텐츠 영역
사용 예시
<!-- 섹션 구분선 -->
<div class="bt1pxsolid27272A pt2rem mt2rem">
<h2>새로운 섹션</h2>
<p>상단 보더로 구분됩니다</p>
</div>
<!-- 카드 상단 액센트 -->
<div class="bt3pxsolid6366F1 bg18181B p2rem br4px">
<h3>프로 플랜</h3>
<p>상단에 컬러 라인으로 강조</p>
</div>
<!-- 보더 제거 -->
<table>
<tr>
<td class="bt0">상단 보더 없음</td>
</tr>
</table>
<!-- 호버 시 상단 보더 변경 -->
<div class="bt1pxsolid27272A hover-bt2pxsolid6366F1 p16px tall200msease cp">
호버하면 상단 보더가 강조됩니다
</div>실전 패턴
border-top은 섹션 구분선, 모달 헤더, 카드 상단 강조 등에 자주 사용됩니다.
섹션 구분선
이전 섹션 내용
다음 섹션 내용
카드 상단 컬러 액센트
기본
bt3pxsolid6366F1
성공
bt3pxsolid34D399
경고
bt3pxsolidFBBF24
반응형
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 상단 보더를 변경할 수 있습니다.
<!-- 데스크탑에서만 상단 구분선 -->
<div class="bt1pxsolid27272A sm-bt0 pt2rem">
데스크탑에서만 상단 보더 표시
</div>
<!-- 모바일에서 상단 구분선 추가 -->
<div class="bt0 sm-bt1pxsolid27272A pt16px">
768px 이하에서 상단 보더 추가
</div>팁 & 주의사항
bt0으로 제거
bt0은 border-top: 0을 적용합니다. 테이블 셀이나 상속된 보더를 제거할 때 유용합니다.
섹션 구분에 최적
하단 보더(bb) 대신 상단 보더를 사용하면, 마지막 요소에 불필요한 구분선이 생기지 않습니다.
색상은 HEX 6자리
색상 부분은 반드시 6자리 HEX를 사용합니다. 3자리 축약형은 지원하지 않습니다. 예: bt1pxsolidDDDDDD