레이아웃 크기에 영향을 주지 않는 외곽선을 사용합니다.
outline은 border 바깥에 그려지지만 박스 크기에 포함되지 않고 개별 방향을 지정할 수 없습니다. 키보드 focus 표시에서 중요하며 outline-offset으로 간격을 줄 수 있습니다.
Tab으로 버튼이나 입력창에 포커스가 옮겨 오면 :focus 규칙이 3px 노란 외곽선을 요소 가장자리에서 4px 떨어진 곳에 그립니다. 선이 바깥으로 7px까지 퍼지지만 자리를 차지하지 않아 아래 입력창이 밀리지 않고, .second의 display: block과 margin-top 16px 덕분에 버튼에 생긴 외곽선이 입력창을 덮지도 않습니다.
:focus는 포커스가 생긴 방법을 가리지 않고 걸리지만 :focus-visible은 키보드 이동처럼 브라우저가 포커스 표시가 필요하다고 판단할 때만 걸립니다. 클릭할 때 생기는 외곽선이 거슬린다면 outline을 지우지 말고 선택자를 :focus-visible로 바꾸는 편이 키보드 사용자의 표시를 지킵니다.
outline:none만 적용하면 키보드 사용자가 현재 위치를 알 수 없습니다. 대체 focus 스타일을 반드시 제공하세요.
직접 바꿔보세요Tab 키로 이동하고 outline 색과 offset을 바꿔보세요.