HTTP/CSS | 그리드(grid) 레이아웃을 사용한 반응형 레이아웃 예시
이 문서에서는 그리드 레이아웃을 사용한 반응형 레이아웃의 예시를 들어본다.
다른 레이아웃들보다 한참 늦게 웹의 세계에 등장한 그리드 레이아웃은 반응형 레이아웃의 속성을 가지고 있다.
flex 레이아웃과 비슷한 점이 있지만 flex가 1차원 적인 박스를 다룬다면 grid 레이아웃은 2차원 레이아웃이라고 볼 수 있다.
그리드 레이아웃을 사용한 수많은 레이아웃이 있겠지만 블로그 등에서 많이 쓰이는 헤더, 네비, 컨텐츠, 사이드바, 푸터 정도를 잡아본다.
html 을 아래처럼 단순하게 구상해봤다. 시맨틱 태그를 사용하지 않고 div 를 쓰면 CSS 선택하기가 좀더 편한데 좀 더 검색에 친화적이라고 하는 순수한 시멘틱 태그를 써봤다. 많은 이들이 시멘틱 태그를 강조하는 것도 사실인데 정말 시멘틱 때문에 검색엔진의 SEO에 큰 차이가 나는 것인지에 대한 의구심도 든다.
HTML5가 도입된 것은 한참 지났고 이런 검색봇의 해석 문제는 얼마든지 다른 방법으로도 해결할 수 있을텐데 역시 웹은 사용자가 굉장히 많다 보니까 빠른 기술 도입이 잘 안되는 것 같다. 복잡한 사이트들도 대부분 div 박스를 잘 사용하고 있어서 문제가 없어 보이기도 한다.
개인적인 의견은 웹의 디자인은 중요하지만 그보다 더 중요한 것은 양질의 컨텐츠 인 것은 예나 지금이나 다를바 없다고 본다. 단 같은 품질의 컨텐츠라면 당연히 디자인이 중요하다. 블로그나 쇼핑몰 같이 내용의 차별성이나 신선함은 없는 경우는 디자인이 중요한 요소인 것 같다.
이 블로그는 디자인에 대한 내용 보다는 컴퓨터 코딩이 주제인데 HTML과 CSS도 코딩이기 때문에 웹페이지의 디자인에 대한 내용도 포스팅하고 있다.
블로그를 운영하다 보니 자연스럽게 웹페이지 디자인에 대한 필요를 알게 되고 front-end 와 UI에 관련한 내용을 포스팅하고 있다. 웹이 아닌 애플리케이션에서도 GUI 도구를 사용할 때 레이아웃이 중요한데 웹페이지는 훨씬 더 복잡하고 또 중요하게 다뤄진다.
어떻게 보면 웹페이지는 앱처럼 내가 이 프로그램을 사용하려고 다운로드 받는게 아니라 링크를 눌러 새로운 웹사이트에 들어갔을 때 사용자가 몇 초의 짧은 시간 동안 탐색할까 말까를 결정하는 시스템이다 보니까 때때로 보이는 것이 전부가 된다. '의도하지 않게 들어갔는데 UI도 편하고 컨텐츠도 좋아서 한시간이나 보고 있었다' 같은 상황이 일어날 수 있다. 반면 내용은 정말로 좋은데 UI가 불편해서 오래 탐색하지 못하는 웹사이트도 있다.
이는 하이퍼 링크 연결 시스템을 사용하는 웹의 원초적 특성이다. 사람들이 2시간 동안 건강에 관한 책을 한 권 읽으면 지식이 쌓인다고 하지만 건강에 관한 웹사이트를 2시간 탐색하면 정보를 얻었다고 한다. 책 한권은 처음에 조금 글이 안읽혀도 내가 선택한 책이니까 어느정도 참으면서 볼 수 있지만 웹사이트는 그렇지 않다. 지금 보는 웹사이트보다 더 양질의 사이트, 신뢰성이 높은 사이트가 나오면 언제든지 그 쪽으로 클릭해 갈 수 있다. 그러다 보니 웹사이트를 운영하는 기업들의 입장에서는 클릭이 잘되고 소통이 원활한 사이트를 만들어야 한다. 사람이 운영을 잘해야 하고 디자인적 요소도 고객의 편의성에서 최적화해야 한다.
*그리드 레이아웃에 대하여 알아보자. 다른 레이아웃에 비해 복잡하니까 직관적인 느낌을 받기 위해서는 유튜브의 영상을 보는 것을 추천한다.
글로 남기는 것은 영상을 보면 바로 느낌이 오지만 한편 그런 감각적 느낌은 잊어버리기 쉽기 때문에 기록으로 남기려고 한다.
그리드 레이아웃은 컨테이너 안에서 각자의 그리드가 변화하는 레이아웃이다. 핵심 속성은...
display: grid;
grid-template-columns : 1fr 1fr (1개 fraction 조각)
이다. 이 두 줄의 코딩으로 컨테이너 안에 있는 모든 그리드들 (block) 은 1fr 1fr 의 열(column)로 정렬한다. 그리드들의 width 가 동일하다면 1fr 1fr 은 50% 50% 와 같다. 1fr 2fr 1 fr 은 25% 50% 25% 이다. repeat(3, 1fr) 메서드 처럼 속성을 주면 1fr 을 3회 반복한다 등 표현식으로 사용할 수 있다.
이게 워낙 변화무쌍해서 온갖 레이아웃을 만들 수 있다. 유튜브 영상 튜토리얼에서 설명하는 강사들도 그리드 레이아웃을 알고 싶다면 직접 해보는 것이 가장 빠르다고 한다. 실제로 그리드 레이아웃을 써보면 블록배치 놀이처럼 느껴진다. 느낌은 알 것 같은데 이것을 설명할 마땅한 말이 안 떠오르는 그런 종류의 레이아웃이다. 하긴 블록을 쌓고 배치하는데 설명할게 뭐가 있을까? 코딩을 하는게 아니라 어린아이처럼 이것 저것 만지작 거리게 된다.
grid-auto-rows: minmax(100px, auto) 같은 속성도 그 자체가 반응형이다. 열의 높이를 100px로 초기화하고 안의 요소가 100px 높이를 넘어 overflow 될때 자동(auto)으로 높이를 증가시킨다.
그리드 레이아웃 자체가 반응형이라고 하는 것은 그리드 안의 내용에 따라 유동적으로 바뀌는 구조이기 때문이다.
* 아래의 헤더에는 grid-column 속성이 있다. 1 / 3 은 1 나누기 3이 아니라 그리드 레이아웃의 좌표인 1부터 3까지 할당한다는 뜻이다.
위에서 3fr 1fr 라고 했는데,
1 | 3fr | 2 | 1fr | 3
이런 좌표를 사용한다. 즉 1 / 3 은 그리드 2개 열을 사용한다. 이것을 사용하면 html 태그의 순차적인 배치가 적절하지 않아도 원하는 곳에 배치할 수 있다. 예를 들어 데스크탑에서 네비가 헤더 아래 있는데 모바일에서는 헤드 위로 올라가거나 컨텐츠의 아래로 보낼 수 있다. 자바스크립트를 사용하지 않고 CSS만으로 가능하다.
아래의 예를 보면 aside(sidebar)를 media 쿼리에서 화면이 줄어들면...
grid-row 4에서5
grid-column 1에서3
으로 간다.
* 데스크탑 사이즈에서...
-> side바가 footer 위로 올라옴을 확인한다
기본뼈대를 그리드 레이아웃으로 하고 여기에 살을 덧붙이면 웹페이지의 레이아웃이 완성된다. 처음 사용하면 혼란스럽지만 좀 더 사용하면 블록게임을 하는 것 처럼 느껴질 것 이다. 그리드 레이아웃의 설계는 내셔널 지오그래피 같은 인쇄물의 레이아웃을 참고하였다고 하니 잡지나 신문의 편집자 같은 마음으로 나만의 레이아웃을 만들어 보는 것도 좋을 것 같다.
*HTML/CSS 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media(max-width: 768px){
aside{
grid-row: 4 / 5;
grid-column: 1 / 3;
}
section{
grid-column: 1 / 3;
}
}
.grid-container{
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: .5em;
}
header{
background-color: lightpink;
border: 1px solid #333;
padding: 1em;
grid-column: 1 / 3;
}
nav{
background-color:paleturquoise;
border: 1px solid #333;
padding: 1em;
grid-column: 1 / 3;
}
section{
background-color: lightyellow;
border: 1px solid #333;
padding: 1em;
}
aside{
background-color: limegreen;
border: 1px solid #333;
padding: 1em;
}
footer{
background-color:wheat;
border: 1px solid #333;
padding: 1em;
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="grid-container">
<header>header</header>
<nav>Navigation</nav>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore praesentium temporibus labore veniam similique quaerat nihil velit illo architecto. Illo officiis veritatis dolorum! Itaque repellat maxime nobis perspiciatis eum, corporis consequatur quis ut enim veritatis, animi deserunt facilis aspernatur! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error harum qui repellendus corporis dignissimos nostrum culpa temporibus, consequuntur, ratione, perferendis totam veritatis fugiat? Minus quam harum dignissimos dolorum ipsum veritatis non laborum beatae, modi perferendis! Praesentium vitae quia cumque quis quae inventore laudantium itaque quos! Voluptates vero optio temporibus excepturi!</section>
<aside id="sidebar">sidebar</aside>
<footer>footer</footer>
</div>
</body>
</html>
