반응형
[CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY)
부모 박스 display: flex; display: `flex`; flex-direction: `row-reverse`, `column`, ... 중심축 수평, 수직축 정하기 flex-wrap: `wrap`, ... 줄바꿈 >>> flex-flow: 단축 속성 justify-content: `center`, `f..
snupi.tistory.com
길이 조정하기
부모 태그에 display: grid;
grid-template-rows: {row1의 높이} {row2의 높이} {...} ... grid-template-columns: {column1의 너비} {column2의 너비} {...} ... --> grid-template: {-rows ~} / {-columns ~} --> `1fr`: 전체 길이의 한 부분; fraction --> `minmax({min}, {max})` 값 --> `min-content`/`max-content` 값 min-content: 요소의 item에 대한 min 길이 max-content: 요소의 item에 대한 max 길이 --> `repeat(n, 값)` 값으로 반복표현 가능 --> `repeat(auto-fit/auto-fill, 값)` auto-fit: 유동적인 사이즈로, 전체 길이에 맞게 설정됨 auto-fill: 정확한 사이즈로, 빈공간을 두도록 설정됨 grid-auto-rows: 요소가 지정 개수보다 많아질 때의 row의 높이 grid-auto-flow: row(기본값), column, ... 요소가 지정 개수보다 많아질 때의 늘어나는 방향 grid-auto-columns: (flow가 column일 때) 요소가 지정 개수보다 많아질 때의 column의 너비 column-gap: ... 열끼리의 gap row-gap: ... 행끼리의 gap --> gap: 행, 열끼리의 gap
- grid의 gap에 color 값은 따로 없다 --> grid 부모 박스의 background-color 값을 바꾸는 방법
레이아웃 라인 지정하기
(template 아래) 행/열 - 시작/끝 라인 속성은 그리드의 자식 요소에 적용시킨다
grid-template-areas: "header header header header" "content content content nav" "content content content nav" "footer footer footer footer" // 자식 태그에 `grid-area: header;` 로 지정해주어야 한다 --> grid-template: "header header header header" 1fr "content content content nav" 2fr "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; 로 표현 가능 // ! 자식 요소에 ! grid-column-start: 열 시작 라인 지정 (1: 첫번째 줄 ~) grid-column-end: 열 끝 라인 지정 (~ n+1: 마지막 줄) grid-row-start: 행 시작 라인 지정 (1 ~) grid-row-end: 행 끝 라인 지정 (~ n+1) --> `grid-column: n / m;`, `grid-row: n / m;` --> `grid-area: {row-start} / {column-start} / {row-end} / {column-end};` --> m이 -1이라면 끝 라인, -2라면 끝에서 두번째 줄, ... --> `span n` 으로 표현 가능; n개의 공간 차지
- 부분부분 길이 넓은 grid --> 부모:nth-child(x), 부모:nth-child(y), ... { grid-column-start: span 2; }
Content(; 그리드) 와 Item(; 텍스트) 의 정렬하기
~-self 속성은 그리드의 자식 요소에 적용시킨다
align-content: row와 column 틀 안에서 content 수직 정렬 (높이값 확인!) justify-content: row와 column 틀 안에서 content 수평 정렬 --> `place-content: {align-content} {justify-content} align-items: row와 column 틀 안에서 item 수직 정렬 (높이값 확인!) justify-items: row와 column 틀 안에서 item 수평 정렬 --> `place-items: {align-items} {justify-items} // ! 자식 요소에 ! align-self: row와 column 틀 안에서 수직 정렬 (높이값 확인!) justify-self: row와 column 틀 안에서 수평 정렬 --> `place-self: {align-self} {justify-self}
CSS GRID GARDEN
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com


반응형
'Web.d' 카테고리의 다른 글
[Chrome][CSS] 작업하는데 PC에서 CSS 수정이 안 먹혀요 (0) | 2021.09.02 |
---|---|
[CSS][SCSS] SCSS의 기본 개념 (0) | 2021.08.15 |
[CSS] Flexbox의 속성 정리 (FLEXBOX FROGGY) (0) | 2021.08.09 |
[React] Joamflix (Nomad Coders') (0) | 2021.08.03 |
[CSS] Eric Meyer 의 reset.css 코드 + all:unset (0) | 2021.07.18 |