HTML Living Standard(3) | 각종이미지들

✨이미지 태그는 <img>만 쓰는것이 아님

 지금까지 이미지 삽입할때는 <img>태그만 사용하거나, 경로는 html로 지정하지 않고 css의 background-image 속성으로 이미지를 올리곤 했었다. 하지만 semantic 태그들과 스크린리더의 접근성을 위해서는 보다 세부적인 이미지 삽입의 태그가 필요한것. 또는 개념으로만 살짝 알고있던 것들을 다시한번 되짚어보도록 하자.

 

<img>의 srcset 속성

<picture>
  <source srcset="./images/1200jpeg.jpg" media="(min-width:960px)">
  <source srcset="./images/600jpeg.jpg" media="(min-width:620px)">
  <source srcset="./images/300jpeg.jpg" media="(min-width:400px)">
  <img src="./images/300jpeg.jpg" alt="귀여운 코끼리입니다"> 
</picture>

모니터밖으로 사과 달라고 즐겁게 코를 후려칠것같다

 사용자 브라우저의 width 값에 따라 이미지 사이즈가 변경된다면 대개 css의 Media Query를 종종 이용하긴 한다. 그러나 기획자나 PM들과의 협업중에 무엇으로 정하자고 결정함에 따라 html로 작업할지, css로 작업할지 결정한다고 함.

 

 

 

<figure>

<figure>
	<img src="images/maratang.jpg" alt="마라빠진 하얀 마라탕">
	<figcaption>
		마라탕은 청탕으로 먹어야 제맛
	</figcaption>
</figure>

마라탕은 하얗게 먹는것... 마라가 없는 시점에선 사실 중화식 야채수프이긴 함

 <img> 태그를 이용할때 접근성을 위해 alt값 외 이미지에 캡션을 추가하기 위해선 방법이 없었다. 이 <figure>태그는 <img>태그에서 이미지에 캡션을 추가하기 위하여 도입된 것이다.