CSS 및 Flexbox를 사용하여 다른 화면 크기로 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?

CSS 반응 형 레이아웃 : 사진과 텍스트의 완벽한 조합

이미지와 텍스트를 다른 화면 크기로 완벽하게 제시 할 수있는 반응 형 웹 레이아웃을 만들면 프론트 엔드 개발에서 일반적인 과제입니다. 이 기사는 CSS의 Flexbox 및 미디어 쿼리를 사용하여 더 큰 화면에 사진과 텍스트를 나란히 표시하는 효과를 달성하는 방법에 대해 자세히 설명하며, 작은 화면 (예 : 휴대 전화)에서는 이미지가 상단에 있고 텍스트는 맨 아래에 있습니다.

요구 사항 배경

목표는 CSS 및 Flexbox를 사용하여 고정 크기 사진 (200x200 픽셀)과 텍스트 조각으로 레이아웃을 구축하는 것입니다. 큰 화면에서 텍스트는 나머지 공간을 차지합니다. 작은 화면에서 이미지는 텍스트 위에 있습니다.

문제 및 해결책 : Viewport의 중요성

이전의 시도는 화면 너비에 따라 레이아웃이 변하지 않는 문제가 발생했을 수 있으며, 이는 일반적으로 뷰포트 설정이 부족하기 때문입니다. 뷰포트는 웹 페이지의 내용을 표시하는 브라우저 창의 영역입니다. 올바른 뷰포트 설정은 웹 페이지가 다른 장치에서 올바르게 렌더링되고 확장되도록합니다.

완전한 해결책 : HTML 및 CSS 코드

반응 형 레이아웃을 달성하려면 뷰포트 메타 태그를 부분적으로 추가하고 CSS 코드를 조정하십시오.

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 레이아웃 예제</title>
    <style>
        .container {
            display: flex;
        }

        .image {
            width: 200px;
            height: 200px;
        }

        .text {
            flex: 1; /* 占据剩余空间 */
        }

        /* 小屏幕媒体查询 (例如手机) */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 垂直布局 */
            }
            .text {
                flex: initial; /* 取消 flex 属性，让文本自适应宽度 */
            }
        }
    </style>


    <div class="container">
        <div class="image">그림</div>
        <div class="text">텍스트 내용</div>
    </div>

코드 설명 :

• meta name="viewport" : 뷰포트를 장치 너비에 따라 페이지 스케일로 설정합니다.
• .container : Flexbox 레이아웃을 사용하십시오.
• .image : 이미지 크기를 설정하십시오.
• .text : flex: 1; 텍스트가 나머지 공간을 차지하게하십시오.
• @media (max-width: 600px) : 미디어 쿼리. 화면 너비가 600px 미만인 경우 flex-direction column 설정하여 수직 레이아웃을 달성하고 .text 의 flex 속성을 제거하여 텍스트 내용이 너비에 적응할 수 있도록하십시오.

위의 설정을 통해 웹 페이지 레이아웃은 화면 크기에 따라 자동으로 조정되어 완벽한 반응 효과를 얻습니다. 실제 요구에 따라 max-width 의 값을 조정할 수 있습니다.

위 내용은 CSS 및 Flexbox를 사용하여 다른 화면 크기로 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!