CSS 레이아웃 정리글 입니다
display
display 속성은 요소의 박스 유형을 결정합니다. 이 속성의 주요 값들은 다음과 같습니다:
block: 요소가 블록 수준 요소로 표시됩니다. 블록 수준 요소는 새로운 줄에서 시작되며, 가능한 한 부모의 전체 너비를 차지합니다. 예:
<div>, <p>, <h1>)등.
inline: 요소가 인라인 요소로 표시됩니다. 인라인 요소는 새로운 줄에서 시작되지 않으며, 요소의 내용만큼의 너비를 차지합니다. 예:
<span>, <a>, <strong>등.
inline-block: 요소는 인라인 요소처럼 표시되지만, 블록 수준 요소와 같은 스타일링 속성 (너비, 높이, 여백 등)을 가집니다.
none: 요소가 화면에 표시되지 않습니다. visibility: hidden; 과는 다르게, display: none;은 요소를 문서의 흐름에서 완전히 제거합니다.
flex: 요소가 Flexbox 컨테이너로 표시됩니다.
grid: 요소가 Grid 컨테이너로 표시됩니다.
table, table-row, table-cell 등: 요소를 표와 관련된 요소처럼 표시합니다.
position
position 속성은 요소의 위치 지정 방식을 정의합니다. 이 속성의 주요 값들은 다음과 같습니다:
static: 기본값. 요소는 일반적인 문서 흐름에 따라 위치됩니다. top, right, bottom, left 속성은 무시됩니다.
relative: 요소는 일반적인 문서 흐름에 따라 위치되지만, top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있습니다.
absolute: 요소는 가장 가까운 position 값이 static이 아닌 부모 요소 (또는 컨테이너)에 대해 위치됩니다. 해당 부모 요소를 기준으로 top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.
fixed: 요소는 뷰포트에 대해 위치됩니다. 스크롤하더라도 요소의 위치는 변하지 않습니다. top, right, bottom, left 속성을 사용하여 위치를 지정할 수 있습니다.
sticky: 요소는 일반적인 문서 흐름에 따라 위치되지만, 스크롤 위치에 따라 relative와 fixed의 혼합처럼 동작합니다.
FLEX
컨테이너에 적용되는 속성
display
flex: 블록 레벨 Flex 컨테이너를 정의합니다.
inline-flex: 인라인 레벨 Flex 컨테이너를 정의합니다.
flex-direction: Flex 아이템들이 배치되는 방향을 설정합니다.
row: 아이템들을 텍스트 방향과 동일하게 수평으로 배치합니다.
row-reverse: 아이템들을 반대의 텍스트 방향으로 수평 배치합니다.
column: 아이템들을 수직으로 배치합니다.
column-reverse: 아이템들을 반대의 수직 방향으로 배치합니다.
flex-wrap: Flex 아이템들이 컨테이너를 벗어날 경우 감싸지는지 설정합니다.
nowrap: 아이템들을 한 줄에 배치합니다.
wrap: 아이템들을 여러 줄에 배치합니다.
wrap-reverse: 아이템들을 여러 줄에 반대 방향으로 배치합니다.
flex-flow: flex-direction과 flex-wrap의 단축 속성입니다. 두 개의 값을 동시에 설정할 수 있습니다.
justify-content: 주 축(main axis)에서 아이템들 간의 정렬을 설정합니다.
flex-start: 아이템들을 시작점으로 정렬합니다.
flex-end: 아이템들을 끝점으로 정렬합니다.
center: 아이템들을 중앙 정렬합니다.
space-between: 시작과 끝 아이템은 각각 컨테이너의 시작점과 끝점에 정렬되며, 나머지 아이템들은 동일한 간격으로 배치됩니다.
space-around: 모든 아이템은 동일한 공간을 갖게 됩니다.
space-evenly: 아이템들 사이와 컨테이너의 양 끝과 아이템 사이의 간격이 동일하게 정렬됩니다.
align-items: 교차 축(cross axis)에서 아이템들의 정렬을 설정합니다.
stretch: 아이템을 컨테이너의 전체 높이나 너비로 늘립니다.
flex-start: 아이템들을 시작점으로 정렬합니다.
flex-end: 아이템들을 끝점으로 정렬합니다.
center: 아이템들을 중앙 정렬합니다.
baseline: 아이템들을 텍스트의 베이스라인에 따라 정렬합니다.
align-content: 여러 줄의 아이템들을 교차 축에서 정렬합니다. (단일 줄의 Flex 컨테이너에는 적용되지 않습니다.)
stretch: 아이템 줄들을 컨테이너에 맞게 늘립니다.
flex-start: 아이템 줄들을 시작점으로 정렬합니다.
flex-end: 아이템 줄들을 끝점으로 정렬합니다.
center: 아이템 줄들을 중앙으로 정렬합니다.
space-between: 첫 줄은 시작점에, 마지막 줄은 끝점에 정렬되며, 나머지 줄들은 동일한 간격으로 배치됩니다.
space-around: 모든 줄들이 동일한 간격을 갖게 됩니다.
space-evenly: 줄들 사이와 컨테이너의 양 끝과 줄 사이의 간격이 동일하게 정렬됩니다.
Flex 아이템에 적용되는 속성
order: 아이템의 배치 순서를 정의합니다. 숫자 값으로, 기본값은 0입니다.
flex-grow: 아이템이 Flex 컨테이너 내에서 얼마나 성장할 수 있는지의 정도를 정의합니다. 기본값은 0입니다.
flex-shrink: 아이템이 Flex 컨테이너 내에서 얼마나 줄어들 수 있는지의 정도를 정의합니다. 기본값은 1입니다.
flex-basis: 아이템의 기본 크기를 정의합니다. 값으로는 auto, %, px 등의 단위가 들어갈 수 있습니다.
flex: flex-grow, flex-shrink, flex-basis의 단축 속성입니다. 여러 가지 값의 조합으로 사용될 수 있습니다.
align-self: 개별 아이템의 교차 축 정렬을 조절합니다. auto, stretch, flex-start, flex-end, center, baseline 등의 값을 가질 수 있습니다.
auto: 아이템의 align-self 값이 컨테이너의 align-items 값과 동일하게 설정됩니다.
stretch: 아이템이 교차 축의 전체 길이를 차지하도록 늘려집니다.
flex-start: 아이템이 교차 축의 시작점으로 정렬됩니다.
flex-end: 아이템이 교차 축의 끝점으로 정렬됩니다.
center: 아이템이 교차 축의 중앙으로 정렬됩니다.
baseline: 아이템이 자신의 베이스라인을 기준으로 정렬됩니다.
각 속성은 특정 디자인 및 레이아웃 요구 사항에 따라 사용되며, 이러한 속성들의 조합으로 복잡한 레이아웃도 간단하게 구성할 수 있습니다. Flexbox는 반응형 디자인과도 잘 호환되며, 다양한 화면 크기와 장치에 적합한 유연한 레이아웃을 생성하는 데 유용합니다.
Flexbox의 핵심은 "유연성"입니다. flex-grow, flex-shrink, 및 flex-basis와 같은 속성을 사용하여 아이템의 크기와 공간 분배를 동적으로 조절할 수 있습니다. 이를 통해 공간이 부족하거나 과도할 때 아이템의 크기를 자동으로 조절하여 최적의 레이아웃을 제공할 수 있습니다.
Grid
부모 (컨테이너)에 적용되는 속성
display
grid: 요소를 블록 수준의 그리드 컨테이너로 만듭니다.
inline-grid: 요소를 인라인 수준의 그리드 컨테이너로 만듭니다.
grid-template-rows 및 grid-template-columns 행과 열의 크기 및 구조를 정의합니다.
예: grid-template-rows: 100px 200px; grid-template-columns: 1fr 2fr;는 두 개의 행과 두 개의 열을 정의하며, 첫 번째 행의 높이는 100px, 두 번째 행의 높이는 200px, 첫 번째 열의 너비는 남은 공간의 1/3, 두 번째 열의 너비는 남은 공간의 2/3이 됩니다.
grid-template-areas 속성은 그리드의 구조를 시각적으로 표현하고 각 영역에 이름을 부여하는 데 사용됩니다.
이렇게 정의된 이름은 그리드 아이템의 배치를 결정할 때 사용할 수 있습니다.
grid-template-areas 사용 방법
1. 영역 정의: 그리드 컨테이너에 grid-template-areas 속성을 사용하여 영역 이름을 지정합니다. 각 이름은 각 셀을 대표하며, 동일한 이름이 연속으로 나타나면 해당 영역이 확장됩니다.css -------------------------- Copy code grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; grid-template --------------------------위의 예에서는 3x3 그리드가 정의되었으며, header와 footer는 각각 전체 너비를 차지하고, sidebar는 첫 번째 열, content는 나머지 두 열을 차지합니다.
2. 아이템에 영역 지정: 각 그리드 아이템에 grid-area 속성을 사용하여 위에서 정의한 영역 이름을 지정합니다.css ------------------------ .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; } -----------------------이렇게 설정하면 각 아이템이 그리드 내에서 지정된 영역에 자동으로 배치됩니다.
결론적으로, grid-template-areas를 사용하면 그리드의 구조를 쉽게 정의하고 관리할 수 있으며, 그리드 아이템의 배치도 간편하게 할 수 있습니다.
grid-template
grid-template-rows, grid-template-columns, 및 grid-template-areas의 단축 속성입니다.
grid-auto-rows 및 grid-auto-columns
그리드에 명시적으로 정의되지 않은 행 및 열의 크기를 설정합니다.
예: grid-auto-rows: 100px;는 새로운 행이 자동으로 추가될 때마다 해당 행의 높이가 100px가 되도록 합니다.
grid-auto-flow
아이템이 그리드에 어떻게 배치되는지 결정하는 알고리즘을 설정합니다.row: 아이템들이 행을 따라 차례대로 배치됩니다.
column: 아이템들이 열을 따라 차례대로 배치됩니다.
dense: 빈 공간을 채우기 위해 아이템들이 가능한 위치에 배치됩니다.
grid-gap, grid-row-gap, grid-column-gap
행과 열 사이의 간격을 설정합니다.
예: grid-gap: 20px 10px;는 행 간격이 20px, 열 간격이 10px가 됩니다.
justify-content, align-content
그리드 전체를 수평 및 수직 축에서 어떻게 정렬할지 결정합니다.
주로 그리드 컨테이너의 크기가 부모 요소의 크기보다 작을 때 사용됩니다.
사용 가능한 값: start, end, center, stretch, space-around, space-between, space-evenly 등.
justify-items, align-items
개별 그리드 셀 내의 아이템을 수평 및 수직 축에서 어떻게 정렬할지 결정합니다.
사용 가능한 값: start, end, center, stretch 등.
place-content, place-items
위의 정렬 관련 속성들의 단축 속성입니다.
grid
grid 속성은 CSS Grid 레이아웃에서 사용되는 여러 그리드 관련 속성들의 단축 속성입니다. 이 단축 속성을 사용하면 여러 그리드 속성들을 한 번에 지정할 수 있습니다.
grid 속성은 주로 다음 두 속성의 값을 함께 지정하는 데 사용됩니다:
grid-template-rows
grid-template-columns예를 들어, 아래와 같이 개별적으로 두 속성을 지정하는 대신: css --------------------------------------- Copy code .container { grid-template-rows: 1fr 2fr; grid-template-columns: 200px auto; } ---------------------------------------grid 단축 속성을 사용하여 같은 설정을 다음과 같이 한 줄로 간단하게 표현할 수 있습니다:
css -------------------------------- Copy code .container { grid: 1fr 2fr / 200px auto; } --------------------------------여기서 / 기호는 grid-template-rows와 grid-template-columns의 값을 구분하는 데 사용됩니다.
이처럼 grid 단축 속성을 사용하면 코드를 더 간결하게 만들 수 있으나, 처음 CSS Grid를 배우는 사람들에게는 개별 속성을 사용하는 것이 더 직관적일 수 있습니다. 그러나 익숙해지면 grid 단축 속성을 사용하여 빠르고 간결하게 그리드 레이아웃을 설정할 수 있습니다.
자식 (아이템)에 적용되는 속성
grid-column-start, grid-column-end, grid-row-start, grid-row-end
아이템의 시작 및 끝 위치를 지정합니다.
grid-column, grid-row
시작 및 끝 위치를 지정하는 단축 속성입니다.
grid-area
아이템이 차지할 영역을 지정하거나, grid-template-areas에서 정의한 이름을 참조합니다.
justify-self, align-self
아이템을 개별적으로 그리드 셀 내에서 수평 및 수직 축에서 어떻게 정렬할지 결정합니다.
사용 가능한 값: start, end, center, stretch 등.
place-self
위의 정렬 관련 속성들의 단축 속성입니다.
z-index
아이템의 쌓임 순서를 결정합니다.
이것이 CSS Grid의 모든 주요 속성에 대한 포괄적이고 자세한 설명입니다. CSS Grid는 복잡한 2차원 레이아웃을 간편하게 구성할 수 있는 강력한 도구입니다.
