최근 글

grid·inline-grid의 바깥 표시 방식과 내부 Grid 배치를 구분합니다. 한 열과 두 열, 문장 안의 격자를 전체 예제로 비교하고 너비·직접 자식·적용 오류를 확인합니다.

기존 grid-gap 계열과 현재 gap·row-gap·column-gap의 대응을 정리합니다. 행·열 간격 네 가지 비교와 너비 계산, padding·margin 및 공간 배분의 차이를 설명합니다.

명시적 첫 행과 나중에 생기는 암시적 행의 차이를 전체 예제로 설명합니다. 고정 높이·minmax·1fr·반복 패턴의 선택 기준과 아이템 추가 시 결과를 비교합니다.

기본 행 높이와 grid-auto-rows: 1fr를 전체 예제로 비교합니다. 카드 수·내용 증가와 명시적 행의 차이, 작은 화면에서 한 열로 전환하는 방법까지 설명합니다.

auto·시작·가운데·끝·늘림을 하나의 전체 예제로 비교합니다. 고정 높이와 자동 여백이 정렬에 미치는 영향, column 방향과 여러 줄 배치의 차이도 설명합니다.

order의 기본값, 음수, 같은 값의 정렬 기준을 전체 예제로 확인합니다. row-reverse와의 차이와 화면 순서를 바꿔도 HTML·기본 키보드 순서는 유지되는 이유를 설명합니다.

부모의 두 축 정렬로 카드를 가운데 놓는 전체 예제를 제공합니다. 주축 방향 비교, 모바일 너비 대응, 최소 화면 높이와 긴 내용의 잘림 문제까지 함께 설명합니다.

nowrap·wrap·wrap-reverse의 차이를 같은 크기의 아이템 예제로 비교합니다. flex-shrink, 간격, 세로 방향의 높이 제한 때문에 예상과 다르게 배치되는 원인도 설명합니다.

video와 object-fit으로 배경 영역을 채우고 HTML 텍스트를 겹치는 전체 예제입니다. 재생·일시 정지, 자동 재생 실패, 동작 줄이기와 모바일·용량 확인도 함께 다룹니다.

:hover::before가 선택하는 대상과 부모 색·가상 요소 색의 상속 차이를 전체 예제로 설명합니다. 가상 요소 뒤의 상태 선택에 관한 최신 명세의 조건과 브라우저 지원도 구분합니다.