[HTML] 멀티미디어 삽입과 폼 요소 태그 정리

웹 페이지를 더욱 풍부하게 만들기 위해서는 이미지, 오디오, 비디오 등 다양한 멀티미디어 요소를 삽입할 수 있어야 합니다. 또한 사용자로부터 입력을 받을 수 있는 폼(Form) 요소도 웹 페이지 구성에 있어 매우 중요한 부분입니다. 이 글에서는 HTML로 멀티미디어를 삽입하는 방법과 폼 요소를 구현하는 방법을 정리하였습니다.

 

1. 멀티미디어 사용하기

→ 웹 페이지에 이미지, 음악, 영상 등을 삽입할 수 있는 기능입니다.

 

1) 이미지 삽입: <img>

• 웹 문서에 이미지를 삽입할 때 사용합니다.

<img src="image.jpg" alt="이미지 설명" width="300" height="200">

 

2) 주요 속성

• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지를 불러오지 못할 경우 보여줄 대체 텍스트입니다.
• width, height: 이미지의 크기를 지정합니다. 하나만 설정하면 비율에 따라 자동 조정됩니다.

3) 외부 콘텐츠 삽입: <object>, <embed>

• 외부 파일(PDF, 영상, 음악 등)을 삽입할 수 있습니다.

<object data="file.pdf" type="application/pdf" width="600" height="400"></object>
<embed src="music.mp3" type="audio/mpeg">

• <object>: 다양한 파일 형식을 삽입 가능
• <embed>: 브라우저에서 지원되는 멀티미디어 파일을 삽입

 

4) 오디오와 비디오 삽입: <audio>, <video>

<audio src="audio.mp3" controls autoplay loop></audio>
<video src="video.mp4" controls autoplay loop width="500"></video>

• controls: 플레이어를 표시합니다.
• autoplay: 자동 재생합니다.
• loop: 반복 재생합니다.

 

5) 하이퍼링크 삽입: <a>

<a href="https://example.com" target="_blank">사이트 바로가기</a>

• href: 연결할 URL
• target="_blank": 새 창에서 열기

 

2. 폼 삽입하기

→ 사용자로부터 정보를 입력받기 위한 인터페이스입니다.

 

1) 기본 구조

<form action="/submit" method="post">
  <!-- 폼 내용 -->
</form>

• <form>: 폼을 만드는 기본 태그
• action: 데이터를 전송할 URL
• method: GET 또는 POST 방식 지정

 

2) 그룹화 및 제목 지정

<fieldset>
  <legend>개인 정보 입력</legend>
  <!-- 그룹화된 입력 요소들 -->
</fieldset>

• <fieldset>: 폼 요소들을 그룹으로 묶음
• <legend>: 그룹의 제목 역할

 

3) 입력 관련 태그

<label for="name">이름</label>
<input type="text" id="name" name="username" placeholder="이름을 입력하세요" autofocus required>

 

4) 주요 속성 설명

속성	설명
type="text"	일반 텍스트 입력
type="radio"	여러 항목 중 하나 선택
type="checkbox"	여러 항목 중 복수 선택 가능
type="hidden"	화면에는 보이지 않지만 서버로 전송
placeholder	입력 전 힌트 텍스트 표시
autofocus	페이지 로드시 자동으로 커서 활성화
readonly	읽기 전용, 편집 불가능
readonly onfocus="this.blur()"	마우스 커서도 선택 불가
required	필수 입력 항목

 

5) 공백 관련 HTML 특수문자

문자	설명
 	스페이스바 한 칸 분량의 공백
 	알파벳 M 크기만큼의 공백

 

6) 입력 유형 예시

<input type="date">
<input type="month">
<input type="week">

 

사용자에게 날짜, 월, 주 단위를 입력받는 데 유용하게 사용됩니다.