Lo9

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..

const preventUserScroll = ( scrollMarginProcessing ) => {💻 return Result;See the Pen Untitled by 구태 (@wbnnhjvf-the-lessful) on CodePen. 📝 console.log( history ) 회사 프로젝트 진행 중 사용자가 특정 요소를 클릭하면 입력폼으로 스크롤되도록 하는 페이지가 있었다. 구현 후 문제는 스크롤 도중에 멈추거나 정확한 위치로 이동하지 않는다는 것이었다. scrollIntoView 함수를 사용해서 스크롤을 구현하였는데 도중에 state가 바뀌거나 스크롤 이벤트가 일어나게 되면 진행되던 스크롤이 멈추는 문제가 있었다.  state에 의해 스크롤이 도중에 멈추는 문제는 해결했지만 사용자 스크..

💻 결과 (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) 회사 프로젝트를 진행하다 보니 특정 상태에 대한 색상을 나타내야 하는 경우가 생겼다. 일정하게 정해진 이미지들은 그대로 사용해도 무방했지만 사용자가 임의로 설정하여 사용하는 색상의 경우 대응할 방법..

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