[TIL] 220429
부트스트랩을 이용한 캐러셀
https://getbootstrap.kr/docs/5.0/components/carousel/
캐러셀
캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트입니다.
getbootstrap.kr
z-index가 제대로 적용되지 않을때
https://coder-coder.com/z-index-isnt-working/
4 reasons your z-index isn't working (and how to fix it) - Coder Coder
Z-index is one of those CSS properties that causes a ton of frustration due to some strange rules. Learn just how z-index works and avoid common pitfalls.
coder-coder.com
(*) 번역문
z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)
이 글은 https://coder-coder.com/z-index-isnt-working/의 번역글입니다. 오타 및 오역 제보 기쁘게 받도록 하겠습니다.
erwinousy.medium.com
https://www.youtube.com/watch?v=qYi-OLf5q5g
위의 블로그 글의 동영상 버전. 유튜브에 검색하다가 찾아보니 있었다.
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.
developer.mozilla.org
https://www.w3.org/TR/css-color-3/#transparency
CSS Color Module Level 3
Abstract CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements
www.w3.org
https://www.youtube.com/watch?v=uS8l4YRXbaw
프로젝트를 진행하다가 z-index가 제멋대로 다 엉망이 되는 바람에 모달창을 제대로 띄우지 못했던 경험이 있다.
결국 그 원인에는 z-index가 꼬여버렸다는 것에 있었고, stacking context라는 개념을 아예 알지 못했기에 발생한 일이었다. z-index 자체부터가 수업때 배우지 못했던 내용이다. 혼자 독학하면서 습득했던 것인데 제대로 공식문서를 읽거나 체계적으로 배운 것이 아닌 구글에서 검색하여 다른 블로그 글을 참고하면서 배웠던 내용이라 결국 문제를 일으키고 말았다.
(*) 주의할 것
1.z-index의 값의 크기 비교
2. position 값 설정의 유무
3. opacity, transform 과 같은 css 설정의 유무 → 이와 같은 일부 속성들은 element에 새로운 stacking context를 부여
4. 부모 - 자식관계 확인하기 : 자식은 부모의 z-index에서 벗어날 수 없음