HTML문서에서 이미지 불러오기

안녕하세요 찐망고입니다.

오늘은 html문서에 이미지를 불러와볼 건데요.

문서에 이미지를 불러오는 요소들을 모두 포스팅해볼게요..

이미지 맵은 따로 포스팅하도록 하겠습니다. 

 

 

어떤 요소를 사용하든 이미지를 불러오려면

역시 경로가 중요합니다.

상대경로와 절대경로

 

 

1. <img> 요소

<img src="경로" alt="이미지설명문구">

이미지요소는 경로를 통해 문서에 이미지를 불러올 때 사용하는 가장 기본적인 요소인데요.

alt속성을 꼭 같이 넣어줘야 합니다. 웹접근성에 어긋나지 않기 위해서죠.

스크린리더기에서 해당 이미지를 alt속성에 사용한 값으로 읽어줍니다.

CSS를 이용해서 100%로 설정해 부모요소의 width값을 따라 사이즈가 달라지게 적용하는 경우가 많고요

img {
    width: 100%;
    max-width: 100%;
}

max-width를 사용하게 되면 브라우저 너비와 부모요소와 상관없이 이미지 본래의 크기만큼만 늘어납니다.

 

 

 

2. <figure> 요소

<figure>
    <img src="경로" alt="이미지제목">
	<figcaption>이미지 캡션</figcaption>
</figure>

HTML5요소에서 추가된 <figure> 요소는 

이미지, 도표, 그림, 사진, 동영상 등의 멀티미디어 콘텐츠를 감싸는 컨테이너 역할을 합니다.

웹 접근성을 개선하고 검색 엔진 최적화(SEO)에 도움을 주는 요소 이죠.

<figcaption> 요소와 함께 사용되며, <figcaption> 요소의 위치는 위아래 모두 상관없습니다.

생략도 가능하지만 아무래도 생략하지 않는 것이 더 좋겠죠?

 

검색엔진최적화에 관련해서 잘 나온 포스팅이 있어 링크 걸어봅니다

 

검색엔진최적화(SEO)란 무엇인가? A~Z까지 알아보자!! 검색엔진최적화 프로세스 및 초/고급 과정

 

 

 

3. <picture> 요소

<picture>
    <source media="(min-width: 650px)" srcset="경로">
    <source media="(min-width: 480px)" srcset="경로">
    <img src="경로" alt="이미지이름">
</picture>

미디어 쿼리를 사용하여 미디어 유형 및 해상도에 따른 이미지를 표시하는 데 사용하는데요.

반응형 사이트를 만들 때 유용하겠죠?

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="경로" alt="이미지이름">
</picture>

미디어쿼리 없이 사용할 수도 있는데 먼저 브라우저가 지원하는 webp이미지를 확인하고,

그렇지 않은 경우 jpg이미지를 기본이미지로 사용합니다.