이것저것 공부한다:: CSS React 클론 코딩 간단 정리용
스터디 시간에 본 코드를 받았다.
1) 기본적인 디자인을 수정하여 위와 같이 정리
2) hover시에 줄거리(overView)가 뜨도록 정리
3) 다섯개 즈음에서 잘라 여러 층을 이루도록 구현…
을 인라인 스타일로 구현해야 했다. CSS의 다양한 스타일을 다뤄본 적이 없던 것은 아니지만, CSS를 react로, 인라인으로 다뤄본 것은 처음이라(평소에는 외부/내부 스타일 시트를 이용하였다.) 조금 애를 먹었다.
제일 먼저 애를 먹은 부분은 display 속성에 대해서이다. 맨 처음 제시된 코드가 display: flex로 제시되어있기에, 이에 맞추어 진행하고자 하였으나 display:flex인 상태에서 코드를 깨끗하게 짜려면 어떻게 해야 할지 감이 잡히지 않았다.
그래서 결국 display: grid를 이용하였다. style에 display:grid를 주고, column으로 정리되게 하되 gridTemplateColumns 속성을 repeat(4, minmax(210px, 210px))로 주어 다음과 같이 나오도록 만들었다::
가로 길이를 늘이든 줄이든 padding 10px을 유지한 채 나온다. (이건 사진 이미지를 200으로 주어서 가능했던 것 같다.)
후에 hover을 주었다. 나는 내부/외부 스타일시트를 사용할 때처럼 태그::hover을 사용하려 했으나 이것이 리액트에서는 허용되지 않음을 깨달았다. 몇 시간동안 이런저런 게시글을 찾아보며 useState를 이용해, const [hover, setHover]을 각 movie에 부여하여 hover 기능을 구현하는 데에 성공했다.
최종 코드는 다음과 같다::
- 카테고리
- #기타
댓글 0
추천 포스트
