고객을 위해 최선을 다하는 Best PR 입니다

  1. Home
  2. 자료실

일반 크롬에서 a:focus CSS 변경 방법

페이지 정보

작성자 최고관리자 댓글 0건 조회 5회 작성일 26-06-24 18:34

본문


크롬에서 <a> 태그를 클릭했을 때 생기는 파란색 테두리(포커스 아웃라인) 를 없애려면 다음과 같이 지정합니다.

a:focus {
    outline: none;
}

또는 마우스로 클릭했을 때만 제거하려면:
a:focus,
a:active {
    outline: none;
}

최근 브라우저에서는 :focus-visible 을 사용하는 경우가 많습니다.
a:focus-visible {
    outline: none;
}

만약 Bootstrap이나 브라우저 기본 스타일 때문에 그림자(shadow)까지 보인다면:
a:focus,
a:active,
a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

특정 메뉴에만 적용하려면:
.nav-link:focus,
.nav-link:active,
.nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}



다만 접근성 측면에서는 포커스 표시를 완전히 제거하기보다, 원하는 색상으로 변경하는 것이 권장됩니다.

.nav-link:focus-visible {
    outline: 2px solid #82b440;
    outline-offset: 3px;
}



이렇게 하면 키보드 사용자는 포커스 위치를 확인할 수 있고, 디자인도 깔끔하게 유지됩니다.

                

        

        
                
    


    

        
            


    
    
    
    
    
    

    





    
댓글목록

        
등록된 댓글이 없습니다.