[CSS] 검색창(input)에 롤링하기

1. input과 rolling을 겹친다

input에는 움직이는 효과를 넣을 수 없다.

그래서 input과 롤링 컴포넌트를 겹쳐 놓은 후에 둘중에 하나를 투명하게 만들면 된다.

 

2. 보였다 안보였다 하기

사용자가 검색창을 클릭해서 글을 입력하려면 기존에 롤링되어 보이던 글들은 방해되니 사라지게 만든다.

 

 

 

 

아래와 같이 스타일 컴포넌트를 정의한다

const SearchWrapper = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  width: 60vw;
  background: var(--white);
  border: 1px solid #ddd;
  border-radius: 20px;
  overflow: hidden;  //롤링 문구가 input창 밖으로 나가는걸 막아줌
 `;
 
 
const SearchInput = styled.input`
  width: 100%;
  height: 36px;
  border: none;
  background: transparent; // input창을 투명하게 만들어 뒤에 있는 롤링 문구가 비쳐 보이게 함
  padding: 10px 40px 10px 20px;
  font-size: 14px;
  position: relative;
  z-index: 10;
  outline: none;
  transition: border-color 0.3s ease;
  
  &:focus {
    border-color: var(--blue);
  }
`;


const RollingContainer = styled.div`
  position: absolute;
  top: 0;
  left: 20px;
  width: calc(100% - 65px);
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none; /* 클릭을 통과시켜서 뒤의 input이 클릭되게 함 */
  z-index: 5;
`;


const SearchButton = styled(IconButton)`
  position: absolute;
  right: 8px;
  padding: 6px;
  z-index: 20; //가장 높은 z-index를 주어 항상 클릭 가능하도록 만듬 (맨 앞에 놔줌)

  svg {
    font-size: 20px;
  }
`;

 

 

그리고 return에서 아래와 같이 컴포넌트 배열하면 됨

<SearchWrapper>
	<SearchInput />
    	<RollingContainer>
			<HeaderPreview />
		</RollingContainer>
	<SearchButton type="submit">
		<SearchIcon />
	</SearchButton>
</SearchWrapper>