이번 리액트 숙련 강의 과제는 라우터와 리덕스를 적용하여 다시 만드는 투두리스트였는데, 한 주 동안 입문 강의 레벨을 복습하며 투두리스트를 여러번 다시 만드는 것에 집중해서 결국...
스타일드 컴포넌트로만 수정한게 최선이였고, 다시 주말을 이용해 리덕스를 어떤 식으로 써야하는건지 이해해보는 시간을 가져야겠다..🥹
+ 오후에 진행된 튜터님의 과제 리뷰를 보면서 리덕스 과제에 대한 막막함? 이 조금 사라진 것 같다.
하나의 jsx파일에 css코드를 함께 적을 수 있다. (인라인 스타일 nono)
const StLiTodoCard = styled.li` list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 10px; width: 200px; height: 200px; /* 백그라운드 컬러와 동일하게 */ /* 보더 픽셀을 없앴더니 호버될 때마다 깨져서 꼭 픽셀을 주어야겠다.. */ border: 3px solid #fff6f0; background-color: #fff6f0; border-radius: 15px; &:hover { border: 3px solid #ffacc7; } `;
- .CSS 코드
.todo-card { list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 10px; width: 200px; height: 200px; /* 백그라운드 컬러와 동일하게 */ /* 보더 픽셀을 없앴더니 호버될 때마다 깨져서 꼭 픽셀을 주어야겠다.. */ border: 3px solid #f6f6c9; background-color: #f6f6c9; border-radius: 15px; } .todo-card:hover { border: 3px solid #ffacc7; }
스타일드 컴포넌트로 바꿔주면서 저 hover
는 어떻게 써줘야하나 궁금했다.
찾아보니 같은 중괄호 안에 &으로 연결해줄 수 있다고 한다!
... background-color: #fff6f0; border-radius: 15px; &:hover { border: 3px solid #ffacc7; }
&:hover
&:focus
이렇게 앞에 &을 써주면 굳이 분리해서 작성하지 않아도 된다고~