$$config title: Web3 수업 7일차 keywords: - 반응형 비디오 - fullpage $$ # 반응형 비디오 ``` css .video-1>iframe{ position:absolute; width:100%; height:100%; } .video-2{ margin-top:20px; width:70%; position:relative; padding-bottom:50.25%; } ``` # aos animate # before ```css span{ font-family:"Font Awesome 6 Free"; font-weight: 900; display:inline-block; } span::before{ content:"\f062"; margin-right:20px; } span:last-child{ font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left:20px; } span:last-child::before{ transform:scale(-1); } div.hover>span::before{ content: "\f063" } div.hover>span:last-child::before{ transform:scale(-1) } ``` # 풀페이지 ```css 1. 풀페이지 다운로드 후 압축풀기. dist 폴더에서 min 3개 쓰기 2. cdnjs에서 제이쿼리, 풀페이지 js css 두개 링크복붙. 풀페이지 설명서 참조

Fullpage

Section1

Fullpage

Section2

Fullpage

Section3

Fullpage

Section4

Fullpage

Section5

js --- navigation: true, 오른쪽 스크롤 생김. navigationTooltips: ['firstSlide', 'secondSlide','thirdSlide','fourthSlide','footer'], 두근두근 공사중 네번째, footer마지막 .

fp-auto-height는 footer에 제일 마지막 높이. controlArrows: false, 슬라이드 화살표삭제 slidesNavigation: true 슬라이드 내비게이션생성 keyboardScrolling: true, 키보드스크롤 .fp-arrow.fp-controlArrow.fp-next{ right:40px; } ctrl shift c 해서 인자를 찾아낸다음 직접 수정이 가능하다. npm install fullpage.js ```