DEV/CSS 3

[Styled-Component] style 태그 내 무한 생성되는 클래스 문제

const style 태그 내 무한 생성되는 클래스 문제 = ( Param ) => {💻 return Result;// top, left 값이 변할 때 마다 클래스 생성됨const MoveImg = styled.img` position: absolute; width: 150px; height: 150px; top: `${props.$top}`px; left: `${props.$left}`px;`// top, left 값이 변해도 클래스가 다시 생성되지 않음const MoveImg = styled.img.attrs( (props) => ({ style: { top: `${props.$top}px`, left: `${pro..

DEV/CSS 2024.08.08

[CSS] 이미지를 원하는 색상으로 필터 씌우기

💻 결과 (CodePen) See the Pen CSS filter generator to convert from black to target hex color by Barrett Sonntag (@sosuke) on CodePen. 출처: https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991#43960991 📝 console.log(history) 회사 프로젝트를 진행하다 보니 특정 상태에 대한 색상을 나타내야 하는 경우가 생겼다. 일정하게 정해진 이미지들은 그대로 사용해도 무방했지만 사용자가 임의로 설정하여 사용하는 색상의 경우 대응할 방법..

DEV/CSS 2023.10.18

[CSS] Autofill 속성 수정하기

회사에서 프로젝트를 진행하던 중 고객의 요구사항으로 input을 사용하고 있는 부분의 autofill CSS를 수정해야하는 상황이 생겼다. autofill과 관련하여 작업한 적이 있었지만 기억이 나질 않아 구글링을 통해서 전에 작업했던 것과 같은 코드를 발견했다. box-shadow를 통해서 배경색을 흰색으로 변경하여 사용했는데 현재 프로젝트에서는 배경색이 투명이라 적용이 불가능했다. :autofill로 접근하여 직접 수정하는 방법을 생각해보았으나 autofill의 속성들은 브라우저에서 important로 지정하여 바꾸는 것이 불가능했다. 더보기 https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill :autofill - CSS: Cascading Sty..

DEV/CSS 2023.09.05