[CSS] hover 시 숨겨진 메뉴 보이게 하기 (feat. styled-components)

[CSS] hover 시 숨겨진 메뉴 보이게 하기 (feat. styled-components)

이 글을 통해서 아래 메뉴를 구현할 수 있다. hover 시에는 컴포넌트가 보이도록, 벗어나면 다시 사라지도록 구현해야 한다. 우선 뼈대를 구성할 건데 styled-components를 사용하여 스타일링했다. 일정 커뮤니티 const MenuUl = styled.ul` list-style: none; display: flex; align-items: center; gap: 48px; position: relative; & span { cursor: pointer; } `; ul의 기본 스타일을 없애고, 메뉴 사이에 gap을 줬다. SubHeader는 각 메뉴에 마우스를 호버 하면 나타나는 서브 메뉴이다. 간단하게 아래와 같이 작성했다. const SubHeader = ({ tab }) => { const..

원문링크 : [CSS] hover 시 숨겨진 메뉴 보이게 하기 (feat. styled-components)

 등록된 다른 글

[styled-components] 전역 스타일 적용하기 (createGlobalStyle)

[styled-components] 전역 스타일 적용하기 (createGlobalStyle)

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기

[JavaScript] Array.from()을 사용하여 2차원 배열 만들기

[JavaScript] Array.from()을 사용하여 2차원 배열 만들기

[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (2) - createReducer

[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (2) - createReducer

[React] BrowserRouter와 HashRouter의 차이(Browser Router를 사용할 때 새로고침 시 404 에러가 발생하는 이유)

[React] BrowserRouter와 HashRouter의 차이(Browser Router를 사용할 때 새로고침 시 404 에러가 발생하는 이유)

[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (1) - createAction

[Redux Toolkit] Redux를 좀 더 간편하게, Redux Toolkit (1) - createAction

[React] API KEY 숨기기

[React] API KEY 숨기기

[TypeScript] interface란?

[TypeScript] interface란?