HTML - 이미지와 피겨 요소

HTML에서 <img>는 이미지를 넣기 위한 태그이다. 가장 많이 쓰는 요소 중에 하나이며 인라인 블록 레벨을 갖는다.

<img src="images/eve.png" alt="Eve" />

 

기본적으로 이렇게 사용한다. 이미지 태그를 사용할 때 반드시 포함되어야 하는 속성이 src와 alt이다.

src는 보여지는 이미지의 경로를 의미한다. 외부의 이미지 주소를 넣을 수도 있고 혹은 컴퓨터에 저장된 이미지 경로를 넣을 수도 있다.

alt는 이미지를 대체하는 텍스트이다. 만일 이미지가 보이지 않는 상황에서 alt에 작성한 텍스트가 보일 수도 있다. 하지만 유의할 점이 있는데 alt는 단순하게 작성해서는 안된다. 

 

무슨 말이냐면

 

이런 이미지를 넣고 alt를 작성한다고 가정해 보자 단순하게 생각하면 '케이크 사진', '여러 가지 케이크', '케이크 소개' 이런 문구를 생각할 수 있을 것이다. 하지만 웹 접근성까지 고려해 봤을 때 시각장애인이 해당이미지에 접근한다고 했을 때 텍스트 리더는 alt를 읽어주기 때문에 '케이크 사진'이라는 대체 텍스트는 적절하지 않다. 그러면 어떻게 해야 하는가?

<img src="/src/assets/food/cake.jpeg" 
alt="Peace of Cake(한 조각의 평화), 밀크레이프, 수플레 치즈, 초코 티라미수, 데블스 초코, 더블치즈" />

 

해당 사진은 새로운 메뉴를 고객들에게 소개하는 포스터이다. 제품을 소개하는 성격의 이미지이기 때문에 이미지 안의 정보를 최대한 전달할 수 있게끔 작성했다. 그렇다고 또 무조건 대체 텍스트는 자세하게 묘사해야 한다는 함정에 빠지지 않도록 주의하자.

HTML은 문서이다. 글과 이미지는 모두 문서의 맥락에 따라 작성되므로 해당 문서에 맥락에 알맞은 텍스트를 넣을 수 있어야 한다.

 

추가로 img의 속성에는 width와 hieght를 추가해 줄 수도 있다. 이렇게 했을 때 장점은 HTML문서를 브라우저에서 렌더링을 진행할 때 이미지의 크기와 위치를 미리 지정해 주는 효과가 있어서 성능면에서 이점을 가져올 수 있다고 한다.

 

성능면에서 이점을 주는 속성이 한 가지 더 있는데 loading 속성이 있다. 이 속성이 없다면 이미지 태그를 불러올 때 브라우저 창 밖에 있는 이미지도 같이 불러오기 때문에 렌더링 속도가 늦어질 수 있다. 그러나 loading="lazy"를 추가해 주면 브라우저 밖에 있는 이미지는 렌더링 되지 않다가 스크롤이 내려오면서 브라우저 창에 나타날 때 렌더링을 시작하기 때문에 좀 더 빠른 웹페이지 로딩을 기대할 수 있다.

아래 링크는 파이어폭스 홈페이지가 어떻게 렌더링 되고 CSS가 적용되는지 보여주는 flow를 보여주는 영상이다. 참고하면 좋을 것 같다.

https://youtube.com/clip/UgkxxzdnQHGo-KcJQUHbYctkm2HxbP27W_SV?si=EXsWi4bTaK0T3NN4

 

 

<figure> 요소는 HTML5에 추가된 시멘틱 요소로 이미지나 동영상에 설명을 덧붙이기 위해 사용한다.

<figure>
  <img src="/src/assets/drama/mon-friend-son-narrow.webp"
       alt="엄마 친구 아들 (새로운 에피소드 지금 시청하기)"
       width="284"
       height="400" />
      <figcaption>엄마친구아들</figcaption>
</figure>

 

<figure> 내부에는 이미지 외에도 차트나 표 비디오 코드 블록등 다양한 요소가 들어갈 수 있으며 <figcaption>이라는 자식 요소를 통해 설명을 추가할 수 있다. 마치 피겨 장식장과 같이 독립적으로 콘텐츠를 배치하는 요소로 사용할 수 있다.