HTML5 태그와 CSS 태그와 적용한 사례에 대해서 구체적으로 알아보겠습니다. HTML1~4까지 내용들을 확인하고 싶은 분들은 카테고리 내에 있는 웹퍼플리싱을 눌러서 확인하시길 바랍니다. 이번 태그는 HTML5 Video 태그와 신규 속성 태그에 대해서 알아보겠습니다.
HTML5 VIDEO 태그 및 CSS태그
HTML5 VIDEO HTML 태그
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title> HTML5.0 3일차 video 태그 </title>
<link type="text/css" rel="stylesheet" href="./index17.css?v=1">
</head>
<body>
<!--
video : HTML5 전용 비디오 태그입니다.
mp4, avi, ogg, mpeg, wdbm(모바일 동영상 플레이시 사용합니다.)
source : 영상을 불러오는 태그 경로입니다. (type은 파일 속성과 동일해야함)
poster : 썸네일 이미지
controls : 자동영상 플레이 (단, 크롬/파이어폭스는 자동 실행이 안됨)
muted : 음소거
track : 자막
loop : 반복재생
-->
<video poster="./park.jpg" class="v" controls muted>
<source src="./videoplay.mp4" type="video/mp4">
<track kind="subtitles" src="" srclang="en" label="english">
<!-- 자막파일 : vtt -->
</video>
</body>
</html>
CSS태그
body {margin: 0; padding: 0;}
.v{width: 350px; height: 350px;}
HTML 5.0 신규속성 태그 및 CSS
HTML
<html></html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=Edge, chrome=1">
<title>HTML5.0 3일차 - 신규속성 및 태그
<link type="text/css" rel="stylesheet" href="./index18.css?v=1">
</title>
<body>
<form method="POST" action="http://naver.com">
<input type="text" placeholder="이름을 입력하세요" autofocus required>
<!-- autofocus : 페이지 로드시 자동으로 커사가 가도록 하는 기능입니다.-->
<!-- required 입력 필수 값-->
<select required>
<option value="">통신사</option> <!-- value="" 값이 없음을 표시 -->
<option value="SKT">SKT</option> <!-- valule="SKT" SKT 단어 값을 표시함 -->
<option value="KT">KT</option>
<option value="LGT">LGT</option>
</select>
<input type="checkbox" id="b" required>
<label FOR="b" >동의함</label>
<!-- label이란? span 업그레이드 부분이며 frr를 사용할 수 있습니다.
단, id와 같은 이름에서만 사용이 가능합니다. display:blcok을 사용해야만
오브젝트 크기를 조절할 수 있습니다.-->
<br><br>
<input type="text" list="s"><!--input +datalist 사용자가 입력시, 자동완성 되도록 하는 기능입니다.
list와 id가 같은 이름으로 되어야 합니다.
-->
<datalist id="s">
<option>HTML</option>
<option>HTML & WEB 꾸미기</option>
<option>CSS</option>
<option>WEB</option>
</datalist>
<br>
<label class="box"></label>
<input type="submit" value="전송">
</form>
<!--응용문제-->
<input type="radio" name="aa" id="aa1">
<label for="aa1">
동의함</label>
<input type="radio" name="aa" id="aa2" checked>
<label for="aa2">
동의안함</label>
</body>
</head>
</html>
css
body{margin: 0; padding: 0;}
.box{width: 100px; height:100px; background-color: blue; display: block;}
'웹퍼블리싱' 카테고리의 다른 글
| HTML5 레이아웃 만들기 (0) | 2021.03.31 |
|---|---|
| HTML4 태그 정리 (6) (0) | 2021.03.25 |
| HTML4 태그 정리 (5) (0) | 2021.03.24 |
| HTML4 및 CSS2 태그 정리 (3) (0) | 2021.03.20 |
| HTML 4 태그 정리 (2) (0) | 2021.03.20 |