📝
프론튞엔드 슀쿚 교안(1êž°)/
📝
HTML/
📝
8. Embedded content
📝

8. Embedded content

 
<img>src (source)alt (alternative text)반응형 읎믞지륌 위한 srcsetx서술자, w서술자, sizes 속성<picture>media 속성type 속성<iframe><audio><video>소슀윔드
 

<img>

<img> 태귞는 html 페읎지에 읎믞지륌 삜입할 때 사용하는 태귞입니닀.
 

src (source)

<img> 태귞는 src띌는 필수 속성읎 있얎알 합니닀. src 속성은 람띌우저에게 읎믞지 파음의 위치 및 파음명을 알렀쀍니닀. 큰따옎표 안에 듀얎가는 겜로는 절대겜로읎거나 상대겜로읎얎알 합니닀.
 

alt (alternative text)

alt 속성은 읎믞지가 볎읎지 않을 때 alt 속성에 적힌 텍슀튞륌 읎믞지 대신 볎여쀍니닀. 또한 슀크늰늬더와 같은 접귌성을 위한 프로귞랚에 정볎륌 제공하Ʞ 위한 용도로 사용되며, 람띌우저에 읎믞지에 대한 정볎륌 전달핚윌로썚 SEO(Search Engine Optimization)에 도움을 죌Ʞ도 합니닀.
<img src="img/a.jpg" alt="슀크늰 늬더가 읜얎알 하는 묞구">
💡
alt 값읎 필요하지 않는 겜우, 예륌 듀얎 <figure> 요소 안에서 사용되었을 겜우 <figcaption> 요소에서 읎믞지에 대핮 섀명을 할때는 alt 속성의 값을 비워 둡니닀. 읎륌 통핎 슀크늰 늬더가 섀명읎 필요 없는 읎믞지임을 읞식하고 닀음 요소로 넘얎가게 합니닀.
 

반응형 읎믞지륌 위한 srcset

srcset 속성을 사용하멎 여러 핎상도에 대응하여 람띌우저가 최상의 읎믞지륌 로딩하는데 도움을 쀄 수 있습니닀. srcset 속성은 닀양한 크Ʞ륌 가지는 동음 읎믞지륌 최소 2개 읎상 사용할 때 사용하며, 람띌우저에게 읎믞지의 선택권을 위임하는 속성입니닀.
 

x서술자, w서술자, sizes 속성

  • x서술자는 화소의 밀도(Pixel density)륌 나타냅니닀. 디바읎슀의 화소 밀도에 따륞 읎믞지륌 로딩하도록 람띌우저에 알렀쀍니닀.
<img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x
src="a.jpg"
alt="test">
💡
Pixel density : 동음한 멎적에 듀얎가는 화소의 수륌 의믞합니닀. 화소의 갯수가 많을수록 더 높은 핎상도의 ꞰꞰ임을 알 수 있습니닀. 여러분읎 볎고있는 화멎의 화소 밀도륌 알고 싶윌시닀멎 람띌우저 api륌 읎용핎서 볎싀 수 있습니닀. 개발자 화멎의 윘솔찜에서 window.devicePixelRatio 명령얎륌 입력핎볎섞요.
 
  • w서술자는 원볞 읎믞지의 넓읎가 찚례대로 300px, 600px, 900px 임을 람띌우저에게 알렀쀍니닀. px읎 아닌 w로 표Ʞ하는것에 죌의하섞요. 
<img
width="200px"
srcset="img/logo_1.png 300w,
        img/logo_2.png 600w,
        img/logo_3.png 900w"
src="a.jpg"
alt="test">
💡
w서술자와 x서술자는 동시에 사용할 수 없습니닀. 또한 src 속성을 유지하는 것은 필수입니닀. srcset 을 사용할 수 없는 람띌우저(Internet Explorer)륌 대비핎 사용하는 읎믞지입니닀.
 
  • sizes 속성은 뷰포튞의 조걎에 따띌 읎믞지가 UI안에서 찚지하게 될 사읎슈륌 람띌우저에 알렀쀍니닀. 
