
https://codesandbox.io/s/cocky-sutherland-sgisr
cocky-sutherland-sgisr - CodeSandbox
cocky-sutherland-sgisr by DosImpact
codesandbox.io
featured 1.
- nav를 grid로 만들었다.
- 행의 높이는 자동으로 100px 고정
-열은 최소 60px 보장 및 1fr로 최대한 늘릴수 있으면 늘리도록 auto-fit을 설정했다.
.title .title__menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
grid-auto-rows: 100px;
gap: 10px;
}
featured 2.
- nav트렌지션 설정함
- 결과적으로 title__item에 적용을시킨다. 그래야 opacity가 정상적으로 적용
- 다만 hover되는 트리거가 2가지 조건인데, menu가 호버된 경우 : 0.5 , 아이템이 호버된 경우 : 1.0
.title .title__item {
display: grid;
grid-template-rows: 2fr 1fr;
place-items: center center;
gap: 5px;
cursor: pointer;
transition: all 0.1s linear;
}
.title__menu:hover .title__item {
opacity: 0.5;
}
.title__menu .title__item:hover {
opacity: 1;
}
DOS IMPACT - WEB Developer
KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA
