연습 문제 3: 복합 레이아웃

Flexbox를 활용하여 일반적인 웹 컴포넌트인 Media Object 패턴을 구현하고, 복잡한 항목 정렬을 연습합니다.

요구사항

HTML 구조: comment-item 블록 내부에 comment-item__avatar (이미지)와 comment-item__body (본문) 두 가지 요소를 배치합니다.
CSS (Flexbox):
- comment-item은 Flex 컨테이너가 됩니다.
- **comment-item__avatar**는 왼쪽 상단에 고정된 크기(예: 60px * 60px)로 유지되어야 합니다.
- **comment-item__body**는 남은 공간 전체를 채우며(Flex-grow), 내부에 제목(title)과 내용(text)이 수직으로 배치되어야 합니다.
반응형 조건:
- 모바일 (화면 너비 600px 이하): 아바타는 본문 위에 중앙 정렬되어야 하고, 본문은 아바타 아래 전체 너비를 차지해야 합니다. (수직 레이아웃)
- 데스크톱 (화면 너비 601px 이상): 아바타는 본문 왼쪽에 수평 정렬되어야 하며, 아바타와 본문 내용의 수직 축은 **flex-start**로 정렬되어야 합니다. (수평 레이아웃)

<!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>
        .comment-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-radius: 1rem;
            background-color: #f5f5f5;
        }
        .comment-item__avatar {
            flex-basis: 60px;
            flex-shrink: 0;
            aspect-ratio: 1/1;
        }
        .comment-item__avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
        .comment-item__body {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }
        @media screen and (max-width: 600px) {
            .comment-item {
                flex-direction: column;
                align-items: center;
                gap: 0.5rem
            }
            .comment-item__body {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="comment-item">
        <div class="comment-item__avatar"><img class="img" src="https://picsum.photos/60" alt="사용자 사진"></div>
        <div class="comment-item__body">
            <h3 class="name">사용자이름</h3>
            <p class="desc">사용자정보</p>
        </div>
    </div>
</body>
</html>

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

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

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

요구사항

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

티스토리툴바