디자인 아틀라스▦레이아웃
벤토 그리드, 메이슨리, 8pt 그리드 — 화면을 나누고 배치하는 방식. — 36개 항목
플렉스박스 정렬Flexbox alignment
`justify-content`(주축)와 `align-items`(교차축)로 플렉스 아이템을 정렬하는 두 축의 규칙.
CSS 그리드 영역CSS grid areas
칸에 좌표 대신 이름을 붙여(`grid-template-areas`) 레이아웃을 "그림처럼" 배치하는 CSS Grid 기능.
auto-fill vs auto-fit
`repeat(auto-fill, …)`은 빈 칸을 남겨두고, `repeat(auto-fit, …)`은 빈 칸을 접어 남은 아이템을 늘립니다 — 미디어 쿼리 없는 반응형 그리드의 핵심 차이.
내재적 크기Intrinsic sizing
컨테이너가 아니라 내용물 자체가 "얼마나 넓어야 하는지"를 정하는 크기 키워드 3종 — `min-content`·`max-content`·`fit-content()`.
스티키 푸터Sticky footer
내용이 짧아도 화면 맨 아래에 붙고, 내용이 길어지면 자연스럽게 그 아래로 밀리는 푸터 배치법.
멀티 컬럼Multi-column layout
신문처럼 텍스트를 여러 단으로 자동으로 흘려보내는 CSS 기능. `columns` 한 줄이면 끝입니다.
스택 레이아웃Stack layout
세로로 쌓인 요소 사이의 간격을 딱 한 곳에서만 관리하는 레이아웃 프리미티브. Heydon Pickering·Andy Bell의 Every Layout에서 제안됐습니다.
클러스터 레이아웃Cluster layout
너비가 제각각인 아이템(태그, 버튼)들을 균일한 간격으로 줄바꿈시키는 레이아웃 프리미티브. `flex-wrap` + `gap`이 전부입니다.
사이드바 레이아웃Sidebar layout
고정 폭 사이드바 + 나머지를 채우는 본문. 미디어 쿼리 없이 컨테이너가 좁아지면 자동으로 세로로 쌓입니다.
스위처 레이아웃Switcher layout
가로로 나란한 배치와 세로 스택 배치 사이를 미디어 쿼리 없이 "컨테이너 자체 폭"만으로 전환하는 레이아웃.
커버 레이아웃Cover layout
header·footer가 있든 없든 가운데 요소를 화면 안에서 항상 수직 중앙에 두는 레이아웃. `margin-block: auto` 트릭 하나로 동작합니다.
프레임 레이아웃Frame layout
이미지·영상처럼 원본 비율이 제각각인 콘텐츠를 정해진 종횡비 틀에 가둬 자르는 레이아웃. `aspect-ratio` + `object-fit: cover`가 핵심입니다.
릴 레이아웃Reel layout
줄바꿈 없이 가로로만 스크롤되는 한 줄 레이아웃. 넷플릭스 썸네일 행이 전형적인 예입니다.
Z 스택Z-stack
여러 요소를 같은 그리드 칸(`grid-area`)에 겹쳐 넣어, `position: absolute` 없이 레이어를 쌓는 방법.
논리적 속성Logical properties
`left`·`right` 대신 `inline-start`·`inline-end`처럼 "글의 흐름 방향" 기준으로 쓰는 속성. 언어가 RTL로 바뀌거나 세로쓰기가 되면 자동으로 따라옵니다.
클램프 레이아웃Clamp-based sizing
`clamp(최소, 선호값, 최대)` 하나로 미디어 쿼리 없이 최소~최대 사이를 뷰포트에 비례해 매끄럽게 늘고 줄게 만드는 기법.
오버플로우와 스크롤 컨테이너Overflow & scroll containers
콘텐츠가 상자보다 클 때 무슨 일이 벌어지는지를 정하는 `overflow` 네 가지 값 — 넘치게 두거나, 자르거나, 스크롤을 만들거나.
카드 그리드Card grid
카드 개수를 미리 정하지 않고 `repeat(auto-fit, minmax(…))` 한 줄로 화면 폭에 맞게 열 개수를 스스로 정하는 실무 패턴.
벤토 그리드Bento grid
일본 도시락(벤토)처럼 크기가 다른 칸들을 하나의 격자 안에 빈틈없이 채워 넣는 레이아웃.
메이슨리Masonry
벽돌을 쌓듯, 높이가 제각각인 카드를 빈틈없이 채워 넣는 다단 레이아웃. Pinterest가 대표 사례입니다.
홀리 그레일 레이아웃Holy grail layout
헤더·좌측 내비·본문·우측 사이드바·푸터로 이루어진, 웹의 가장 고전적인 5단 페이지 구조.
8pt 그리드8pt grid
모든 여백·크기를 8의 배수(8, 16, 24, 32…)로만 정하는 스페이싱 규칙. 디자이너와 개발자가 숫자를 눈대중이 아니라 규칙으로 맞춥니다.
12분할 그리드12-column grid
화면 폭을 12칸으로 나눠, 요소마다 몇 칸을 차지할지(span)로 크기를 정하는 웹의 표준 그리드 체계.
황금비Golden ratio
1 : 1.618 비율. 큰 변을 작은 변으로 나눈 몫이 전체를 큰 변으로 나눈 몫과 같아지는, 고전 회화·건축부터 쓰인 비례입니다.
삼분할 법칙Rule of thirds
화면을 가로·세로 3등분해서 생긴 4개의 교차점 근처에 중요한 요소를 배치하는 구도 원칙. 사진·영상 프레이밍의 기본기입니다.
여백Whitespace
요소 사이의 빈 공간. 아무것도 없는 게 아니라, 무엇이 한 덩어리이고 무엇이 중요한지 알려주는 디자인 도구입니다.
스플릿 스크린Split screen
화면을 좌우(또는 상하) 두 영역으로 나눠 서로 다른 콘텐츠나 대비되는 메시지를 나란히 보여주는 레이아웃.
스티키 헤더Sticky header
스크롤을 내려도 화면 위쪽에 계속 붙어 있는 헤더. `position: sticky` 한 줄로 만듭니다.
오프캔버스Off-canvas
평소엔 화면 밖에 숨어 있다가, 버튼을 누르면 옆에서 슬라이드로 밀고 들어오는 패널. 모바일 햄버거 메뉴의 정체입니다.
컨테이너 쿼리Container queries
뷰포트 크기가 아니라 "자기 부모 컨테이너의 크기"에 반응해 스타일이 바뀌는 CSS 기능. 같은 카드가 놓인 자리에 따라 알아서 레이아웃을 바꿉니다.
브레이크포인트Breakpoints
화면 폭이 특정 값을 지나는 순간 레이아웃을 통째로 바꾸는 기준선. 모바일·태블릿·데스크톱을 가르는 경계입니다.
비대칭 레이아웃Asymmetric layout
좌우·상하를 똑같이 맞추지 않고 일부러 무게를 한쪽으로 쏠리게 배치하는 구성. 정적인 대칭 대신 긴장감과 시선의 흐름을 만듭니다.
풀 블리드Full bleed
본문은 가운데 좁은 폭으로 제한하면서, 특정 이미지만 화면 양끝까지 꽉 채우는 기법. 인쇄에서 종이 끝까지 잉크가 "번지는(bleed)" 것에서 이름을 땄습니다.
브로큰 그리드Broken grid
보이지 않는 격자를 세워두고 일부러 그 선을 넘어가게(겹치고, 기울이고, 튀어나오게) 배치하는 편집 디자인 기법.
종횡비Aspect ratio
가로:세로 비율을 고정해서, 폭이 바뀌어도 요소가 항상 같은 비율을 유지하게 하는 속성. `aspect-ratio: 16 / 9` 한 줄이면 됩니다.
거터Gutter
그리드나 다단 레이아웃에서 칼럼과 칼럼 사이에 두는 고정된 여백. 칼럼 자체가 아니라 칼럼 "사이"를 가리키는 말입니다.