$$config title: Web3 수업 6일차 keywords: - form - Animation - 동영상 첨부 $$ # form ``` css email칸에 id="email" 해주면 평소 기억되는 것들이 나타나게된다. hover는 마우스를 올렸을때, :focus 는 클릭했을때 작동한다. 일반적인 태그에서는 작동하지 않는다. input이나 form태그에서만 작동한다.

-> id , for 로 label을 클릭해도 check가 되게 할 수 있다.

input:focus,textarea:focus{
  outline:2px solid purple; -> bor대신 outline을 하면 2px가 밖으로 튀지 않고 깔끔하다.
}

css>>
html>body *{
  box-sizing:border-box;
}
input,
textarea{
  outline:none;
  border:1px solid black;
}
input:focus,textarea:focus{
  outline:2px solid purple;
}
.form-box{
  width:600px;
  margin:0 auto;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%)
}
.email-box{
  width:100%;
  height:50px;
  padding:10px;
  margin-bottom:10px;
}
.name-box,.company-box,.phone-box,.password-box{
  height:50px;
  padding:10px;
  margin-bottom:10px;
}
.title-box{
  width:100%;
  height:50px;
  padding:10px;
  margin-bottom:10px;
}
.content{
  width:100%;
  padding:10px;
  height:200px;
  resize:none;
}
.agree-box{
  width:20px;
  height:20px;
}
.submit{
  width:100%;
  height:50px;
  border:2px solid purple;
}
.submit:hover{
  background-color:purple;
  color:white;
}

```

# 애니메이션
```css

.animation{
  animation-name:test;
  animation-duration:4s;
  
}
@keyframes test{
/*   from{
    left:0;
  }
  to{
    left:400px; 
  }*/
  0%{
    left:0;
  }
  50%{
    left:200px;
    top:50px;
    transform:rotate(45deg);
  }
  100%{
    left:400px;
  }
}
필요한 것 세가지 : 애니메이션 이름, duration, keyframes test {}

animation-iteration-count:infinite; -> 반복횟수. 무한대가능.
  animation-direction:alternate; -> alternate 왕복.  reverse  역순.  alternate-reverse : 역순 왕복.
  animation-fill-mode:forwards; -> 가장 마지막 멈춘곳에서 그대로 정지하는것.  backwards -> 시작한 곳 제자리로 돌아와서 정지하는것.
  animation-play-state:paused; 정지하는것. default는 running이고 hover나 active상태일때만 쓰면될것.
   animation-timing-function:linear;  ease, ease-in, ease-out ...
   
   animation:circle 5s infinite linear  -> 순서 상관없이 한번에 써도 됨.
   
   
제자리 빙글빙글
css
.background{
  background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
 height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.animation>*{
  font-size:10rem;
  color: #FF3CAC;
}
.animation{
  animation:circle 5s infinite linear 
}
@keyframes circle{
  100%{
    transform:rotate(360deg);
  }
}

큐빅 배지어
  animation-timing-function: cubic-bezier(.73,.04,.56,1.57);
  
```

# youtube 삽입
```html
1. 동영상 우클릭 눌러서 소스코드 복사 - html 복붙.
2. 오른쪽 공유 누른다음 퍼가기 클릭. (플레이어 컨트롤을 표시합니다 해제하면 YOUTUBE에서 보기 사라짐) 오른쪽 위 소스코드 복사해서 붙여넣기.

1번째는 전체크기로 오며 두번째는 작은 사이즈로 온다. 
iframe은 block 속성인데 , 한 줄에 여러개 배치가 가능하다.

비디오 삽입.
<video src = "주소삽입" controls autoplay muted> </video> 
controls = 재생버튼 삽입
autoplay = 자동시작
muted = 음소거
muted와 autoplay 같이 써주어야 오토플레이 가능.

혹은 video태그가 너무 길어지는것이 싫다면
<video controls autoplay muted> 
	<source src = "주소삽입">
</video>
이렇게 해도 가능하다.

loop 를 넣으면 무한반복이 가능하다.
```</article></body></html>