grid template areas 속성으로 3단 레이아웃 구성
Grid-template-areas 속성을 사용하여 반응형 3단 레이아웃을 구성하는 방법
에 대해 소개합니다.반응형 레이아웃 구상
티스토리 스킨을 제작을 해야겠다 생각하고 아래와 같은 페이지 레이아웃을 구성하였습니다. PC에서는 3단, Tablet 크기에서는 오른쪽 사이드바가 Article의 아래, 모바일에서는 왼쪽 사이드바를 보이지 않도록 구성하였었습니다. 타블릿이나 모바일에서 Right Side 바에 있는 일부를 하단으로 보여주기 위해 구상하였습니다.
반응형 3단 레이아웃 구현
위와 같은 레이아웃을 구현하는 방법은 여러가지가 있습니다. 제가 본것중에 가장 이해하기 쉽고, 적용하기도 쉬운 방법은 CSS Grid의 grid-templae-areas 속성을 사용하는 것이었습니다.
1. 요소배치
위의 구조를 만들어 주기 위해 기본 요소를 배치합니다. 각 요소를 구분하기 위해 테두리와 마진 스타일을 적용하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#header,
#asideLeft,
#article,
#asideRight,
#footer {
border: 1px solid black;
margin: 2px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="asideLeft">AsideLeft</div>
<div id="article">Article</div>
<div id="asideRight">AsideRight</div>
<div id="footer">Footer</div>
</body>
</html>
2. Grid-Container 추가 후 Grid 적용
각 요소 배치가 완료되면 Grid 영역을 지정해주기 위해 #asideLeft, #article, #asideRight 를 감싸는 DIV를 하나 생성합니다. 보통 이렇게 감싸는 요소를 Grid Container, 배치를 당하는 요소를 Grid Item 이라고 통상적으로 이야기 하는 것 같습니다. grid-template-areas 속성은 Grid item 에 grid-area 속성으로 이름을 지정 후 지정된 이름으로 2차원 레이아웃을 구성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#header,
#asideLeft,
#article,
#asideRight,
#footer {
border: 1px solid black;
margin: 5px;
text-align: center;
}
#header,
#footer{
height:70px;
background-color:gray;
}
.grid-container{
display:grid;
grid-template-areas:
"leftSidebar article rightSidebar";
}
#asideLeft{
grid-area:leftSidebar;
background-color: yellow;
}
#article {
grid-area:article;
background-color: violet;
height:500px;
}
#asideRight {
grid-area:rightSidebar;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="grid-container">
<div id="asideLeft">Grid Item : AsideLeft</div>
<div id="article">Grid Item : Article</div>
<div id="asideRight">Grid Item : AsideRight</div>
</div>
<div id="footer">Footer</div>
</body>
</html>위의 코드를 브라우저에서 실행하면 위 코드 중 grid-templete-areas: "leftSidebar article rightSidebar" 과 같이 왼쪽사이드바, 본문영역, 오른쪽 사이드바가 나란히 배치됩니다.
3. Grid item 고정폭
Grid-Item의 폭을 고정으로 만들거나, 특정 Item 만 고정 크기로 만들고 싶은 경우 Grid-Container 에서 grid-templgrid-template-columns 속성을 사용하면 쉽게 적용이 가능합니다.
왼쪽 사이드바를 200px, 오른쪽 사이드바를 320px 로 고정하고 본문 영역을 화면 크기에 맞게 변화하도록 만들고 싶은 경우 .grid-container 스타일에 grid-templgrid-template-columns: 200px 1fr 320px; 코드를 추가합니다. 전체 코드를 삽입하면 너무 길어져 필요한 부분만 표시 하였습니다.
.grid-container{
display:grid;
grid-template-areas:
"leftSidebar article rightSidebar";
grid-template-columns: 200px 1fr 320px;
}위의 코드를 적용하면 브라우저의 가로폭 사이즈에 따라 본문 영역만 크기가 유동적으로 변화합니다. 포트트 영역도 크기를 지정하고 싶으면 1fr 대신에 특정 px값을 입력하시면 됩니다.
4. Tablet 화면, Mobile 화면 레이아웃
초기에 Tablet 화면, Mobile 화면으로 구상하는 법은 간단하게 구현 가능합니다. Grid Container의 grid-templete-areas 와 grid-template-columns 속성값만 변경해주면 쉽게 변경이 가능합니다.
아래 코드는 Tablet 정도되는 사이즈에서의 레이아웃입니다. 시각적으로 눈에 잘들어오는 코드를 위해 AsideRight 의 높이를 200px로 설정하였습니다.
/* Tablet Layout */
.grid-container{
display:grid;
grid-template-areas:
"leftSidebar article"
"leftSidebar rightSidebar";
grid-template-columns: 200px 1fr;
}
아래 코드는 Mobile용 Layout을 적용한 코드입니다. Mobile 도 마찬가지로 grid-template-areas 로 화면 배열을 변경하였습니다. 추가로 왼쪽사이드바는 보이지 않도록 설정하였습니다.
/* Mobile Layout */
.grid-container{
display:grid;
grid-template-areas:
"article"
"rightSidebar";
grid-template-columns: 1fr;
}
#asideLeft{
display:none;
}
5. 화면영역 지정
사이드바와 본문여역의 메인 컨텐츠의 최대 크기를 조정하기 위해 Grid-Container 에 max-width 속성 값을 지정합니다. 추가로 Grid-Container 가 중앙에 배치되기 위해 margin: 0 auto; 속성을 추가합니다. 아래 코드는 예시로 최대폭 크기를 1200px로 지정하였습니다.
.grid-container{
display:grid;
grid-template-areas:
"leftSidebar article rightSidebar";
grid-template-columns: 200px 1fr 320px;
max-width:1200px;
}
6. 미디어쿼리로 반응형 레이아웃 완성
브라우저의 가로폭에 따라 위에서 구현한 PC, Tablet, Mobile 레이아웃을 자동으로 적용하기 위해 미디어쿼리를 사용하여 완성합니다. 아래 코드는 미디어쿼리까지 적용된 최종코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#header,
#asideLeft,
#article,
#asideRight,
#footer {
border: 1px solid black;
margin: 5px;
text-align: center;
}
#header,
#footer {
height: 70px;
background-color: gray;
}
.grid-container {
display: grid;
grid-template-areas:
"leftSidebar article rightSidebar";
grid-template-columns: 200px 1fr 320px;
max-width: 1200px;
margin: 0 auto;
}
#asideLeft {
grid-area: leftSidebar;
background-color: yellow;
}
#article {
grid-area: article;
background-color: violet;
height: 500px;
}
#asideRight {
grid-area: rightSidebar;
background-color: yellowgreen;
min-height:200px;
}
/* tablet */
@media screen and (max-width: 1024px) {
.grid-container{
display:grid;
grid-template-areas:
"leftSidebar article"
"leftSidebar rightSidebar";
grid-template-columns: 200px 1fr;
}
}
/* mobile */
@media screen and (max-width: 600px) {
.grid-container {
display: grid;
grid-template-areas:
"article"
"rightSidebar";
grid-template-columns: 1fr;
}
#asideLeft {
display: none;
}
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="grid-container">
<div id="asideLeft">Grid Item : AsideLeft</div>
<div id="article">Grid Item : Article</div>
<div id="asideRight">Grid Item : AsideRight</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
마무리
CSS Grid의 grid-template-areas속성을 사용하면 아주 쉽게 2차원 레이아웃을 만들수 있지만 IE에는 지원하지 않음을 고려해야합니다. CSS Grid 라인을 활용한 방법으로 위와 동일하게 구현 할 수 있지만 저는 복잡해서 패스하였습니다.
'Tistory' 카테고리의 다른 글
| #6 CSS Position Sticky 으로 Navi 메뉴바 스크롤 내릴 때 상단 고정 (0) | 2020.11.26 |
|---|---|
| #5 CSS Flex 로 반응형 3단 레이아웃 구성하기 (0) | 2020.11.25 |
| #3 티스토리 스킨 제작 레이아웃 구상 Part.2 사이드바, 본문 활용 방안 (4) | 2020.11.23 |
| #2 이탈율 감소, 체류 시간을 높이는 레이아웃 구상 Part.1 구현 방향과 헤더 영역 (0) | 2020.11.23 |
| #1 티스토리 스킨 제작 : 블로그 운영 문제점과 스킨의 요구사항 (6) | 2020.11.23 |