<img
width="200px"
srcset="img/logo_1.png 300w,
        img/logo_2.png 600w,
        img/logo_3.png 700w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.jpg"
alt="test">
람띌우저는 우늬가 제공한 읎믞지의 원볞 사읎슈와 뷰포튞에 따륞 읎믞지의 사읎슈 정볎륌 통합핎 가장 적절한 읎믞지륌 로딩하게됩니닀.
묌론 srcset 속성은 sizes 속성읎 없닀고 핮도 잘 동작하겠지만, 웹표쀀을 쀀수하Ʞ 위핎서는 srcset 속성을 사용하멎 귞에 맞는 sizes 속성도 반드시 명시되얎알 합니닀.
💡
sizes 속성을 사용할 때 죌의할 점은 CSS륌 통한 읎믞지의 사읎슈륌 컚튞례 하는 방법곌 충돌 할 수 있닀는 점 입니닀. (CSS 슀타음읎 sizes 속성에 우선합니닀.) 협업할 때는 사전에 반드시 동료듀에게 ì–Žë– í•œ 방법윌로 반응형 읎믞지륌 처늬했는지 공유합시닀.
 
 

<picture>

<picture> 요소는 <source> 요소와 <img> 요소륌 통핎 각Ʞ 닀륞 디슀플레읎 혹은 디바읎슀에 따띌 조걎에 맞는 읎믞지륌 볎여죌는 요소입니닀. <img> 요소의 srcset 읎 화멎에 따륞 읎믞지의 크Ʞ륌 조절한닀멎 <picture> 요소는 읎믞지 포맷 자첎륌 변겜 할 수 있습니닀.
<picture>
    <source srcset="babies_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여욎 ì•„êž° 팜귄듀">
</picture>
 

media 속성

위의 윔드에서 <source> 요소 안의 media 속성을 볌 수 있습니닀.
<picture> 요소는 media 속성의 값을 통핎 조걎에 알맞는 읎믞지륌 찟게 됩니닀. 조걎에 맞는 <source> 요소 안의 srcset 속성 값을 ì°Ÿì•„ <img> 태귞의 src 에 넣얎 화멎에 볎여죌게됩니닀. 읎러한 구조로 작동하Ʞ 때묞에 <img> 요소가 없닀멎 읎믞지가 화멎에 나타나지 않는닀는 점에 죌의하섞요.
<picture> 와 <source> 요소 자첎는 읎믞지륌 표현하지 않습니닀.
 

type 속성

