<figure>와 <figcaption> 사용법

    
      <figure>
        <!-- 여기에 이미지와 같은 멀티미디어 요소가 들어갈 수 있습니다 -->
      </figure>
    
  

    
      <figure>
        <img src="example.jpg" alt="예시 이미지">
        <figcaption>이미지의 내용을 설명하는 캡션</figcaption>
      </figure>
    
  

    
      <figure>
        <table>
          <tr>
            <th>제목 1</th>
            <th>제목 2</th>
          </tr>
          <tr>
            <td>데이터 1</td>
            <td>데이터 2</td>
          </tr>
        </table>
        <figcaption>테이블에 대한 캡션</figcaption>
      </figure>
    
  

    
      <figure>
        <!-- figure 엘리먼트의 콘텐츠 -->
        <figcaption>컨텐츠에 대한 캡션</figcaption>
      </figure>
    
  

    
      <figure>
        <img src="landscape.jpg" alt="풍경">
        <figcaption>산과 호수가 있는 아름다운 풍경</figcaption>
      </figure>
    
  

    
      <figure>
        <figcaption>산과 호수가 있는 아름다운 풍경</figcaption>
        <img src="landscape.jpg" alt="풍경">
      </figure>
    
  

    
      <figure>
        <img src="chart.png" alt="판매 증가를 보여주는 차트">
        <figcaption>지난 분기의 판매 증가를 보여주는 차트</figcaption>
      </figure>
    
  

    
      <figure>
        <video controls>
          <source src="example.mp4" type="video/mp4">
          브라우저가 비디오를 지원하지 않습니다.
        </video>
        <figcaption>제품 작동을 보여주는 비디오 예제</figcaption>
      </figure>
    
  

    
      <figure>
        <pre>
          <code>
            function helloWorld() {
              console.log('Hello, world!');
            }
          </code>
        </pre>
        <figcaption>콘솔에 "Hello, world!"를 출력하는 JavaScript 함수 예제</figcaption>
      </figure>
    
  

    
      figure {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 20px;
        text-align: center;
      }

      figcaption {
        font-style: italic;
        color: #555;
        margin-top: 10px;
      }
    
  

    
      <figure>
        <img src="nature.jpg" alt="자연">
        <figcaption>아름다운 자연의 모습</figcaption>
      </figure>