오늘 공부한 내용 💻
-
CSS - Grid Container
-
CSS - Grid Item
-
CSS - Grid Function, Unit
Grid
그리드는 2차원 레이아웃을 구현하기 위해 사용하며 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는데 탁월하다.
Grid Container
-
Grid Container란?
display: grid / inline-grid 속성을 가진 요소. -
grid-template-rows : 각 행의 개수와 너비를 지정한다.
-
grid-template-columns: 각 열의 개수와 너비를 지정한다.
-
grid-auto-rows / cloumns : 암시적으로 지정된 범위 밖의 행과 열의 너비를 지정한다.
-
justify-content : x축 정렬
-
align-content : y축 정렬
Grid Item
-
Grid Item 이란?
Grid container의 자식요소 -
grid-row : grid-row-start와 grid-row-end 를 한번에 사용하는 단축속성
-
grid-column: grid-column-start와 grid-column를 한번에 사용하는 단축속성
-
order: 기본값은 0으로, 값이 작은 요소가 더 앞에 정렬된다.
어려웠던 내용 🤢
Grid Function, Unit
-
Grid Function
- repeat() :같은 값을 반복할 때 사용한다.
- minmax() : 행과 열의 최소, 최대 너비를 지정한다.
- fit-content() : item의 크기를 content에 맞추지만, 최대 너비는 지정한 최대값을 넘지 않게 제한한다.
-
Grid Units
-
fr
-
min-content
-
max-content
-
auto-fill
-
auto-fit
-
더 공부할 내용 📃
- 그리드 단위
느낀점 👀
생각보다 많은 정보량에 당황하는 중 ,,,
실제 과제나 프로젝트를 하면서 적용을 해 봐야 이해가 더 잘 될것같다ㅜ
기본값이나 중요한 속성들은 암기가 필요한것 같으니 외워놔야될듯 ,,,
아 나 과제 언제해 ㅜㅜㅜ!!!! 😭
