다양한 태그들(4)

이미지를 삽입하는 태그

• <img> 태그
  • 웹 문서에 이미지를 삽입할 때 사용
  • 기본형 : <img src="이미지 파일 경로" alt="대체용 텍스트">
  • 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 간단히 이미지 파일의 이름만 적으면 됨
  • alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타남
  • width, height 속성으로 이미지의 크기를 조절할 수 있음
    1. % : 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정함
    2. px : 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시함

-(예시)

<p>원래 크기의 이미지</p>
<img src="이미지 파일 경로" alt="이미지">

<p>width=50%인 이미지2</p>
<img src="이미지 파일 경로2" alt="이미지2" width="50%">

<p>height=200px인 이미지3</p>
<img src="이미지 파일 경로3" alt="이미지3" height="200">

---

멀티미디어 파일을 삽입하는 태그

• <object> 태그
  • 오디오, 비디오, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용
  • 기본형 :

    <object width="너비" height="높이" data="파일"></object>

• <embed> 태그
  • HTML 초기 버전부터 사용하여 대부분의 브라우저에서 사용 가능 
  • src 속성을 사용하여 삽입할 멀티미디어 파일을 지정함
  • 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일 삽입 가능
  • 필요할 경우 width, height 속성을 사용할 수 있음
  • 닫는 태그가 없음
  • 기본형 :

    <embed src="파일 경로" widht="너비" height="높이">

• <audio> 태그
  • 배경 음악이나 효과음 등 오디오 파일을 삽입할 때 사용
  • control 속성을 함께 사용하면 오디오 파일을 시작하거나 종료할 수 있는 컨트롤 바가 표시됨
  • 기본형 :

    <audio src="오디오 파일 경로"></audio>

• <video> 태그
  • 비디오 파일을 삽입할 때 사용
  • control 속성을 함께 사용하면 비디오 파일을 시작하거나 종료할 수 있는 컨트롤 바가 표시됨
  • 기본형 :

    <video src="비디오 파일 경로"></video>

• <audio>, <video> 태그의 속성
  • controls : 플레이어 화면에 컨트롤 바를 표시함
  • autoplay : 자동으로 실행하게 함
  • loop : 반복 재생하게 함
  • muted : 소리를 제거함
  • preload : 페이지를 불러올 때 어떻게 로딩할지 지정함, 사용할 수 있는 값으로는 auto, metadata, none이 있음
  • poster="파일 이름" : <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 이미지를 지정함

---

링크를 삽입하는 태그

• <a> 태그
  • 링크를 만듦
  • 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 됨
  • <a> 태그와 </a> 태그 사이에 <img> 태그를 넣으면 이미지에 링크를 만듦
  • 기본형 :

    <a href="링크할 주소">텍스트 또는 이미지</a>

• target 속성
  • target 속성에 _blank를 지정하게 되면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열림

-(예시)

<div>
  <p><a href="exmaple01.html">예시 01</a></p>
  
  <p><a href="example02.html"><img src="images.jpg"></a></p>
  
  <p><a href="exmaple03.html" target="_blank">예시 03</a></p>
</div>