focus-within 사용법에 대한 자세한 설명

이번에는 focus-within 사용에 대한 자세한 설명을 가져오겠습니다. focus-within 사용 시 주의사항은 무엇인가요?

CSS의 세계는 정말 마법의 세계입니다. 많은 프런트 엔드 개발자는 :focus에 대해 들어봤지만 :focus-within에 대해서는 들어본 적이 없을 것입니다. 그럼 도대체 :focus-within이 뭐죠? 이번 글에서는 :focus-within에 대해 이야기하겠습니다.

:focus-within

CSS에서: focus-within은 이제 CSS 선택기(CSS 레벨 4 선택기)에 포함된 의사 클래스입니다. :focus 또는 :hover 와 같습니다. :focus-within은 포커스 상태를 처리하는 데 매우 편리합니다. :focus-within 의사 클래스가 있는 요소는 요소 자체 또는 해당 하위 항목 중 하나에 포커스가 있을 때 효과적입니다.

텍스트가 이해하기 어렵다면 먼저 간단한 예를 살펴보겠습니다.

<p>
    <label>
        Your email:
    </label>
    <input>
</p>

위는 입력 양식 컨트롤이 포함된 간단한 양식입니다.

.form-group *:focus {
    background: yellow;
    color: #000;
}
.form-group {
    padding: 10px;
    border: 3px solid transparent
}
.form-group:focus-within {
    border-color: #000;
}

위 예시에서 .form-group이 포커스를 받으면 테두리 색상이 #000으로 변경됩니다. 그러나 이것이 키보드 포커스를 받는다는 의미는 아닙니다. 왜냐하면

가 반드시 키보드 포커스를 가져오는 것은 아니며 tabindex가 설정되지 않기 때문입니다. 또는 p의 링크나 입력 요소가 포커스를 받으면 .form-group 요소가 테두리 색상을 변경합니다.

위 예시를 보니 정말 놀랍지 않나요? 과거에도 비슷한 효과를 얻으려면 JavaScript 스크립트를 사용해야 했습니다. .form-group의 하위 요소의 마우스나 키보드 이벤트를 통해 상위 요소(또는 상위 요소)에 해당 스타일을 추가합니다.

:focus-within의 사용 시나리오

:focus-within은 매우 강력합니다. 주로 해당 요소 중 하나라도 포커스를 받으면 의사 클래스가 활성화되기 때문입니다. 요소에 많은 하위 구성 요소가 포함된 경우 이 의사 클래스를 주의해서 사용하세요.

:focus-within을 사용하면 일부 일반적인 대화형 동작이 매우 단순해졌습니다. 특히 이전에 JavaScript 키보드 이벤트가 필요했던 대화형 동작은 대신 :focus-within을 사용할 수 있습니다.

다음으로 :focus-within의 일반적인 예를 살펴보겠습니다.

테이블 행 강조 표시

일반적인 예는 테이블 행 강조 동작입니다. 즉, 마우스를 테이블 행 위로 가져가면 색상이 강조 표시됩니다. 이 대화형 스타일은 시각 장애가 있는 사용자가 복잡한 표나 긴 표를 더 잘 읽을 수 있도록 도와줍니다. 강조 표시로 인해 이러한 사용자는 현재 읽고 있는 테이블 행을 더 쉽게 추적할 수 있습니다. 이전에 자주 구현되었던 방식은 :hover를 사용하여 테이블 행의 스타일을 변경하는 것이었습니다. 이 솔루션은 일반 사용자에게는 쉬운 작업이지만 사용자가 마우스 조작에 어려움을 겪는 경우 :hover가 약간 고통스럽습니다. 완벽함을 찾고 있다면 JavaScript 키보드 이벤트를 통해 테이블 ​​행에 스타일을 추가할 수 있습니다.

그래서 :focus-within을 사용하면 JavaScript와 작별할 수 있습니다. 다음과 같이 스타일을 지정할 수 있습니다:

위의 예는 :focus-within을 사용하여 테이블의 전체 행을 강조 표시하는 방법을 보여줍니다. 특정 테이블 행에 포커스를 얻을 수 있는 요소가 있는 경우 이는 키보드를 통해 포커스를 얻는 것을 의미합니다. 예를 들어 위의 예에는 테이블에 요소가 있습니다. a 요소는 키보드를 통해 포커스를 얻을 수 있습니다.

현재 다음 스타일만 추가하면 됩니다.

tbody tr:focus-within,
tbody tr:hover {
    background: rgba(lightBlue, .4);
}

드롭다운 메뉴

드롭다운 메뉴는 가장 일반적인 웹 구성 요소 중 하나입니다. :focus-within pseudo-class를 처음 봤을 때 가장 먼저 떠오른 사용 사례는 드롭다운 메뉴였습니다.

위의 예에서 JavaScript는 탐색 드롭다운 메뉴에서 사용자의 키보드 포커스를 추적하는 데 사용됩니다. JavaScript가 키보드 포커스가 링크에 있음을 감지하면 .navlist_drop에 .has-focus 클래스를 추가합니다. li에 .has-focus 클래스가 있으면 하위 요소가 표시됩니다. 즉, 드롭다운 메뉴가 표시됩니다.

이 효과를 위해 :focus-within을 통해 JavaScript 스크립트의 기능을 직접 대체할 수 있습니다. .navlistdrop.has-focus 대신 .navlistdrop:focus-within을 사용하세요. 드롭다운 메뉴 항목에 초점을 맞추기 위해 키보드를 조작하면 드롭다운 메뉴가 나타납니다.

.navlist a:focus + .navlistdrop,
.has-drop:hover .navlistdrop,
.navlistdrop:focus-within {
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    z-index: 1;
}

오프스크린 Nav

오프스크린 내비게이션은 모바일 단말기에서 흔히 나타나는 효과입니다. 그런 다음 :focus-within을 통해 이 효과를 얻을 수도 있습니다. 자세한 코드는 다음 예를 참조하세요.

브라우저 호환성

:focus-within 매우 흥미롭지만 많은 학생들이 호환성에 대해 걱정하고 있습니다. Caniuse를 통해 브라우저의 지원을 확인할 수 있습니다.

Summary

:focus에 익숙하다면 놀라운 일이 아니지만, :focus-within을 알고 있다면 이는 새로운 CSS에 지속적으로 관심을 기울이고 있다는 의미입니다. 관련 특성. 물론 이 속성은 CSS의 세계를 다시 새롭게 바꾸었는데 정말 이상합니다. 관심이 있으시면 직접 데모를 작성해 보십시오. 당신은 이 숙소를 좋아할 것입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3 텍스트 그라데이션 애니메이션

css3 반원호 만들기

CSS에서 스티커 바닥글 레이아웃을 사용하는 방법

위 내용은 focus-within 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!