5.4 카드 레이아웃

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

5.4 카드 레이아웃

카드 레이아웃은 정보를 그룹화하고 시각적으로 배치하여 사용자가 쉽게 이해할 수 있도록 돕는 디자인 패턴입니다. 반응형 웹 디자인에서 카드 레이아웃은 다양한 화면 크기에 맞춰 조정할 수 있어 매우 유용합니다. 이 섹션에서는 HTML과 CSS를 사용하여 기본적인 카드 레이아웃을 만드는 방법을 배울 것입니다.

예제

아래의 코드는 카드 레이아웃의 기본 구조를 보여줍니다. 각 카드는 이미지, 제목, 설명으로 구성되어 있습니다.

코드 html

<div class="card">
    <img src="image.jpg" alt="Card Image" class="card-img">
    <div class="card-content">
        <h2 class="card-title">카드 제목</h2>
        <p class="card-description">카드 설명 부분입니다.</p>
    </div>
</div>

CSS 스타일링

카드를 효과적으로 배치하려면 CSS Flexbox 또는 Grid를 사용할 수 있습니다. 아래는 카드가 세로로 정렬될 때의 CSS 스타일 예제입니다.

코드 css

.card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px;
    max-width: 300px;
}
.card-img {
    width: 100%;
    height: auto;
}
.card-content {
    padding: 15px;
}
.card-title {
    font-size: 1.5rem;
    margin: 0;
}
.card-description {
    font-size: 1rem;
    color: #666;
}

실습

HTML 및 CSS 코드를 작성한 후, 본인의 화면 크기에 맞게 카드 레이아웃을 조정해 보세요. CSS Media Query를 사용하여 다양한 화면 크기에서 카드를 어떻게 배치할 수 있는지 실험해보세요.

프로젝트

카드 레이아웃을 활용하여 간단한 포트폴리오 또는 상품 목록 페이지를 제작해 보세요. 각 카드에 적절한 이미지와 텍스트를 추가하면 완성도 높은 웹 페이지를 만들 수 있습니다.

정리

이번 섹션을 통해 카드 레이아웃의 기본과 반응형 디자인의 원리를 배우셨습니다. 향후 프로젝트에 이 기술을 적용하여 다양한 화면에서 균형 잡힌 웹 페이지를 만들어보세요. 다음 섹션으로 넘어가기 전에 충분히 연습해 보시길 권장합니다.

5.4 카드 레이아웃

5.4 카드 레이아웃

예제

CSS 스타일링

실습

프로젝트

정리

댓글 0