학원/BS(부트스트랩4)

11/1 33-1 [HTML5] HTML5에 새로 추가된 요소&속성들

도원결의 2022. 11. 1. 17:55

얘네도 업데이트를 하면서 요소랑 속성들이 계속 추가 되나보다

역시 사람도 발전하고 기술도 발전하고

나도 발전.... 해야하는데 .... 하...

 

[새롭게 추가된 요소들]

 

1. 텍스트에 하이라이트 효과를 주는 태그(mark)

이거 왜 우리가 인터넷으로 검색하면 검색키워드들이 노랗게 표시 되서 찾기 편하잖아? 그거야 그거 ! 오호

mark태그가 없을 땐 span 태그에 style속성으로 색을 줬다고 하네

<h2>텍스트에 하이라이트 효과주는 태그(mark)</h2>
HyperText Markup <br/>
<span style="background-color: yellow;">HTML5</span>가 인터넷 업계에서 알려지게 된 계기는 바로 <br/>
2009년 구글의 웹개발자 콘퍼런스인 "구글 I/O"에서 <br/>
자사의 서비스가 아닌 <mark>HTML5</mark>를 데모로 시연하면서 차세대 웹 기술로 
지원하겠다는 천명을 하면서부터 시작<br/>
스티브 잡스가 애플 아이폰에 플래시 탑재를 거부하면서 대응 기술로
<mark>HTML5</mark>를 홍보하기 시작.<br/>
<mark>HTML5</mark> 활성화의 계기는 인터넷을 사용하는 기기가 PC에서 
스마트폰, 태블릿PC, 스마트TV 등으로 확대되면서 2010년대 초반 활성화 하기 시작<br/>
<mark>HTML5</mark>는  특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표<br/>
좀 더 의미있는(Semantic) 태그 사용<br/>
군 더더기 없는 짧은 코드 사용<br/>

텍스트에 하이라이트 효과주는 태그(mark)

HyperText Markup
HTML5가 인터넷 업계에서 알려지게 된 계기는 바로
2009년 구글의 웹개발자 콘퍼런스인 "구글 I/O"에서
자사의 서비스가 아닌 HTML5를 데모로 시연하면서 차세대 웹 기술로 지원하겠다는 천명을 하면서부터 시작
스티브 잡스가 애플 아이폰에 플래시 탑재를 거부하면서 대응 기술로 HTML5를 홍보하기 시작.
HTML5 활성화의 계기는 인터넷을 사용하는 기기가 PC에서 스마트폰, 태블릿PC, 스마트TV 등으로 확대되면서 2010년대 초반 활성화 하기 시작
HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표
좀 더 의미있는(Semantic) 태그 사용
군 더더기 없는 짧은 코드 사용

2.진행율을 표시하는 태그(progress)

이거 오디오, 비디오 하면서 써본거 그 얼마나 재생했나를 표시하는 그 그림 ! 그거 나타내주는 태그다

 <h2>진행율을 표시하는 태그(progress)</h2>
<progress max="200" value="100" style="width:300px ; height:50px"></progress>

진행율을 표시하는 태그(progress)

3. 자동완성태그(datalist)

검색창에다가 몇 글자만 써도 자동완성 해주는 바로 그 기능 !

<h2>자동완성태그(datalist)</h2>
<label for="keyword">검색어를 입력하세요</label>  <!--label 태그는 글씨 클릭해도 체크됨--->
<input type="search" id="keyword" list="items"/>
<datalist id="items">
	<option value="코로나"></option>
    <option value="코로나19"></option>
    <option value="코카콜라"></option>
    <option value="코코넛"></option>
    <option value="html5"></option>
    <option value="HI"></option>
    <option value="NAVER"></option>
    <option value="NULL"></option>
</datalist>

자동완성태그(datalist)

4. 이미지를 그룹화 하는 태그(figure)

이미지를 세로로 그룹화 하나보지 뭐 오늘은 솔직히 이거 보다 빨리 자스 정리해야 해서 얼른하고 넘어 갈 거얌

