html-css2 Styled Components 공공 반복되는 스타일 import { css, styled } from 'styled-components'; const commonBtnStyle = css` border-radius: 16px; `; const SmallBtn = styled.button` ${commonBtnStyle} `; not, hover등의 선택자 const SmallBtn = styled.button` &:not(:last-child) { margin-right: 16px; } &:hover { /// } `; Props로 스타일 컨트롤 인증 const SmallBtn = styled.button` background-color: ${(props: any) => (props.className === 'selected' ? '.. 2023. 9. 12. 여러가지 Tips 그라데이션 텍스트 만들기 배경에 linear-gradient로 그라데이션을 주고 webkit을 사용해 글자를 파낸다. background: linear-gradient(90deg, #6f019c 0%, #c6017e 135.12%); -webkit-background-clip: -webkit-text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; 배경이미지 설정 background-image: url(http://...); background-size: cover; background-repeat: no-repeat; background-position: center; /* 단축버전 */ background: #000 url(.. 2023. 7. 3. 이전 1 다음