반응형

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
HTML5 Video 신규속성 태그 정리  (0) 2021.03.28
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

+ Recent posts