반응형
grid-gap
-
CSS Grid : Repeat함수, Minimax함수, Grid gap, Grid items, Grid area컴퓨터 알아가기/HTML CSS 2021. 5. 17. 19:30
▒ Repeat( ) 함수 Grid의 속성값으로 repeat( ) 함수를 사용할 수 있습니다. 행과 열을 만들때 좀 더 간소화한 코딩을 위한 겁니다. 다음과 같은 예가 있습니다. 위 예는 넓이가 300px을 3개로 나누는데 각각의 크기는 100px이라는 뜻입니다. 즉 다음은 같은 CSS 코드입니다. repeat(3, 100px) = 100px 100px 100px 그럼 repeat(2, 300px 500px)은 어떻게 해석이 될까요? => 300px과 500px을 2번 반복하라의 뜻입니다. 즉, 300px 500px 300px 500px 총 4개의 수직으로 나뉘어지겠죠. 지난 시간 다루었던 다음 그림을 repeat( )함수로 바꾸어 보겠습니다. 위 그림을 보면 수직으로는 반복이 힘들고 수평으로는 같은 F..