border-right
요소의 우측 테두리를 설정합니다. brn으로 제거하거나, 단축 패턴으로 너비+스타일+색상을 지정합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
brn | border-right: 0 | 우측 보더 제거 |
br1pxsolid27272A | border-right: 1px solid #27272A | 1px 다크 실선 (구분선) |
br1pxsolidDDDDDD | border-right: 1px solid #DDDDDD | 1px 밝은 회색 실선 |
br2pxsolid6366F1 | border-right: 2px solid #6366F1 | 2px 인디고 실선 |
네이밍 주의
brn = border-right: 0 (border-radius가 아님!)
brn은 border-right: 0입니다. br0은 border-radius: 0이므로 혼동하지 마세요.
| 클래스 | CSS | 구분 |
|---|---|---|
brn | border-right: 0 | 우측 보더 제거 |
br0 | border-radius: 0 | border-radius 리셋 |
br4px | border-radius: 4px | border-radius (단위 있음) |
br8px | border-radius: 8px | border-radius (단위 있음) |
br1pxsolid27272A | border-right: 1px solid #27272A | border-right 단축 (숫자+단위+스타일+색상) |
단축 패턴
br{크기}{단위}{스타일}{HEX6}border-right 단축형은 b + 방향(r) + 크기 + 단위 + 스타일 + 색상으로 구성됩니다. 단, br 뒤에 단위가 바로 오면 border-radius로 해석되므로 주의가 필요합니다.
시각적 비교
border-right 클래스의 시각적 차이를 비교합니다.
brn (제거) — brn
컨텐츠 영역
1px solid 다크 — br1pxsolid27272A
컨텐츠 영역
2px solid 인디고 — br2pxsolid6366F1
컨텐츠 영역
사용 예시
<!-- 사이드바 구분선 -->
<div class="dg gtc25rem-1fr">
<aside class="br1pxsolid27272A p2rem">사이드바</aside>
<main class="p2rem">메인 콘텐츠</main>
</div>
<!-- 가로 나열 구분 -->
<div class="df aic">
<span class="br1pxsolid27272A pr16px">항목 A</span>
<span class="br1pxsolid27272A px16px">항목 B</span>
<span class="pl16px">항목 C</span>
</div>
<!-- 우측 보더 제거 -->
<td class="brn">우측 보더 없는 셀</td>실전 패턴
사이드바 + 메인 구분
사이드바
우측 보더로 구분
메인 콘텐츠
컨텐츠 영역
가로 나열 구분
항목 A항목 B항목 C
반응형
미디어 쿼리 프리픽스로 화면 크기에 따라 우측 보더를 제어합니다.
<!-- 데스크탑: 우측 구분 → 모바일: 하단 구분 -->
<aside class="br1pxsolid27272A sm-brn sm-bb1pxsolid27272A p2rem">
사이드바
</aside>
<!-- 모바일에서 우측 보더 제거 -->
<div class="br1pxsolid27272A sm-brn">
768px 이하에서 우측 보더 제거
</div>팁 & 주의사항
brn은 border-right: 0
brn은 border-right: 0입니다. br0은 border-radius: 0이므로 혼동하지 마세요.
사이드바 구분에 활용
그리드 레이아웃에서 사이드바와 메인 콘텐츠를 시각적으로 분리할 때 우측 보더를 사용합니다.
반응형에서 방향 전환
데스크탑에서 br1pxsolid27272A로 우측 구분하다가, 모바일에서 세로 레이아웃으로 전환 시 sm-brn sm-bb1pxsolid27272A로 하단 구분으로 바꿀 수 있습니다.