2015년, 꼼꼼한 방식으로 CSS 레이아웃 배우기

 (book.mixu.net)
6P by GN⁺ | ★ favorite | 댓글 1개
  • CSS 레이아웃을 이미 써 본 독자가 레이아웃 알고리듬을 세부 규칙까지 이해하도록 만든 장별 학습 자료임
  • inline, block, z-index, 박스 모델을 단순 사용법이 아니라 포매팅 컨텍스트와 스태킹 컨텍스트 같은 결정 규칙으로 다시 설명함
  • 일반 흐름에서 블록과 인라인 요소의 상대 위치는 display만으로 정해지지 않고, 형제 요소와 컨텍스트가 함께 영향을 줌
  • 박스 모델의 크기와 margin: auto 계산은 포지셔닝 방식에 따라 달라지므로, 하나의 규칙으로 외우기 어려움
  • 정상 흐름, float, 절대 위치 지정, margin collapsing, overflow, z-index, 의사 요소, Flexbox를 거쳐 센터링과 그리드 프레임워크 같은 실전 레이아웃 문제로 이어짐

CSS 레이아웃을 규칙으로 이해하기

  • 이 자료는 CSS 레이아웃을 팁 모음이 아니라 규칙 기반 시스템으로 보고, 각 규칙을 장별로 따라가며 설명하는 긴 학습 자료임
  • “pedantic”이라는 표현처럼 사소해 보이는 세부사항과 형식적 규칙까지 따지는 접근을 취함
  • 대상 독자는 CSS를 처음 배우는 사람이 아니라, 이미 CSS를 쓰지만 레이아웃 동작을 더 엄밀하게 이해하려는 사람임
  • 웹사이트는 보통 점진적으로 발전하기 때문에 작은 팁과 트릭으로만 레이아웃을 익히기 쉽고, 그 과정에서 레이아웃 알고리듬 자체를 놓칠 수 있음
  • 주요 개념을 순서대로 다루며, 각 개념을 확인할 수 있는 적용 예제를 함께 제공함

