본문 바로가기
언젠가는 쓸모있겠지./it, 컴퓨터

[HTML] 3. HTML 멀티미디어와 링크

by hanirym 2023. 7. 24.
반응형

 HTML은 멀티미디어 콘텐츠와 링크를 쉽게 삽입하고 관리할 수 있는 다양한 태그들을 제공합니다.

 

이번 글에서는 이미지 삽입부터 오디오, 비디오까지 멀티미디어를 다루는 방법과 링크 걸기에 대해 자세히 알아보겠습니다.

1. 이미지 삽입하기

웹 페이지에 이미지를 삽입하기 위해 <img> 태그를 사용합니다.

<img src="이미지주소.jpg" alt="이미지 설명">

<img> 태그의 속성 알아보기

<img> 태그는 다양한 속성들을 가지고 있습니다. 주요 속성들의 예시를 아래에 보여드립니다.

<img src="이미지주소.jpg" alt="이미지 설명" width="300" height="200" title="이미지 제목">
  • src 속성: 이미지 파일의 경로를 지정합니다.
  • alt 속성: 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다.
  • width 속성: 이미지의 가로 너비를 지정합니다.
  • height 속성: 이미지의 세로 높이를 지정합니다.
  • title 속성: 이미지 위에 마우스를 올렸을 때 나타나는 툴팁을 정의합니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<img src="C:\source\03\img\제목 없음.jpg", alt="error", width="300", height="200", title="웃어봐용">
</body>
</html>

위의 소스코드 결과 값

2. 오디오 삽입하기

웹 페이지에 오디오를 삽입하기 위해 <audio> 태그를 사용합니다.

<audio src="오디오파일주소.mp3" controls autoplay loop></audio>
  • src 속성: 오디오 파일의 경로를 지정합니다.
  • controls 속성: 재생 컨트롤을 표시합니다. 사용자가 오디오를 재생, 일시정지, 음량 조절 등을 할 수 있습니다.
  • autoplay 속성: 페이지가 로드될 때 자동으로 오디오를 재생합니다.
  • loop 속성: 오디오를 반복 재생합니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<audio src="C:\source\03\bass.mp3" controls autoplay loop></audio>
	<p>C:\source\03\bass.mp3 파일을 재생 컨트로를 표시하고 페이지가 로드될 때 자동 재생하며 해당 오디오를 반복하도록 생성</p>
</body>
</html>

사진이라 확인이 어렵지만 기특하게 일 잘하고 있다. 녀석.

*대부분의 브라우저에서는 현재 Autoplay 가 금지 되어있다고 한다... 무분별한 광고 때문이라고 하는데 잘 모르겠다.

3. 비디오 삽입하기

웹 페이지에 비디오를 삽입하기 위해 <video> 태그를 사용합니다.

<video src="비디오파일주소.mp4" controls autoplay loop width="640" height="360"></video>
  • src 속성: 비디오 파일의 경로를 지정합니다.
  • controls 속성: 재생 컨트롤을 표시합니다. 사용자가 비디오를 재생, 일시정지, 음량 조절 등을 할 수 있습니다.
  • autoplay 속성: 페이지가 로드될 때 자동으로 비디오를 재생합니다.
  • loop 속성: 비디오를 반복 재생합니다.
  • width 속성: 비디오의 가로 너비를 지정합니다.
  • height 속성: 비디오의 세로 높이를 지정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<video src="C:\source\03\dog-cat.mp4" controls autoplay loop width="640" height="360"></video>
	<p>C:\source\03\dog-cat.mp4 파일을 재생할건데 재생 컨트롤러를 표시하고 페이지가 로드될 때 자동으로 재생하며 반복재생 하되 길이 640, 높이 360으로 만듬</p>
</body>
</html>

영상이 엄청 귀엽다. 보고싶으면 저랑 같은 교제 쓰면 돼여 ^_<

*video 역시 브라우저에서는 현재 Autoplay 가 금지 되어있다..

 

4. 링크 걸기

텍스트나 이미지를 링크로 만들기 위해 <a> 태그를 사용합니다.

<a href="링크주소" target="_blank">클릭하면 이동합니다!</a>
  • href 속성: 링크의 주소를 지정합니다.
  • target 속성: 링크를 클릭했을 때 링크가 열리는 위치를 지정합니다. _blank로 설정하면 새 탭에서 링크가 열립니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<a href="test2.html" target="_blank"> 클릭하면 이동합니다! </a>
	<p>"클릭하면 이동합니다!" 를 눌렀을 때 test2.html 파일을 새창으로 열기.</p>
	<a href="test3.html" target="_blank" ><img src="C:\source\03\img\제목 없음.jpg" width="640" height="320"></a>
	<p>위 사진을 클릭했을 때 test3.html 파일을 새창으로 열기.</p>
</body>
</html>

 

 

물론 티스토리 블로그 에서는

해당 기능들이 기본적으로 들어있기 때문에

 

처음부터 HTML. 코드를 작성할 필요는 없을 듯 합니다.

 

하지만 해당 기능들을 사용함에 있어서 기본적인 지식이 있다면

 

응용하는데에 있어서 분명히 도움 될 것으로 보입니다!

 

저작자표시 비영리 변경금지

'언젠가는 쓸모있겠지. > it, 컴퓨터' 카테고리의 다른 글

BIOS 부팅 vs UEFI 부팅  (0) 2023.07.20
MBR vs GPT 비교  (0) 2023.07.10
[HTML] 2. HTML 글자 관련 태그  (0) 2023.06.23
[HTML] 1. HTML 문서 구조  (0) 2023.06.23
[HTML] 0. 블로그 만들기.  (0) 2023.06.23

관련글

티스토리툴바