220718 HTML5 & CSS3 #8

honey1122·2022년 7월 18일
0

video

01basic.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비디오 태그</title>
    <style>
        video{
            width: 70%;
            height: 50%;
        }
    </style>
</head>
<body>
<!-- 
    html5에 새로 추가된 태그로 기존에는 스크립트나 기타 라이브러리를 통해 
    동영상을 올려야했다면 간단하게 태그로 동영상을 올릴수 있게 되었음. 

    1. 직접 파일을 업로드 하는 방법
    확장자명은 avi는 압축률이나 용량에 있어서 웹 사이트에 적합하지 않은 확장자명이므로
    사용하지 않음. 
    
    주로 mp4가 균일화되어 사용하기는 하나, 
    브라우저마다 재생하는 확장자가 다르기 때문에
    확장자끼리 올리는 것이 좋음. 

    -mp4 : 모든 브라우저 호환
    -ogv : 익스 / 사파리 미호환
    -webM : 익스 / 사파리 미호환

    video 태그 속성

    controls = 플레이버튼 / 음향조절같은 컨트롤창을 생성

    autoplay : 비디오가 실행할 준비가 되면 자동재생
    
    사이트 접근성 지침 : 소리를 갖고 있는 모든 동영상은 자동재생을 지원하지 않음.
    loop : 비디오 재생이 끝나면 바로 반복 재생

    *웹접근성 지침에 의하면 웹사이트 내에서 비디오 자동반복재생을 지원하기 위해서는
    autoplay loop muted 속성을 항상 넣어야 함. 
    -muted : 비디오 오디오 출력 소거

    poster : 동영상이 재생되기 전 정지상태일때에 썸네일 형태의 이미지를 제공해주는 태그
    자동반복재생시에는 정지상태가 안되기 때문에 확인할 수 없음
    최초 실행시에 이미지는 삭제되고 중간에 정지해도 나타나지 않음

    이미지 최초의 사이즈만 제공하기 때문에 동영상의 크기와 다르게
    오차가 생길 수 있음. css가 아닌 속성이기 때문에 css로 사이즈를 조절할 수 없음. 

    preload : 영상이 있는 페이지를 로드할 때 사전에 영상에 대한 정보 다운로드 관리에 대한 속성
    -none : 사전에 비디오에 대한 어떤 정보도 받지 않고
    재생시에 모든 정보를 한번에 다운로드 함. 
    *비디오의 용량에 따라 로딩속도가 느려질 수 있음. 

    -metadata : 영상에 대한 간단한 정보(시간, 크기)만 다운 후 재생시에 나머지 정보를 다 받음

    -auto : load와 동시에 모든 비디오의 정보를 받음. 
    -동영상 크기와 사이트 내의 정보에 따라 로드시간에 영향을 받음. 

    *자동반복재생설정시 preload의 값이 none이나 metadata라면
    값이 무시되고 auto로 강제 변환됨. 

    playsinline : 
    pc나 android는 동영상 재생시 현재화면(inline)에서 확인할 수 있지만
    ios는 정책때문에 전체화면으로 바뀌어 재생됨. 
    모바일 지원시 playsinline을 같이 설정해서 ios에서도 
    inline으로 재생되도록 해야 함. 

-->
<!-- <video controls autoplay = "autoplay" muted loop > -->
    <video poster="video/poster.jpg" controls preload="auto">
    <source src = "video/video.mp4">
</video> 
</body>
</html>

유튜브 iframe 태그

vimeo iframe 태그
vimeo 바로가기

pesudo-class(가상클래스)

