CSS isolation: isolate 속성의 용도는?

Q: CSS isolation: isolate 속성의 용도는?

새로운 쌓임 맥락(Stacking Context)을 생성하여 z-index 충돌을 방지한다 isolation: isolate는 새로운 쌓임 맥락을 생성합니다. 이를 통해 컴포넌트 내부의 z-index가 외부에 영향을 주지 않으므로, mix-blend-mode나 z-index 관련 예기치 않은 동작을 방지하는 데 유용합니다.

어려움 MDN Web Docs

보기 및 정답

A 새로운 쌓임 맥락(Stacking Context)을 생성하여 z-index 충돌을 방지한다

B @supports 규칙은 JavaScript로만 해석되며 순수 CSS로는 동작하지 않는다

C CSS의 clamp() 함수는 내부에 calc() 표현식을 포함하여 사용하는 것이 불가능하다는 제한이 있다

D overflow-x와 overflow-y를 개별 설정하면 서로 완전히 독립적으로 작동한다

해설

isolation: isolate는 새로운 쌓임 맥락을 생성합니다. 이를 통해 컴포넌트 내부의 z-index가 외부에 영향을 주지 않으므로, mix-blend-mode나 z-index 관련 예기치 않은 동작을 방지하는 데 유용합니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

로그인

추가 정보 입력

회원가입

비밀번호 찾기

CSS isolation: isolate 속성의 용도는?

해설

코딩, 제대로 배우고 싶다면?

관련 문제

모두를 위한 진짜 쎈 바이브코딩