연습 문제 2: 자연스럽게 떨어지는 반응형 레이아웃

요구사항

HTML 구조: main 태그 내부에 article로 된 카드 항목 8개를 배치합니다.
CSS: CSS Grid를 사용하여 레이아웃을 구성합니다.
기본 스타일:
- 카드의 크기는 콘텐츠에 관계없이 균일해야 합니다.
- 카드는 최소-최대 너비를 사용하여 유연하게 조정되어야 합니다.
- 카드 사이의 간격은 gap 속성을 사용해 지정합니다.
반응형 조건 (Grid의 자동 배치 기능 활용):
- repeat() 함수와 auto-fit 또는 auto-fill 키워드를 사용하여 화면 너비에 따라 열의 개수가 자동으로 조정되도록 합니다.
- 열의 최소 너비는 300px로 설정하고, 남는 공간은 균등하게 채우도록 합니다.

<!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>
        .card-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1vw;
        }
        .card-list__item {
            aspect-ratio: 1/1;
            border-radius: 0.5vw;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <main class="card-list">
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
        <article class="card-list__item"></article>
    </main>
</body>
</html>

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

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

::highlight 가상 요소의 등장! CSS Custom Highlight API로 텍스트 강조를 혁신하다 (0)	2025.12.03
연습 문제 3: 복합 레이아웃 (0)	2025.11.18
연습 문제 1: 기본 반응형 카드 레이아웃 (0)	2025.11.18
4xx 비율 상승 및 트래픽 급증 분석 (0)	2025.11.06
연습 문제 1: 간단한 To-Do 리스트 구현 (0)	2025.11.05

요구사항

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

티스토리툴바