*
HTML5 태그 2(오디오,비디오,입력양식,공간분할)
상상모음
2025. 3. 9. 14:44
HTML5 오디오, 비디오, 입력 양식, 공간 분할 태그
HTML5에는 소리(오디오), 영상(비디오), 입력 폼, 공간을 나누는 다양한 태그가 있어요!
1. 오디오 태그 (<audio>)
오디오(소리, 음악, 효과음)를 웹사이트에서 재생할 때 사용해요!
기본 형태
<audio controls>
<source src="music.mp3" type="audio/mpeg">
브라우저가 오디오를 지원하지 않아요 😢
</audio>
결과: 음악을 재생할 수 있는 버튼이 나타나요!
오디오 태그 속성
| 속성 | 설명 |
| controls | 재생/일시정지 버튼을 보여줌 |
| autoplay | 자동으로 재생됨 (소리 없이 시작하는 게 기본) |
| loop | 음악이 끝나면 다시 처음부터 반복됨 |
| muted | 소리를 처음부터 끔 |
| preload | 음악을 미리 불러올지 결정함 (auto, metadata, none) |
지원하는 파일 형식 (포맷)
| 포맷 | 확장자 | 브라우저 지원 |
| MP3 | .mp3 | ✅ 거의 모든 브라우저 지원 |
| Ogg | .ogg | ✅ 크롬, 파이어폭스 |
| WAV | .wav | ✅ 크롬, 엣지 (파일 크기가 큼) |
2. 비디오 태그 (<video>)
웹사이트에서 동영상을 보여줄 때 사용해요!
기본 형태
<video controls width="400">
<source src="video.mp4" type="video/mp4">
브라우저가 비디오를 지원하지 않아요
</video>결과: 동영상을 재생할 수 있는 버튼이 나타나요!
비디오 태그 속성
| 속성 | 설명 |
| controls | 재생/일시정지 버튼을 보여줌 |
| autoplay | 자동으로 재생됨 (소리 없이 시작하는 게 기본) |
| loop | 끝나면 다시 처음부터 반복됨 |
| muted | 처음부터 소리가 꺼짐 |
| poster | 영상이 재생되기 전에 보여줄 이미지 지정 |
| width / height | 영상 크기 조절 |
지원하는 파일 형식 (포맷)
| 포맷 | 확장자 | 브라우저 지원 |
| MP4 | .mp4 | 거의 모든 브라우저 지원 |
| WebM | .webm | 크롬, 파이어폭스 |
| Ogg | .ogg | 크롬, 파이어폭스 |
3. 입력 양식 태그 (<input> 등)
사용자가 정보를 입력할 수 있는 공간을 만들어요!
기본 입력 필드
<input type="text" placeholder="이름을 입력하세요">
결과: 이름을 입력할 수 있는 빈 칸이 나와요!
주요 입력 타입
| 타입 (type="") | 설명 |
| text | 글자를 입력할 수 있음 |
| password | 비밀번호 입력 (****로 표시됨) |
| 이메일 형식 입력 (@ 필수) | |
| number | 숫자만 입력 가능 |
| date | 날짜 선택 가능 (📅 버튼) |
| file | 파일 업로드 버튼 생성 |
| checkbox | 체크박스 (✅) |
| radio | 라디오 버튼 (○) |
| submit | 제출 버튼 (💾 저장) |
예제: 로그인 입력 폼
<form action="/login" method="post">
<input type="text" placeholder="아이디">
<input type="password" placeholder="비밀번호">
<button type="submit">로그인</button>
</form>
결과: 아이디 & 비밀번호 입력 후 "로그인" 버튼 클릭 가능!
4. 공간 분할 태그
웹사이트를 여러 영역으로 나눌 때 사용해요!
1) div 태그 (블록 영역)
큰 덩어리를 나눌 때 사용해요!
<div style="background-color: lightblue; padding: 10px;">
여기는 div 영역이에요!
</div>
결과: 파란색 박스 안에 글씨가 들어가요!
2) span 태그 (인라인 영역)
글자나 작은 부분을 꾸밀 때 사용해요!
<p>이 문장에는 <span style="color: red;">빨간 글씨</span>가 있어요!</p>
결과: 빨간 글씨만 스타일을 줄 수 있음!
3) section 태그 (주제별 공간 나누기)
웹페이지의 특정 주제(예: 뉴스, 공지)를 묶을 때 사용해요!
<section>
<h2>오늘의 뉴스</h2>
<p>HTML5를 배우면 재미있어요!</p>
</section>
결과: 뉴스 같은 섹션이 만들어져요!
4) article 태그 (독립적인 콘텐츠)
블로그 글, 기사 같은 개별 콘텐츠를 나타낼 때 사용해요!
<article>
<h2>블로그 제목</h2>
<p>이곳은 블로그 글 내용입니다.</p>
</article>
결과: 하나의 독립적인 글이 만들어져요!
5) aside 태그 (사이드바)
메인 콘텐츠 옆의 추가 정보(광고, 링크)를 표시할 때 사용해요!
<aside>
<h3>광고</h3>
<p>이곳은 광고 배너 자리!</p>
</aside>
결과: 광고나 추가 정보 공간을 만들 수 있어요!
정리:
오디오 (<audio>) → 음악, 소리 재생
비디오 (<video>) → 동영상 재생
입력 양식 (<input>, <form>) → 사용자 입력
공간 분할 (<div>, <span>, <section> 등) → 화면 구성
HTML5 태그를 잘 활용하면 멋진 웹페이지를 만들 수 있어요!