[KTB 파이널 프로젝트 트러블 슈팅] input 포커스 시 밑줄 색상 변경 문제 (Tailwind CSS - peer)

☄️ 문제 상황

 

input 필드에 포커스 시, 밑줄이 왼쪽에서 오른쪽으로 채워지면서 보라색으로 변하는 애니메이션을 구현하고 싶었다.

그러나, 포커스를 주었음에도 밑줄의 색상과 스타일이 변하지 않는 문제가 발생했다.

 

 

☄️ 문제 원인

 

Tailwind CSS는 특정 요소에 포커스가 갔을 때, 인접한 다른 요소의 스타일을 변경하는 기능은 기본적으로 제공하지 않는다.

문제는 input 요소에 포커스가 갈 때, 밑줄로 사용할 인접한 span 요소의 스타일이 변경되지 않는다는 점이었다.

 

 

☄️ 해결 방법

 

Tailwind CSS의 peer 클래스를 사용했다.

peer 클래스란?
특정 요소에 상태 변화가 발생했을 때, 형제 요소의 스타일을 동적으로 변경할 수 있게 해주는 Tailwind CSS의 유틸리티 클래스

 

 

1. peer 클래스 추가

 

input에 peer 클래스를 추가한다.

이제, input에 포커스가 되면, 다른 요소의 스타일을 변경할 수 있게 된다.

 

[ 예시 코드 ]

<input className="peer" />

 

 

2. peer-focus 클래스로 인접 요소 스타일 변경

 

span 요소에 peer-focus 클래스를 적용하여 input 요소가 포커스 되었을 때 처리할 동작을 정의한다.

아래 코드를 실행하면, input 포커스 시 span의 너비가 0에서 100%로 확장될 것이다.

다만, 테두리 크기와 색상을 따로 지정해주지 않았으므로 화면상 눈에 띄는 변화는 아직 없다.

 

[ 예시 코드 ]

<span className="peer-focus:w-full"></span>

 

 

3. 스타일 적용

 

이제 원하는 스타일을 적용할 차례 🎨

 

나는 다음과 같이 적용했다.

<input className="peer w-full border-none focus:outline-none focus:ring-0 pb-3 mb-3" />
<span className="absolute bottom-3 left-0 w-0 h-[1.5px] bg-[#A98BFF] transition-all duration-700 ease-in-out peer-focus:w-full mb-3"></span>

 

🪐 동작 방식

 

1. input에 기본으로 제공되는 밑줄과 포커스 아웃라인(파란색 외곽선)을 감췄다. span 또한 초기 너비가 0이기 때문에 (w-0) 화면에 보이지 않는다.

2. input 필드에 포커스를 주면, span 요소의 너비가 0에서 100%로 확장되며, 연한 보라색(#A98BFF) 밑줄이 왼쪽에서 오른쪽으로 채워지는 애니메이션이 적용된다.

2-1. 애니메이션은 700ms 동안 지속되며, ease-in-out 속도(천천히 시작하여 중간에는 빠르게, 그리고 다시 천천히 끝나는 애니메이션)로 적용된다.

 

 

 

 

☄️ 의문점

 

해당 문제를 해결하면서 들었던 몇 가지 의문점이 있다.

 

Q. input 필드가 기본적으로 제공해주는 밑줄 기능으로는 해당 스타일을 적용할 수 없을까? (꼭 별도 클래스를 사용하여 밑줄을 구현해야 할까?)

A. input의 기본 기능만을 사용하여 포커스 시, 밑줄 색상을 변경하는 것은 가능하다. 하지만 애니메이션 효과 구현은 제한적이다.

 

Q. 기본 CSS 클래스와 peer 클래스의 정확한 차이가 뭘까?

A. 일반적인 CSS에서는 한 요소의 상태가 자신에게만 영향을 미칠 수 있다. 예를 들어, input 요소에 포커스를 두었을 때 해당 요소(자기 자신)의 스타일을 변경할 수는 있지만, 다른 클래스(<span> 등)를 변화시키는 것은 불가능하다. 결론적으로 한 클래스의 변화로 다른 클래스가 변화해야 하는 경우에 peer를 사용한다.

 

Q. 모든 클래스가 peer 클래스와 상호작용할 수 있을까?

A. peer 클래스는 형제 요소(같은 부모 요소를 공유하는 요소) 간의 상호작용을 가능하게 한다. 즉, DOM 구조에서 같은 레벨에 있는 요소를 뜻한다. 따라서, 부모와 자식 관계에서는 적용되지 않는다. 적용에 제한이 있는 태그는 없다. HTML에서 지원하는 모든 태그에 적용 가능하다.