이미지, 오디오&비디오 파일, 하이퍼링크 삽입하기

이미지 삽입하기 

  <img src="이미지 파일 경로" alt="대체용 텍스트">

 

이미지 파일 형식의 종류

종류	설명
GIF(graphic interchange foramt)	표시할 수 있는 색상은 최대 256가지  다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지에 사용
JPG/ JPEG (join potographic export group)	GIF보다 색상이나 명암을 다양하게 사용 할 수 있다  이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어 질 수 있다
PNG(portable network graphics)	네트워크용을 개발된 파일 형식  색상을 다양하게 표현하면서 투명한 배경을 만들 수 있어 가장 많이 사용

 

cf. alt 

- alt속성에 들어 갈 텍스트는 이미지를 부연 설명하는 것이 아니라 이미지 안에 포함된 테스트를 알려줘야 한다 

(즉, 쇼핑몰 사이트의 메뉴를 이미지로 삽입했을 경우 alt='메뉴'가 아니라, alt='첫 화면', alt='신상품' 처럼 해당 이미지를 클릭했을 때 보여줄 화면이나 이미지에 적힌 내용을 입력해야 한다 

 

이미지 width, height 속성

- width는 이미지의 넓이는, height는 이미지의 높이를 지정

- width 또는 height중 1개만 지정해도 나머지 속성은 자동으로 계산이 된다. 

- 단위는 퍼센트(%), 픽셀(px)

 

종류	설명	예시
%	이미지 크기의 값을 퍼센트(%) 로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 임지 크기를 결정	width='50%'
px	이미지 크기의 값을 픽셀(px)로 지정하면 이미즈이 너비나 높이를 해당 픽셀 크기만큼 표시	width='150%'

 

오디오와 비디오 삽입하기 

다양한 멀티미디어 파일을 삽힙할 떄 쓰는 <object>, <embed>태그 

<object width="너비" height="높이" data="파일"></object>
<object width="900" height="800" data="product.pdf"></object>

<embed src="파일경로" width="너비" height="높이">
<embed src="medias/spring.mp3">

 

오디오와 비디오 파일을 삽입하는 <audio>, <video> 태그

  <audio src="오디오파일경로"></audio>  
  // control바를 나타내는 control 속성 
  <audio src="medias/spring.mp3" controls></audio>

  <video src="비디오파일경로"></video>
  <video src="medias/salad.mp4" controls width="700"></video>

종류	설명
controls
autoplay
loop
muted
preload
width, height
poster = '파일 이름'

 

cf. 플러그인 프로그램이란?!

- 오디오나 비디오 같은 멀티미디어 파일을 바로 재생 할 수 없던 과거의 웹 브라우저에서는 플러그인(plug-in) 프로그램을 사용했다. 현재(2023.1.22)는 대부분이 살아졌지만 아직 Adobe Flash Payer처럼 플러그인 프로그램을 사용하는 사이트도 있다. 하지만 크롬은 2020년 말부터 플러그인 프로그램을 완전히 중단하고 있음

 

하이퍼링크 삽입하기 

- 링크를 삽입하는 a태그와 href속성

 

 

텍스트 링크 만들기 

  <a href="링크할주소">텍스트</a>
  <a href="order.html">주문서작성</a>

 

이미지 링크 만들기 

  <a href="order.html"><img src="images/img.png" alt="레드향"></a>

새 탭에서 문서 연결하기 

  <p><a href="order.html" target="_blank">주문서작성</a></p>