(번역) 레이아웃 알고리즘 이해하기

CSS를 보다 직관적으로 만드는 멘탈 모델 전환

원문: https://www.joshwcomeau.com/css/understanding-layout-algorithms/

몇 년 전, CSS에 있어 유레카!를 외친 적이 있습니다.

그 순간이 오기 전까지 저는 z-index:10이나 justify-content: center같이 프로퍼티와 값에 집중하며 CSS를 배웠습니다. 저는 각 프로퍼티가 하는 일을 광범위하게 이해한다면 언어 전체를 깊게 이해할 수 있을 것으로 생각했었습니다.

하지만 제가 깨달은 핵심은 CSS는 프로퍼티 모음 그 이상이라는 것입니다. CSS는 상호 연결된 레이아웃 알고리즘의 집합체입니다. 각 알고리즘은 고유한 규칙과 숨겨진 메커니즘이 있는 복잡한 시스템입니다.

특정 프로퍼티가 어떤 역할을 하는지 배우는 것으로는 충분하지 않습니다. 레이아웃 알고리즘이 작동하는 방식과 프로퍼티를 사용하는 방식에 대해 배워야 합니다.

혹시 이전에 자주 사용했었던 익숙한 CSS를 작성했지만 예상치 못한 다른 결과를 만난 경험을 해본 적이 있지 않나요? 이럴 때는 정말 답답한 기분이 듭니다. 언어가 일관성이 없고 엉성하다는 기분을 갖게 됩니다. 어떻게 정확하게 같은 CSS 코드가 다른 결과를 낳을 수 있을까요??

이유는 프로퍼티가 복잡한 시스템에서 작동하고, 프로퍼티가 작동하는 방식을 변경시키는 미묘한 컨텍스트가 있기 때문입니다. 우리의 멘탈 모델은 불완전하고, 이는 놀라움으로 이어집니다!

레이아웃을 파헤치기 시작했을 때 모든 것이 이해되기 시작했습니다. 몇 년간 저를 괴롭히던 미스터리가 풀리기 시작했습니다. 저는 CSS가 실제로 매우 강력한 언어라는 것을 깨달았고, CSS를 사용하는 것을 즐기기 시작했습니다!

이 글에서는 CSS에서 일어나는 일을 이해하는 데 필요한 새로운 시각에 대해 알아볼 것입니다. 그리고 이 시각을 통해 놀랍도록 흔한 미스터리를 풀어낼 것입니다. 🕵️

레이아웃 알고리즘

“레이아웃 알고리즘”이 뭘까요? 아마 여러분 중 이미 익숙한 분들도 있을 것입니다. 레이아웃 알고리즘에는 아래와 같은 것들이 포함됩니다.

→ Flexbox
→ Positioned(예. position: absolute)
→ Grid
→ Table
→ Flow