멀티미디어

1. <img />

• 이미지를 삽입하는 태그입니다(display: inline;).

• 속성	의미	값
  🔑 src	이미지 URL	URL
  🔑 alt	이미지의 대체 텍스트
  width	렌더링될 이미지의 가로 너비
  height	렌더링될 이미지의 세로 너비
  srcset	브라우저에게 제시할 이미지 URL과 원본 가로 너비의 목록을 정의
  sizes	미디어 조건과 해당 조건일 때 이미지의 최적화 크기의 목록

• src, alt 속성은 필수 속성으로 img 태그를 작성할 때 필수적으로 작성해야 합니다.

• src 속성의 값으로는 HTTP URL을 작성할 수도 있고 프로젝트 내 이미지 파일 경로를 작성할 수도 있습니다.

• alt 속성은 대체 텍스트로 이지미가 보여지지 않을 때 표시될 대체 텍스트를 작성합니다.

• width, height, srcset, sizes 속성을 설정하지 않은 경우 기본적으로 원본 크기로 렌더링 되며, 이는 뷰포트가 커지거나 작아지더라도 원본 크기를 그대로 유지합니다.

• width, height 속성은 렌더링될 이미지의 너비를 설정하는 속성이며, 로드될 이미지의 크기는 원본 크기 그대로 로드하게 됩니다.

---

Content로 텍스트와 alt 텍스트를 동시에 작성해야 하는 경우 텍스트를 생략하고 alt 속성값으로 대체할 수 있습니다.

<h1>
    <a href="#">
        <img src="이미지경로" alt="제목 텍스트 작성" />
    </a>
</h1>

위 예제처럼 h1 태그의 Content로 작성될 텍스트를 img 태그의 alt 텍스트로 대체할 수 있습니다.

만약 정보로서 크게 의미가 없거나 alt로 작성할 값이 모호하다면 alt 속성은 작성하되 값은 비워둘 수 있습니다(alt="").단, 생략해서는 안됩니다. 즉, src, alt 둘 다 모두 필수적으로 작성해야하는 속성들입니다.

---

width, heigth 속성으로 이미지의 사이즈를 설정할 수 있습니다. width 또는 heigth 중 하나만 작성하여 사이즈를 설정하면 이미지가 갖고 있는 기존 원본 비율에 맞게 사이즈가 설정됩니다.

속성값으로는 단위 없는 정수를 작성합니다. 이때 작성된 정수는 픽셀 단위로 이미지에 적용됩니다.

img 요소는 인라인 요소이지만 widht, height로 크기를 설정할 수 있습니다. 이때 예상치못한 오류를 피하기 위해서 display: block;이라는 CSS 속성을 작성하고 크기를 조절하는 것을 권장합니다.

반응형 이미지

srcset, sizes 속성은 반응형 웹 사이트를 제작할 때 해당하는 반응형 구조에 맞게 이미지가 어떤 종류를 화면에 표시할지 설정하는 태그입니다.

src 속성은 srcset 속성이 사용되면 무시됩니다. srcset 속성을 사용할 수 없는 환경일 때 src 속성이 대체되어 사용됩니다. 그러므로 srcset 속성을 사용하더라도 src 속성은 필수로 작성해주어야 합니다

srcset 속성에 작성된 여러 이미지 중에서 현재 환경에서 가장 최적화된 이미지를 사용하게 됩니다. srcset 속성 사용시 뷰포트의 크기가 커지거나 작어지는 경우 자동적으로 그에 맞게 이미지의 크기가 변경됩니다.

sizes 속성은 최적화될 조건을 명시하는 속성입니다. srcset은 그 조건에 해당하는 출력될 이미지의 목록을 명시하는 속성입니다.

srcset

srcset 속성은 브라우저에게 제시할 이미지 경로와 그 이미지들의 원본 크기(가로 너비)를 작성하는 속성입니다.

반응형 웹에 맞게 브라우저가 사용할 이미지들의 후보를 브라우저가 자동으로 선택하여 화면에 표시해줍니다. 즉, 뷰포트의 크기에 맞게 이미지 후보가 선택되어 로드되고 표시됩니다.

이때 주의할 점으로 width 속성이나 sizes 속성 없이 srcset 속성만을 사용한다면 이미지는 "언제나 뷰포트의 가로 너비 100%를 차지하도록" 이미지의 크기가 계속적으로 변경될 것입니다.

