포커스 링
포커스 링 (Focus ring)
.focus-ring 헬퍼로 포커스 링 스타일을 적용하고 CSS 변수·Sass 변수·유틸리티로 커스터마이즈하는 방법을 설명하는 문서예요.
출처: 문서
본문
.focus-ring 헬퍼는 :focus의 기본 outline을 제거하고, 더 폭넓게 커스터마이즈할 수 있는 box-shadow로 대체해요. 새 그림자는 :root 수준에서 상속되는 일련의 CSS 변수로 구성되며, 어떤 요소나 컴포넌트든 수정할 수 있어요.
예시 (Example)
아래 링크를 직접 클릭하거나, 아래 예시에 들어가서 Tab을 눌러 포커스 링을 직접 확인해 보세요.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
Custom focus ring
</a>
커스터마이즈 (Customize)
포커스 링 스타일은 CSS 변수, Sass 변수, 유틸리티, 또는 커스텀 스타일로 수정할 수 있어요.
CSS 변수 (CSS variables)
필요에 따라 --bs-focus-ring-* CSS 변수를 수정해서 기본 모양을 바꿀 수 있어요.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)">
Green focus ring
</a>
.focus-ring은 위와 같이 어떤 부모 요소에서든 재정의할 수 있는 전역 CSS 변수로 스타일을 설정해요. 이 변수들은 Sass 변수 대응물로부터 생성돼요.
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
기본적으로 --bs-focus-ring-x, --bs-focus-ring-y, --bs-focus-ring-blur는 없지만, 초기 0 값으로 폴백되는 CSS 변수를 제공해요. 이들을 수정해서 기본 모양을 바꿀 수 있어요.
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
Blurry offset focus ring
</a>
Sass 변수 (Sass variables)
포커스 링 Sass 변수를 커스터마이즈하면 Bootstrap 기반 프로젝트 전체에서 포커스 링 스타일의 모든 사용을 수정할 수 있어요.
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: rgba($primary, $focus-ring-opacity);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Sass 유틸리티 API (Sass utilities API)
.focus-ring 외에도 헬퍼 클래스 기본값을 수정하는 여러 .focus-ring-* 유틸리티가 있어요. 테마 색상 중 아무거나 사용해서 색상을 수정하세요. 현재 컬러 모드 지원에서는 밝은·어두운 변형이 모든 배경색에서 보이지 않을 수 있다는 점 참고하세요.
<p><a href="#" class="d-inline-flex focus-ring focus-ring-primary py-1 px-2 text-decoration-none border rounded-2">Primary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-secondary py-1 px-2 text-decoration-none border rounded-2">Secondary focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-success py-1 px-2 text-decoration-none border rounded-2">Success focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-danger py-1 px-2 text-decoration-none border rounded-2">Danger focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-warning py-1 px-2 text-decoration-none border rounded-2">Warning focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-info py-1 px-2 text-decoration-none border rounded-2">Info focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-light py-1 px-2 text-decoration-none border rounded-2">Light focus</a></p>
<p><a href="#" class="d-inline-flex focus-ring focus-ring-dark py-1 px-2 text-decoration-none border rounded-2">Dark focus</a></p>
포커스 링 유틸리티는 scss/_utilities.scss의 유틸리티 API에 선언되어 있어요. 유틸리티 API를 사용하는 방법을 알아보세요.
"focus-ring": (
css-var: true,
css-variable-name: focus-ring-color,
class: focus-ring,
values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
),