옛 어휘: float, clear, table-display, 그리고 이게 은퇴된 이유

"옛것을 안다는 건 향수가 아니야 — 옛 코드 읽을 때 패턴 알아보고 새 코드에서 안 잡으려고."

이 레슨이 존재하는 이유

Layout 기법 셋이 웹을 1996 년부터 약 2017 년까지 운반했어: float, inline-block, display: table. 각자 CSS 에 진짜 layout primitive 없다는 사실에 대한 영리한 workaround. Flexbox (2017 baseline) 와 Grid (2017 baseline) 가 이것들을 대체. 여기서 이름 부르는 이유는 너가 (1) 옛 코드베이스 읽을 때 알아보고, (2) 원래 의도 이해하고, (3) 새 코드에서 우연히 잡지 않게.

Float: layout 이 된 이미지 wrap

float: left 와 float: right 가 한 가지 위해 설계됐어: 이미지나 pull-quote 주위에 텍스트 wrap. Element 가 옆으로 움직이고, 인라인 콘텐츠 (텍스트) 가 그 주위로 흐름. 이게 여전히 float 의 맞고 지원되는 사용.

웹이 float 를 그 너머로 멀리 가져갔어. 2 컬럼 layout, 3 컬럼 layout, 네비게이션 바, 이미지 갤러리, 전체 페이지 구조 — 다 float 위에 지어짐. 작동한 이유:

• Float 가 normal flow 에서 빠짐.
• 인접 float 가 컨테이너 채울 때까지 옆에 앉음.
• clear: both 가 element 를 앞 float 들 아래로 강제.

Layout 에 끔찍했던 이유:

• 부모가 자식이 flow 밖이라 zero height 로 collapse ("clearfix" hack 이 이걸 fix).
• 수직 정렬 불가.
• 동등 높이 컬럼이 JavaScript 나 table-display 트릭 필요.
• Source 순서가 시각 순서와 매치해야 함 — 재정렬 방법 없음.
• Float 로 가운데 정렬은 음수 margin hack 필요.

Float 가 여전히 맞는 자리

작은 이미지나 pull-quote 주위에 단락 wrap. 그게 다.

Clearfix: 여전히 보게 될 hack

Float 가 자식을 flow 에서 제거해서, 부모가 collapse. Clearfix 는 부모로 하여금 floated 자식 포함하게 강제하는 after-pseudo-element 트릭이었어:

모던 등가물은 부모의 display: flow-root. 선언 하나, pseudo-element 없음. 옛 코드베이스에서 clearfix 보게 될 거; 알아보고, 더하지 마.

inline-block layout

2010 년 즈음 inline-block 이 grid 같은 layout 의 float 대안이 됐어. 기법:

작동했지만 inline-block 이 인라인 공백 갭 문제 가짐 (Lesson 2): element 사이 source 공백이 보이는 공간으로 렌더, 픽셀 정확한 grid 깨짐. Workaround: 공백 source-comment, 부모에 font-size: 0, 음수 margin. 다 hack. Flexbox 와 Grid 가 이걸 완전히 제거.

display: table 과 table-cell

CSS 가 실제 <table> markup 안 쓰고도 어떤 element 든 table cell 처럼 행동하게 해 줘. display: table + display: table-cell 이 줬어:

• vertical-align: middle 로 수직 정렬.
• 자동 동등 높이 컬럼.
• Clearing 안 필요.

이게 가운데 정렬과 동등 높이 layout 의 "영리한" pre-Flexbox 해결책. 이제 Flexbox 와 Grid 가 같은 거 더 깨끗하게 해. 매우 특정 케이스 (고정 높이 컨테이너 안 단일 라인 텍스트) 의 수직 가운데 정렬에 가끔 여전히 display: table-cell 봐 — align-items: center 가진 Flexbox 가 이것도 대체.

옛 코드 읽기 만트라

여전히 알아야 할 이유

2014 년에 쓰인 코드베이스 받게 될 거. Layout 에 float: left 보여 주는 2013 년 튜토리얼 읽게 될 거. Legacy 프로젝트에 여전히 떠다니는 Bootstrap 3 보게 될 거. Legacy 이해한다는 건 혼란 없이 이것들 읽는다는 거고, 뭘로 대체할지 안다는 거.

표용 표 (layout 아님)

마지막 포인트: <table> markup 은 실제 tabular 데이터용. 행과 열 가진 스프레드시트 스타일 정보. Layout 에 <table> 쓰지 마; 그건 모든 차원 (접근성, 유지보수, 반응성) 에서 잘못된 1998 패턴. 실제 표에 <table> 써 — 그리고 모던 table CSS 배우기 (border-collapse, caption, thead/tbody/tfoot, position: sticky 통한 sticky header).

피파의 노트