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

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

(기술적으로는, 레이아웃 알고리즘이 아닌 레이아웃 모드라고 합니다. 하지만 “레이아웃 알고리즘”이 더 유용한 명칭이라 생각합니다.)

브라우저가 HTML을 렌더링할 때, 모든 요소는 기본 레이아웃 알고리즘을 사용하여 계산된 레이아웃을 갖습니다. 또한, CSS 선언을 통해 다양한 레이아웃을 특정할 수 있습니다. 예를 들어 position: absolute를 적용하면 요소가 위치 지정 레이아웃을 사용하도록 전환됩니다.

예를들어 다음과 같은 CSS가 있다고 가정해보겠습니다.

우리의 첫 번째 일은 .box요소를 렌더링하는데 사용될 레이아웃 알고리즘을 파악하는 것입니다. 작성한 CSS를 기반으로 Flow 레이아웃을 사용해 렌더링됩니다.

Flow는 웹의 “OG” 레이아웃 알고리즘입니다. 웹이 하이퍼링크 문서의 세계 최대의 아카이브로 여겨지던 시대에 만들어졌습니다. 마이크로소프트 워드 같은 워드 프로세싱 소프트웨어에서 사용되는 레이아웃 알고리즘과 유사합니다.