srcset 속성에 사용할 이미지를 사이즈별로 2개 이상의 경로를 작성합니다. 각 경로 뒤 공백을 작성하고 원본 이미지의 너비를 의미하는 너비 서술자(양의 정수w) 혹은 픽셀 밀도 서술자(양의 실수x)를 작성해줍니다.

주의 사항으로는 원본 크기의 단위로 px가 아닌 w, x 단위를 사용해야 하며, 작은 사이즈 이미지부터 순서대로 후보들을 작성해줍니다.

• w unit: w 단위는 이미지의 원본 크기를 의미합니다.
  ex) 400 X 300 크기의 이미지는 400w 크기를 가집니다.

• x unit: x 단위는 이미지의 비율 의도를 의미합니다.

<img srcset="이미지경로1 원본크기(w unit),
             이미지경로2 원본크기(w unit),
             이미지경로3 원본크기(w unit)"
     src="이미지경로"
     alt="대체텍스트" />

브라우저는 이미지를 늘려서 사용하는 것보다 이미지를 줄여서 사용하는 것이 이미지가 깨지지 않고 뭉개지지 않는다고 판단합니다. 즉, 현재 viewport보다 큰 가장 가까운 이미지를 선택하여 표시하고, 이미지 크기를 줄여가면서 렌더링합니다.

고정된 이미지의 크기를 사용하려면 width 속성으로 이미지의 크기를 고정시킬 수 있습니다. 예를 들어, width 속성의 값으로 400px라는 값을 지정하면 해당 이미지는 400px로 고정된 상태에서 브라우저의 해상도 ,즉 viewport의 크기에 맞게 선택될 최적화 이미지를 srcset에 작성한 목록에서 이미지 후보들에서 선택하고 이미지를 400px 이라는 사이즈로 지정합니다. 이미지의 크기만 고정된 상태에서 이미지 경로만 viewport에 맞게 달라집니다.

sizes

sizes 속성은 미디어 조건과 그 조건에 해당될 때 화면에 표시할 이미지 후보와 렌더링될 너비를 지정합니다.

이는 뷰포트 크기에 따라 렌더링될 이미지 후보와 이미지의 크기를 명시적으로 지정하는 속성입니다. 기존 srcset 속성만 사용한다면 뷰포트의 가로 너비 100%를 사용하지만 sizes 속성을 사용하여 뷰포트 크기에 따라 고정된 크기를 설정할 수 있습니다.

예를 들어, sizes="(min-width: 1000px) 700px"은 최적화 조건으로 뷰포트의 가로 너비가 1000px 이상이라면 출력될 이미지의 크기를 700px로 설정하고, 이미지는 srcset 속성에 명시한 후보들 중에서 700px보다 큰 가장 가까운 이미지를 선택하여 700px로 줄여서 브라우저에 렌더링합니다.

즉, sizes 속성은 명시한 조건이 만족할 때 출력될 이미지의 크기와 경로를 동시에 지정하고, width 속성의 경우에는 출력될 이미지의 크기만 지정하고 경로는 브라우저가 결정하여 표시합니다.

sizes 속성과 width 속성을 동시에 작성하면 width 속성이 우선시됩니다.

<img srcset="이미지경로1 원본크기(w unit),
             이미지경로2 원본크기(w unit),
             이미지경로3 원본크기(w unit)"
     sizes="(미디어조건1) 최적화출력크기,
            (미디어조건2) 최적화출력크기"
     src="이미지경로"
     alt="대체텍스트" />

---

정리하자면 srcset 속성으로는 뷰포트의 크기에 따라 로드될 이미지 후보들을 설정하고, sizes 속성으로 뷰포트 크기에 따라 표시될 이미지의 크기를 명시하여 반응형 이미지로 작성이 가능합니다.

srcset 속성만을 사용하게 된다면 이미지의 크기가 언제난 뷰포트의 가로 너비 100%가 되기 때문에 특정 뷰포트 너비일 때 고정된 이미지를 사용하기 위해서는 sizes 속성을 사용해야 합니다.

만약 이미지가 큰 의미를 갖지 않는다고 판단이 된다면, 정보로서 가치가 없다면 img 태그 대신에 요소에 CSS의 background 속성을 통해 이미지를 넣을 수 있습니다. 이때 이미지 자체의 의미를 갖는 것보다는 꾸며주는 의미로서 사용하는 경우입니다.

2. <audio> </audio>

• 오디오를 삽입합니다(display: inline;).

