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>
가보자고