반응형
CSS중첩이미지그리드
-
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..