grid-area
-
CSS Grid Layout : Grid-template-area 속성, Overlapping(중첩) 요소처리컴퓨터 알아가기/HTML CSS 2021. 5. 18. 19:30
이제부터는 CSS Grid Layout에 대해 조금 더 들어가 보겠습니다. ▒ grid-template-area 속성 본 속성을 사용하면 grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-area 속성값으로 사용되는 섹션에 이름을 지정하고 관리할 수 있게 해줍니다. 다음 HTML과 CSS를 기준으로 이야기를 풀어 나가겠습니다. 상기 HTML코드를 보면 이제 홈페이지의 기본구성을 볼 수 있습니다. 및 태그가 위 아래 배치가 되고 웹사이트를 찾아갈 수 있게 만드는 Navigation 섹션인 태그 그리고 본문으로 구성되어 있는 태그로 이루어져 있습니다. CSS코드를 아래와 같이 만들고 웹페이지를 한번 보겠습니다. ① 수직과 수평 Gr..
-
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..