CSS

border의 문제점hover를 했을 때 border가 생기게 하고 싶어서 hover 의사 클래스 내부에 border에 관한 css를 추가해줬다.  button:hover { border: 2px solid #3576F4;} 다만 border 속성은 요소의 바깥에 그려지기 때문에 테두리가 있을 시와 없을 시의 요소 크기가 달라진다는 문제점이 있다.   이를 해결하기 위한 방법은 여러가지가 있겠지만 가장 간편한 방법을 찾았다! 바로 border 대신 box-shadow 속성을 쓰는 것!!!  bor-shadowbutton:hover { box-shadow: 0 0 0 2px #3576F4 inset;} 1. 최대 4개의 length 값 → 오프셋의 길이 순서대로..

버튼을 눌렀을 때 생성되는 테두리를 없애고 싶을 때는 어떻게 해야할까? 2가지를 생각해야 한다.  1. border가 아닌 outline 속성이라는 점2. 클릭 이벤트가 발생한 시점 즉, focus 상태에서 속성을 지정해줘야 한다는 점   모든 button에 기본 속성으로 정해주고 싶으면 이런 식으로 태그 선택자에 :focus 의사 선택자를 이용해 적용하면 된다. button:focus { outline: none }  또는 styled components에서 개별 속성에 해당 속성을 작성하고 싶으면 아래처럼 작성하면 된다. &:focus { outline: none;}