날짜

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" />

2026.01.29

</aside>

활동내용

1. Grid 레이아웃

Flexbox가 1차원(행 또는 열)이라면, Grid는 2차원(행과 열) 레이아웃

기본 Grid

.container {
    display: grid;
    
    /* 열 정의 */
    grid-template-columns: 200px 200px 200px;  /* 3개 열 */
    grid-template-columns: 1fr 1fr 1fr;  /* 균등 분배 */
    grid-template-columns: repeat(3, 1fr);  /* 반복 */
    grid-template-columns: 200px 1fr 200px;  /* 혼합 */
    
    /* 행 정의 */
    grid-template-rows: 100px 200px;
    
    /* 간격 */
    gap: 20px;
    column-gap: 10px;
    row-gap: 20px;
}

Grid 아이템 배치

.item {
    /* 열 위치 */
    grid-column: 1 / 3;  /* 1~3 컬럼 차지 */
    grid-column: span 2;  /* 2칸 차지 */
    
    /* 행 위치 */
    grid-row: 1 / 3;
    grid-row: span 2;
    
    /* 축약형 */
    grid-area: 1 / 1 / 3 / 3;  /* row-start / col-start / row-end / col-end */
}

Grid Template Areas

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

실용적인 Grid 예제

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.item {
    padding: 2rem;
    background: #3498db;
    color: white;
    text-align: center;
    border-radius: 8px;
}

2. 반응형 웹 디자인

Media Query

화면 크기에 따라 다른 스타일 적용

/* 기본 스타일 (모바일) */
.container {
    width: 100%;
    padding: 1rem;
}

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

/* 큰 화면 (1200px 이상) */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

주요 브레이크포인트

/* 모바일 */
@media (max-width: 767px) { }

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { }

/* 데스크톱 */
@media (min-width: 1024px) { }