세 번째 문제: 반응형 3열 카드 레이아웃 만들기

요구사항

HTML 구조:
- <div class="grid-container">를 최상위 컨테이너로 사용합니다.
- 내부에 <div class="card">를 6개 만듭니다. 각 카드 안에는 간단한 제목 (<h3>)과 내용 (<p>)을 넣습니다.
CSS - 기본 그리드 스타일:
- .grid-container를 사용하여 자식 요소인 카드를 배치할 수 있는 레이아웃 시스템을 설정합니다. (힌트: Flexbox와 다른 레이아웃 방식)
- 카드를 3개씩 가로로 배치합니다.
- 카드가 컨테이너 전체 너비를 균등하게 나누어 가지도록 설정합니다.
- 카드 사이에 20px의 간격이 생기도록 설정합니다.
CSS - 카드 스타일:
- .card에 다음 스타일을 적용합니다:
  - 배경색: #fff
  - 테두리: 1px solid #ddd (옅은 회색)
  - 패딩: 15px
  - 모서리 둥글게: 4px
CSS - 반응형 디자인:
- 화면 너비가 768px 이하일 때 (태블릿 크기), 카드가 가로로 2개씩 배치되도록 레이아웃을 변경합니다.
- 화면 너비가 480px 이하일 때 (모바일 크기), 카드가 세로로 1개씩 배치되어 전체 너비를 사용하도록 레이아웃을 변경합니다. (힌트: 미디어 쿼리 사용)

<!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>
        .grid-container {
            display: flex;
            gap: 20px;
        }
        .grid-container .card {
            flex: 1;
            padding: 15px;
            min-height: 100px;
            aspcet-ratio:1/0.75
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        @media screen and (max-width: 768px) {
            .grid-container {
                flex-wrap: wrap
            }
            .grid-container .card {
                flex: auto;
                width: calc(50% - 30px);
            }
        }

        @media screen and (max-width: 480px) {
            .grid-container .card {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
        <div class="card">
            <h3></h3>
            <p></p>
        </div>
    </div>
</body>
</html>

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

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

여섯 번째 문제: 스크롤 및 애니메이션 효과가 있는 헤더 만들기 (0)	2025.10.27
다섯 번째 문제: CSS 변수를 활용한 커스텀 입력 필드 만들기 (0)	2025.10.27
네 번째 문제: 툴팁을 포함하는 버튼 만들기 (0)	2025.10.27
두 번째 문제: 유연한 내비게이션 바 만들기 (0)	2025.10.27
첫 번째 문제: 간단한 프로필 카드 만들기 (0)	2025.10.27

요구사항

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

티스토리툴바