이미지 & 피규어 & 캡션

이미지 & 피규어 & 캡션

HTML 문서에 연결되어 화면에 표시되는 이미지 요소와 도표, 차트, 표, 이미지 등을 캡션과 함께 묶어주는 피규어 요소로 묶어줄 수 있다.

• 웹 문서에 주로 사용 되는 이미지 포멧

  • 비트맵 그래픽 파일 : JPG, GIF, PNG 포멧 사용

  • 벡터 그래픽 파일 : SVG 포멧 사용

JPG, GIF, PNG, SVG

구분	설명
JPG	JPG 이미지는 압축률이 높고, 다양한 색상을 처리하도록 설계되었다. 사진 또는 복잡한 그래픽 이미지에 많이 사용 되는 포멧이다. 하지만 GIF, PNG와 달리 투명한 픽셀을 허용하지 않는다.
PNG	PNG는 JPG와 달리 배경을 투명하게 처리할 수 있다. 하지만 사진의 경우 동일한 품질의 JPG 파일 보다 크기가 크다. 최근에 애니메이션(APNG)도 사용이 가능하다.(단, 브라우저 호환성 확인을 해야 한다.)
GIF	GIF는 표현 가능한 색상이 256색으로 제한되어 있기에 고품질의 사진에는 적합하지 않다. 하지만 애니메이션을 적용할 수 있는 포멧으로 단순한 그래픽의 애니메이션에 사용하면 좋다. 투명하게 처리가 가능하긴 하지만, PNG 포멧 보다 표현력이 떨어진다.
SVG	SVG는 벡터 기반 그래픽 포멧으로 품질 손실없이 확대, 축소 할 수 있다. 오늘날 처럼 다양한 스크린에 대응하는 반응형 웹 디자인에 매우 적합하다. 왼쪽 이미지인 SVG와 달리 오른쪽 이미지인 비트맵 이미지는 크기를 키울 경우 뿌옇게 표시된다. (픽셀로 구성된 그래픽 이기 때문이다.) 페이지의 로고, 아이콘, 인포그래피에 자주 사용한다.

SVG (왼쪽), 비트맵 이미지(오른쪽)

이미지 (images)

<img src="소스데이터" alt="대체텍스트" />

• src → source / alt → alternate test

• alt 속성을 잘 설정해두면, 시각 장애인이 아니더라도 도움을 받을 수 있다. 이미지 링크가 깨질 경우, 화면에 alt 속성 값이 출력 되어 어떤 이미지인지 정보를 제공할 수 있다.

• display: inline 요소이다.

HTML 문서는 이미지를 포함시키지 않는다

• 한글이나 워드는 문서에 이미지를 포함 시키지만 HTML 문서는 이미지를 포함시키지 않는다.

• 이미지를 연결해서 사용한다.

• HTML 파일에 이미지가 포함이 된다면 파일의 용량이 커지기 때문에 속도가 느려진다.

CSS에 이미지를 연결한 경우 (의미있는 이미지)

• aria-label을 사용해서 이미지에 대한 설명을 작성해주는 것이 좋다.

• 스크린리더 사용자에게 해당 이미지에 대한 설명을 해주는 것이 좋다.

• IR 기법은 CSS 배경이미지에 대체 텍스트를 사용해서 사용자에게 대체 설명을 해주는 기법이다.

  • 하나의 이미지를 여러 곳에 재사용 할 수 있다는 장점이 있다.

• sprites 기법

<button
  type="button"
  class="button is-open-menu"
  aria-label="메뉴 열기"
  title="메뉴 열기"
>
  <span class="ir"></span>
</button>

.is-open-menu .ir {
  background-image: url(../images/navigation-button.gif);
}

피규어(Figure)

• <figure>

  • 도표, 차트, 이미지, 표를 감쌀 때 사용 되는 요소

  • 피규어 요소 안에 피그캡션 요소를 넣어 줄 수 있다.

캡션 (Caption)

• <figcaption>

  • 캡션은 이미지와 묶여서 하나의 덩어리가 되어야 한다.

  • 피규어(Figure)요소를 사용해서 이미지와 캡션 요소를 하나도 감쌀 수 있다.

<figure>
  <img src="" alt="" />
  <figcaption></figcaption>
</figure>

이미지 치수(dimension)

이미지가 로딩 되는 동안 브라우저는 이미지/비디오의 공간을 미리 할당한다. 그렇기 때문에 <img> 요소를 사용할 때는 너비/ 높이를 입력해준다. (웹성능 검사(Lighthouse) 시 문제가 될 수 있는 부분이다.)

단축키: ctrl + shift + i (MAC 기준)

<img src="./images.jpg" width="75" height="90" />