본문 바로가기

styled-components2

styled-components와 emotion에 대한 고찰 현재 근무 중인 곳에서 스타일 관련 라이브러리로 emotion을 사용하고 있다. (근데 또 styled-components도 일부 사용하고 있다.) 하지만 나는 이곳에 들어가기 전까지는 styled-components만 주로 사용했었기 때문에, 두 라이브러리의 차이점이 궁금했다. 왜냐하면 코드 상 크게 다른 점이 보이지 않았기 때문이었다. 동료 분께 질문했을 때 돌아온 답은 "emotion이 좀 더 가벼워서요~" 였었다. 그렇지만 다른 회사들 채용 공고 페이지에 적혀 있는 것을 보면, styled-component와 emotion을 각각 균등하게 사용하고 있는 것을 볼 수 있었다. 그래서 이 둘이 도대체 뭐가 다른 건지에 대해 알아보았다. 스타일 기능 및 문법 우선 전반적인 스타일 기능은 크게 다르지 않.. 2023. 8. 13.

[CSS] 클릭 이벤트가 있으면 커서 모양 바꾸기 개인 포트폴리오 사이트를 만든 후 코드 리뷰 과정에서 클릭 이벤트가 있는 부분 위에 마우스가 올라가면 커서 모양이 바뀌면 더 좋을 것 같다는 피드백을 받았다. 아무래도 커서 모양이 그대로 유지되다 보니, 그 부분을 클릭했을 때 외부 링크로 연결된다는 것을 잘 모를 수 있겠다는 생각이 들었다. 리액트로 작업해서 CSS에는 styled-components를 사용했는데, 그냥 CSS에도 적용되는 것인지는 잘 모르겠다. const Menu = styled.p` ... &:hover { cursor: pointer; } `; 위와 같이 추가해주면, 메뉴 스타일을 지정해준 컴포넌트 위에 마우스 호버시 커서 모양이 손가락 모양으로 바뀐다! 2022. 10. 1.

이전 1 다음

티스토리툴바