레이아웃 크기에 영향을 주지 않는 외곽선을 사용합니다.
outline은 border 바깥에 그려지지만 박스 크기에 포함되지 않고 개별 방향을 지정할 수 없습니다. 키보드 focus 표시에서 중요하며 outline-offset으로 간격을 줄 수 있습니다.
이번 예제의 출발점은 outline: 3px solid; outline-offset: 3px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 Tab 키로 이동하고 outline 색과 offset을 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
outline:none만 적용하면 키보드 사용자가 현재 위치를 알 수 없습니다. 대체 focus 스타일을 반드시 제공하세요.
직접 바꿔보세요Tab 키로 이동하고 outline 색과 offset을 바꿔보세요.