읎믞지의 포맷 타입을 람띌우저에게 알렀쀍니닀. 
<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.png" alt="귀여욎 ì•„êž° 팜귄듀" type="image/png">
</picture>
위에서부터 찚례대로 람띌우저가 지원하는 포맷읞지 탐색하며 만앜 지원하지 않는 포맷읎띌고 판닚되멎 닀음 <source> 요소로 넘얎갑니닀.
만앜 몚든 <source> 요소의 읎믞지 사용읎 불가능하멎 최후에 <img> 요소의 읎믞지륌 랜더링 합니닀.
때묞에 WebP나 AVIF 와 같은 최신 포맷의 읎믞지륌 지원하고 싶닀멎 크로슀람띌우징을 위핎 <picture> 요소와 핚께 사용 하는것읎 좋습니닀.
읎러한 방식의 크로슀람띌우징 Ʞ법을 ‘점진적 향상Ʞ법’읎띌고 합니닀.
💡
점진적 향상Ʞ법 Ʞ볞적윌로 예전 Ʞ술 환겜에서 동작할 수 있는 Ʞ능을 구현핎두고, 최신 Ʞ술을 사용할 수 있는 환겜에서는 최신 Ʞ술을 제공하여 더 나은 사용자 겜험을 제공할 수 있는 방법입니닀.
💡
읎믞지 포맷의 종류 GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하Ʞ 때묞에 선명하진 않지만 용량읎 적게 듭니닀. 투명은 표현 가능하지만 ê·ž 정도륌 조절하는걎 불가능하며, 때묞에 귞늌자 표현도 불가능합니닀. 애니메읎션 처늬가 가능합니닀. JPG/JPEG (Joint Photographic Expert Group image): 맀우 화소가 높고, 용량도 적지만 투명처늬가 불가능합니닀. PNG (Portable Network Graphics) : 왠만한 컬러는 몚두 표현 가능하여 투명 영역을 처늬 가능하지만 용량읎 큜니닀. SVG (Scalable Vector Graphics) : SVG 형식의 벡터 읎믞지는 손싀읎나 품질 저하 없읎 몚든 크Ʞ에서 렌더링읎 가능합니닀. 닚점은 읎믞지가 복잡핎질 수록 용량읎 늘얎납니닀. 때묞에 죌로 닚순한 디자읞의 로고나 읎몚지 표현에 많읎 사용됩니닀. WebP (Web Picture Format) : 압축률읎 좋닀고 소묞난 JPEG 읎믞지에 비핎 묎렀 용량은 70% 수쀀윌로 낮지만 더 ë›°ì–Žë‚œ 색상을 지원하는 포맷입니닀. 귞럌에도 불구하고 PNG 처럌 투명도 표현 가능하며, GIF 처럌 애니메읎션 표현도 가능한 만능 포맷입니닀. AVIF (AV1 Image File Format) : WebP 처럌 ë›°ì–Žë‚œ 색상표현, 애니메읎션 지원, 투명도 표현 몚두 가능하며 JPEG 읎믞지의 50% 수쀀읞 용량을 자랑하는 찚섞대 읎믞지 포맷입니닀. 아직 지원하지 않는 람띌우저가 많음에 죌의핎알합니닀.
 
 

<iframe>

iframe은 현재 HTML 페읎지에서 또 닀륞 HTML 페읎지륌 볎여죌고 싶을 때 사용합니닀. iframe은 width 혹은 height 속성윌로 크Ʞ륌 조절합니닀. 따로 값을 섀정하지 않는닀멎 height는 150px, width는 300px을 Ʞ볞값윌로 합니닀.
<iframe src="링크"></iframe>
src 속성윌로 불러올 HTML링크륌 섀정할 수 있윌며 볎통 youtube 영상을 불러올 때 많읎 사용합니닀.
youtube 영상을 불러였게 되멎 볎통 아래와 같은 속성값듀을 가지게 됩니닀.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
  • frameborder : 테두늬륌 귞렀쀄지 결정합니닀. 0 혹은 1의 값을 가집니닀. 읎제 더는 사용하지 않는 값읎며 CSS의 border 속성을 대첎되었습니닀.
  • allow : iframe 에서 허용할 Ʞ능듀을 지정합니닀.
  • allowfullscreen : 전첎화멎을 지원합니닀.
💡
autoplay 속성은 람띌우저 정책 상 음부 몚바음 람띌우저에 작동하지 않을 수 있윌며, 항상 mute 속성곌 핚께 사용되얎알 합니닀. 읎는 몚바음 환겜에서 autoplay Ʞ능윌로 읞한 의도하지 않은 튞래픜 유발을 방지하고 접귌성 잡멎에서 좋지 ì•Šêž° 때묞입니닀. 읎러한 특징은 <iframe>, <audio>, <video> 요소 몚두 동음하게 적용됩니닀. * ì°žê³  : https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide
 

<audio>

<audio> 는 음악 컚텐잠륌 재생하Ʞ 위한 태귞입니닀. src 속성은 람띌우저에게 였디였 파음의 위치 및 파음명을 알렀쀍니닀. 
<audio src="폮더/파음명" controls autoplay loop ></audio>
  • controls : 음악 파음을 제얎할 수 있는 컚튞례러륌 불러옵니닀.
  • autoplay : 로딩읎 완료된 파음을 자동윌로 재생합니닀.
  • loop : 음악을 반복합니닀.
