display: grid (2) 썸네일형 리스트형 그리드 레이아웃: 그리드 레이아웃을 활용하여 요소를 배치 그리드 컨테이너 설정 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: 그리드 영역을 이름으로 정의하고, 이를 사용하여 .. 포지션과 레이아웃: 요소의 위치와 레이아웃을 제어 웹 페이지의 포지션(Position)과 레이아웃(Layout)에 대해 좀 더 상세하게 설명드리겠습니다. 이 두 개념은 웹 페이지의 구조를 정의하고, 요소들이 어떻게 배치되고 상호 작용하는지를 결정하는 핵심적인 요소입니다. 포지션(Position) 포지션은 HTML 요소가 페이지 내에서 어떻게 배치되는지를 결정합니다. 주요 포지션 속성은 다음과 같습니다: Static (정적 위치): 모든 HTML 요소의 기본 포지션입니다. 요소가 자연스러운 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성이 적용되지 않습니다. Relative (상대 위치): 요소의 원래 위치를 기준으로 상대적으로 이동시킵니다. top, right, bottom, left 속성으로 이동 거리를 지정할 수 있습.. 이전 1 다음