-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
이미지태그 질문요!
21.03.10 16:57 작성 조회수 574
1
img 태그와
figure 태그와
위 둘은 html이며 주요 콘텐츠, 카드 UI일때 사용하고
background-image의 차이를 알고 싶어요.
얘는 CSS 배경요소로 꾸며줄때 사용하는 거는 알겠는데
img랑 figure 태그 사용 차이점이 헷갈려요.
혹시 제가 놓친 부분이 있다면
알려주세요!
답변을 작성해보세요.
2
1분코딩
지식공유자2021.03.11
무뭉님 답변 감사합니다^^
추가로 말씀드리면, <img>를 쓰지 않고 배경 이미지를 사용하는 경우에도 <figure class="foo"></figure> 이런 식으로도 사용 한답니다.
이 패턴은 특히 애플 사이트에서 자주 볼 수 있는데요, 이런 식의 사용은 접근성이랑은 별 상관은 없지만 의미없는 div 대신 그냥 figure를 써준 것 같습니다.
2
밀크티
2021.03.10
저도 인터넷으로 서칭해보구 답변 답니다!
img 태그는 말 그대로 이미지 태그이구용
figure 태그는 사진/도표/삽화/오디오/비디오 코드들을 감싸는 태그라고 생각하시면 되요
즉 img 태그의 경우
figure 태그가 부모요소로서 감싸져서 사용되는 경우도 있는것이고,
그렇지 않은 경우도 있습니다.
그럼에도 figure를 굳이 사용하는 이유는 웹접근성 때문입니당.
이미지,동영상, 도표 자체는 시각장애인분들이 이용하는 스크린리더가 인식할 수 없습니다.
그래서 alt="" 속성을 통해 이 이미지가 어떤 이미지 인지 설명해주고 있죠
하지만 사이트에 뿌려져있는 이미지/동영상/도표들이 서로 연관이 있다면
figure로 묶어주고 figcaption을 통해 서로 연관이 있음을 명확하게 명시할 수 있기에
검색엔진 최적화 / 웹접근성에 대해 높이는 데에도 도움이 됩니다.
네이버 블로그들 보면 여러 이미지나 동영상 등을 하나의 묶음으로 묶어놓고
그 밑에 작은 설명글도 달려 있죠? 그와 같은 형식이라고 보시면 되용!
<figure>
<img src="./이미지.jpg">
<img src="./이미지2.jpg">
<video src="./비디오.mp3"></video>
<figcaption>묶음 설명글</figcaption>
</figure>
웹접근성 관련 글은 구글에 찾아보시면 도움이 되실거에용!
도움이 되셨길 바라며~~~ㅎ_ㅎ 즐코하세요
밀크티
2021.03.11
보통 <img src="이미지 경로" alt="이미지 설명글"> 형태로 써서 웹접근성에 많이 신경써요!
예시) <img src="./logo.jpg" alt="기업명 로고 이미지입니다.">
<img src="./icon-next.jpg" alt="다음 페이지 이동 아이콘 입니다.">
이런식으로용!
alt 속성은 figure 태그에 쓰기보단 img / video 태그 등에 쓰여욥!
figure태그가 무엇인지 설명하는건 보통 figcation 이니까요
답변 2