AirDream

작성한 질문수 40

2

무뭉님 답변 감사합니다^^

추가로 말씀드리면, <img>를 쓰지 않고 배경 이미지를 사용하는 경우에도 <figure class="foo"></figure> 이런 식으로도 사용 한답니다.
이 패턴은 특히 애플 사이트에서 자주 볼 수 있는데요, 이런 식의 사용은 접근성이랑은 별 상관은 없지만 의미없는 div 대신 그냥 figure를 써준 것 같습니다.

2

저도 인터넷으로 서칭해보구 답변 답니다!

img 태그는 말 그대로 이미지 태그이구용

figure 태그는 사진/도표/삽화/오디오/비디오 코드들을 감싸는 태그라고 생각하시면 되요

즉 img 태그의 경우

figure 태그가 부모요소로서 감싸져서 사용되는 경우도 있는것이고,

그렇지 않은 경우도 있습니다.

그럼에도 figure를 굳이 사용하는 이유는 웹접근성 때문입니당.

이미지,동영상, 도표 자체는 시각장애인분들이 이용하는 스크린리더가 인식할 수 없습니다.

그래서 alt="" 속성을 통해 이 이미지가 어떤 이미지 인지 설명해주고 있죠

하지만 사이트에 뿌려져있는 이미지/동영상/도표들이 서로 연관이 있다면

figure로 묶어주고 figcaption을 통해 서로 연관이 있음을 명확하게 명시할 수 있기에

검색엔진 최적화 / 웹접근성에 대해 높이는 데에도 도움이 됩니다.

네이버 블로그들 보면 여러 이미지나 동영상 등을 하나의 묶음으로 묶어놓고

그 밑에 작은 설명글도 달려 있죠? 그와 같은 형식이라고 보시면 되용!

<figure>

    <img src="./이미지.jpg">

    <img src="./이미지2.jpg">

    <video src="./비디오.mp3"></video>

    <figcaption>묶음 설명글</figcaption>

</figure>

웹접근성 관련 글은 구글에 찾아보시면 도움이 되실거에용!

도움이 되셨길 바라며~~~ㅎ_ㅎ 즐코하세요