들어가며
최근 진행했던 프로젝트는 폐쇄적인 환경 특성상 IE 테스트의 제약이 없었습니다. 크롬 엔진 기반의 웹뷰어가 탑재된 웹 애플리케이션 환경이었는데, 아시다시피 크롬 엔진은 최신 CSS3 명세를 적극 지원하고 있기 때문에 다양하고 새로운 CSS3 속성을 마음껏 활용해 볼 수 있는 장점이 있었습니다.
국내 웹 환경은 아직은 IE에서 온전히 해방되지 못했기 때문에 평소 활용하기 어려웠던 CSS3 grid 속성을 사용해 본 경험을 바탕으로 간단하게 소개해 볼까 합니다.
선언
간단한 사용법부터 알아보겠습니다.
부모 엘리먼트에 grid 속성을 선언해 주면서 시작합니다.
<section class="container"></section>.container {
display: grid;
}
grid-template-columns, grid-template-rows
다음처럼 grid 속성 선언과 함께 열과 행을 표현할 수 있는 grid-template-columns 속성과 grid-template-rows 속성을 함께 사용하여 표현하고자 하는 레이아웃을 설계할 수 있습니다.
// 열 만들기
.container {
display: grid;
grid-template-columns: 100px auto calc(30% - 100px); // 다양한 단위를 마음껏 활용하며 나의 지식을 뽐내봐요
}
// 행 만들기
.container {
display: grid;
grid-template-rows: repeat(5, 20%); // 20%의 높이를 가지는 5개의 행
}
grid-column, grid-row
grid의 자식 엘리먼트들은 기본적으로 좌측 상단을 기준으로 한 칸씩 순서대로 나열됩니다. 그리드의 배치를 더 자유롭게 하기 위해서 grid-column 또는 grid-row 속성을 사용할 수 있습니다.
이 속성은 grid-column-start(grid-row-start) 속성과 grid-column-end(grid-row-end) 속성의 축약 속성으로 그리드 배치의 시작점과 끝점을 지정합니다.
<section class="container">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</section>.container {
display: grid;
grid-template-columns: 150px auto 100px;
grid-template-rows: 50px calc(100% - 80px) 30px;
}
header {
background: rgba(255,0,0,.3);
grid-column: 1/4;
}
article {
background: rgba(0,255,0,.3);
grid-column: 1/3;
}
aside {
background: rgba(0,0,255,.3);
}
footer {
background: rgba(255,255,0,.3);
grid-column: 1/4;
}다음과 같은 레이아웃이 될 것입니다.
grid-gap
grid 엘리먼트 사이사이의 간격이 필요하다면 grid-gap 속성을 사용할 수 있습니다. row-gap 속성과 column-gap 속성의 축약 속성입니다.
.container {
display: grid;
row-gap: 10px; // 행과 행사이 간격
column-gap: 10px; // 열과 열사이 간격
}
grid-template-areas
더욱더 복잡한 레이아웃을 위해서 grid-template-areas 속성을 활용해 볼 수도 있겠습니다.
grid-template-areas 속성은 자식 엘리먼트의 grid-area 속성과 연계하여 더욱 복잡한 레이아웃을 설계할 수 있습니다.
.container {
grid-template-areas:
'header header header'
'article article aside'
'footer footer footer';
}
header {
grid-area: header;
}
article {
grid-area: article;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}grid-template-areas의 각 줄은 row를 의미하고 각 줄에서 grd-area-name들은 column을 의미하며 빈칸으로 구분됩니다. 각 칸에 명시된 네이밍과 동일한 grid-area를 선언한 자식 엘리먼트들은 해당 위치에 자리 잡게 됩니다. 만약, 빈 영역을 두고 싶다면 grid-area-name 대신 . 을 선언하면 됩니다.
이해를 돕고자 다음 예제를 준비했습니다. 여러분을 향한 제 마음이에요.
말씀드린 내용 외에도 grid 속성은 더 많은 활용법을 가지고 있습니다. 표준 명세와 더 많은 활용법은 안내해 드리는 링크들에서 더 자세하게 확인해 볼 수 있습니다.
Flex 와 Grid
우리는 레이아웃 설계를 위해서 flex 속성도 자주 사용합니다. 유연한 설계가 가능한 flex 속성은 현재 가장 보편적으로 사용되는 레이아웃을 위한 속성일 것입니다.
flex
flex-box는 다양한 단위를 활용하여 내 맘대로 주무를 수 있지만 수평 또는 수직으로 연속되는 선형적인 구조만 가질 수 있습니다.
.container {
display: flex;
flex-direction: column;
}flex에 대해서 더 궁금하시다면 이 포스팅을 읽어주세요!
grid
반면에 grid는 앞선 예시처럼 격자형 구조를 가지기 때문에 입체적으로 설계가 가능하다는 장점이 있습니다. grid 속성에 익숙해진다면 다음 샘플과 같은 다소 복잡해 보이는 레이아웃도 충분히 설계할 수 있습니다. 함께 안내해 드리는 관련 자료 링크도 읽어보시면 도움이 될 것입니다.
▲ 잘 개 쪼갠 grid를 선언하고 자식 엘리먼트들을 grid-area 속성을 이용하여 원하는 곳에 배치한 것으로 보여요.
- 샘플출처 : https://tympanus.net/Development/MenuFullGrid/
- 관련자료 : https://ayushgupta.tech/blog/grid-vs-flex
마치며
아시다시피 grid 속성은 모든 IE에서 온전하게 사용할 수 없습니다.
IE11의 경우 적용시키는 방법이 있긴 하지만 프리픽스를 이용해야 하기 때문에 중복되는 속성 선언이 불가피하게 됩니다. (1)
IE 계열의 점유율이 한 자릿수까지 떨어져 있고 MS까지 나서서 열심히 퇴출 운동을 한지 꽤 오랜 시간이 흘렀고 새로 출시된 운영체제인 Windows 11에서는 아예 그 자취를 감춰버렸습니다만, 실무를 보면서 체감하는 바는 아직까지는 국내 환경에서는 IE를 무시하기엔 어려운 상황이라고 생각됩니다.
그럼에도 불구하고 혹시라도 사용해 볼 기회가 있다면 한번 적극 사용해 보시길 추천드려요. 아직 지원율이 바닥 수준이지만 얼마 전 추가된 masonry 스펙도 너무나 기다려지는 부분이죠.
여러분도 한번 grid 속성이 잘 사용된 예시를 찾아보고 친해지는 계기가 되길 바라면서 이만 글을 마치겠습니다.
감사합니다.