[ CSS ] button 클릭 시 나타나는 테두리 없애기

버튼을 눌렀을 때 생성되는 테두리를 없애고 싶을 때는 어떻게 해야할까?

 

2가지를 생각해야 한다. 

 

1. border가 아닌 outline 속성이라는 점

2. 클릭 이벤트가 발생한 시점 즉, focus 상태에서 속성을 지정해줘야 한다는 점

 

---

 

모든 button에 기본 속성으로 정해주고 싶으면 이런 식으로 태그 선택자에 :focus 의사 선택자를 이용해 적용하면 된다.

button:focus { outline: none }

 

 

또는 styled components에서 개별 속성에 해당 속성을 작성하고 싶으면 아래처럼 작성하면 된다. 

&:focus {
	outline: none;
}