[HTML] 7. 임베디드 요소

in HTML on Html



7. 임베디드 요소

외부에서 소스를 불러와서 삽입하는 소스

1. img - src

  • img 태그 내부에 내용이 없는 빈요소로 사용된다
  • 필수 속성 : src (이미지 url) (절대,상대 가능)
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     alt="Grapefruit slice atop a pile of other slices"
     title="북극곡 사진"
     width="100"
     height="200">



2. img - alt, width, height

  • alt : 대체 텍스트 (이미지에 대한 설명)
  • title : 설명 가능
  • width : 넓이 (숫자만 가능, px 단위)
  • height : 높이
  • width 만 설정하면 width의 비율에 맞게 height 도 수정된다



3. 웹에서 사용하는 이미지 유형

AbbreviationMIME typeFile extension(s)Summary
JPEGimage/jpeg.jpg, jpeg, .jfif, .pjeg, .pjp정지 이미지의 손실 압축에 적합하다 (현재 가장 많이 사용됨)
PNGimage/png.pngPNG는 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 JPEG보다 선호된다
GIFimage/gif.gif여러장의 이미지로 이루어진 애니메이션 표현 가능
WEBPimage/webp.webp구글이 만든 이미지 포맷. 품질, 압축률 등이 훨씬 우수하나 지원 브라우저가 제한적이다.
SVGimage/svg+xml.svg다양한 크기로 정확하게 그려야 하는 아이콘, 다이어그램 등에 사용된다
  • jpeg, png, gif : 래스터 이미지 (확대하면 깨진다)풍경, 일반이미지
  • webp, svg : 백터 이미지 (확대해도 깨지지 않는다.) icon, graph



4. 반응형 이미지 - srcset

  • 여러개의 이미지 경로를 지정할 수 있다 for 반응형
  • viewport에 따라서
  • 파일을 쉼표로 구분
  • 인터넷 익스플로러 지원 안한다
  • 작은 화면에서 접속한 사람은 작은 이미지를 주고,
  • 중간 화면에서 접속한 사람은 중간 이미지를 준다.

demo image : via.placeholder.com/n*n

<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     srcset="images/small.png 300w,
             images/midium.png 450w,
             images/large.png 600w
     alt="Grapefruit slice atop a pile of other slices"
>



5. 반응형 이미지 - sizes

  • 내가 의도한 범위 내에서만 해당 이미지를 준다
<img class="fit-picture"
     src="/media/cc0-images/grapefruit-slice-332-332.jpg"
     srcset="images/small.png 300w,
             images/midium.png 450w,
             images/large.png 600w
     sizes="(min-width: 600px) 600px,
            (min-width: 450px) 450px,
            300px"
     alt="Grapefruit slice atop a pile of other slices"
>



6. video

  • img 와 다르게 내부에 자식 요소 사용 가능
  • source 는 src 태그와 동일하다
  • controls : 정지, 시작 … 요소
  • autoplay : 자동재생 (sounds 있는 비디오는 true여도 재생 안된다.)
  • muted : 음소거 (autoplay 가능)
  • loop : 반복
  • poster : 썸네일 (없으면 첫번째 프레임이 포스터!)
<video controls autoplay muted width="250" poster="images/small.png">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

<video src="videofile.ogg">
</video>



7. audio

  • 대부분 video 와 동일하다
  • src 여러개 가능하다 (첫번째가 안되면 두번째 실행 …)
  • audio는 autoplay있어도 사이트에서 자동재생 막을 수도 있다 (muted 가 없어서 사용을 못해 ㅠ)
  • figure 내부에 사용 가능
<audio controls>
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>



8. canvas, iframe

canvas

  • 그래픽 캔버스 요소
  • html 만으로는 활용하기 어렵다
  • 그림 그리고 싶으면 js 활용해야 한다

iframe

  • 인라인 프레인 요소
  • 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 html 페이지를 삽입한다.
  • 지도



나의 회고 🤫

어제 뭅스터를 개발하면서 구글에서만 지원하는 이미지로 webp를 고려했었는데 여기서 다시 보니 반가웠다.
또한 srcset 은 아에 처음 접한 것이라서 앞으로 활용해나가기 좋은 것 같다.
초반 강의는 전부 아는 내용이었는데 확실히 후반부 갈수록 내 구멍이 보이기 시작하는 것 같아서 다음 강의가 기대된다!🤩
via.placeholde 사이트는 정말 유용하게 쓸 거 같다! 굿굿