display: grid;
-
display: grid;
요소를 그리드 컨테이너로 지정한다. 이는 그 안에 있는 자식 요소들을 격자 형태로 배치하고 정렬할 수 있게 해준다. -
grid-template-columns: repeat(5, 1fr);
그리드의 열(column)의 크기를 정의한다.grid-template-columns속성은 열의 개수를 지정하는 역할을 한다.
repeat(5, 1fr)에서1fr에는 남은 공간을 동일한 비율로 나눈다는 뜻이고,repaet(5, *)는*을 5번반복하겠다는 의미이다. 따라서 해당 grid 컨테이너 영역은 동일한 너비의 5개의 열을 가지게 된다. -
column-gap: 6px;
열 사이의 간격을 설정한다. -
row-gap: 12px;
행(row) 사이의 간격을 설정한다.
display: flex;
-
display: flex;
요소를 flex 컨테이너로 설정한다. flex 컨테이너란 내부의 요소들을 열 또는 행의 한축을 기반으로 배치하고 정렬하는 방식이다. 유연한 공간 할당이 가능하다. -
flex-direction: column;
Flex 컨테이너 내의 아이템들의 배치 방향을 설정한다. default는row(가로)이며, 세로로 하고 싶은 경우column으로 설정한다.
flex
Flexbox 레이아웃에서 개별 Flex 아이템에 적용되는 속성이다. 이 속성은 Flex 아이템의 크기 및 확장 및 축소 동작을 조정하는 데 사용되며 flex 속성은 flex-grow, flex-shrink, flex-basis 를 가지고 있다.
-
flex-grow: 1;
이 값은 아이템이 남는 공간을 어떻게 확장할 것인지를 지정한다. 1로 설정되면, 아이템은 가능한 한 여유 공간을 모두 차지한다. default는 0으로, 남는 공간을 확장하지 않는다. -
flex-shrink: 1;
이 값은 아이템이 부모 컨테이너보다 작아지는 경우 얼마나 줄어들지 설정한다. default는 1로 아이템은 축소 가능한 상태이다. 0으로 설정하면 아이템은 축소되지 않는다. -
flex-basis: 100%;
이 값은 아이템의 초기 크기를 지정한다.100%로 설정하면, 아이템은 초기로 컨테이너의 100%를 차지하게 된다. 크기가 없다고 볼 수 있다. default는auto로, Flex 아이템이 초기 크기를 가지지 않음을 의미한다. 아이템의 내용과 크기에 따라 자동으로 크기가 결정된다는 뜻이다.
object-fit
이미지나 비디오와 같은 대체 콘텐츠를 조절하는 데 사용된다. 이미지의 크기를 유지하면서 해당 요소의 영역에 맞게 조절할 수 있습니다. 해당 속성의 값들은 다음과 같다.
-
fill
default값이며, 콘텐츠를 요소 영역에 꽉 채워 크기를 조절한다. -
contain
비율을 유지하며 콘텐츠를 영역 안에 맞게 크기를 조절한다. 여백이 발생할 수 있다. -
cover
콘텐츠를 확대 또는 축소하여 영역을 가득 채우며 비율을 유지한다. 이미지가 잘릴 수 있다. -
none
콘텐츠를 크기 조절 없이 원래 크기로 표시한다. -
scale-down
contain과none중에서 작은 크기로 표시하며, 원본이 작으면 원래 크기로, 크거나 같으면contain처럼 작동한다.
