CSS: focus

:focus

input 태그 등에 포커스를 받은 요소를 나타냄
보통 사용자가 요소를 클릭하거나 tap키로 선택했을 때 발동

:focus-visible

요소가 focus 되는 동안 적용
휴리스틱을 통해 요소에 대한 포커스가 분명해야한다고 결정함.
(많은 브라우저는 이경우 기본으로 "포커스 링"을 표시)
키보드로 focus를 맞출때 이걸로 사용해줘야 접근성이 더 좋음

:focus-within

focus를 받았거나, 받은 요소를 포함하는 요소(부모요소)를 나타냄
즉, 스스로 :focus와 일치하거나 그 자손 중 하나가 :focus가 되면을 나타냄
(본인이 :focus를 받았거나, 자손 input이 :focus를 받았으면 본인의 css를 바꿈)