[웹 개발] HTML 기초 (3)

프로타쿠·2024년 6월 6일

웹 개발

목록 보기
3/21

<input>

웹 페이지에 사용자 입력폼을 만든다.

<!-- 텍스트 입력폼 -->
<input type="text">

<!-- 비밀번호 입력폼 -->
<input type="password">

<!-- 체크박스 -->
<input type="checkbox" value="(원하는 대로)">

<!-- radio -->
<input type="radio" value="(원하는 대로)" name="(그룹)">

<!-- 첨부 파일 -->
<input type="file">

<!-- 색깔 -->
<input type="color">

<!-- 날짜 -->
<input type="date">

<!-- 전송 취소 -->
<input type="reset">

<!-- 전송 -->
<input type="submit">

<label>

입력폼의 라벨, <input> 태그와 함께 쓰인다.

<label> 아이디 <\label>
<input type="text">

<label> 비밀번호 <\label>
<input type="password">

<select> & <option>

Dropdown 버튼처럼 리트에서 아이템을 선택하는 폼

<select>
  <option> C/C++ <\option>
  <option> Java <\option>
  <option> Python <\option>
  <option> JavaScript <\option>
<\elect>

<textarea>

<input type="text">와 매우 흡사하지만, 크기가 더 큼.
그리고 줄바꿈도 된다.

<textarea col="30" row="10">
  (여기에 값을 넣으면, textarea의 값이 이걸로 초기화 됨)
<\textarea>
  • col & row : 사이즈 고정

<form>

이전까지 나온 입력폼을 하나로 묶어서 액션을 취할 수 있게 해줌

<form>
  <label> 아이디 <\label>
  <input type="text">

  <label> 비밀번호 <\label>
  <input type="password">
  
  <input type="reset">

  <input type="submit">
<\form>

<audio>

오디오 실행 Component

<audio src="오디오 파일 경로" controls autoplay loop preload><\audio>
  • controls : 오디오 재생 컨트롤러 (재생 시간, 속도, 다운로드, 볼륨 조절 등)
  • autoplay : 웹 페이지에 들어가자 마자 실행됨
  • loop : 무한 반복할 건지
  • preload : 재생 버튼을 눌러 재생하기 전에, 미리 오디오 파일을 재생 준비 상태로 만듦

<video>

비디오 플레이어 Component

<video src="비디오 파일 경로" controls autoplay loop muted poster="(이미지 경로)"><\video>
  • muted : 음소서 상태로 설정
  • poster : 영상 실행 전에 보여주는 이미지
profile
안녕하세요! 프로타쿠입니다

0개의 댓글