[HTML] Figure and Figcaption

HTML

[HTML] Figure and Figcaption

Dongi 2021. 11. 28. 09:18

안녕하세요 동기 여러분! 오늘은 이미지를 감싸는 태그에 대해 알아봅시다!

Figure and Figcaption

추가 정보를 넣기 위해 저번 시간에 <aside> 태그에 대해서 배웠습니다. 그런데 만약 이미지나 일러스트를 넣고 싶을 때는 어떻게 해야할까요?

<figure></figure>

<figure> 태그 안에는 이미지나 일러스트, 다이어그램, 코드 블럭 등등이 들어갑니다.

<figure>의 생김새

<figure>
    <img src="이미지의 이름이나 위치">
</figure>

<figcaption></figcaption>

<figcaption> 태그는 이미지의 설명을 붙여주기 위한 요소입니다.

이미지의 설명을 <p>로 적어놨다면 <figure>의 위치를 옮겨야 할 때 <p>가 나오지 않는 경우가 발생할 수 있습니다. 하지만 <figcaption> 태그를 사용해 이미지 설명을 붙여 놓는다면 붙었기 때문에 따라갑니닿ㅎ

<figcaption>의 생김새

<figure>
    <img src="이미지의 이름이나 위치">
    <figcaption>여기에 이미지 설명</figcaption>
</figure>

<figure> 태그 속으로 넣어주시면 됩니다!

예

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>
        동기 코딩
      </h1>
      <nav>
        <ul>
          <li><a href="#home">홈</a></li>
          <li><a href="#list">목록</a></li>
          <li><a href="#contact">연락처</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <article>
          <h2>동기 코딩은</h2>
          <p>운동을 좋아하려고 매일 하는 사람<br>
            요리를 살기위해 매일 하는 사람</p>
        </article>
      </section>
      <aside>
        <p>공으로 하는 운동은 진짜 못하는 사람<br>
        요리는 맛있게 잘하는 사람</p>
      </aside>
      <figure>
        <img src="https://tistory4.daumcdn.net/tistory/4908644/attach/b421ac0267a34c8a9b05ded4470e1348">
        <figcaption>동기 코딩</figcaption>
      </figure>
    </main>

    <footer>
      <p>
        연락처 loveehd012@gmail.com
      </p>
    </footer>
  </body>
</html>

</aside> 태그 밑에 <figure>과 <figcaption>을 넣어 보았습니다 아래는 실행 화면입니다.

오늘의 느낌

히터를 틀어도 발이 너무 시려서 집에서 신을 수 있는 슬리퍼를 아마존에서 구경하고 있었는데 내가 알고 있던 슬리퍼와는 완전 다르게 생긴 슬리퍼를 발견해서 주문하였다. 가격도 저렴한편

빨리 왔으면 좋겠다 발시려 ㅠㅠ