css 그리드(grid)

CSS Grid는 웹 디자인을 혁신적으로 바꾸는 기술 중 하나로, 웹 페이지의 레이아웃을 효과적으로 관리하고 표현하는 데 사용됩니다. 이 기사에서는 CSS Grid의 핵심 개념과 활용 방법을 자세히 알아보겠습니다.

 

 

1. CSS Grid 소개

CSS Grid는 웹 디자인에서 레이아웃을 구성하는 데 사용되는 강력한 도구입니다. 그리드 시스템을 사용하여 웹 페이지의 구성 요소를 배치하고 정렬할 수 있습니다.

 

2. 그리드 컨테이너와 그리드 아이템

CSS Grid를 사용하려면 먼저 그리드 컨테이너와 그리드 아이템을 정의해야 합니다. 그리드 컨테이너는 그리드 아이템을 포함하는 부모 요소이며, 그리드 아이템은 레이아웃을 형성하는 개별 요소입니다.

 

.container {
    display: grid; /* 그리드 컨테이너로 설정 */
    grid-template-columns: 1fr 1fr 1fr; /* 3개의 열로 구성 */
}

.item {
    grid-column: span 2; /* 2개의 열에 걸쳐 표시 */
}

 

 

3. 그리드 레이아웃 구성

그리드 레이아웃은 행(row)과 열(column)로 구성됩니다. 그리드 템플릿을 사용하여 원하는 레이아웃을 정의할 수 있습니다. 이를 통해 복잡한 레이아웃도 간단하게 구현할 수 있습니다.

 

.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1:2 비율로 2개의 열 생성 */
    grid-template-rows: 100px 200px; /* 높이가 100px와 200px인 2개의 행 생성 */
}

 

4. 반응형 웹 디자인과 CSS Grid

CSS Grid는 반응형 웹 디자인을 구현하는 데 효과적입니다. 미디어 쿼리와 함께 사용하여 다양한 화면 크기에 맞게 레이아웃을 조정할 수 있습니다.

 

@media screen and (max-width: 768px) {
    .container {
        grid-template-columns: 1fr; /* 화면이 작을 때 1개의 열로 변경 */
    }
}

 

 

CSS 애니메이션(Animation)