HTML에서 미디어와 하이퍼링크를 삽입해보자

 

 안녕하세요. 진득 코딩입니다.

 

 이번 시간에는 HTML에서 이미지와 오디오, 비디오와 같은 미디어와 하이퍼링크를 삽입하는 법에 대해 살펴보도록 하겠습니다.

 

<img> 태그

 

• <img> 태그는 웹 문서에 이미지를 삽입할 때 사용하는 태그입니다.
  
  
• <img> 태그에서 알아야 할 속성은 src와 alt입니다.
  
  
• src속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 합니다.
  
  
• alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력합니다.
  
  

** 웹에서 사용하는 대표적인 이미지 파일 형식

 - 웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 합니다.

 - 주로 JPG(또는 JPEG)나 PNG 파일 형식을 사용합니다.

 - 아이콘이나 로고처럼 작은 이미지일 경우에는 GIF 파일을 사용하기도 합니다.

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

 

src 속성

 

• src속성은 이미지 파일 경로를 나타내는 속성입니다.
  
  
• 이미지나 음악, 동영상 파일 등을 웹 문서에 삽입할 때에는 경로를 주의해야 합니다.
  
  
• 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 어떻게 찾아가야 하는지를 알려 줍니다.
  
  
• 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해집니다.
  
  
• 만일 웹 문서가 있는 폴더에 하위 폴더를 만들고 그 폴더에 이미지 파일이 있다면 src속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 합니다.
  
  

alt 속성

 

• alt 속성은 이미지를 텍스트로 대신 설명하는 속성입니다.
  
  
• 웹 문서에 이미지를 삽입할 때는 화면 낭독기와 같은 보조 기기에서 이미지를 대신해서 읽어줄 텍스트를 함께 넣을 수 있습니다.
  
  
• 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 나오는 텍스트 역할도 합니다.
  
  
• 웹 사이트에서 텍스트로 만든 메뉴나 로고, 또는 내용을 눈에 띄게 하기 위해 이미지로 처리하여 사용하기도 합니다.
  
  
• 이럴 때 alt 속성에 들어 갈 텍스트는 이미지를 부연 설명하는 것이 아니라 이미지 안에 포함된 텍스트를 알려 주어야 합니다.
  
  
• 다시 말해 해당 이미지를 클릭했을 때 보여 줄 화면이나 이미지에 적힌 내용을 입력해야 합니다.
  
  

width, height 속성

 

• width, height 속성은 이미지 크기를 조절하는 속성입니다.
  
  
• width는 이미지의 너비를, height는 이미지의 높이를 지정합니다.
  
  
• width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타냅니다.
  
  
• width와 height 속성에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있습니다.
  
  
• 픽셀을 사용할 때는 px 단위를 쓰지 않고 숫자만 입력합니다.
  
  
• 퍼센트(%)를 사용하게 되면 웹 브라우저 창의 크기가 달라질 때마다 이미지 크기도 달라집니다.
  
  

<object>, <embed> 태그

 

• <object>, <embed> 태그는 다양한 멀티미디어 파일을 삽입할 때 쓰는 태그입니다.
  
  
• <object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다.
  
  
• 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있습니다.
  
  
• data 속성에 보여줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정합니다.
• <embed> 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있습니다.
  
  
• <embed> 태그에서는 src 속성을 사용해 삽입할 멀티미디어 파일을 지정합니다.
  
  
• <embed> 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있습니다.
  
  
• <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입합니다.
  
  

웹 브라우저에서 지원하는 멀티미디어 파일의 종류

 

• 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4 형식을 사용합니다.
  
  
• 오디오 파일은 mp3 형식을 주로 사용합니다.
  
  

종류	확장자	설명
비디오	mp4	많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있습니다.
	webm	화질이 우수하고 무료라서 mp4와 함께 많이 사용합니다.
오디오	mp3	대부분의 음원에서 사용하는 형식입니다. 2017년 이후 라이선스가 종료되면서 무료로 사용할 수 있습니다.
	mp4,  m4a	mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식입니다. 확장자는 mp4뿐만 아니라 m4a를 사용하기도 합니다.

 

<audio>, <video> 태그

 

• <audio> 태그는 HTML에서 배경 음악이나 효과음 등 오디오 파일을 삽입할 때 사용하는 태그입니다.
  
  
• <video> 태그는 비디오 파일을 삽입할 때 사용하는 태그입니다.
  
  
• controls 속성은 방문자가 음악을 재생하거나 멈출 수 있도록 컨트롤바를 나타내는 속성입니다.
• <video> 태그도 비디오를 재생하거나 멈출 수 있도록 controls 속성을 함께 사용해서 삽입합니다.
  
  

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

 

<audio>, <video> 태그의 속성

 

종류	설명
controls	플레이어 화면에 컨트롤 바를 표시합니다.
autoplay	오디오나 비디오를 자동으로 실행합니다.
loop	오디오나 비디오를 반복 재생합니다.
muted	오디오나 비디오의 소리를 제거합니다.
preload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다. 기본값은 preload="auto"입니다.
width, height	비디오 플레이어의 너비와 높이를 지정합니다. width나 height의 값 중에서 하나만 지정할 경우 나머지는 자동으로 계산해서 표시합니다.
poster="파일 이름"	<video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다.

 

• 오디오 파일을 배경 음악처럼 사용하려면 autoplay 속성과 loop 속성을 지정하면 됩니다.
  
  
• 이때 플레이어가 보이지 않도록 하려면 controls 속성을 빼면 됩니다.
  
  

<a> 태그와 href 속성

 

• 링크는 <a> 태그로 만드는데, 이때 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 됩니다.
  
  
• 텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 됩니다.
  
  
• <a>와 </a> 태그 사이에 <img> 태그를 넣으면 이미지에도 링크를 만들 수 있습니다.
  
  
• 또한 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열립니다.
  
  

---

 

이번 시간에는 미디어와 하이퍼링크를 삽입하는 방법에 대해서 살펴보았습니다.

 특히나 웹 사이트에서 중요한 링크를 걸게 해주는 <a> 태그는 중요하고 자주 쓰이기 때문에 숙지하는 것을 추천합니다.

 이번 포스팅은 여기까지입니다.

 

 끝까지 봐주셔서 감사합니다.😊