stacking context란 무엇일까

개발 관련 글을 보다가 stacking context라는 단어를 보게 되었다. stacking context를 사용하는 글들을 보면 z-index도 나오고 position도 나오는 등 결국 뭔가 요소들의 순서에 관련된 단어같은데 그것 만으로는 stacking context가 무엇인지 설명할 수 없으니 이에 대해 공부해보기로 했다.

이름이란 것은 그것을 무엇인지 설명해주는 존재와도 같은 것이니, stacking context를 이해하기 위해서는 왜 stacking context 라는 이름으로 불리는 지를 살펴보는 데에 집중하여 살펴보았다.

 

---

 

stacking context를 분해하면 stacking은 쌓임이라 해석하고 context는 맥락이라 해석하며, 통틀어 직역하면 쌓임 맥락이라고 한다. 한글로 번역한다고 해당 단어가 무엇을 나타내는 지 알 수가 없으니 왜 이런 단어가 붙게되었는지 하나하나 풀어나가야겠다.

 

 

1. stacking

 

HTML의 요소들은 상위부터 하위로 내려오면서 그 순서를 가지게 되며 가장 마지막에 기록된 것이 가장 상단에 나타난다.  

 

 

.box {
    position: absolute;
    width: 50px;
    height: 50px;
}

.red {
    top: 10px;
    left: 20px;
    background-color: red;
}

.green {
    top: 30px;
    left: 20px;
    background-color: green;
}

.blue {
    top: 50px;
    left: 20px;
    background-color: blue;
}

 

결과

 

 

위의 코드를 보면, 세 div는 모두 동일한 조건에 있지만 blue 박스가 가장 상단에 위치하게 되는데, 그 이유는 HTML 상 가장 마지막에 렌더링 되었기 때문이다.

이처럼 HTML 요소들은 마치 가장 먼저 입력된 것이 먼저 아래에 쌓이고, 그 다음에 입력된 것이 쌓여서 문서를 완성하게 된다. 이것이 위에서 말하는 "쌓임"이라는 것이다.

 

 

 

2. Context

 

그런데 만약 요소들을 쌓는 순서로만 그 위치를 조절할 수 있다면 문서를 화려하게 꾸미는 것은 대단히 어려운 일이 될 것이다. 그렇기에 position이나 z-index와 같이 이 쌓이는 순서를 무시하고 임의로 그들의 순서를 변경할 수도 있는 몇몇개의 css가 존재하게 되는데 단순하게 위에서 아래로 쌓이는 단순한 규칙에서 이러한 규칙을 파괴시키는 css들이 난립하면서 요소들의 순서는 매우 복잡하게 다가오게 된다.

 

예를 들어, 나는 green 박스가 가장 상위에 위치하는 디자인을 만들고 싶다. 물론 위의 코드에서는 HTML이 쌓이는 순서를 이용하여 div.blue를 div.green 아래로 위치를 바꾸기만 하면 되지만, 지금과 같이 간단한 HTML이 아닌 더 복잡한 HTML을 만지게 되면은 그 순서를 함부로 변경하기도 힘들 것이다. 

그렇기에 css를 삽입하게 되는데 이러한 순서를 변경하는 대표적인 css인 z-index를 box.green에 추가하게 되면 아주 간단하게 green 박스가 가장 상단으로 올라오게 된다.

 

// 나머지는 위와 동일
.green {
    z-index: 1;
    top: 80px;
    left: 50px;
    background-color: green;
}

 

 

green 박스가 상단에 위치하게 된다

 

 

이렇게 쌓이는 순서에 영향을 주는 css로는 postion(static제외), z-index, opacity, transform 등이 있는데 이러한 css들을 통해 쌓이는 순서들이 변경되고 개발자들은 이렇게 변경된 순서들의 관계나 연관을 파악해야한다. 즉, 이 뜻은 요소들의 맥락(사전 뜻: 사물 따위가 서로 이어져 있는 관계나 연관)을 이해야한다는 것이고, 이는 "쌓임 맥락"에서의 "맥락"을 나타내는 것이다.

 

 

---

 

결국 개발자는 HTML의 기본적인 쌓인다는 개념에 대해서 알고 있어야하고 또 이 쌓이는 순서를 변경할 수 있는 css는 어떤 것이 있는지 또 그 css는 어떻게 순서를 변경하는지 전부 파악하여 코드를 짜야할 것이다.

이렇게 각 요소들이 쌓이는 순서와 이러한 요소들이 어떤 css를 부여받아 다른 요소보다 위에 있고 아래에 있게 되는지 등, 요소들이 서로 어떠한 관계를 가지게 되어 쌓이게 되는지를 파악하는 것이 바로 "쌓임 맥락" 즉, stacking Context이다.

 

 

지금까지는 요소의 순서를 바꾸는 것은 z-index. 정도로만 생각했는데 z-index라는 css를 사용함으로써 요소들의 쌓이는 순서에 영향을 끼치고 이로 인해 어떻게 순서가 바뀌는 지 전체적인 맥락을 통해 바라봐야한다는 것을 배운 것 같다.

stacking Context가 무엇인지 알았으니 이제 stacking Context을 어떻게 고려하여 코드를 짜야하는 지도 알아봐야 할 것이다!