[CSS] transform 속성을 layer와 stacking context 관점에서 알아보기

[CSS] Stacking Context 쌓임 맥락 쉽게 이해하기

 

지난 글에서 stacking context가 어떤 의미인지 알아봤어요!

특정 element를 다른 element보다 위에 그리고 싶을 때,

z-index를 사용하여 화면에 그려지는 순서를 조절할 수 있습니다.

 

그런데 css 속성 중 `transform`을 사용할 때에도 다른 element보다 위에 그려지게 됩니다.

그 이유는 stacking context가 생성되었기 때문이에요.

얼핏 보아서는 화면에 그려지는 순서와 전혀 관련이 없어 보이는 속성인데,

왜 stacking context가 생기는 것일까요?

 

---

 

transform 속성이 stacking context를 만드는 이유

transform의 특징은 다음과 같아요.

• 성능을 높이기 위해 CPU가 아닌 GPU를 사용한다.
• 주변 요소에 영향을 주지 않고 element를 회전, 확대, 이동시킨다.

어떻게 주변 요소에 영향을 주지 않고 element를 변경시킬 수 있었을까요?

 

브라우저의 렌더링 엔진은 transform 속성이 설정된 element를

새로운 layer로 분리하여 처리하기 때문이에요.

transform 속성은 주변 요소와 다른 독립된 layer에서 처리되기 때문에 영향을 주고받지 않는 것이죠!

새로운 layer가 생기면 자연스럽게 stacking context도 새롭게 생기게 됩니다.

 

정리해 보자면,

transform은 성능을 높이기 위해 새로운 layer에서 처리하며, 자연스럽게 stacking context도 생성됩니다.

 

---

 

transform 속성 사용 예시

 

위의 코드를 살펴봅시다.

일반적으로 div는 선언된 순서대로 그려지기 때문에

동일한 z-index를 가진 div.yellow와 div.blue 중에서 나중에 그려진 div.blue가 더 위에 그려졌습니다.

 

이번엔 transform을 사용하여 div.yellow를 움직여 보았습니다.

얼핏 보아선 div.yellow와 div.blue 모두 z-index설정은 없기 때문에

나중에 선언된 div.blue가 더 위에 있어야 할 것처럼 느껴져요.

 

하지만 앞서 살펴본 것처럼,

transform 속성을 가진 div.yellow는 새로운 layer로 분리되어 상위로 올라오기 때문에 

div.blue보다 div.yellow가 더 위에 그려지게 된 것입니다!

 

---

 

새로운 layer로 분리되면 왜 상위로 올라오나요?

앞선 예시에서, div.yellow가 transform 속성을 가졌기 때문에 새로운 layer로 분리되어 상위로 올라왔다고 설명했어요.

그런데 새로운 layer로 분리되는 것과, 상위로 올라오는 것은 어떤 관계가 있을까요?

 

브라우저는 다음과 같은 단계로 렌더링을 진행합니다.

1. 스타일 계산

2. 레이아웃 계산

3. 페인트 (Paint)

4. 합성 (Composite)

 

transform은 4번 단계인 합성단계에서 처리되어요.

즉, 가장 마지막에 그려지기 때문에 일반 element보다 항상 위쪽에 보이게 되는 것입니다.

합성단계에서 처리되는 속성은 transform 외에도 opacity, filter, backdrop-filter 등이 있습니다.

 

---

 

정리

- transition 속성이 있는 element는 새로운 layer로 분리된다. 즉, 새로운 stacking context가 생긴다.

- transition 속성은 합성단계에서 GPU로 처리되며, 새로운 layer로 분리었기 때문에 다른 element에 영향을 주지 않는다.

- 합성단계는 렌더링 과정 중 가장 마지막에 이루어지기 때문에 일반 element보다 위에 그려진다.

 

---

 

마치며

이 내용을 자세히 모른다고 하더라도 UI 개발은 얼마든지 가능합니다.

하지만 원리를 알고 있다면 예상하지 않은 동작이 발생했을 때 디버깅하기 훨씬 수월해질 것이라고 생각해요!

 

며칠 전 실무를 하다가 특정 element가 자꾸 다른 element보다 위로 올라와서

왜 그런지 한참을 살펴보다가 transform속성이 있으면 stacking context가 생긴다는 것을 이제야 알게 되었어요 😅

다른 분들은 이 내용을 미리 알고 디버깅하는 시간을 아꼈으면 하는 바람으로 글을 작성하게 되었습니다.

 

이 글이 조금이나마 css를 이해하는데 도움이 되었기를 바라며 이만 마치겠습니다

읽어주셔서 감사합니다! ☺️