focus
-
[CSS] focus-within과 focus-visibleCSS 2024. 1. 10. 17:17
CSS에서 포커스 상태를 스타일링 하기 위해 가상클래스인 focus를 주로 사용하였지만 focus 이외에 focus-within과 focus-visible도 있다는 사실을 알았다. focus-within이란? focus-within을 사용한 요소는 해당 요소나 내부 요소 중에 포커스 상태가 되면 활성화가 된다. div:focus-within { background: red; } div 요소에 focus-within을 사용하여 스타일링을 한 경우 div 안의 input이 포커스를 받으면 활성화가 되어 배경색이 빨강색이 된다. 기존의 focus와 달리 해당 요소를 포함하여 내부 요소까지 감지하여 활성화가 된다는 차이점이 있다. focus-visible이란? focus-visible을 사용한 요소는 해당 요소..