HTML의 핵심 인라인-블록 요소와 미디어/폼 태그 활용

웹 페이지에서 시각적 콘텐츠 표시, 사용자 입력 수집, 멀티미디어 재생은 HTML의 기본 기능입니다. 이 문서에서는 <img>, <form>, <input>, <select>, <textarea>, <audio>, <video> 태그의 주요 속성과 사용법을 정리합니다.

인라인-블록 요소 특성

인라인-블록 요소는 블록 요소처럼 크기 조절이 가능하지만, 줄바꿈 없이 흐름 내에 배치됩니다. 대표적인 예로는 다음이 있습니다:

• <img>: 이미지 삽입
• <input>: 다양한 입력 필드
• <button>: 버튼 요소

이들 요소 사이에는 약 3px의 공백이 기본적으로 발생할 수 있습니다.

이미지 삽입: <img>

<img> 태그는 자체 종료 태그로, 다음과 같은 속성을 사용합니다:

• src: 이미지 경로 (상대 또는 절대)
• alt: 대체 텍스트 (접근성 및 로딩 실패 시 표시)
• width/height: 크기 지정 (비율 유지 위해 하나만 설정 권장)

<img src="assets/products/snack.webp" alt="크리스마스 간식" width="500" />
<img src="assets/clothes/coat.webp" alt="겨울 외투" style="width: 200px; height: auto;" />

폼 구조와 입력 요소

<form> 태그는 사용자 데이터를 서버로 전송하기 위한 컨테이너입니다. action 속성으로 제출 대상 URL을 지정합니다.

<form action="submit.php">
  <!-- 입력 필드들 -->
</form>

다양한 <input> 유형

<input type="text" name="nickname" placeholder="사용자 이름 입력" />
<input type="password" name="secret" />
<input type="number" name="quantity" min="1" max="10" />
<label><input type="radio" name="gender" value="male" /> 남성</label>
<label><input type="radio" name="gender" value="female" /> 여성</label>

선택 목록: <select>

<select name="degree">
  <option value="hs">고등학교 졸업</option>
  <option value="bs">학사</option>
  <option value="ms">석사</option>
  <option value="phd">박사</option>
</select>

긴 텍스트 입력: <textarea>

<textarea name="bio" placeholder="자기소개를 작성하세요..." rows="5" cols="50"></textarea>

버튼 유형

<button type="submit">전송</button>
<button type="reset">초기화</button>
<button type="button" onclick="register()">회원가입</button>

입력 요소 고급 속성

• placeholder: 입력 힌트 텍스트
• checked: 라디오/체크박스 기본 선택
• disabled: 비활성화 상태
• readonly: 읽기 전용

<input type="email" placeholder="이메일 주소" disabled />
<input type="text" value="자동 생성 ID" readonly />
<input type="checkbox" name="terms" checked /> 약관 동의

스타일 조정 예시

<input type="search" 
       style="padding: 10px; border: 1px solid #ccc; outline: none; width: 250px;" 
       placeholder="검색어 입력" />

오디오/비디오 재생: <audio>와 <video>

HTML5의 미디어 태그는 별도 플러그인 없이 재생을 지원합니다.

• src: 미디어 파일 경로
• controls: 재생 컨트롤 표시
• loop: 반복 재생

<audio src="music/theme.mp3" controls loop></audio>
<video src="clips/intro.mp4" controls style="width: 100%; max-width: 600px;"></video>

폼 제출 결과 처리

폼이 제출되면 action으로 지정된 페이지로 이동하며, 해당 페이지에서는 처리 결과를 표시할 수 있습니다.

<h1>정보가 성공적으로 전송되었습니다!</h1>