카테고리: CSS

position: sticky로 첫 행·첫 열·합계 행을 고정하는 전체 예제를 제공합니다. 교차 셀의 쌓임 순서, 두 열 고정의 너비 기준, 스크롤·표 의미 구조와 모바일 점검을 설명합니다.

::marker를 이용해 목록 숫자와 내용의 굵기를 각각 조절합니다. span을 쓰는 기존 방식과 자동 번호·줄바꿈을 비교하고 표식이 사라지거나 굵기가 바뀌지 않는 원인을 점검합니다.

같은 order를 자동 배치와 행·열 직접 지정에 적용한 결과를 비교합니다. 음수·같은 값·초기화 실습과 기본 키보드 순서를 바꾸지 않는다는 점을 설명합니다.

고정 열과 1:2 비율 열, 고정·자동 행을 한 예제로 구성합니다. fr·auto·minmax·repeat의 차이, 암시적 행과 모바일 한 열 전환을 함께 설명합니다.

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·기본 키보드 순서는 유지되는 이유를 설명합니다.