[HTML] <figure>, <figcaption> 태그

형이·2023년 7월 31일
0

HTML

목록 보기
7/14
post-thumbnail

📝 HTML

🖥️ 1. 캡션을 지정하기 위한 figure 태그와 figcaption 태그

  • 캡션 : 사진이나 삽화 등에 붙이는 설명
  • <figure> : 캡션이 적용되는 범위를 지정하는 태그로 대부분 이미지를 감싸는 용도로 사용
  • <figcation> : <figure> 태그 안에 <img> 태그를 배치시키고, 이미지에 대한 설명을 담은 캡션은 <figcaption> 태그를 사용

📝 예시

EX)

<body>
    <div>
        <h1>하나의 요소에 대한 설명</h1>
        <figure>
            <img src="sun_night.jpg" title="선유도 야경"/>
            <figcaption>
                <strong>선유도 야경</strong> - 선유도는 밤마다 무지개로 변한다.
            </figcaption>
        </figure>
    </div>

    <div>
        <h1>여러 요소에 대한 설명</h1>
        <figure>
            <img src="spring.jpg" title="" />
            <img src="summer.jpg" title="여름" />
            <img src="autumn.jpg" title="가을" />
            <img src="winter.jpg" title="겨울" />
            <figcaptin>
                <b>우리나라의 사계절</b> - 봄, 여름, 가을, 겨울
            </figcaptin>
        </figure>
    </div>
</body>

0개의 댓글