<audio controls>
    <source src="flow.ogg" type="audio/ogg">
    <source src="flow.mp3" type="audio/mpeg">
</audio>
<audio> 요소 역시 <source> 요소륌 자식윌로 사용할 수 있습니닀. 닀륞 요소와 마찬가지로 크로슀 람띌우징을 위핎 여러 포맷의 파음을 지원할 수 있습니닀.
 
 

<video>

<video> 는 비디였 파음을 재생하Ʞ 위한 태귞입니닀.
  • 요슘은 youtube로 iframe윌로 많읎 사용합니닀. (튞래픜에서 크게 유늬)
  • src 속성은 람띌우저에게 비디였 파음의 위치 및 파음명을 알렀쀍니닀. <src="폮더/파음명">
  • controls 속성은 비디였컚튞례러륌 불러옵니닀.
  • autoplay 속성은 자동윌로 비디였륌 재생시킵니닀.
  • loop 속성은 비디였을 반복합니닀.
  • poster 속성은 비디였가 로딩 쀑 음 때 화멎에 볎읎게 표시하는 읎믞지륌 지정합니닀.
사용자가 영상의 가로(width)와 ì„žë¡œ(height)Ꞟ읎로 비디였의 크Ʞ륌 지정할 수 있습니닀.
<video src="폮더/파음명" controls autoplay loop width="450" height="300" />
 
 
좀 더 시멘틱하게 아래와 같은 형식윌로 윔딩하는 겜우도 있습니닀.
 
<video src="" poster="" preload="" controls playsinline>
  <source src="" type="">
  <track kind="" src="" srclang="" label="">
</video>

소슀윔드

<!DOCTYPE html>
<html>
<head>
    <title>media</title>
</head>
<body>
    <!-- 읎믞지 alt-->
    <img src="img/a.jpg" alt="읎믞지 없음">
    <img src="img/a.jpg" alt="">
    <img src="img/a.jpg" alt="슀크늰 늬더가 읜얎알 하는 묞구">
    <!-- srcset 속성을 사용하멎 여러 핎상도 대응 가능 -->
    <img src="a.jpg" srcset="a.jpg, a.jpg 2x" alt="대첎묞구">
    <!-- 
        picture나 source와 핚께 사용하는 것을 권장
        -->
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
    <!-- 
        audio : 음악 플레읎
        video : 영상 플레읎
    -->
</body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      h1 {
        background: #4267b2;
        color: white;
        padding: 10px;
        margin: 0;
      }
      article {
        width: 500px;
        border: 1px solid blue;
        margin-top: 30px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Facebook</h1>
    </header>
    <section>
      <article>
        <img width="100%" src="src/a.jpg" alt="" />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          debitis nulla minima quas temporibus soluta iste harum adipisci.
          Repellendus eius libero autem deserunt numquam ducimus dolorem ab
          corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
          adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
          perferendis hic voluptates corrupti commodi? Accusantium distinctio
          dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
          laboriosam.
        </p>
      </article>
      <article>
        <img width="100%" src="src/a.jpg" alt="" />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          debitis nulla minima quas temporibus soluta iste harum adipisci.
          Repellendus eius libero autem deserunt numquam ducimus dolorem ab
          corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
          adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
          perferendis hic voluptates corrupti commodi? Accusantium distinctio
          dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
          laboriosam.
        </p>
      </article>
      <article>
        <img width="100%" src="src/a.jpg" alt="" />
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
          debitis nulla minima quas temporibus soluta iste harum adipisci.
          Repellendus eius libero autem deserunt numquam ducimus dolorem ab
          corporis atque debitis?Lorem ipsum, dolor sit amet consectetur
          adipisicing elit. Explicabo aliquam voluptatum esse laborum nihil
          perferendis hic voluptates corrupti commodi? Accusantium distinctio
          dolores beatae nostrum! Similique cupiditate doloribus itaque fuga
          laboriosam.
        </p>
      </article>
    </section>
  </body>
</html>