우리 프로젝트에도 디자이너가 생겼다!
문제
디자이너 분들께서 figma를 통해서 디자인을 해주셨는데 평소에 디자인적으로 감각이 없어서 시도조차 잘 안해본 형태의 디자인을 주셨다. 그냥 html,csss코드여도 어려워 했을 것 같은데 styled-component를 사용해서 하려다 보니 해결방법을 찾기가 어려웠다.
생각해보기
우선 마우스가 올라가면 반응하는 방식이기 때문에 hover를 사용하는게 맞다 라고 단순하게 생각하고, 진행을 했다.
카드박스에 스타일 적용하기
export const CardImageBox = styled.div`
width: 280px;
height: 290px;
background-color: #999;
border-radius: 10px;
cursor: pointer;
&:hover {
height: 370px;
}
`;처음에는 이미지 박스쪽만 커지는 것이기 때문에 이미지가 들어가는 부분에 div에 css를 주었다. 물론 커지긴 했지만. 당연하게도 이미지 부분위에 커서를 가져다 놓았을 때만 동작을 했다.
컨테이너 박스에 스타일 적용하기
그래서 적용한게 상위 컨테이너에서 스타일을 적용하는 것이다. 이렇게 하면 이미지 부분이 아닌 텍스트가 들어간 부분에 마우스커서를 가져가도 hover가 동작할 것이라 생각했다.
export const CardContainer = styled.div`
height: 425px;
&:hover {
height: 517px;
}
`;물론 동작을 하긴 했다. 상위컨테이너 자체가 커졌다는 것이라서 하위 요소들에는 영향을 주지 못했을 뿐...
그래서 생각한 것이 nth-child속성을 사용하는 것 이었다.
export const CardContainer = styled.div`
height: 425px;
&:hover {
& > :nth-child(1) {
height: 370px;
}
}
`;이렇게 하니깐 container의 첫 번째 요소인 이미지박스만 크기가 커졌다.
transition적용
이제 figam에서 처럼 부드럽게 스르륵 내려오게 하기 위해서 transition속성을 주었다.
export const CardContainer = styled.div`
height: 425px;
&:hover {
& > :nth-child(1) {
height: 370px;
transition: height 500ms ease;
}
}
`;여기서 문제가 한 번 더 발생했다.
사진처럼 hover후 커서를 때게되면 툭 하고 다시 원래 크기로 돌아가는 것이었다. 나는 그래서
export const CardContainer = styled.div`
height: 425px;
transition: height 500ms ease;
&:hover {
& > :nth-child(1) {
height: 370px;
transition: height 500ms ease;
}
}
`;이렇게 코드를 적용시켜 보았지만, 그래도 똑같은 상황이 나왔다.
해결
몇 시간의 삽질 끝내 해결...원인은 내가 container에서 nth-child를 준게 원인이었다. 원래 그냥 hover를 하고, hover밖에 transition을 적용하면 적용이 되었는데
//예시
export const Test = styled.div`
height: 425px;
transition: height 500ms ease;
&:hover {
height: 370px;
transition: height 500ms ease;
}이렇게 말이다.
하지만 내가 중간에 nth-child를 끼워넣는 바람에 상위 컨테이너에서 transition을 인식하지 못하는 것이었다.
export const CardContainer = styled.div`
height: 425px;
transition: height 500ms ease;
& > :nth-child(1) {
transition: height 500ms ease;
}
&:hover {
& > :nth-child(1) {
height: 370px;
transition: height 500ms ease;
}
}
`;그래서 따로 nth-child주니깐 해결이 되었다.
그동안 디자이너가 없었어서 사실 기능구현에만 집중하면 됐었는데, 디자이너가 들어오고 여러가지 예쁜 UI가 만들어 지니깐 구현하는게 생각보다 어려웠다. 손 놓고 있었던 css를 좀 더 공부해야 겠다는 생각을 하게 되었다.