장별 구성

  • Chapter 1: Box positioning in CSS는 HTML 요소가 만드는 박스들이 서로 어떻게 배치되는지 다룸
    • CSS의 세 가지 주요 포지셔닝 방식: 정상 흐름, float, 절대 위치 지정
    • 정상 흐름의 anonymous box generation, formatting context, line box, line box 안의 정렬
    • float order, clearfix, float와 부모 높이의 상호작용
  • Chapter 2: Box sizing in CSS는 박스 모델과 포지셔닝 방식에 따른 차이를 다룸
    • height, width, margin 계산은 서로 다른 메커니즘을 사용함
    • 계산 방식을 이해하려면 현재 쓰는 포지셔닝 방식과 계산 메커니즘을 함께 봐야 함
  • Chapter 3: Additional properties that influence positioning는 박스 배치에 영향을 주는 추가 속성과 메커니즘을 정리함
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • stacking context와 z-index
    • 의사 요소가 레이아웃에 미치는 영향
    • CSS3 box-sizing 속성
  • Chapter 4: Flexbox는 CSS 3 Flexbox 레이아웃 모드를 설명함
  • Chapter 5: CSS layout - tricks and layout techniques는 앞 장의 내용을 실제 문제에 적용함
    • 수평·수직 센터링
    • CSS 그리드 프레임워크의 작동 방식
    • 다단 레이아웃
    • 흔한 함정과 레이아웃 트릭
  • reference index는 특정 개념이나 속성을 찾아 관련 장과 섹션으로 이동할 때 사용할 수 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • CSS 레이아웃을 설명할 때 가장 먼저 말해야 할 건, 서로 다른 네 가지 레이아웃 체계가 있다는 것임: 이메일에서 여전히 쓰이는 가장 오래된 table, 본문 안 이미지용 float, 오늘날 가장 많이 쓰이는 flexbox, table의 현대적 대안인 grid
    absolute와 fixed 위치 지정도 레이아웃을 우회하는 해킹처럼 쓰일 수 있음

    • absolute와 fixed는 해킹도 아니고 레이아웃을 “우회”하지도 않음
      둘 다 요소가 문서 흐름 안에서, 또는 특정 컨테이너 안에서 어떻게 배치되고 동작할지를 정하는 다섯 가지 위치 지정 옵션 중 두 가지임: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • 앞의 두 가지는 flexbox와 grid 이전에 쓰이던 대체 레이아웃 체계에 가까움
      float 속성은 Grid와 함께 쓸 수도 있음. 가장 쉽고 기본인 레이아웃 체계인 일반 흐름은 빠져 있음: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • “table이 가장 오래된 CSS 레이아웃 체계이고 이메일에 아직 쓰인다”는 말은 정확하진 않음
      실제 HTML table 마크업은 웹페이지 일부를 나란히 배치하던 가장 오래된 방식 중 하나이고 이메일에서도 쓰이지만, 그건 CSS와는 별개의 얘기임
      CSS에는 display: table과 관련 값들이 있지만, 기억상 예전 IE에서는 float보다 쓰기 어려웠고 사용도 제한적이었음. 현대 웹에서도 많이 쓰이는 걸 본 적이 거의 없고, 주변 마크업 요구사항이 너무 빡빡해서일 수도 있음. 예를 들어 순서를 바꿀 방법이 없고, 여러 행이 필요하면 HTML 안에 그 역할을 할 요소를 넣어야 함
    • 덧붙이면, Flexbox Froggy가 flex를 배우는 가장 좋은 방법이고, CSS를 쓰기 전에 다른 사람이 만든 css-reset 규칙을 가져오는 게 좋음
      오래된 하위 호환 동작을 합리적인 기본값으로 바꿔주기 때문임. 예: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table은 가장 오래된 CSS 레이아웃 체계가 아님. 그건 흐름 레이아웃이고, 이상하게도 이 목록에는 아예 빠져 있음

  • float가 “컨테이너 박스의 왼쪽과 오른쪽 가장자리에 박스를 배치하는 데 쓰인다”는 설명은 정확하지 않음
    float로 그렇게 할 수는 있지만 flexbox와 grid가 나온 뒤로는 그렇게 쓰지 않음. 요소가 일반 흐름에서 빠져나가기 때문에 CSS를 배우는 사람에게는 레이아웃을 만들기 헷갈리게 하는 방식임
    float는 레이아웃 도구라기보다 조판 도구에 가까움. 글이 스스로 pedantic하다고 한다면 더 꼼꼼해야 함

    • HTML/CSS 입문에서는 이 기술들이 처음 만들어졌을 때 온라인 문서 렌더링만을 목적으로 했다는 사실을 꼭 설명해야 함
      기본적으로 다른 사람 컴퓨터에 있는 파일을 위한 Microsoft Word 같은 것으로 만들어졌고, 그래서 float 같은 초기 속성 대부분은 조판 레이아웃용이었음
    • 컨테이너 안의 모든 요소는 컨테이너의 위쪽으로, 그리고 텍스트 방향이 ltr인지 rtl인지에 따라 이전 요소의 오른쪽이나 왼쪽으로 떠오름
      남은 공간이 없으면 이전 요소들 아래로 내려감. 요소가 display: block이면 가로 공간을 전부 채우므로 그 뒤의 모든 요소가 그 아래로 떠오름. 그래서 이름이 float이고, 요소 위치를 계산하는 방식임
      float:left|right를 쓰면 같은 컨테이너 안의 다른 요소보다 먼저 해당 요소를 왼쪽이나 오른쪽으로 강제로 띄움. 물론 컨테이너가 flex나 grid를 쓰면 더 이상 이렇게 동작하지 않음
    • 1장의 큰 부분(https://book.mixu.net/css/1-positioning.html#float-positioni...)이 float의 복잡함과 특수한 흐름을 다루고, 그 동작을 다른 목적에 조심스럽게 재사용하고 응용하는 방법을 설명함
      특히 작성 당시에는 flexbox/grid 레이아웃이 없었다는 점을 감안하면 충분히 꼼꼼한 설명이라고 봄
    • flexbox 레이아웃은 이 도구가 과정을 단순화해 줌
      여러 속성을 신경 쓸 필요를 줄여줌: https://flexboxcss.com
    • float를 쓰지 않고 sidenote나 marginal note를 어떻게 배치할지 잘 모르겠음
      특히 노트가 문단 중간의 참조 위치에 맞춰 정렬돼야 할 때는 더 그렇다

  • 이런 글은 CSS Grid 이전 글이라도 부담스럽게 느껴짐. CSS Grid가 나오면서 CSS 레이아웃은 더 복잡해졌고, 웹 개발을 10년 했는데도 CSS는 여전히 깊이를 모르겠다는 느낌이 듦
    작동 방식, 희귀한 예외 상황, 내부 동작, 엄청난 기능 수가 그렇고, 최근에 관련 글도 썼음
    Grid Layouting의 세부를 다 따라잡기도 전에 subgrid와 container queries가 나왔음. 새로 추가된 여러 속성은 너무 특정한 경우를 다뤄서 쓸 일이 있을지 의심스러움(hanging-punctuation, font-palette 같은 것)
    문단 하이픈 처리 관련 속성만 최소 세 가지가 있고, filter 속성이 SVG를 사용하는 완전히 다른 종류의 필터도 지원한다는 걸 모를 수 있음. 이미지 스케일링 알고리즘을 조정할 수도 있고, border-radius는 타원형 모서리도 지원함
    어떤 기술이든 이런 말을 할 수는 있지만 CSS는 다름. 너무 많은 것을 너무 많은 방식으로 처리하고, 너무 많이, 너무 빨리 바뀜: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • “웹 개발을 10년 했는데도 CSS는 여전히 깊이를 모르겠다”는 게 무슨 뜻인지 궁금함
      더 오래 CSS를 다뤄왔지만 align-items인지 justify-content인지 외우려 하지도 않아서 기억이 안 남. flexbox를 쓰는 순간 https://css-tricks.com/snippets/css/a-guide-to-flexbox/를 열어봄
      Grid는 더 기억이 안 남. 그래도 몇 번 투덜대고 WTF 하다 보면 원하는 걸 충분히 쉽게 만들 수 있어서 깊이를 모르겠다는 느낌은 안 듦. CSS에 대해 이런 말을 많이 들었지만, 대부분의 경우 큰 노력 없이 원하는 레이아웃을 만들기 꽤 쉽다고 느낀다. 다만 JS처럼 CSS를 기억하지 않을 뿐임
    • CSS 레이아웃에 관심이 있다면 먼저 Flexbox와 CSS Grid를 배우는 걸 추천함
      둘 다 문서가 잘 되어 있고 비교적 직관적이며, 특히 grid는 특이한 동작이 적음
      요즘은 흐름 레이아웃을 크게 몰라도 되고, float와 table 레이아웃은 완전히 건너뛰어도 됨. 원래 목적이었던 텍스트 콘텐츠 안의 떠 있는 이미지와 실제 표에만 쓰면 됨
    • 프런트엔드 작업에서 늘 겪는 문제는 모든 글이 지난 15년간 최신 흐름을 계속 따라온 사람들을 독자로 상정한다는 것임
      처음 실제 프런트엔드 일을 하고 달러를 받았을 때는 perl에서 직접 DHTML을 생성하고 있었음. 그 약어를 치는 것조차 근육 기억 캐시에서 너무 멀리 사라져 손가락이 버벅일 정도임
      프런트엔드는 여섯 살짜리가 미적분을 아는 수준으로 알고 있어서, 이제는 따라잡을 방법이 없는 것처럼 느껴짐
    • 나도 비슷함. 그냥 grid를 여기저기 쓰기 시작하면 대체로 잘 동작함
      다만 plain CSS를 쓰고 전역 스타일시트도 보통 두지 않아서 꽤 도움이 됨
    • 더 나쁠 수도 있음. LaTeX일 수도 있으니까

  • UI 앱을 많이 개발하고, 주로 Angular를 쓰는데 요즘은 그냥 Bootstrap이나 Foundation 같은 프레임워크를 씀
    순수 CSS의 수많은 레이아웃 옵션은 특히 반응형 디자인에서 압도적이고 머리가 아픔. 순수 CSS를 시도해봤지만 결국 보일러플레이트를 많이 쓰고 미니 프레임워크 비슷한 걸 만들게 됨
    맞춤형 디자이너 웹사이트를 만드는 게 아니라면 계속 바퀴를 재발명할 필요는 개인적으로 못 느낌

    • 보일러플레이트는 여전히 좀 있지만, Open Props는 하이브리드 접근이라 좋아함
      CSS가 꼭 바퀴를 재발명하는 건 아니고, 어려운 레이아웃이나 원래 JS가 필요했을 작업을 더 쉽고 강력하게 만들 수 있게 해줌
      Bootstrap도 괜찮지만 고급 레이아웃 문제를 해결하려면 실제로 어떤 스타일이 적용되는지 보려고 요소 검사를 많이 하게 됨. 적어도 내 경험은 그랬고, 그래서 개인적으로는 CSS 쪽에 걸겠음
      기대하는 새 기능은 @scope 규칙인데, 스코프가 있는 스타일을 훨씬 쉽게 만들어줄 것 같음
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • flexbox, grid, media query 같은 최신 CSS 기능은 Bootstrap 같은 프레임워크의 필요를 줄이려고 추가된 것임

  • 이 글은 CSS Grid와 CSS columns 이전에 쓰인 건가?
    z-index 관련 글도 있음: https://philipwalton.com/articles/what-no-one-told-you-about...

    • 맞음. https://book.mixu.net/에 따르면 2015년에 쓰였고, 9년 된 글이라면 현대 CSS에 아주 유용하지 않을까 봐 걱정됨

  • 3장에서 margin collapsing과 negative margins를 다루는 걸 보면, 이 글은 오래된 레이아웃 기법 이해를 우선함
    레거시 코드베이스를 다룰 때는 가치가 있지만 새 프로젝트에서는 피하는 편이 좋음

  • CSS를 깊이 배우는 가장 좋은 방법은 뭘까? 공식 문서는 뭐가 현재 유효한지 아닌지 좀 이상하게 느껴짐

    • “actual”을 “current”라는 뜻으로 쓰는 건 주제와는 벗어나지만 내가 좋아하는 EU 영어식 표현 중 하나임
      네덜란드어에서 current가 actueel이고 actual은 daadwerkelijk로 번역된다는 걸 생각하면 충분히 이해됨. 원어민이 헷갈린다면 오히려 도움이 될 수도 있음
    • 가장 좋은 방법은 반복해서 뭔가를 만들어보는 것이라고 봄
      특정 학습 방식에 맞는 얘기일 수는 있지만, 실제로 스타일과 레이아웃을 조작해보면 동작 방식의 실용적인 면이 확실히 몸에 익음
      CSS를 쓸 때는 가능한 한 적게 쓰는 걸 목표로 함. CSS를 싫어해서가 아니라, 오히려 부당하게 나쁜 평판을 받는다고 생각하지만, 선언을 너무 많이 겹치지 않고 레이아웃을 더 효과적으로 스타일링하는 법을 배울 수 있기 때문임
    • 이번 주에 프런트엔드 기술을 다시 익히면서 시장 조사를 조금 해봤음
      CSS 기초에 가장 좋은 자료는 https://web.dev/learn/css였고, flexbox와 grid도 포함되어 있음
      디자인 가이드라인으로는 Refactoring UI를 추천함. The UX Book 같은 책에 부족한 실행 가능한 조언이 많음
      내 프로젝트에서는 Refactoring UI 저자의 TailwindCSS와 Daisy UI 컴포넌트를 써서 실제로는 raw CSS를 쓰지 않음. 처음에는 TailwindCSS가 inline CSS로 퇴보한 것처럼 느껴지지만, 대안보다 그냥 낫다. 한번 써보길 추천함
    • 여기서 “공식 문서”가 뭘 뜻하는지 궁금함. 명세서[1]인지, MDN[2]인지?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      전자는 새 웹 개발자를 위한 학습 자료가 아님. 후자도 공식이거나 권위 있는 문서는 아니지만, 보통 Baseline 지원과 브라우저 호환성 표에 대한 정보가 있음
    • flexbox를 배우고, 박스 모델을 배우고, 특히 margin과 padding을 언제 쓰는지 익히면 좋음
      스타일 계단식 적용이 어떻게 동작하는지도 배우면 좋고, 그래서 SCSS와 컴포넌트 개발을 써서 그걸 대부분 신경 쓰지 않게 만드는 이유도 이해하게 됨
      media query와 화면 크기별 타깃팅도 익히면 됨. 무엇보다 “CSS에서 x 하는 법”을 웹 검색하는 걸 부끄러워하지 않아도 됨. 명세는 거대하고 외울 게 많아서 오랫동안 자주 쓰지 않으면 전부 기억할 수 없음
답변달기