<h2>이미지를 그룹화 태그(figure)</h2>
<figure>
   <figcaption>자바이미지1</figcaption>
   <img src="./images/다운로드.png" alt="첫번째 이미지" width="100" height="50"/>
   <figcaption>자바이미지2</figcaption>
   <img src="./images/다운로드.png" alt="첫번째 이미지" width="100" height="50"/>
</figure>

이미지를 그룹화 태그(figure)

자바이미지1
첫번째 이미지
자바이미지2
첫번째 이미지

5. tamplate 태그

자스 이용 html요소를 동적으로 추가할 때 템플릿으로 사용! 브라우저상에는 안보임

<template>
 <li>아이템1</li>
 <li>아이템2</li>
 <li>아이템3</li>
</template>

어차피 안보이니까 이건 코드만 봐

 

[새롭게 추가된 속성들]

 

1.multiple,accept속성(type = "file")

흔히 우리가 파일 업로드 할 때 보이는 확장자를 걸러 냄

<h3>multiple,accept속성(type = "file")</h3>
<input type="file" multiple accept="image/png,image/jpeg"/>

multiple,accept속성(type = "file")

2. autofocus속성

이거 .... 나는 잘 모르겠음... 코드만 봐 걍..

<input type="text" autofocus/>

 

 

3.contenteditable 속성

 글들을 직접 수정 할 수 있게 만들어 줘요

<p contenteditable="true">
HyperText Markup <br/>
<span style="background-color: yellow;">HTML5</span>가 인터넷 업계에서 알려지게 된 계기는 바로 <br/>
2009년 구글의 웹개발자 콘퍼런스인 "구글 I/O"에서 <br/>
자사의 서비스가 아닌 <mark>HTML5</mark>를 데모로 시연하면서 차세대 웹 기술로 
지원하겠다는 천명을 하면서부터 시작<br/>
스티브 잡스가 애플 아이폰에 플래시 탑재를 거부하면서 대응 기술로
<mark>HTML5</mark>를 홍보하기 시작.<br/>
<mark>HTML5</mark> 활성화의 계기는 인터넷을 사용하는 기기가 PC에서 
스마트폰, 태블릿PC, 스마트TV 등으로 확대되면서 2010년대 초반 활성화 하기 시작<br/>
<mark>HTML5</mark>는  특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표<br/>
좀 더 의미있는(Semantic) 태그 사용<br/>
군 더더기 없는 짧은 코드 사용<br/>
</p>

HyperText Markup
HTML5가 인터넷 업계에서 알려지게 된 계기는 바로
2009년 구글의 웹개발자 콘퍼런스인 "구글 I/O"에서
자사의 서비스가 아닌 HTML5를 데모로 시연하면서 차세대 웹 기술로 지원하겠다는 천명을 하면서부터 시작
스티브 잡스가 애플 아이폰에 플래시 탑재를 거부하면서 대응 기술로 HTML5를 홍보하기 시작.
HTML5 활성화의 계기는 인터넷을 사용하는 기기가 PC에서 스마트폰, 태블릿PC, 스마트TV 등으로 확대되면서 2010년대 초반 활성화 하기 시작
HTML5는 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표
좀 더 의미있는(Semantic) 태그 사용
군 더더기 없는 짧은 코드 사용

 

4. hidden 속성 

말 그대로 숨기는거

이거도 어차피 안보일 거니까 코드만 

 <input type="button" value="버튼" hidden/>

 

5. required 속성 & placeholder 속성

required 는 값을 무조건 넣어야 이동할 수 있게 하는 것

placeholder 는 입력창에 글씨 보이게 하는거 입력하려고 하면 사라지는 바로 그것 !

<h3>required 속성</h3>
<form action="https://www.nate.com">
이름 <input type="text" name="name" required/> <!--무조건 입력해야 이동!!-->
남자 <input type="radio" name="gender" value="male" required/>
여자 <input type="radio" name="gender" value="female" required />
동의 <input type="checkbox" name="accept" value="OK" required />
<input type="submit"  value="확인"/>
</form>

<h3>placeholder</h3>
아이디 <input type="text" placeholder="아이디를 입력하세요"/>
비밀번호 <input type="password" placeholder="비밀번호를 입력하세요" />
이름 남자 여자 동의

placeholder

아이디 비밀번호