HTML/CSS는 멀티 그래프 그리드 레이아웃 및 제목 정렬을 인식합니다

이 튜토리얼은 그리드에서 HTML에서 여러 이미지를 구현하고 각 이미지 아래의 해당 텍스트를 표시하는 문제를 해결하는 것을 목표로합니다. Figcaption이 레이아웃 오정렬을 유발하는 블록 레벨 요소 인 이유를 탐색하고 디스플레이를 기반으로 솔루션을 제공합니다. 인라인 블록 속성은 이미지 및 제목에 대한 통합 패키징 컨테이너를 만들어 그래픽 및 텍스트의 유연하고 반응적인 나란한 표시를 달성 할 수 있습니다.

문제 이해 : figcaption의 기본 동작

웹 디자인에서는 종종 각 이미지 아래에 짧은 설명 텍스트와 함께 이미지 갤러리 또는 제품 목록을 표시해야합니다. 초보자는 태그와

 <img  src="img1.png" alt="HTML/CSS는 멀티 그래프 그리드 레이아웃 및 제목 정렬을 인식합니다" > <figcaption> "image 1 title"</figcaption>
<img  src="img2.png" alt="HTML/CSS는 멀티 그래프 그리드 레이아웃 및 제목 정렬을 인식합니다" > <figcaption> "image 2 title"</figcaption>

그러나이 관행은 종종 각 이미지를 초래하고 제목은 나란히 표시되지 않고 한 줄에 배타적입니다.

해결책 : 인라인 블록 컨테이너

이 문제를 해결하기 위해서는 각 이미지와 해당 제목을 나란히 배열 할 수있는 독립 "단위"로 취급해야합니다. 가장 효과적인 방법은 각 이미지 및 제목 그룹에 대한 공통 포장 컨테이너를 만들고 디스플레이를 사용하는 것입니다. CSS의 인라인 블록 속성을 사용하여 이러한 컨테이너의 레이아웃을 제어하는 것입니다.

디스플레이 : 인라인 블록은 인라인 요소와 블록 레벨 요소의 특성을 결합한 매우 강력한 CSS 속성입니다.

• 인라인 특성 : 요소는 텍스트와 같은 줄에 나란히 표시 될 수 있으며 공간이 부족할 때 자동으로 랩핑됩니다.
• 블록 레벨 속성 : 요소는 너비 (너비), 높이 (높이), 내부 및 외부 마진 (마진, 패딩)과 같은 블록 레벨 속성을 설정할 수 있으며 내용은 블록 레벨 요소의 규칙에 따라 배치 될 수 있습니다.

이미지와 제목을 div (또는 더 의미 요소)로 감고 디스플레이를 적용 하여이 래퍼 컨테이너에 인라인 블록을 적용하면 원하는 그리드 레이아웃을 달성 할 수 있습니다.

HTML 구조

우리는 각 이미지와 그 제목을 div로 래핑하고 이미지 래퍼와 같은 클래스 이름을 추가합니다.

 <div class="Gallery-Container">
    <div class="image-wrapper">
        <img src="img1.png" alt="picture 1">
        <figcaption> 이미지 1 제목 </figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img2.png" alt="picture 2">
        <figcaption> 이미지 2 제목 </figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img3.png" alt="picture 3">
        <figcaption> 그림 3 제목 </figcaption>
    </div>
    
</div>

참고 : 시맨틱 화를 향상시키기 위해

요소를 그림과 제목의 래퍼로 사용하는 것이 좋습니다. 위의 DIV의 예는 원래 질문과 답변 솔루션에 직접 일치하는 것이지만 실제 개발에서

가 더 나은 선택입니다.

CSS 스타일

다음으로 .Image-Wrapper 클래스에 CSS 스타일을 추가합니다.

 
    .Gallery-container {
        텍스트 정렬 : 센터; /* 선택 사항 : 상위 컨테이너의 모든 이미지 그룹을 중앙으로 중앙*/
    }

    .Image-Wrapper {
        디스플레이 : 인라인 블록; /* 키 : 사진 그룹 디스플레이를 나란히 만들기*/
        텍스트 정렬 : 센터; /* 컨테이너 내부의 이미지와 제목을 중심으로*/
        여백 : 10px; /* 선택 사항 : 사진 그룹 간 간격 설정*/
        수직 정상 : 상단; /* 선택 사항 : 컨텐츠 높이가 다르기 때문에 오정렬을 피하기 위해 상단을 정렬*/
        너비 : calc (33.33% -20px); / * 예 : 3 개의 열 레이아웃, 왼쪽 및 오른쪽 마진 마이너스 */
        최대 width : 250px; /* 각 그림의 최대 너비 제한*/
    }

    .Image-Wrapper img {
        최대 전역 : 100%; /* 이미지가 컨테이너 내에서 반응 적으로 스케일링되어 있는지 확인하십시오*/
        높이 : 자동; /* 사진 종횡비 유지*/
        디스플레이 : 블록; /* 그림이 독립적인지 확인하고 하단 격차를 피하십시오*/
        마진 : 0 Auto 5px; /* 사진은 제목에서 중앙에 있고 간격을두고 있습니다*/
    }

    .Image-Wrapper figcaption {
        글꼴 크기 : 0.9EM;
        색상 : #555;
        패딩 : 5px;
    }

    / * 반응 조정 (선택 사항) */
    @Media (max-width : 768px) {
        .Image-Wrapper {
            너비 : calc (50% -20px); /* 중간 화면 두 개의 열이 표시*/
        }
    }

    @Media (max-width : 480px) {
        .Image-Wrapper {
            너비 : calc (100% -20px); /* 작은 화면이 열을 표시합니다*/
        }
    }
