Flexbox에 이어 이번 글에서는 CSS Grid를 사용한 웹페이지 레이아웃 설계의 예시를 소개하고, 기본 개념과 사용 방법을 자세히 알아보겠습니다.
Grid란?
Grid는 CSS의 레이아웃 모듈 중 하나로, 그리드 레이아웃을 만드는 데 사용됩니다. 그리드 레이아웃은 열과 행으로 구성된 그리드를 사용하여 레이아웃을 구성하는 방법입니다. 이전에는 flexbox를 사용하여 레이아웃을 구성하는 것이 일반적이었지만, Grid는 더 복잡한 레이아웃을 만드는 데 훨씬 유용합니다.
CSS Grid를 사용하면 다음과 같은 이점이 있습니다.
- 유연한 레이아웃을 만들 수 있습니다.
- 레이아웃을 더 쉽게 디자인할 수 있습니다.
- 반응형 레이아웃을 만들기가 더 쉬워집니다.
Grid의 구성 요소
Grid는 두 가지 개념을 중심으로 동작합니다: 그리드 컨테이너(Grid Container)와 그리드 아이템(Grid Item)입니다.
Grid Container
그리드 컨테이너는 그리드의 부모 요소입니다. 즉, 그리드 레이아웃을 만들기 위해 부모 요소에 display: grid를 적용합니다. 이 때, 부모 요소는 그리드의 영역을 지정합니다.
.container {
display: grid;
}
Grid Item
그리드 아이템은 그리드 내부의 자식 요소입니다. grid-column과 grid-row 속성을 사용하여 그리드 아이템의 위치를 지정할 수 있습니다.
.item {
grid-column: 1 / 3; /* 1번째 열부터 3번째 열까지 */
grid-row: 2 / 4; /* 2번째 행부터 4번째 행까지 */
}Grid Line
그리드 라인은 그리드의 가로 또는 세로 축에서 행 또는 열의 경계를 나타내는 선입니다.
.container {
display: grid;
grid-template-columns: 50px 50px 50px; /* 3개의 열을 가지는 그리드 */
grid-template-rows: 50px 50px 50px; /* 3개의 행을 가지는 그리드 */
}Grid Template
그리드 템플릿은 그리드의 열과 행의 크기와 개수를 지정하는 속성입니다. grid-template-columns와 grid-template-rows 속성을 사용하여 그리드 템플릿을 설정할 수 있습니다.
.container {
display: grid;
grid-template-columns: 50px 50px 50px; /* 3개의 열을 가지는 그리드 */
grid-template-rows: 50px 50px 50px; /* 3개의 행을 가지는 그리드 */
}Grid Area
그리드 영역은 그리드 내에서 여러 셀(cell)을 하나의 영역으로 묶는 방법입니다. grid-area 속성을 사용하여 그리드 영역을 지정할 수 있습니다.
.item {
grid-area: 2 / 2 / 4 / 4; /* 2번째 행부터 4번째 행까지, 2번째 열부터 4번째 열까지 */
}Grid를 활용한 간단한 웹페이지 레이아웃 설계
<!DOCTYPE html>
<html>
<head>
<title>Grid 예제</title>
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 100px 1fr 50px;
grid-gap: 10px;
}
.header {
grid-column: 1 / span 2;
grid-row: 1;
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
.sidebar {
grid-column: 1;
grid-row: 2 / span 2;
background-color: #2196F3;
color: white;
padding: 10px;
text-align: center;
}
.content {
grid-column: 2;
grid-row: 2;
background-color: #f44336;
color: white;
padding: 10px;
text-align: center;
}
.footer {
grid-column: 1 / span 2;
grid-row: 3;
background-color: #555555;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
위 코드에서 body에 있는 container는 그리드 컨테이너입니다. header, sidebar, content, footer는 그리드 아이템입니다.
그리 첫 번째 열은 200px, 두 번째 열은 나머지 공간을 차지하도록 grid-template-columns 속성에 200px 1fr 값을 할당했습니다. 또한, 첫 번째 행은 100px, 두 번째 행은 나머지 공간을 차지하도록 grid-template-rows 속성에 100px 1fr 50px 값을 할당했습니다.
※ fr은 분수(fraction)를 나타내는 단위로 유연하게 크기를 가져가는 단위입니다. 예로
[grid-template-columns: 100px 1fr 2fr] 와 같이 설정했다면 100px을 고정으로 하는 행하나와 잔여 공간에 각각 비율로 1/3, 2/3 크기를 갖는 행이 두개 생기는 것입니다.
그리드 아이템들은 grid-column과 grid-row 속성을 사용하여 그리드 영역을 지정하였습니다. header는 첫 번째 열부터 두 칸을 차지하며, 첫 번째 행에 위치합니다. sidebar는 첫 번째 열에 위치하며, 두 번째 행부터 두 칸을 차지합니다. content는 두 번째 열에 위치하며, 두 번째 행에 위치합니다. footer는 첫 번째 열부터 두 칸을 차지하며, 세 번째 행에 위치합니다.
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] audio 태그를 사용한 음악 삽입과 디자인 방법 (0) | 2023.03.03 |
|---|---|
| [HTML/CSS] video 태그를 사용한 동영상 삽입과 디자인 방법 (0) | 2023.03.02 |
| [HTML/CSS] table 태그를 활용한 표 만들기 방법 (0) | 2023.03.01 |
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
| [HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 (0) | 2023.02.26 |
| [HTML/CSS] CSS 선택자의 종류와 활용 방법 (0) | 2023.02.26 |
| [HTML/CSS] 자주 쓰이는 HTML 태그 (0) | 2023.02.25 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
댓글