HTML에서 이미지와 멀티미디어(오디오, 비디오)를 삽입하고 제어하는 방법은 웹 페이지에 풍부한 콘텐츠를 제공하는 데 필수적입니다. 여기에서는 이미지 태그와 멀티미디어 태그에 대해 알아보겠습니다.
기본 HTML 구조
<!DOCTYPE html> <!-- HTML5 문서 형식을 선언 --> <html lang="en"> <!-- 문서의 언어를 영어로 설정 --> <head> <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 크기에 맞춰 콘텐츠를 조정 --> <title>이미지 및 멀티미디어 관련 태그</title> <!-- 문서 제목 --> </head> <body>
이미지 관련 태그
이미지를 웹 페이지에 삽입하려면 <img> 태그를 사용합니다.
<h1>이미지 관련 태그</h1> <!-- <img src="삽입하려는 이미지의 경로" [alt="이미지 설명 문구"] width="가로길이(px/%)" height="세로길이"> --> <h3>src 속성</h3> <img src="./img/smaple01.jpg" alt="옥지와빵빵이투샷">
<img>태그는 HTML에서 이미지를 삽입하기 위한 태그입니다.src속성은 삽입하려는 이미지 파일의 경로를 지정합니다.
<h3>alt 속성</h3> <p> - 이미지의 경로가 잘못되었거나 이미지를 제대로 표시할 수 없을 때 대체 텍스트로 사용됩니다.<br> - 시각장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명 문구로도 활용됩니다. </p>
alt속성은 이미지가 표시되지 않을 때 대신 표시될 텍스트를 지정합니다. 이 속성은 접근성을 높이는 데 중요한 역할을 합니다.
<h3>width 속성과 height 속성</h3> <h4>고정 길이 단위(px): 화면 크기가 변경되어도 이미지 크기는 고정됩니다.</h4> <img src="./img/smaple01.jpg" width="200px" height="150px"> <img src="./img/smaple01.jpg" width="200px" height="100px"> <img src="./img/smaple01.jpg" width="100px" height="150px"> <img src="./img/smaple01.jpg" width="100px" height="100px">
width와height속성은 이미지의 너비와 높이를 지정합니다.- 고정 길이 단위(px)는 화면 크기가 변경되어도 이미지 크기가 고정된 상태로 유지됩니다.
<h4>가변 길이 단위(%): 화면 크기 또는 부모 요소 크기에 따라 이미지 크기가 변경됩니다.</h4> <img src="./img/smaple01.jpg" width="10%" height="150px"> <img src="./img/smaple01.jpg" width="15%" height="100px"> <img src="./img/smaple01.jpg" width="15%" height="150px"> <img src="./img/smaple01.jpg" width="20%" height="100px">
- 가변 길이 단위(%)를 사용하면 화면 크기나 부모 요소의 크기에 따라 이미지 크기가 자동으로 조정됩니다.
미디어 관련 태그
HTML에서는 오디오와 비디오를 삽입하고 제어하기 위해 각각 <audio> 태그와 <video> 태그를 사용합니다.
<h1>미디어 관련 태그</h1> <h3>오디오 관련 태그</h3> <!-- <audio src="오디오 파일 경로" controls autoplay loop></audio> src: 오디오 파일의 경로 controls: 재생 도구의 표시 여부 autoplay: 자동 재생 여부(크롬에서는 제한될 수 있음) loop: 반복 재생 --> <audio src="audio/sample.mp3" controls loop autoplay></audio>
<audio>태그는 웹 페이지에 오디오를 삽입합니다.src속성은 오디오 파일의 경로를 지정합니다.controls속성은 사용자가 오디오를 제어할 수 있는 재생 도구를 표시합니다.autoplay속성은 페이지 로드 시 오디오가 자동으로 재생되도록 합니다.loop속성은 오디오를 반복 재생합니다.
<h3>비디오 관련 태그</h3> <!-- <video src="비디오 파일 경로" controls autoplay loop width="가로 크기" height="세로 크기" poster="썸네일 이미지 경로"></video> poster: 비디오가 로드되기 전에 표시되는 이미지(썸네일) --> <video src="video/sample.mp4" controls autoplay loop width="300" height="200" poster="./img/smaple01.jpg"></video>
<video>태그는 웹 페이지에 비디오를 삽입합니다.poster속성은 비디오가 로드되기 전에 표시될 썸네일 이미지를 지정합니다.width와height속성은 비디오의 크기를 지정합니다.
초보부터 시작하는 개발자 생활