css2 한 박스에서 이미지와 비디오 엘리먼트 서서히 변하게하기 문제 마우스를 올렸을 때 화면이 서서히 변하는 걸 하고 싶다. transition만 추가하면 될지 알았는데 생각보다 오랜 시간이 걸렸다. 스택 React, styeld component, typescript 코드 분석 관련없는 코드는 삭제하고 왼쪽화면 관련된 코드만 남겼다. 컴포넌트 화면에 마우스를 올리면 숫자가 1씩 증가하여 화면을 변경시키는 로직이다. const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = (event: React.MouseEvent) => { setTimeout(function () { setLeftNum(leftNum + 1); }, 100); return ( {leftScreenData.. 개발/개발일지 2024. 1. 22. html/css 코딩애플과제 - 어려웠던 것들(2) sidebar 코딩애플 html/css 최종과제 사이드바 부분이다. 왼쪽에 fix로 붙어있고 마우스를 올렸을 때 width가 늘어나면서 애니메이션을 추가하였다. 오늘 이걸 만들기 위해서 내가 어려웠던 부분들을 정리하고자 한다. HTML 우선 html을 이렇게 짜보았는데 처음에는 div로 만들었지만 시멘틱하게 aside로 만들어보았다. Home Service Alerts State sidebar 만드는 순서 처음에는 sidebar를 작게 만들고 커서를 갖다대면 크게 만들려고했다. 그렇게하면 애니메이션을 어떻게 넣어야할지 감이 잡히지 않았다. 그래서 width를 크게 잡아 만들고 transform: translateX(-100px)를 넣어서 작은부분도 처리하였다. hover가 되면 transform: tra.. 개발/개발일지 2023. 6. 28. 이전 1 다음