CSS Grid는 개발자가 정교한 그리드 기반 디자인을 만들 수 있는 강력한 레이아웃 시스템입니다. 이 블로그 게시물에서는 CSS 그리드의 기본 사항을 살펴보고 그리드 레이아웃을 만드는 방법을 시연합니다.
CSS 그리드란?
CSS 그리드는 웹 레이아웃을 구성하는 강력하고 유연한 방법으로 요소의 위치 지정 및 정렬을 정밀하게 제어할 수 있는 2차원 레이아웃 시스템입니다. 그리드 컨테이너와 그리드 항목 두 가지 기본 구성 요소로 구성됩니다.
- 그리드 컨테이너: 그리드 항목을 보유하는 상위 요소입니다. display 속성을 grid 또는 inline-grid로 설정하여 정의합니다. 컨테이너는 하위 항목에 대한 그리드 컨텍스트를 설정합니다.
- 그리드 항목: 그리드 내에 위치하는 그리드 컨테이너의 하위 항목입니다. 모든 HTML 요소가 될 수 있습니다. 각 그리드 항목은 하나 이상의 그리드 셀을 차지합니다.
기본 그리드 레이아웃 만들기
기본 그리드 레이아웃을 만드는 방법은 다음과 같습니다.
- 컨테이너 요소를 생성하고 display: grid 속성을 적용하여 그리드 컨테이너로 정의합니다.
- grid-template-rows 및 grid-template-columns 속성을 사용하여 그리드의 행 및 열 수를 지정합니다. 절대값(예: 픽셀) 또는 상대값(예: 백분율 또는 분수)을 사용하여 행과 열의 크기를 정의할 수 있습니다.
- grid-row 및 grid-column 속성을 적용하여 컨테이너 내부에 그리드 항목을 배치합니다. 이러한 속성은 그리드 선 측면에서 그리드 항목의 시작 및 끝 위치를 정의합니다.
- 선택적으로 grid-gap과 같은 추가 속성을 사용하여 그리드 셀 사이에 간격을 추가하거나 justify-items 및 align-items를 사용하여 셀 내에서 그리드 항목의 정렬을 제어합니다.
다음은 기본 그리드 레이아웃을 설명하는 코드 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.grid-item {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
이 예제에서는 grid-template-columns: 1fr 1fr 1fr을 사용하여 폭이 같은 3개의 열이 있는 그리드 컨테이너를 만듭니다. 1fr 단위는 사용 가능한 공간의 일부를 나타내므로 각 열은 컨테이너의 동일한 부분을 차지합니다.
그리드 항목은 grid-item 클래스가 있는 div 요소로 표시됩니다. 그리드 내에 자동으로 배치되어 컨테이너의 셀을 채웁니다. grid-gap 속성은 그리드 셀 사이에 10px 간격을 추가합니다.
고급 그리드 기법
CSS 그리드는 다양한 고급 기능과 기술을 제공하여 그리드 기반 디자인을 다음 단계로 끌어올릴 수 있습니다. 이들 중 일부는 다음과 같습니다.
- 그리드 선 및 이름 지정: 그리드 선의 이름을 지정하고 그리드 항목을 배치하기 위한 기준점으로 사용할 수 있습니다.
- 그리드 영역: 명명된 그리드 영역을 정의하여 그리드의 특정 영역에 항목을 쉽게 배치합니다.
- 반응형 그리드: 미디어 쿼리를 활용하여 다양한 화면 크기 및 장치에 적응하는 반응형 그리드 레이아웃을 만듭니다.
- 그리드 정렬: justify-items, align-items, justify-content, align-content와 같은 속성을 사용하여 행과 열을 따라 그리드 항목의 정렬을 제어합니다.
- 그리드 네스팅: 더 복잡한 레이아웃과 계층 구조를 얻기 위해 중첩된 그리드를 만듭니다.
결론
CSS 그리드는 웹 디자인에서 그리드 기반 레이아웃을 만드는 강력하고 유연한 방법을 제공합니다. 직관적인 구문과 광범위한 기능을 통해 응답성이 뛰어나고 정교한 그리드 시스템을 쉽게 구축할 수 있습니다. 기본 사항을 이해하고 고급 기술을 탐색하면 CSS 그리드의 잠재력을 최대한 활용하고 시각적으로 놀랍고 반응이 빠른 웹 레이아웃을 만들 수 있습니다.
'프로그래밍, 코딩, 컴퓨터 > html, css, js' 카테고리의 다른 글
| html 테이블 만들기 배워보자 (0) | 2023.06.21 |
|---|---|
| HTML Iframe(아이프레임) 사용법 (0) | 2023.06.20 |
| CSS Flexbox 레이아웃 만들기 (0) | 2023.06.18 |
| CSS 레이아웃, Content, Padding, Border, Margin (0) | 2023.06.17 |
| CSS 선택자, 클래스, 프레임워크 (0) | 2023.06.16 |