임베디드 요소
임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.
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속성도 꼭 명시를 해주는 것이 좋습니다.
사용방법
1. 이미지의 URL.
2. 선택적으로, 공백과 함께 그 뒤를 잇는...
-너비 서술자(양의 정수와 바로 뒤의 'w' 문자). 너비 서술자의 값을 sizes 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.
-픽셀 밀도 서술자(양의 실수와 바로 뒤의 'x' 문자).
서술자를 포함하지 않은 경우 기본값인 1x로 간주합니다.
<img
src="imges/large.png"
srcset="images/small.png 300w,
images/medium.png 450w,
images/large.png 600w"
alt="responsive images">1-5 sizes 속성
srcset속성이 뷰포트의 크기에 따라 다른 이미지를 출력값으로 주었다면, sizes속성은 특정조건에 따라 아예 다른 파일을 줄 때도 있으며 다른 파일의 사이즈를 지정해주기도 합니다.
사용방법
1. 미디어 조건. 마지막 항목에서는 생략해야 합니다.
2. 소스 크기 값.
미디어 조건은 이미지의 속성이 아니라 뷰포트 속성을 가리킵니다. 예를 들어, (max-height: 500px) 1000px은 1000px 너비의 소스를 사용하려면 뷰포트가 500px 이하여야 한다는 뜻입니다.
<img
src="imges/large.png"
srcset="images/small.png 300w,
images/medium.png 450w,
images/large.png 600w"
sizes="(min-width: 600px) 600px, // 600px보다 화면이미지가 넓은 사용자에게는 600px,
(min-width: 450px) 450px, // 450px보다 크면서 600px보다 작은 사용자 450px,
300px" //나머지는 300px
alt="responsive images">소스 크기는 의도한 이미지 표시 크기를 지정합니다. 사용자 에이전트는 현재 소스 크기를 사용해, 너비(w) 서술자를 사용한 srcset 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 고유 크기 (en-US)(CSS 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. srcset이 비어있거나 너비 서술자를 사용하지 않은 경우, sizes 특성은 아무 효과도 없습니다.
웹 개발을 하다보면 특정사이지의 이미지를 테스트 용도로 필요한 경우가 있는데, placeholder 홈페이지를 통해 특정 사이즈의 이미지를 만들 수 있습니다.
