HTML Embedded content

<img>

HTML 페이지에 이미지를 삽입하기 위해서 사용하는 태그

 

img 태그의 속성

• src속성

<img src = "파일 경로 및 위치">

• 이미지파일을 브라우저에 나타나게 하기 위해서 필수적으로 필요한 태그
• 로컬에 위치한 파일의 경로 및 파일명을 입력
• 경로를 입력하는 방법 2가지

절대 경로란?
처음(root)부터 위치를 입력해가면서 접근하는 경로

상대 경로란?
현재 내가 있는 디렉토리를 기준으로 접근하는 경로

 

• alt(alternative text)

이미지가 브라우저 화면에 보이지 않을 경우 속성값에 적힌 텍스트를 대신 보여준다.
스크린리더와 같이 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용한다.
브라우저에게 이미지에 대한 정보를 전달함으로써 Search Engine Optimization에 도움을 준다.

 

  <!-- 스크린 리더가 읽지 않는다. 일부러 읽지 않게 하기위해서 alt값을 주지 않는 경우가 있다.-->
  <img src="a.jpg" alt="">
  
  <!-- 스크린 리더가 'a'를 읽는다. -->
  <img src="a.jpg">
  
  <!-- 스크린 리더가 '이미지'를 읽는다. -->
  <!-- alt = "이미지" 같이 입력을 하는 것은 어떤 이미지를 나타내는 지 모르기 때문에 별로 좋지 않다. -->
  <img src="a.jpg" alt="이미지">

 

• srcset

여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하게 해줄 수 있는 속성

브라우저에게 이미지의 선택권을 위임하는 속성

 

주의사항

- x서술자와 w서술자 같이 사용할 수 없고 하나를 선택하여 사용가능

- srcset만 사용하기 보단 마지막에 src속성을 같이 작성해야 된다. 브라우저에서 지원을 하지 않을 수 도 있기 때문에 이미지가 안보일 수 있다.

- srcset안에 이미지 경로를 입력하면서 뒤에는 px단위가 아니 x, w만을 입력해야 된다.

 

x서술자

화소와 밀도(pixel density)를 나타내고 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에게 알려준다.

<img
width="200px"
srcset="pixel_2x.png 2x,
        pixel_3x.png 3x"
src="pixel.png"
alt="x서술자">

w서술자

원본 이미지의 넓이를 브라우저에게 알려줌으로써 제일 최적화된 이미지의 선택에 도움을 준다.

  <img srcset="sample/a.jpg 1920w,
          sample/b.jpg 1280w,
          sample/c.jpg 640w" alt="w 서술자">

 

• sizes

sizes 속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려줍니다.

sizes 조건에 따라서 srcset에 있는 이미지 목록을 확인하면서 브라우저에서 최적의 이미지를 로딩시켜준다.

<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
        img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
       (min-width: 620px) 150px,
       300px"
src="a.png"
alt="sizes 속성">

주의사항 및 권장사항
sizes속성은 CSS를 통한 이미지의 사이즈 컨트롤과 충돌이 일어날 수 있기 때문에 사용하는 것을 권장하지 않는다.
다른 비율의 다양한 크기의 이미지들을 사용하고 싶다면 scrset과 sizes속성을 보단 CSS의 @media(미디어 쿼리)를 사용하는 것을 권장

 

<img>태그를 사용하면 좋은 상황

 - 기본적으로 이미지를 브라우저에 불러올 때 사용한다.

 

 - 웹 사이트 내부에서 폰트 종류가 많이 사용되지 않는 경우에 폰트를 가져오는 상황은 트래픽이 많이 발생할 수 도 있기 때문에 이미지로 가져와서 트래픽을 줄일 수 있다.

 

- 하지만 두번째 코드와 같이 img태그를 사용하지 않고 텍스트 요소는 style로 숨기고 background-image로 설정하는 방법도 존재한다.

    <h1>
      <img src="imgs/heading1.png" alt="모두의 HTML/CSS">
    </h1>
    
    <!-- ********************************************-->
    <!-- 아래와 설정 후 background 이미지로 설정히고 h1태그 텍스트 요소는 CSS로 숨기기 -->
    <h1>
      모두의 HTML/CSS
    </h1>

 

<iframe>

현재의 HTML페이지에서 다른 HTML페이지를 보여주고 싶을 때 사용하는 태그

<iframe src = "링크"></iframe>

 

보통 해당 HTML페이지에 유튜브 동영상을 보여줄 때 사용하게 된다.

<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

• width, height → 높이, 넓이 조절이 가능
• allow → iframe 에서 허용할 기능들을 지정한다.
• allowfullscreen → 전체화면을 지원한다.

 

💡 autoplay 속성 주의사항

브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있기 때문에, 항상 mute 속성(muted)과 함께 사용되어야 한다.
이는 모바일 환경에서 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문이다.
이러한 특징은 <iframe>, <audio>, <video> 요소 모두 동일하게 적용된다.

 

<audio>

음악콘텐츠르 재생하기 위한 태그

<audio src="폴더/파일명" controls autoplay loop ></audio>

 

<video>

동영상 파일을 재생하기 위한 태그

<video src="비디오 파일 위치 및 파일명" controls autoplay loop width="450" height="300"></video>

• controls → 동영상을 재생하는데 필요한 제어장치 생성
• autoplay → 로딩이 완료되면 자동으로 영상 파일을 재생
• loop → 영상이 종료되면 다시 반복해서 재생

video태그의 추가속성

• preload 속성  → 어떤 방식으로 동영상 파일을 로딩할 것인지? 아래의 속성값을 참조

속성값
- none : 동영상 파일을 미리 로딩하지 않는다. 트래픽을 줄일 수 있다.
- metatdata : 동영상 파일을 미리 로딩하지 않지만 동영상에 필요한 메타데이터를 미리 가져오록 한다.
- auto : 동영상 파일을 미리 로딩하여 유저가 바로 영상을 볼 수 있도록 준비한다. 트래픽 발생확률이 높다.

 

• poster 속성 → 동영상 파일이 로딩 중 일 경우 대신해서 화면을 보여줄 이미지를 지정

 

 

video와 audio 자동재생 주의사항 (With chrome)

  <!-- audio -->
  <!-- audio은 크롬 브라우저에서 muted속성을 주어도 자동재생이 되지 않는 것을 확인 할 수 있다. -->
  <audio controls autoplay muted loop class="bgm">
    <source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3">
  </audio>

  <!-- video -->
  <!-- 하지만 video는 muted속성을 주면 소리는 나지 않지만 크롬 환경에서 자동재생이 되는 것을 볼 수 있다. -->
  <video src="asset/video/pwa.mp4" controls autoplay muted loop width="450" height="300"></video>