태그: 레이아웃
4편
-
CSS position 심화 | 포함 블록, 쌓임 맥락, 레이아웃 영향
position은 “어디에 붙일지”만이 아니라, 요소가 일반 문서 흐름(normal flow)에 남을지 이탈할지를 결정합니다. 이탈한 박스는 부모의 블록 레벨 세로 배치에서 빠지며, 형제와의 마진 병합 관계도 달라집니다.
-
CSS 박스 모델: margin, padding, border와 box-sizing
박스 모델·사용값·퍼센트 기준·BFC·마진 병합·box-sizing까지. 레이아웃 엔진이 너비·마진을 확정하는 순서와 병합이 끊기는 조건을 고급 관점에서 정리합니다. CSS 박스 모델은 모든 HTML 요소를 상자로 보는 관점입니다. 내용물(Content)은 상자 안 물건, padding은 완충재, border는 상자 테두리, margin은 상자 바깥의 간격이라고 이해하시면 레이아웃이 잡힙니다.
-
CSS Flexbox 입문: flex-direction, justify-content, align-items로 레이아웃 잡기
CSS Flexbox 기초 정리. Flexbox 기본 개념, flex-direction, justify-content와 align-items 정렬, flex-wrap, flex 아이템 속성을 예제로 설명합니다.
-
CSS Grid 레이아웃: grid-template-areas, fr·minmax·auto-fit, Flexbox와 함께 쓰기
CSS Grid 정리. display: grid와 grid-template 설정, grid-template-areas, fr·gap·repeat·minmax·auto-fit, 아이템 배치와 정렬, 대시보드 레이아웃 예제와 Flexbox 조합을 다룹니다.