display:grid
디스플레이 그리드
사이트의 레이아웃은 어떻게 작업할까요?
display:grid
디스플레이 그리드
사이트의 레이아웃은 어떻게 작업할까요?
학습 주제
CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소간의 관계를 정의하는데 아주 탁월한 속성입니다.
| 속성 | 설명 |
|---|---|
| grid | grid |
| grid-area | grid-area |
| grid-auto-columns | grid-auto-columns |
| grid-auto-flow | grid-auto-flow |
| grid-auto-rows | grid-auto-rows |
| grid-column | grid-column 속성은 컬럼 속성을 설정합니다. |
| grid-column-end | grid-column-end 속성은 컬럼의 끝나는 위치를 설정합니다. |
| grid-column-gap | grid-column-gap 속성은 컬럼의 간격 설정합니다. |
| grid-column-start | grid-column-start 속성은 컬럼의 시작 위치를 설정합니다. |
| grid-gap | grid-gap |
| grid-row | grid-row |
| grid-row-gap | grid-row-gap |
| grid-row-start | grid-row-start |
| grid-row-end | grid-row-end |
| grid-template | grid-template 속성은 컬럼의 속성을 설정합니다. |
| grid-template-areas | grid-template-areas 속성은 가로 컬럼의 영역을 설정합니다. |
| grid-template-columns | grid-template-columns 속성은 가로 컬럼의 정렬 상태를 설정합니다. |
| grid-template-rows | grid-template-rows 속성은 세로 컬럼의 정렬 상태를 설정합니다 |
grid-template-columns
grid-template-columns 속성은 가로 컬럼의 정렬 상태를 설정합니다.
grid-template-rows
grid-template-rows 속성은 세로 컬럼의 정렬 상태를 설정합니다.
grid-column-start
grid-column-start 속성은 컬럼의 시작 위치를 설정합니다.
grid-column-end
grid-column-end 속성은 컬럼의 마지막 위치를 설정합니다.
grid-column
grid-column 속성은 컬럼의 위치를 설정합니다.
레이아웃1
grid를 이용한 레이아웃 설정입니다.
학습 주제
Gridbox는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식입니다.
flexbox에서 사용하는 속성은 부모요소와 자식요소를 나누어집니다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의합니다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요합니다.
- flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
- flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order
| 속성 | 설명 |
|---|---|
| align-content | align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다. |
| align-items | align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. |
| align-self | align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. |
| flex | flex 속성은 콘텐츠의 성질을 flex로 정의합니다. |
| flex-basis | flex-basis 속성은 요소의 기본 단위를 정의합니다. |
| flex-direction | flex-direction 속성은 요소의 정렬 방향을 정의합니다. |
| flex-flow | flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. |
| flex-grow | flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. |
| flex-shrink | flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. |
| flex-wrap | flex-wrap 속성은 요소의 줄 속성을 설정합니다. |
| justify-content | justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| justify-items | justify-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| justify-self | justify-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| place-content | place-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| place-items | place-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| place-self | place-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. |
| order | order 속성은 flex 콘텐츠의 순서를 정의합니다. |
align-items
align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
justify-content
jusify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
flex-direction
flex-direction 속성은 콘텐츠의 정렬 방향을 정의합니다.
flex-basis
flex-basis 속성은 요소의 기본 크기를 정의합니다.
flex-grow
flex-grow 속성은 요소의 크기를 숫자를 통해 확대합니다.
flex-shrink
flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap
flex-wrap 속성은 요소의 줄 속성을 정의합니다.
flex
flex 속성은 flex-grow, flex-shrink, flex-basis 속성을 정의합니다.
flex: 1
/* flex-basis : 단위가 있고 속성을 한개만 사용한 경우 */
flex: 100px
/* flex-grow | flex-shrink : 단위가 없고 속성 두개 사용한 경우 */
flex: 1 1;
/* flex-grow | flex-basis */
flex: 1 200px;
/* flex-grow | flex-shrink | flex-basis */
flex: 1 1 100px;