CSS로 요소(Element)의 포커스 테두리 없애기

현재 활성화된 입력 요소, 또는 활성화 된 특정 HTML 태그 요소를 눈에 잘 띄도록 표시해주는 기능으로 포커스 테두리 기능이 있습니다.

포커스는 키보드 탭 키를 이용해 HTML 하이퍼링크, 또는 폼 입력 요소(<input>, <textarea>)를 이동할 때 현재 활성 상태인(포커스가 위치한) 요소를 알려주는 역할을 하는 속성으로 모든 웹 브라우저에서 기본으로 지원되는 기능입니다.

해당 요소에 포커스가 위치하면 요소를 활성 상태로 표시하기 위해 "outline" 속성이 기본 적용됩니다.

"outline" 속성은 테두리 속성(border)와 같은 속성을 가지지만, 테두리 선 외곽에 위치하며, 자리를 차지하지 않습니다.

"outline" 기본 속성 값은 CSS로 커스터마이징 할 수 있습니다.

사용자 가이드 기능으로 필수인 기능이지만, UI를 만들다 보면 포커스 테두리가 필요가 없는데도 포커스 테두리가 생기면서 웹 UI의 모양이 깔끔하지 못하게 보이는 경우가 있습니다.

다음처럼 CSS 초기화를 하면 전체 웹 페이지에서 포커스 테두리를 없앨 수 있습니다.

*:focus {
    outline: 0;
}

폼 입력 요소에만 포커스 테두리를 보이지 않도록 하고 싶으면 다음처럼 CSS를 작성해서 초기화 코드로 추가하면 됩니다.

textarea:focus, input:focus{
    outline: none;
}

특정 요소에만 포커스 테두리를 보이지 않도록 하려면 다음처럼 클래스를 정의해서 원하는 요소에 클래스를 추가해주는 방식으로 포커스 테두리가 보이지 않도록 할 수 있습니다.

.nofocus:focus {
  outline: none;
}

"outline" 속성에 사용할 수 있는 속성 값은 다음과 같습니다. 기본적으로는 테두리(border) 속성과 거의 같으며, 아웃라인 속성 값 정의 또한 "outline: 너비 스타일 색상;" 표현 방식으로 정의합니다.

outline: 5px solid #a00;

처럼 아웃라인(outline) 속성을 정의할 수 있습니다.

정의한 아웃라인 속성은 너비(outline-width), 스타일(outline-style), 색상(outline-color) 3개의 속성으로 분리해서 표현할 수도 있습니다.

속성 값	설명	예
none	아웃라인 없음.
hidden	아웃라임 감춤.
dotted	둥근 점선
dashed	긴 점선
solid	직선
double	가는 두줄
groove	홈파인 3D 입체 라인. 아웃라인이 파여진 입체로 음각 처리.
ridge	솟아오른 3D 입체 라인. 아웃라인이 솟아오른 입체로 양각 처리.
inset	3D 음각 입체. 요소가 내려가 보이도록 아웃라인 그림자 효과
outset	3D 양각 입체, 요소가 올라와 보이도록 아웃라인 그림자 효과

다음처럼 아웃라인 속성을 정의하면 포커스 테두리가 어떻게 적용되는지 정확히 알 수 있습니다.

*:focus{
    outline: 10px dashed #a00;
}

주의할 점

포커스 테두리를 웹페이지 전역으로 삭제하는 것은 금지입니다.

실제로 그것이 가능하지만, 그렇게 해서는 안되는 안됩니다.

웹페이지 전역으로 포커스 테두리를 없애는 것은 사용자의 웹페이지 사용 편의성을 현저히 떨어뜨립니다.

입력 필드가 활성화 되었지만, 사용자는 지금 입력하려고 하는 입력 필드가 어떤 건지 알아채질 못할 확율이 높아지며, 탭 키를 눌러 웹 페이지를 탐색하고, 이동하는 동작을 무력화 시킵니다.

포커스 테두리를 없애는 것은 아주 제한적으로 사용해야 하며, 포커스 테두리를 대체하는 UI 변화가 있는 요소에만, 또는 포커스 테두리를 대체하는 다른 CSS 속성을 부여한 경우에만 제한적으로 사용해야 합니다.