border-left
요소의 좌측 테두리를 설정합니다. 인용문, 알림 카드, 팁 박스 등에서 좌측 액센트 보더로 가장 많이 활용되는 패턴입니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bl0 | border-left: 0 | 좌측 보더 제거 |
bl1pxsolid27272A | border-left: 1px solid #27272A | 1px 다크 실선 |
bl3pxsolid6366F1 | border-left: 3px solid #6366F1 | 3px 인디고 실선 (인용문) |
bl4pxsolid6366F1 | border-left: 4px solid #6366F1 | 4px 인디고 실선 (정보 카드) |
bl4pxsolid34D399 | border-left: 4px solid #34D399 | 4px 그린 실선 (성공 카드) |
bl4pxsolidFBBF24 | border-left: 4px solid #FBBF24 | 4px 옐로 실선 (경고 카드) |
bl4pxsolidEF4444 | border-left: 4px solid #EF4444 | 4px 레드 실선 (에러 카드) |
패턴
bl{크기}{단위}{스타일}{HEX6}너비, 단위, 스타일, 색상(HEX 6자리)을 순서대로 조합합니다.
| 부분 | 설명 | 예시 |
|---|---|---|
| bl | border-left 접두사 | bl |
| {크기} | 보더 너비 숫자 | 3, 4 |
| {단위} | px 등 단위 | px |
| {스타일} | solid, dashed, dotted, double | solid |
| {HEX6} | 6자리 HEX 색상 코드 | 6366F1 |
시각적 비교
다양한 border-left 클래스의 시각적 차이를 비교합니다.
bl0 (제거) — bl0
좌측 보더 없음
3px solid 인디고 (인용문) — bl3pxsolid6366F1 pl16px
인용문 스타일의 좌측 액센트
4px solid 인디고 (정보) — bl4pxsolid6366F1
정보 알림 카드
4px solid 그린 (성공) — bl4pxsolid34D399
성공 알림 카드
4px solid 옐로 (경고) — bl4pxsolidFBBF24
경고 알림 카드
4px solid 레드 (에러) — bl4pxsolidEF4444
에러 알림 카드
실전 패턴
좌측 보더는 알림 카드, 인용문, 팁 박스에서 컬러 액센트로 가장 많이 사용됩니다.
알림 카드 변형
정보
bl4pxsolid6366F1 - 인디고 액센트
성공
bl4pxsolid34D399 - 그린 액센트
경고
bl4pxsolidFBBF24 - 옐로 액센트
에러
bl4pxsolidEF4444 - 레드 액센트
인용문 스타일
"좋은 디자인은 가능한 한 적게 디자인하는 것이다."
- Dieter Rams
문서 팁 박스 (이 사이트에서 사용 중)
팁 제목
이 문서 사이트의 팁 카드도 bl4pxsolid6366F1 패턴을 사용합니다.
사용 예시
<!-- 팁 카드 (정보) -->
<div class="bg0F0F17 b1pxsolid27272A br8px p2rem bl4pxsolid6366F1">
<p class="fs14px cFAFAFA fw600 mb4px">팁</p>
<p class="fs14px c71717A">좌측 인디고 액센트로 정보를 강조합니다.</p>
</div>
<!-- 경고 카드 -->
<div class="bg0F0F17 b1pxsolid27272A br8px p2rem bl4pxsolidFBBF24">
<p class="fs14px cFAFAFA fw600 mb4px">주의</p>
<p class="fs14px c71717A">좌측 옐로 액센트로 경고를 표시합니다.</p>
</div>
<!-- 인용문 -->
<blockquote class="bl3pxsolid6366F1 pl16px py8px">
<p class="fsi cFAFAFA">"간결함은 궁극의 정교함이다."</p>
<cite class="fs12px c71717A mt4px db">- Leonardo da Vinci</cite>
</blockquote>
<!-- 좌측 보더 제거 -->
<td class="bl0">좌측 보더 없는 셀</td>반응형
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 좌측 보더를 제어합니다.
<!-- 모바일에서 액센트 보더 제거 -->
<div class="bl4pxsolid6366F1 sm-bl0 p16px">
데스크탑에서만 좌측 액센트
</div>
<!-- 모바일에서 상단 보더로 전환 -->
<div class="bl4pxsolid6366F1 sm-bl0 sm-bt4pxsolid6366F1 p16px">
데스크탑: 좌측 액센트 → 모바일: 상단 액센트
</div>팁 & 주의사항
액센트 보더 = bl4pxsolid + 색상
좌측 액센트 보더의 표준 너비는 3~4px입니다. 색상만 바꿔서 정보(인디고), 성공(그린), 경고(옐로), 에러(레드) 등의 시맨틱 변형을 만들 수 있습니다.
인용문에 최적
HTML의 <blockquote> 스타일링에 bl3pxsolid6366F1 pl16px 조합을 사용하면 깔끔한 인용문 스타일이 됩니다.
padding-left와 함께 사용
좌측 보더를 추가하면 보더와 텍스트가 붙으므로, pl16px 또는 p16px와 함께 사용하여 여백을 확보하세요.