React Styled-component2 React - SVG 아이콘 컬러지정 (With Styled-component) 평소의 사용방법 프로젝트에서 아이콘을 사용할 때 SVG이용을 많이합니다. 기본 사이즈의 png 나 jpg를 이용하면 이미지가 깨질 수 있어 svg 이용을 많이 이용하게 됐어요 하지만 메인 페이지의 배너 같이 1920사이즈 같은 경우는 svg로는 용량이 무겁기 때문에 png파일 크기를 x3을 이용하고 타이니png 통해 파일용량을 줄이고 사용합니다 아이콘은 svg 큰 이미지는 png x3 → 타이니 png 용량 줄이고 사용 해결하고 싶은 부분 발견 저는 아이콘의 색상이 다를 때마다 svg를 새로 다운을 받으면서 사용했습니다. 이번에 Tooltip 컴포넌트를 만들었을 때 화살표 부분 때문에 화살표 부분을 고민했어요 네모칸은 Div, 하단의 화살표는 svg 컬러를 props로 넘겨줄 때 svg 컬러도 같이 바뀌.. 2023. 9. 23. Styled-component 스크롤바 디자인 스타일컴포넌트에서 스크롤바 안 보이게 하기 스크롤은 작동되지만 안보이게 하고 싶다면! &::-webkit-scrollbar { display: none; } CSS 스크롤바 선택기 ::-webkit-scrollbar : 전체 스크롤바. ::-webkit-scrollbar-button : 스크롤 막대의 버튼 ::-webkit-scrollbar-thumb : 드래그 가능한 스크롤 핸들. ::-webkit-scrollbar-track : 흰색 막대 위에 회색 막대가 있는 스크롤 막대의 트랙 ::-webkit-scrollbar-track-piece : 핸들로 덮이지 않은 트랙 부분 ::-webkit-scrollbar-corner : 수평 및 수직 스크롤 막대가 만나는 스크롤 막대의 하단 모서리 이것은 종종 브라.. 2023. 9. 23. 이전 1 다음
