00:00*height이 명시적이면 자식 요소가 부모 요소 위치를 벗어났을 때 부모 요소가 커지는 것이 아니라 자식 요소가 숨겨집니다.
03:44세 개의 낙타 요소에 margin-bottom: -40px 적용
마크업 상으로 아래 있는 것이 위에 오게 되므로 화면 상에서도 세 번째, 두 번째, 첫 번째 순으로 낙타가 겹쳐지게 됩니다.
04:47세 번째 낙타 요소를 margin-top으로 더 아래에 위치시킵니다.
그 결과, .oasis에 가려지게 됩니다.
.oasis 요소는 마크업 상으로 .desert 보다 더 아래에 위치하므로 위에 오게 됩니다.
05:22세 번째 낙타요소에 position: relative를 적용합니다.
그 결과, 마크업 순서에 상관없이 .oasis보다 앞으로 튀어나오게 됩니다.
05:39position: relative는 마크업 순서에 상관없이 요소가 앞으로 튀어나오게 합니다.
*offset(top, bottom, left, right) 적용도 가능해집니다.
*offset 적용 시, 시각적으로는 이동하지만 다른 요소와의 위치적 관계엔 영향을 주지 않습니다.
05:56position: relative를 지우고 transform: translate(0)을 입력합니다.
그 결과, 마찬가지로 세 번째 낙타 요소가 .oasis 위에 위치하게 됩니다.
*transform property에 어떤 값이 들어가도 상관없습니다.
06:24transform: translate(0)을 지우고 opacity: 0.9를 입력합니다.
그 결과, 마찬가지로 세 번째 낙타요소가 .oasis 위에 위치하게 됩니다.
07:06여기까지 정리,
1. 마크업 상에서 아래에 있는 것이 기본적으로 z축 상에서 상위에 위치하게 됩니다.
2. 마크업 순서에 상관없이 position: relative가 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다.
3. 마크업 순서에 상관없이 transform이 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다.
4. 마크업 순서에 상관없이 opacity가 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다.
5. 그 외에 MDN 문서를 통해 마크업 순서에 영향을 주는 스타일 속성들을 확인할 수 있습니다.
07:59첫 번째 낙타 요소와 .parasol 간의 상황에 따른 z축 관계
1. 첫 번째 낙타요소에 transform: translateY(-100px)이 적용된 경우: 첫 번째 낙타요소가 .parasol 위에 위치합니다. 마크업 순서 상 더 아래에 있고 tranform이 적용되었기 때문입니다.
2. 첫 번째 낙타요소에 transform: translateY(-100px)이 적용되었고 .parasol에 position: relative가 적용된 경우: .parasol에 relative가 적용되었지만 마크업 순서 상, 낙타가 z축에서 우선됩니다.(transform, relative 간의 우선순위가 아닙니다, 이 경우 마크업 위치가 결정 요인입니다)
08:42지금까지 마크업 순서에 상관없이 position: relative, transform, opacity를 적용하면 다른 요소들보다 z축 상에서 상위에 위치하게 된다는 것이 내용이었는데요, 이 관계를 뛰어넘을 property로 zIndex가 있습니다.
*조건으로 position: static이 아닌 값이 적용되어 있어야합니다.(relative, absolute, fixed, sticky)
*tranform, opacity는 조건이 아닙니다.
*zIndex는 숫자입니다. -1도 가능
10:02.parasol, 첫 번째 낙타 간의 z축 우위 경쟁에서 둘에만 position: relative, z-index 적용 되었을 때는 z-index 값이 더 높은 요소가 z축 상에서 상위에 표시되었었는데요, 첫 번째 낙타의 부모에 position: relative와 z-index가 적용된 후부터는 첫 번째 낙타보다 .parasol이 z축 상에서 우위를 갖게 되었습니다.
*부모 요소에 z-index가 적용되면 자식 요소들에 적용된 z-index는 자식 요소들끼리 경쟁할 때만 의미가 있어집니다. 즉, 아무리 자식 요소에 적용된 z-index 값이 높아도 부모 바깥의 요소와의 z-index 싸움에서 질 수 있다는 것이죠.
14:19PARADISE h1 요소에 초록색 밑줄을 적용하는 것에 있어서 가상요소 ::before를 적용했습니다.
h1에 relative를 적용했고 가상요소에 absolute를 적용해서 가상요소의 기준은 h1이 되었구요.
그런데 z-index를 적용하지 않으니 PARADISE 위에 덮여집니다.
이것을 해결하려고 z-index: -1를 적용하니 .parasol 뒤로 가버리면서 화면에 보이지 않게 됩니다.
부모 요소에 z-index가 없을 때는 global하게 z-index가 적용되므로 그런 것이죠. 부모 요소인 h1 요소에 z-index: 1을 적용하니 global하게 비교되던 z-index: -1이 이제는 h1 요소 내에서만 비교됩니다. 결국 초록 밑줄은 PARADISE 보다는 아래에 위치하지만 .parasol 보다는 위에 위치하게 되는 것이죠.
15:31flex-item, grid-item인 요소는 position에 값 지정 없이 z-index를 사용할 수 있습니다.
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.