grid-template-columns에 대해서 설명해줘. repeat는 생소해
grid-template-columns 속성은 CSS Grid 레이아웃에서 그리드 컨테이너의 열(컬럼)을 정의하는 데 사용됩니다. 이 속성을 통해 각 열의 크기와 수를 지정할 수 있습니다.
기본 사용법
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px;
}위 예시에서는 3개의 열을 정의하며, 각 열의 너비는 각각 100px, 200px, 100px입니다.
repeat() 함수
repeat() 함수는 동일한 패턴을 반복할 때 유용합니다. 이 함수를 사용하면 더 간결하게 코드를 작성할 수 있습니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
}
위 예시에서는 100px 너비의 열이 3번 반복됩니다.
repeat() 함수의 다양한 사용법
- 정확한 반복 수와 고정 크기:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 50px);
}50px 너비의 열이 4번 반복됩니다.
- 정확한 반복 수와 상대적 크기:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}동일한 너비를 가지는 3개의 열이 생성됩니다. fr 단위는 남은 공간을 비례적으로 나눕니다.
- 자동 반복:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}그리드 컨테이너의 가로 너비에 맞춰 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 100px, 최대 너비는 남은 공간을 비례적으로 나눕니다.
grid-template-columns의 기타 사용법
- 고정 크기와 상대적 크기 혼합:
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}첫 번째 열은 100px, 두 번째 열은 남은 공간의 1배, 세 번째 열은 남은 공간의 2배를 차지합니다.
- 반복과 고정 크기 혼합:
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr) 200px;
}두 개의 동일한 너비의 열과 하나의 200px 너비의 열이 생성됩니다.
실용적인 예제
반응형 레이아웃
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}위 예제는 그리드 컨테이너의 너비에 맞춰 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 200px, 최대 너비는 남은 공간을 비례적으로 나눕니다. gap 속성은 그리드 항목들 사이의 간격을 정의합니다.
실습 예제
아래는 다양한 grid-template-columns 사용법을 포함한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Columns Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #b0c4de;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>이 예제에서는 그리드 컨테이너가 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 200px, 최대 너비는 남은 공간을 비례적으로 나눕니다.
grid-template-columns와 repeat() 함수는 복잡한 레이아웃을 간단하게 정의하고, 반응형 디자인을 구현하는 데 매우 유용합니다.
'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글
| [HTML] 브라우저 최소 폭 (0) | 2024.07.26 |
|---|---|
| [CSS] grid-template-columns의 repeat를 포함한 속성 설명 (0) | 2024.07.26 |
| [CSS Grid & Flex] 같은 레이아웃을 표현한 예제 (0) | 2024.07.26 |
| [CSS Flex] 레이아웃에 어울리는 태그 세트 (0) | 2024.07.26 |
| [CSS Grid] 레이아웃에 어울리는 태그 세트 (0) | 2024.07.26 |
