CSS Grid Layout : Grid-template-area 속성, Overlapping(중첩) 요소처리

이제부터는 CSS Grid Layout에 대해 조금 더 들어가 보겠습니다. 

 

▒ grid-template-area 속성

 

본 속성을 사용하면 grid-row-start, grid-row-end, grid-column-start, grid-column-end, grid-area 속성값으로 사용되는 섹션에 이름을 지정하고 관리할 수 있게 해줍니다. 

 

다음 HTML과 CSS를 기준으로 이야기를 풀어 나가겠습니다. 

 

 

상기 HTML코드를 보면 이제 홈페이지의 기본구성을 볼 수 있습니다. <header> 및 <footer> 태그가 위 아래 배치가 되고 웹사이트를 찾아갈 수 있게 만드는 Navigation 섹션인 <nav>태그 그리고 본문으로 구성되어 있는 <section>태그로 이루어져 있습니다. 

 

CSS코드를 아래와 같이 만들고 웹페이지를 한번 보겠습니다. 

 

 

 

<Container에 Section 영역 지정: Naming>

 

① 수직과 수평 Grid 계산

 

수직은 grid-template-column 속성으로 페이지를 구분해야 합니다. Header, Nav, Footer는 나눌 필요가 없는데 Left는 왼쪽으로 Right는 오른쪽으로 배치하기 위해서는 2개로 나눠야 합니다. 보통 왼쪽은 제목이 있고 오른쪽이 본문이 많으니 1: 3정도 나눌까 합니다. 

 

grid-template-column : 1fr 3fr;

 

수평은 Left와 Right가 한 행으로 합쳐지게 됨으로써 총 4개정도만 필요하네요. 크기만 결정하면 될 듯 합니다. 

 

grid-template-row : 150px 200px 700px 150px;

 

 

② 섹션별 이름지정 

 

grid-template-area 속성을 사용하여 섹션별 이름을 지정해줍니다. 이 이름이 각 태그별 Class별로 grid-area를 지정하여 teplate속성으로 반영이 되게 합니다. 

 

다음과 같이 CSS를 코딩합니다.

 

 

코딩을 잠깐 보면 grid-template-column과 grid-template-row의 영향만 받습니다. 다음과 같이 브라우저에서는 표시가 될겁니다. 

 

 

이제부터 grid-template-area 속성에 사용된 이름과 grid-area속성을 연결하여 각자 위치를 배열하도록 하겠습니다. 다음과 같이 CSS에 추가합니다. 

 

 

그러면 전체적으로 웹페이지 영역에 Template이 구성이 됩니다. 

 

 

---

 

▒ Overlapping (중첩)요소 처리

 

 

위 예제처럼 grid-template-area 속성을 이용하여 각 섹션을 배치해 보았습니다. 그런데 만일 위 예제에서 Left와 Right 중간을 거치는 이미지나 글을 넣고자 할 때 각 Grid가 겹치는 경우가 발생이 됩니다. 이럴 경우를 한번 보겠습니다. 이제 Grid를 좀 더 세밀히 구분하여 진행할 겁니다. 아래 그림처럼요. 

 

그림을 분석해 보면 전체 Grid는 8 X 8 행렬로 구성이 되어 있고 Left영역과 Right영역위로 Image가 Overlapping되고 있습니다. 

 

이럴경우 container에는 grid-template 영역을 구성해주고 각 Box item에는 grid-area로 위치를 지정해 주면 됩니다. 먼저 HTML 코드를 다음과 같이 합니다. 

 

 

전체 구성되는 Box의 Class 명과 나타내는 이름을 지정해 줍니다. 다음은 CSS입니다. 먼저 container(상위 요소)입니다. 

 

 

이제 Header부터 Footer까지 각 Grid를 지정하겠습니다. 

 

① Header

 

Header는 수평으로는 1 ~ 2이고 수직으로는 1 ~ 9입니다. 배경색은 본인이 구분할 수 있는색으로 지정 바랍니다. 

 

 

② Nav

 

수평으로는 2 ~ 3이고 수직으로는 1 ~ 9입니다. 

 

③ Left

 

수평으로는 3 ~ 8 수직으로는 1 ~ 3입니다. 

 

④ Right

 

수평으로는 3 ~ 8 수직으로는 3 ~ 9입니다. 

 

④ Footer

 

수평으로는 8 ~ 9 수직으로는 1 ~9입니다. 

 

이를 CSS에 전부 반영해 보겠습니다. 

 

 

⑤ 중첩될 Image 반영

 

중첩되는 Grid영역을 지정하고 모든 요소보다 Z방향으로 위에 있어야 하기때문에 z-index를 사용합니다. 

Image영역은 수평으로는 4 ~ 6 수직으로는 2 ~ 5의 영역입니다. 

 

 

Z축 측면에서 보았을 때 높이가 달라질 수 있는 요소가 총 4개이므로 안전하게 z-index를 5로 설정합니다. 물론 지금 CSS는 z-index를 1로 설정해도 무방합니다. 

 

그럼 브라우저는 다음과 같이 보입니다. 

 

 

Grid를 고려할 때 100px씩 잘게 잘라서 전체를 레이아웃하면 좀 더 쉽게 웹페이지를 디자인할 수 있을겁니다.