2024.02.15 TIL

 

css - modal 구현할 때 필요한 z-index

z-index는 CSS 속성 중 하나로, 요소의 쌓임 순서(레이어 순서)를 지정합니다. 웹 페이지에서 여러 개의 요소가 겹쳐 있을 때, z-index 속성을 사용하여 어떤 요소가 다른 요소 위에 나타나는지 결정할 수 있습니다.

z-index 속성은 정수값을 가지며, 값이 클수록 요소가 다른 요소 위에 나타납니다. 음수 값도 사용할 수 있습니다.

일반적으로 더 큰 z-index 값을 가진 요소가 다른 요소 위에 나타납니다. 그러나 z-index는 부모 요소의 컨텍스트 내에서 작동하며, 부모 요소의 z-index 값보다 더 큰 z-index 값을 가지는 자식 요소가 부모 요소의 바깥쪽으로 나타날 수 없습니다.

z-index를 사용하여 요소의 쌓임 순서를 조절할 때, 요소의 position 속성은 static이 아니어야 합니다. position: static; 상태인 요소에는 z-index 속성이 영향을 주지 않습니다. 

대신, position: relative;, position: absolute;, position: fixed;, position: sticky; 중 하나를 사용해야 합니다.

 

NavLink: 네비게이트가 필요한 곳에 active 스타일을 지정할 수 있는 태그

active 불린 prop값이 기본으로 들어있다.
https://iridescent-zeal.tistory.com/214

[React]리액트 라우터 화면 이동 - Link, NavLink, useNavigate

Link나 NavLink 스타일링 하는 법
const StNavLink = styled(NavLink)` 이런식으로
NavLink import하고 스타일 지정하면됨.