본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

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

투명(transparent) border를 미리 그어 둡니다.

아래 비디오에서 볼 수 있듯이 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을 이용하는 방법까지 검토하고 있습니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *