column-gap (2) 썸네일형 리스트형 다단 나열: 다단으로 나열된 텍스트를 디자인 CSS의 다단 레이아웃(Column Layout) 기능을 사용하면 텍스트나 기타 콘텐츠를 신문이나 잡지처럼 여러 열로 나눠서 표시할 수 있습니다. 이 기능은 긴 텍스트 콘텐츠를 더 읽기 쉽고 시각적으로 매력적인 방식으로 나타내는 데 유용합니다. 다단 레이아웃의 주요 속성과 사용 방법을 상세하게 설명드리겠습니다. CSS 다단 레이아웃 기본 속성 column-count (열의 개수): column-count: 콘텐츠를 나눌 열의 수를 지정합니다. 예: column-count: 3;는 콘텐츠를 세 개의 열로 나눕니다. column-width (열의 너비): column-width: 각 열의 최적 너비를 설정합니다. 열의 수가 유동적으로 조정될 수 있습니다. 예: column-width: 200px;는 각 열의.. 그리드 레이아웃: 그리드 레이아웃을 활용하여 요소를 배치 그리드 컨테이너 설정 Grid Container 선언: display: grid 또는 display: inline-grid: 요소를 그리드 컨테이너로 선언합니다. grid는 블록 레벨, inline-grid는 인라인 레벨 그리드를 생성합니다. Grid Template Columns: grid-template-columns: 그리드의 열의 크기를 정의합니다. 단위(px, %, fr 등)를 사용하여 각 열의 크기를 지정할 수 있습니다. Grid Template Rows: grid-template-rows: 그리드의 행의 크기를 정의합니다. 마찬가지로 각 행의 크기를 단위로 지정합니다. Grid Template Areas: grid-template-areas: 그리드 영역을 이름으로 정의하고, 이를 사용하여 .. 이전 1 다음