peseudo-element.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상요소</title>
    <style>
        /* 
        peseudo-element 가상요소 
        -태그상에는 존재하지 않지만 화면상에는 존재하는 것처럼
        객체를 생성해서 css를 함께 추가하여 하나의 객체처럼 보이게 하는 요소 .

        html로 표현하기 어려운 컨텐츠의 특정부분만을 구성하거나 
        html의 내용을 변경하지 않고도 선택한 요소의 특정 위치에 새로운 컨텐츠를 추가할때 사용.
        
        선택자 : before - 선택자의 내용 앞쪽에 새로운 inline객체 생성.
        선택자 : after - 선택자의 내용 뒷쪽에 새로운 inline객체 생성.
        선택자 : selection - 드래그 했을때 속성 변화
        선택자 : placeholder

        선택자 : before와 선택자 ::before
        출력에는 차이가 없으나 가상요소와 가상선택자를 구분하기 위해 가상요소에는 ::를 사용하도록
        하고 있음.
        *구버전 브라우저에는 ::을 인식못하는 경우도 있음. 

        before, after에는 반드시 필요한 속성이 있음.
        content = ""
        가상요소에 내용을 부여하는 css. 컨텐츠 안에 텍스트, 
        특수문자등을 표시할 수도 있으며, 직접 커스텀할때에도 content는 필요하지만
        내용을 비워두면 됨. 

        그 외에도 모든 css를 지원

        *자주 사용하는 용도는 내용표시보다는 꾸미는 요소나 float요소를 해제하는
        clearfix용도로 많이 사용. 

        float : 자식요소의 높이값을 부모가 받아오지 못함. 

        */

        /* div.box::before{
            content: "";
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: coral;
             body상에는 존재하지 않지만 화면에는 존재하는것처럼 보임 
        } 
        */
        body, html. div, ul, li{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }

        div.box::before{
            content: "안녕하세요";
        }
        div.box::after{
            content: "★";
        }
        div.gnb{
            width: 1300px;
            background-color: pink;
            padding: 25px;
            margin: 25px;
        }
        div.gnb li{
            width: 200px;
            height: 50px;
            background-color: coral;
            float: left;
        }
        /* div.clearfix{ */
            /* clear: left; */
            /* float left를 해제함 */
            /* clear: both; }
            */
            /* 부모요소는 clearfix박스를 감싸야 함. 따라서 리스트를 자동으로 감싸게 되는 원리 */
        /* div.gnb ul::after{
            content: "";
            display: block;
            clear: both;
        } */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        div.box::selection{
            background-color: red;
            color: white;
            /* 드래그 했을때 나타남 */
        }
        input.name::placeholder{
            color: red;
            background-color: coral;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">저는 박스입니다.</div>
    <div class="gnb">
        <ul class = "clearfix">
            <li>
                menu1
            </li>
            <li>
                menu2
            </li>
            <li>
                menu3
            </li>
            <li>
                menu4
            </li>
            <li>
                menu5
            </li>
            <!-- <div class="clearfix"></div> -->
            <!-- ul안에 div올수 없음. 구조적 오류. -> 가상요소 선택해주는 방법 -->
        </ul>
    </div>

    <div class="box01">box01</div>
    <input class = "name" type="text" placeholder="이름을 입력해주세요">
</body>
</html>

select

select.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상선택자</title>
    <style>
        /* 
        가상 선택자
        - 사용자의 행동에 영향을 받는 요소를 생성하거나 (event)
        - 특정한 위치의 순번을 가진 선택자를 찾을 때 (select)
        를 통틀어 가상 선택자 라고 함.

        이벤트 선택자
        -a 태그에만 들어가는 이벤트
            :visited - 방문했던 페이지 링크에 대한 이벤트 속성
            :link - 방문하지 않은 페이지 링크에 대한 이벤트 속성


        href = "" 이동하는 참조 페이지
        반드시 존재해야하며, 
        이동할 페이지가 없을 경우 생략하지 않고
        임시링크(#)을 걸어 놓음. 

        title : 해당 링크에 대한 목적지를 알려주는 용도로 사용,
        링크에 마우스 커서를 올렸을 때 나오는 도움말로도 이용됨. 
        a 태그 안에 있는 텍스트가 다른 의미를 말하고 있다면 접근성 측면에서 반드시
        명시해야 함. 

        target : 링크를 클릭 할 때 창을 여는 설정
        _self : 클릭한 창에서 링크 이동(기본값)
        _blank : 새 창으로 링크 이동

        _parent : 부모 창에서 링크 이동(부모창이 없으면 _self)
        _top : 전체 브라우저 중에서 가장 상위 창에서 링크 이동(없으면 _self)
        a 태그는 기본값으로 text-decoraction이 걸려있음(밑줄)
        none으로 해제하여 사용

        모든 태그에 적용되는 이벤트
            :hover - 마우스 이벤트(마우스 커서가 해당 링크에 올라가 있을 때)
            :active - click 이벤트(마우스를 클릭한 상태이거나 요소가 활성화 되어 있을 때)
            :focus - 키보드 이벤트로 해당 객체가 포커싱 되어 있을때 (탭 키 눌렀을때 선택되는 경우 등)
            (포커스 이벤트는 특정한 행동을 하는(가능, 이동, 입력)행동을 발생시키는 태그에만 적용)


         */
         /* a{
            text-decoration: none;
         }
         a:visited{
            color: aqua;
            background-color: black;
         }
         a:link{
            color: red;
            background-color: yellow;
         } */
 
         p:active{
            background-color: rebeccapurple;
         }a:focus{
            background-color: blue;
            color: white;
         }
         div.box div:nth-child(2){
            background-color: coral;
         }
         div.box div:first-child{
            background-color: hotpink;
         }
         div.box div:last-child{
            background-color: greenyellow;
            /* 제일 아래에 있는 요소가 div인지 찾음. 
            div태그가 아니라면 적용되지 않음.
             */
         }
         ul.gnb{
            width: 1300px;
            padding: 25px;
            margin: 0px auto;
            background-color: blue;
            list-style: none;
         }
         ul.gnb li{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin-right: 20px;
            float: left;
         }
         ul.gnb li:last-of-type{
            margin-right: 0px;
         }
         ul.gnb li:nth-of-type(even){
            background-color: red;
            /* 
            짝수순번.
            홀수는 odd 
            */
         }
         /* 
         
         선택자 찾는 요소
         선택자:nth-child(n) : 해당 순번에 있는 선택자를 찾음.
         선택자:first-child : 가장 첫번째 있는 선택자를 찾음. 
         선택자:last-child:가장 마지막에 있는 선택자를 찾음. 

         -child의 특징은 태그의 선택자와는 관계없이 부모요소에서 해당하는 순번만 만족
         해당 순번에 해당하는 태그가 아닐경우 출력하지 않음. 

         nth-of-type(n)
         first-of-type
         last-of-type

         nth-of-type이 nth-child(n)보다 호환이 좋음. 

         */

         div.box p:last-of-type{
            background-color: aqua;
            /* 태그들이 섞여 있을때 찾아줌.  */
         }
         ul.div{
            width: 100%;
            padding: 25px;
            background-color: olive;
         }

    </style>
</head>
<body>

    <!-- <a href="#" title="네이버 페이지 새 창 이동" target="_blank">바로가기1</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, exercitationem libero labore impedit minima est, facilis nesciunt ipsa, obcaecati assumenda saepe rem eum beatae qui pariatur totam sit amet possimus.</p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere incidunt ex, eius exercitationem dolorum ratione ullam dolorem tempora enim ea labore dicta ipsa, soluta amet aspernatur, magnam doloribus! Ea, dolor!
    </div>
    <a href="http://www.naver.com" title="네이버 페이지 새 창 이동" target="_blank">바로가기2</a>
    <div><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid dolorum nam nisi similique hic magni iure animi error esse minima eaque officia ullam sunt dicta unde, laborum quas! Laborum, praesentium.</a></div> -->
   <!-- <div class="box">
    <div>이상한변호사 우영우</div>
    <div>이상한변호사 우영우</div>
    <div>이상한변호사 우영우</div>
    <p>배고프네</p>
    <div>이상한변호사 우영우</div>
    <p>배고프네</p>
    <div>이상한변호사 우영우</div>
</div> -->

<ul class="gnb">
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>
</body>
</html>
profile
가보자고

0개의 댓글