HTML practice_240322

Choi Suyeon·2024년 3월 22일

HTML5에 추가된 Form Control

  • input 태그 많은 control들이 추가.
- 날짜선택 (년-월-일 ) <input type=“date” name=“이름” id=“아이디”
                               class=“클래스”   value=“다른 일자를 선택할 때“>

- 년-월  <input type=“month” name=“이름” id=“아이디”
                               class=“클래스”  value=“다른 월을 선택할 때“>

- 년-월-일 시간 <input type=“datetime-local” name=“이름” id=“아이디”
                               class=“클래스”  value=“다른 날짜 선택할 때“>

-시간  <input type=“time” name=“이름” id=“아이디”
                               class=“클래스”  value=“다른 시간을 선택할 때“>


-색 <input type=“color” name=“이름” id=“아이디”
                               class=“클래스”  value=“설정할 색“>


-전화번호 입력 <input type=“tel” name=“이름” id=“아이디”

-이메일 <input type=“email” name=“이름” id=“아이디”

-범위 설정 <input type=“range” name=“이름” id=“아이디” class=“클래스”
                   min=“최저값” max=“최대값” value=“현재값”/>

-<meter> : 값을 시각적으로 보여줄 때 
    <meter name=“이름” id=“아이디” class=“클래스” min=“최저값”
              max=“최대값” value=“현재값”>
            meter태그를 지원하지 않는 브라우저에서 사용될 값
    </meter>

media 재생 태그

  • 동영상이나 음악을 재생할 때 사용하는 태그.
 -HTML4.01까지는 <embed>태그로 동영상과 음악을 모두 재생했으나 
   HTML5부터는 동영상은 <video>, 음악은 <audio>로 구분하여 재생한다. 

embed

사용법)

   <embed src=“미디파일의 경로” width=“넓이” height=“높이” controller=“true”/>

audio

-음악 재생할 때 사용.
사용법)

<audio src=“음악파일경로” controls=“controls”>
    당신의 브라우저는 이 태그를 지원하지 않습니다.
</audio>
-audio 태그는 지원하는 mp3를 지원하나 mp3를 지원하지 않는 브라우저.

<audio>
  <source src=“음악파일의 경로”/>
  <source src=“음악파일의 경로”/>
           .
</audio>

video

-동영상을 재생하기 위한 태그.

사용법)

  <video src=“동영상파일경로” controls=“controls” width=“넓이” height=“높이”
           poster=“thumbnail이미지”>
        당신의 브라우저는 이 태그를 지원하지 않습니다.
  </video>

  -video 태그는 지원하나 codec을 지원하지 않는 브라우저로 접속 할 때
  <video constrols=“constrols” width=“넓이” height=“높이” poster=“thumbnail이미지”>
   <source src=“미디어파일의 경로”/>
   <source src=“미디어파일의 경로”/>
             .
  </video>

특수문자

  • 기능을 가진 문자.

  • 모든 Markup Language는 동일한특수문자를 사용.( HTML, XML 는 같은 특수문자를 사용)

  • &가 시작문자 ;이 끝문자

    사용법)
    &문자열;

흘러가는 글자

<marquee scrollamount=“글자속도” direction=“진행방향”> 글자</marquee>

0개의 댓글