> 웹 프론트엔드 > HTML 튜토리얼 > HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법

HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법

WBOY
풀어 주다: 2023-10-25 10:42:11
원래의
1038명이 탐색했습니다.

HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법

HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법

현대 웹 디자인에서 반응형 레이아웃은 매우 중요한 기술입니다. HTML과 CSS를 사용하면 다양한 화면 크기의 장치에 적응하는 반응형 카드 월 레이아웃을 만들 수 있습니다.

HTML과 CSS를 사용하여 간단한 반응형 카드 월 레이아웃을 만드는 방법에 대한 자세한 내용은 다음과 같습니다.

HTML 부분:

먼저 HTML 파일의 기본 구조를 설정해야 합니다. 순서가 지정되지 않은 목록(

    )과 목록 항목(
  • )을 사용하여 카드를 만들 수 있습니다.
    <ul class="card-wall">
        <li class="card">
            <img src="image1.jpg" alt="Image 1">
            <h3>Card 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <li class="card">
            <img src="image2.jpg" alt="Image 2">
            <h3>Card 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        <li class="card">
            <img src="image3.jpg" alt="Image 3">
            <h3>Card 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </li>
        ...
    </ul>
    로그인 후 복사

    CSS 부분:

    그런 다음 카드와 카드 벽의 스타일을 지정해야 합니다. 여기서는 CSS Flexbox 레이아웃을 사용하여 반응형 효과를 얻을 것입니다.

    .card-wall {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .card {
        width: 300px;
        margin: 10px;
        background-color: #f1f1f1;
        text-align: center;
        padding: 20px;
    }
    
    .card img {
        width: 100%;
    }
    
    @media only screen and (max-width: 768px) {
        .card {
            width: 90%;
        }
    }
    로그인 후 복사

    코드 설명:

    • ".card-wall" 클래스는 카드가 행으로 배열되고 중앙에 가로로 정렬되도록 Flexbox 레이아웃으로 설정됩니다.
    • ".card" 클래스는 카드의 너비, 여백, 배경색, 텍스트 가운데 맞춤 및 패딩을 설정합니다.
    • ".card img" 클래스는 카드의 이미지 너비를 100%로 설정합니다.
    • 작은 화면에서 카드가 더 잘 렌더링되도록 화면 너비가 768px 미만인 경우 "@media" 쿼리가 적용됩니다.

    이 코드를 사용하면 반응형 카드 월 레이아웃을 쉽게 만들 수 있습니다. 사용되는 장치에 관계없이 카드는 다양한 화면 크기에 맞게 자동으로 크기가 조정되고 배열됩니다.

    물론 이는 단순한 예일 뿐입니다. 더 많은 카드를 추가하고 CSS 스타일을 사용하여 디자인을 향상시킬 수 있습니다.

    요약:

    이 기사에서는 HTML과 CSS를 사용하여 간단한 반응형 카드 월 레이아웃을 만들었습니다. Flexbox 레이아웃과 미디어 쿼리를 사용하면 다양한 화면 크기의 장치에 맞게 레이아웃을 쉽게 조정할 수 있습니다.

    이것은 HTML과 CSS를 사용하여 반응형 레이아웃을 만드는 기본 사항일 뿐이며, 더 복잡하고 독특한 디자인 효과를 얻기 위해 더 배우고 연습할 수 있습니다.

위 내용은 HTML과 CSS를 사용하여 반응형 카드 월 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