반응형

hover 2

[React] useState 이용하여 JS로 :hover 구현하기

호버링이란.. 말그대로 마우스를 특정 요소 위에 올렸을 때 해당 요소가 바뀌게 해주는 그런 기능? 이다 const Barogagi = styled.div` &:hover { background-color: rgb(0, 0, 0, 0.5); color: rgb(255, 255, 255, 100); } `; 이런식으로 styled-component나 css를 이용하여 호버링 기능을 쉽게 구현할 수 있지만 이제.. 이걸로는 외부의 컴포넌트를 호버할때마다 전혀 다른 컴포넌트에게 영향을 끼치게 만드는게 안되어서 속상했다 useState 를 이용한 hover 기능 구현 그러다가 알게된 onMouseOver 과 onMouseOut.. 그리하여 리액트의 useState()를 이용하여 메인함수 내부에 호버링을 구현했다!..

_/Velog 2023.12.23

🎥 React로 유튜브 클론코딩 📹

🖼 Outline Why - 교내웹개발동아리에서 겨울방학 토이프로젝트로 진행 What - 유튜브 웹사이트 클론코딩 Who - spring을 사용하시는 두명의 백엔드 분들과 협업하였으며 나는 프론트를 맡았다 How - React 기반 When - 약 한 달(2021년 11월 08일 ~ 2021년 12월 4일)간 진행했다 ✨ Main Features 1. 반응형 2학기에 집중적으로 공부한 반응형을 본 프로젝트 곳곳에서 구현하려 노력했다. 당연하지만? 미디어 쿼리를 이용하여 css 스타일을 적용하였고 const Wrapper = styled.div` display: flex; flex-direction: column; gap: 20px; width: 70vw; @media (max-width: 1300px) ..

_/Velog 2022.03.31
반응형