리액트 스타일드 컴포넌트2 Styled-component 스타일 재사용 특정 스타일 재사용을 하고 싶은 이유? 스타일링을 하게 되면 일정한 스타일을 반복하게 사용될 경우가 있어요. 예시로 아래 코드는 완전히 동일한 스타일이 적용되어 있고 코드의 양이 2배가 돼서 불필요한 코드를 줄이고 싶었어요. const Text = styled.p` font-size: 10px; margin: 5px; line-height: 10px; color: #194384; `; const ButtonText = styled.p` font-size: 10px; margin: 5px; line-height: 10px; color: #194384; `; 재사용 방법 styled-component 에서는 똑같은 스타일링을 복사해서 사용하면 중복되는 코드의 양을 줄일 수 있고 Text 컴포넌트의 스타일.. 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 다음
