[CSS Tip] hover시 밑줄 그을 때 움찔 하는 것을 막기

아래 비디오에서 볼 수 있듯이 hover시 없던 밑줄이 생기면 높이가 늘어나면서 요소가 움찔 하고 흔들리는 경우가 생깁니다.

이런 현상을 막으려면 미리 투명 밑줄을 넣어 두면 됩니다.

코드는 아래와 같습니다.

.search-field {
  border: 0;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s;
}

.search-field:focus {
  border-bottom: 2px solid #bbb;
  outline: none; // 브라우저 기본 선 제거
}

box-shadow를 이용한 방법

box-shadow는 레이아웃 흐름에 영향을 주지 않기 때문에 이걸 사용해도 움찔하는 효과를 막을 수 있습니다.

다만, 밑줄이 요소의 바깥쪽에 그어지므로 선이 버튼보다 아래쪽에 있게 돼 어색합니다.

따라서 이런 식으로 inset 값을 줘야 합니다: box-shadow: inset 0 -2px 0 0 #bbb

예제 코드

아래 예제코드엔 outline을 이용하는 방법까지 검토하고 있습니다.