• 속성	의미	값
  🔑 src	콘텐츠 URL	URL
  autoplay	준비되면 바로 재생	불린속성
  controls	제어 메뉴를 표시	불린속성
  loop	재생이 끝나면 다시 처음부터 재생(반복재생)	불린속성
  muted	음소거 여부	불린속성
  preload	페이지가 로드될 때 파일을 로드할 지 여부	none: 로드하지 않음, metadata: 메타 데이터만 로드(기본값), auto: 전체 파일 로드

• src 속성은 오디오 파일의 경로를 작성합니다.

• autoplay 속성은 페이지 로드시 audio 콘텐츠가 바로 재생되도록 설정합니다. 만약 preload 속성이 설정되어 있다면 무시됩니다(preload: auto;로 지정됨).

• constrols 속성을 통해 제어 메뉴를 표시할 지 여부를 지정합니다.

• loop 속성은 오디오 콘텐츠가 끝나면 다시 처음부터 재생하도록, 즉 반복재생하도록 설정합니다.

• muted 속성으로 음소거 여부를 설정할 수 있습니다. constrols 속성이 작성되어 있다면 muted를 제어할 수 있습니다.

• preload 속성은 페이지에 접속했을 때 미리 준비를 할지 여부를 설정할 수 있습니다. 값으로 none을 작성하면 audio 콘텐츠를 로드하지 않다가 오디오를 재생할 때 audio 파일을 로드합니다. metadata는 기본적인 정보만 미리 로드하도록 설정하고, auto 값은 페이지에 접속시 모든 파일을 로드하도록 설정합니다.

---

audio 태그의 Content로 <source /> 라는 태그로 src 속성을 대신할 수 있습니다. 이때 여러 source 태그에 src 속성으로 다양한 오디오 파일 확장자를 작성할 수 있습니다. 여러 오디오 파일을 작성해도 화면에는 한 가지 오디오 파일만 표시됩니다.

이렇게 사용하는 이유는 다양한 브라우저에서 사용할 수 없는 오디오 파일일 경우 다른 source 태그의 src 속성에 작성한 오디오 파일을 표시합니다. 즉, 여러 환경에서 오디오 파일을 지원하기 위해 사용합니다.
type 속성으로 소스 타입을 명시해주는 것이 좋습니다.

<audio>
    <source src="오디오파일.wave" type="audio/wave" />
    <source src="오디오파일.mp3" type="audio/mpeg" />
    <source src="오디오파일.ogg" type="audio/ogg" />
    Sorry, your browser doesn't support embeded audios.
</audio>

3. <video> </video>

• 비디오를 삽입하는 태그(display: inline;).

• 속성	의미	값
  🔑 src	콘텐츠 URL	URL
  autoplay	준비되면 바로 재생	불린속성
  controls	제어 메뉴를 표시	불린속성
  loop	재생이 끝나면 다시 처음부터 재생(반복재생)	불린속성
  muted	음소거 여부	불린속성
  preload	페이지가 로드될 때 파일을 로드할 지 여부	none: 로드하지 않음, metadata: 메타 데이터만 로드(기본값), auto: 전체 파일 로드
  width	동영상의 가로 너비
  height	동영상의 세로 너비
  poster	동영상 썸네일 이미지 URL	URL

• 기본적인 속성은 audio 태그와 동일합니다.

• width와 heigth로 너비를 설정할 수 있으며 단위 없는 정수를 작성합니다. 이는 픽셀 단위로서 적용됩니다.

• poster 속성은 동영상의 썸네일 이미지 경로를 작성합니다.
  대체 텍스트의 경우 video 태그의 Content 영역에 대체 텍스트를 작성한 뒤 CSS의 text-indent: -9999px;를 지정하여 대체 텍스트를 설정할 수 있습니다.

---

video 태그의 Content로 <source /> 라는 태그를 작성하고, src 속성을 작성하여 video 태그의 src 속성을 대신할 수 있습니다. 그리고 source 태그는 비디오 파일이 다양한 환경에서 보여지기 위해서 여러 타입의 비디오 파일을 작성하기 위해 사용합니다.
source 태그를 사용할 때는 type 속성을 통해 소스 타입을 명시해주는 것이 좋습니다.

<video>
    <source src="비디오1.mov" type="video/mp4" />
    <source src="비디오1.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embeded videos.
</video>

이때 첫 번째 source 태그로 가져온 비디오가 보여지지 않는 환경이라면 두 번째 source 태그로 가져온 비디오를 자동적으로 보여주게 됩니다.