임베디드 요소

임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.

1. <img>: 이미지 삽입 요소

<img> 요소는 문서에 이미지를 넣습니다. 이미지태그는 내부에 내용을 코드로 구성할 수 없습니다.

<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="자몽조각">

1-1 src속성 (Sorce)

src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다. 경로는 절대경로와 상대경로 모두 가능합니다.

1-2 alt속성 (alternative text, 대체택스트)

alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

  <header>
    <h1><a href="/"><img src="<https://www.starbucks.co.kr/common/img/common/logo.png>" alt="STARBUCKS"></a></h1>
  </header>

위와 같이 alt속성을 작성한 경우 HeadingMap 어플을 통해 확인해보면 아래와 같이 aly에 적은 내용을 확인할 수 있습니다.

하지만 alt값을 적지 않는 경우 아래와 같이 아무런 내용도 출력되지 않아, 스크린리더 이용자들이 불편을 겪게 됩니다.

1-3 width속성 & height속성

이미지의 픽셀 기준 고유의 너비와 높이. 단위 없는 정수여야 합니다. 만약, 가로(세로)길이만 설정을 하는 경우 원래 이미지 비율에 맞춰 세로(가로) 이미지가 변경됩니다.

대체로 css에서 이미지 크기를 조정하는 경우 width값이나 height 값 중 한가지 값을 사용하는 편입니다.

1-4 srcset 속성

지금까지는 src속성을 이용해 사용하는 이미지를 하나만 명시해서 사용했습니다. 하지만 srcset속성을 이용하면 여러가지 src를 지정해 이용할 수 있습니다. srcset속성은 반응형이미지를 만들기 위해 사용되며, 사용자의 viewport에 따라 이미지를 지원할 수 있습니다.

단, 인터넷익스플로어에서는 지원이 되지 않습니다. 그렇기 때문에 srcset속성을 사용할 때 src속성도 꼭 명시를 해주는 것이 좋습니다.