Muscardinus

8.19 HTML/CSS/JQuery 공부 본문

FrontEnd/HTML_CSS_JQuery Toy

8.19 HTML/CSS/JQuery 공부

Muscardinus 2020. 8. 20. 03:42
728x90
video 영상 넣기
왠만하면 div 안에 video 넣기
속성 :autoplay, muted, loop
poster -> 이미지 넣어주는 속성 (비디오 안 나올때 대체 사진)
min-width/ min-height 최소 너비 높이

html상 동영상은 맨 위에 있음 z-index: -1로 바꿔줌 위치를

letter-spacing -> 글자마다 간격 주기

animation: showing 2s 1s linear; time delay
animation-fill-mode: both;

position: absolute 를 주면 inline-block으로 바뀜
inline-block에는 width와 height가 없으므로 내가 줘야한다

animation을 줄때는 같은 속성을 줘야하기 때문에 top이면 top으로 통일
bottom이면 bottom으로 통일

JQuery

toggleClass/fadeToggle

CSS
animation-fill-mode: both 기억하기

background: linear-gradient(-135deg, crimson, transparent);

소리 넣기
<audio src="images/piano-bgm.mp3" autoplay loop></audio>
이거는 아무데나 넣어도 된다
controls 속성을 넣으면 컨트롤러 생김

// Audio Controls
let bgm = document.querySelector('#myAudio');
// console.log(bgm);
bgm.volume = 0.2;

동영상 -> 놀라운 무료 동영상 검색

파비콘(favicon) => favorite + icon
<link rel="icon" href="images/favicon.png">

font-weight: 400 => font-weight: normal

h태그는 위아래 마진이 많다 이것을 제거하자 필요에 의해서

background: color img repeat position 순서는 상관 없음 알아서 알아냄
position에서 속성에 숫자를 추가하면 그 만큼 떨어짐
left 15px left에서 15px 떨어짐

<p> block

before,after는 inline으로 바뀜 크기 요소가 없다
728x90

'FrontEnd > HTML_CSS_JQuery Toy' 카테고리의 다른 글

8.21 HTML/CSS/JQuery 공부  (0) 2020.08.21
8.20 HTML/CSS/JQuery 공부  (0) 2020.08.21
8.18 HTML/CSS/JQuery 공부  (0) 2020.08.19
8.17 HTML/CSS 공부  (0) 2020.08.17
8.15 HTML/CSS 공부  (0) 2020.08.16
Comments