정의 및 사용법
:focus-within
가상 클래스는
요소 또는 그 요소의 자손 중 하나가 포커스되었을 동안 해당 요소를 선택합니다.
이 선택자는 부모 요소에 스타일을 지정할 수 있다는 점이 :focus
가상 클래스와 다릅니다.
'포커스(focus)'란
요소가 키보드 입력이나 상호작용을 받을 준비가 된 상태를 나타냅니다. 주로 사용자가 탭(Tab) 키나 클릭을 통해 요소에 접근했을 때 발생합니다.
기본 예제
<form>
<fieldset>
<legend>이름을 입력하세요.</legend>
<label for="user-name">Usrname</label>
<input type="text" id="user-name" placeholder="이름 입력...">
</fieldset>
</form>
fieldset {
padding: 1em;
}
fieldset:focus-within { /* 자기 또는 자손 요소가 포커스되었을 동안 선택됨 */
background-color: yellow;
}
<input>
태그에 포커스하면 조상 요소인 <fieldset>
에 설정한 fieldset:focus-within
스타일인 노란 배경색이 적용됩니다.
:focus-within
가상 클래스는 해당 요소의 자손 요소 중 하나가 포커스되었을 동안에도 적용되기 때문에 주로 시각적인 웹 접근성을 향상시키기 위해 사용되며, 키보드로 사이트를 탐색하거나 접근성을 고려한 디자인을 구현할 때 유용합니다.
:focus-within
가상 클래스의 형식은 다음과 같습니다.
구문
:focus-within {
/* ... */
}
활용 예제
:focus-within
가상 클래스는 상호작용이 가능하고 접근성이 뛰어난 웹 컴포넌트를 만드는 데 특히 유용합니다.
자식 요소가 포커스를 받을 때 부모 요소에 스타일을 적용할 수 있다는 점에서 사용자 경험 향상에 큰 도움이 됩니다.
아래는 실제로 많이 쓰이는 예제를 통해 이 선택자의 활용 방식을 보여줍니다.
포커스된 폼 영역 강조하기
<form>
<fieldset>
<legend>연락처 정보</legend>
<label for="email">이메일</label>
<input type="email" id="email" placeholder="이메일을 입력하세요">
</fieldset>
</form>
fieldset {
padding: 1em;
border: 2px solid gray;
transition: border-color 0.3s ease;
}
fieldset:focus-within {
border-color: blue;
background-color: #e6f0ff;
}
사용자가 <fieldset>
내부의 입력 필드에 포커스를 주면, 부모 요소인 <fieldset>
에 테두리 색상과 배경색이 적용되어 시각적으로 강조됩니다.
이는 관련된 입력 요소들을 하나의 영역으로 명확히 구분해 주며, 폼의 사용성과 접근성을 높이는 데 도움이 됩니다.
또한 전환 효과로 인해 스타일 변화가 부드럽게 나타나 사용자 경험이 더욱 향상됩니다.
포커스된 카드 강조하기
<div class="card" tabindex="0">
<h3>제품 제목</h3>
<p>이 제품에 대한 간단한 설명입니다.</p>
<button>자세히 보기</button>
</div>
<div class="card" tabindex="0">
<h3>또 다른 제품</h3>
<p>다른 제품에 대한 간단한 설명입니다.</p>
<button>자세히 보기</button>
</div>
.card {
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease, border-color 0.3s ease;
outline: none;
}
.card:focus-within {
border-color: #007acc;
box-shadow: 0 0 10px #007acc;
}
제품 제목
이 제품에 대한 간단한 설명입니다.
또 다른 제품
다른 제품에 대한 간단한 설명입니다.
각 <div class="card">
요소에 tabindex="0"
속성을 주면 키보드 포커스를 받을 수 있습니다. 카드 내부의 버튼처럼 포커스 가능한 요소에 접근하면, :focus-within
선택자가 적용되어 카드의 테두리와 그림자가 바뀌며 카드가 강조됩니다. 이러한 시각적 피드백은 현재 포커스된 카드가 어떤 것인지 쉽게 구분할 수 있게 해주며, 특히 키보드 기반 탐색을 사용하는 사용자에게 유용한 접근성을 제공합니다.
브라우저 호환성
선택자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
:focus-within
|
60 | 79 | 52 | 47 |
명세서
명세서 사양 | |
---|---|
:focus-within
|
Selectors Level 4 #the-focus-within-pseudo |