스타일>

주요 CSS 속성 설명 :

• 디스플레이 : 인라인-블록; : 이것은 나란히 레이아웃을 구현하는 핵심입니다.
• Text-Align : Center; : 이미지와 제목이 해당 컨테이너 내의 수평으로 중앙에 있도록 .Image-Wrapper 내부에 적용됩니다.
• 여백 : 10px; : 각 이미지 그룹에 외부 간격을 추가하여 단단히 맞지 않도록하십시오.
• 수직-정상 : 상단; : 인라인 블록 요소의 내용이 높이가 다를 때이 특성은 상단에 정렬되어 고르지 않은 바닥을 피합니다.
• 너비 : calc (33.33% -20px); : 이것은 3 열 레이아웃을 구현하는 예입니다. calc () 함수는 CSS에서 수학적 계산을 허용하며, 각 열의 너비가 계산되고 왼쪽 및 오른쪽 여백이 뺄 수 있습니다.
• 최대 전역 : 100%; 및 높이 : Auto; : IMG 태그에 적용되어 반응 형 레이아웃에서 부모 컨테이너의 크기에 따라 이미지를 자동으로 조정하고 원래 종횡비를 유지할 수 있습니다.
• 디스플레이 : 블록; (IMG의 경우) : IMG는 인라인 교체 요소이지만 표시되도록 설정하십시오. 블록은 이미지 아래에 나타날 수있는 여분의 블랭크를 제거하고 (일반적으로 기준선 정렬로 인해) 마진 : 0 Auto를 통해 더 쉽게 중앙을 중심으로 할 수 있습니다.

완전한 샘플 코드

HTML 구조와 CSS 스타일을 결합하면 기능적으로 완전한 사진 그리드 레이아웃이 제공됩니다.

 


    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, 초기 스케일 = 1.0">
    <title> 사진 및 제목 그리드 레이아웃 </title>
    
        몸 {
            Font-Family : Arial, Sans-Serif;
            마진 : 20px;
            배경색 : #f4f4f4;
        }

        .Gallery-container {
            최대 width : 1200px;
            여백 : 0 Auto;
            패딩 : 10px;
            배경색 : #fff;
            Border-Radius : 8px;
            Box-Shadow : 0 2PX 5PX RGBA (0,0,0,0.1);
            텍스트 정렬 : 센터; /* 부모 컨테이너의 모든 이미지 그룹을 중앙으로 중앙*/
        }

        .Image-Wrapper {
            디스플레이 : 인라인 블록; /* 키 : 사진 그룹 디스플레이를 나란히 만들기*/
            텍스트 정렬 : 센터; /* 컨테이너 내부의 이미지와 제목을 중심으로*/
            여백 : 10px; /* 사진 그룹 간 간격 설정*/
            수직 정상 : 상단; /* 상단 정렬*/
            너비 : calc (33.33% -20px); / * 예 : 3 개의 열 레이아웃, 왼쪽 및 오른쪽 마진 마이너스 */
            최소값 : 150px; /* 너무 작게 방지하기위한 최소 너비*/
            박스 사이징 : 국경 박스; /* 패딩과 테두리가 너비에 포함되어 있는지 확인하십시오*/
        }

        .Image-Wrapper img {
            최대 전역 : 100%; /* 이미지가 컨테이너 내에서 반응 적으로 스케일링되어 있는지 확인하십시오*/
            높이 : 자동; /* 사진 종횡비 유지*/
            디스플레이 : 블록; /* 사진이 자리 표시 자와 무관한지 확인*/
            마진 : 0 Auto 8px; /* 사진은 제목에서 중앙에 있고 간격을두고 있습니다*/
            Border-Radius : 4px;
        }

        .Image-Wrapper figcaption {
            글꼴 크기 : 0.9EM;
            색상 : #333;
            패딩 : 0 5px;
            라인 높이 : 1.4;
        }

        /* 응답 조정*/
        @Media (max-width : 768px) {
            .Image-Wrapper {
                너비 : calc (50% -20px); /* 중간 화면 두 개의 열이 표시*/
            }
        }

        @Media (max-width : 480px) {
            .Image-Wrapper {
                너비 : calc (100% -20px); /* 작은 화면이 열을 표시합니다*/
            }
        }
    스타일>



    <div class="Gallery-Container">
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x180/ff5733/fffff?text=image%201" alt="아름다운 풍경 1">
            <figcaption> 이것은 자연의 매력을 보여주는 아름다운 풍경입니다. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x200/33ff57/fffff?text=image%202" alt="City Night View 2">
            <figcaption> 밤하늘 아래의 도시는 밝게 빛나고 빛으로 가득합니다. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x160/3357ff/fffff?text=image%203" alt="Abstract Art Works 3">
            <figcaption> 상상력으로 가득 찬 추상 예술 작품으로 생각을 자극합니다. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x190/ff33a1/fffff?text=Image%204" alt="귀여운 작은 동물 4">
            <figcaption> Furry 새끼 고양이가 세상을 호기심으로 탐험하고 있습니다. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x170/a133ff/ffffff?text=image%205" alt="Food Close-up 5">
            <figcaption> 음식의 매혹적인 클로즈업은 사람들을 침샘하게 만듭니다. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x210/33fff3/fffff?text=image%206" alt="기술 제품 디스플레이 6">
            <figcaption> 절묘한 디자인과 강력한 기능을 갖춘 최신 스마트 폰. </figcaption>
        </div>
    </div>

위 내용은 HTML/CSS는 멀티 그래프 그리드 레이아웃 및 제목 정렬을 인식합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!