연습 문제 1: 기본 반응형 카드 레이아웃

요구사항 (Flexbox 활용)

HTML 구조: section 태그 내부에 div로 된 카드 항목 6개를 배치합니다.
CSS: Flexbox를 사용하여 레이아웃을 구성합니다.
기본 스타일:
- 모든 카드의 너비는 균일해야 합니다.
- 카드 사이에는 일정한 간격(gutter)이 있어야 합니다.
반응형 조건:
- 데스크톱 (화면 너비 1024px 이상): 카드가 3열로 배치되어야 합니다.
- 태블릿 (화면 너비 600px 이상, 1023px 이하): 카드가 2열로 배치되어야 합니다.
- 모바일 (화면 너비 599px 이하): 카드가 1열로 배치되어야 합니다.
- 힌트: flex-wrap, calc(), 그리고 미디어 쿼리를 사용해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --gap : 1vw;
        }
        .card-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap);
        }
        .card-list__item {
            flex-grow: 1;
            flex-shrink: 0;
            aspect-ratio: 1/1;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            flex-basis: 100%;
        }
        @media screen and (min-width: 600px) {
            .card-list__item {
                flex-basis: calc((100% - var(--gap)) / 2);
            }
        }
        @media screen and (min-width: 1024px) {
            .card-list__item {
                flex-basis: calc((100% / 3) - var(--gap));
            }
        }
    </style>
</head>
<body>
    <section class="card-list">
        <div class="card-list__item"></div>
        <div class="card-list__item"></div>
        <div class="card-list__item"></div>
        <div class="card-list__item"></div>
        <div class="card-list__item"></div>
        <div class="card-list__item"></div>
    </section>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'w. Gemini' 카테고리의 다른 글

연습 문제 3: 복합 레이아웃 (0)	2025.11.18
연습 문제 2: 자연스럽게 떨어지는 반응형 레이아웃 (0)	2025.11.18
4xx 비율 상승 및 트래픽 급증 분석 (0)	2025.11.06
연습 문제 1: 간단한 To-Do 리스트 구현 (0)	2025.11.05
열세 번째 문제: Promise를 사용한 비동기 체이닝 (JS 개념 심화 2) (0)	2025.10.31

요구사항 (Flexbox 활용)

'w. Gemini' 카테고리의 다른 글

티스토리툴바