패스트캠퍼스 환급챌린지 27일차 미션 (2월 27일) : 프론트엔드개발 강의 후기

오늘은 이전에 했던 내용들 복습하고,

스타벅스 예제를 끝냈다...!

 

 

pagination

 

swiper-prev

swiper-next

 

java에서 어떤 특정 변수의 값을 지속적으로 반대값으로 전환시켜줄 수 있는 코드

! 사용하기

ex)..... isHidePromotion = ! isHidePromotion ....

 

 

 

버튼 중에 반전으로 사용할 때는 버튼 뒤에 btn--reverse를 넣어준다.

 

 

 

 

23 영상 넣기

 

23 반복 애니메이션 넣기

 

반복재생의 유무가 True일 경우,

반복재생할 유튜브 영상 ID 를 입력해주어야 한다. 

 

 

 

 

 

 

 

① gsap의 to라는 메소드는 첫번째로 선택자를 받을 것이다

② 랜덤 함수를 통해서 지속시간을 실행할 것이다

③ 옵션 지정

 

*반복- yoyo라는 속성 부분에 true를 줘서 애니메이션이 한번 진행되고 다시 돌아올 수 있는 부분까지 처리함

 

 

작업을 하다가 좋다고 느낀 부분

작업을 하면서 필요한 btn 컬러를 미리 다 만들어두고 설정해두면 중간에 또 만들지 않아도 위의 내용을 불러오면 된다.

미리 만들어둔 btn 들 / html 파일에서 

미리 만들어둔 btn 들이다.

그리고 html 파일에서 그냥 btn으로 해둔 태그 내용 중에

컬러가 배경이랑 겹쳐서 잘 보이지 않거나 하면 중간에 버튼 이름을 넣어서 기존에 만들어둔 css를 추가할 수 있다.

 

 

starbucks 사이트 예제 중에서 medal이 돌아가는 장면 만들고 너무 신기해서

 

 

 

32-footer

img 요소(가 display:block;+margin:0 auto; 인 경우,)는 이미지의 가로값이 정해져있기 때문에 width(가로) 속성 없이도 가운데 정렬이 가능하다.

 

>>>>>그래서 css에서 footer .logo에 별도의 width(가로) 값을 사용하지 않았다. 

 

 

날짜 (년도 자동 현재 업데이트)

현재정보로 반환되는거

getFullYear(); 사용하기

thisYear.textContent = new Date().getFullYear();

 

2024 가 됨

 

 

js / 버튼이 위 뱃지가 사라지면 나타나고, 아래 버튼이 사라지면 위 뱃지가 나타남

 

 

 

const toTopEl = document.querySelector('#to-top');

을 사용해서 기존 js식에 들어갔던 '#to-top' 을 toTopEl 로 바꿨다.

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

수정 전 / 수정되는 내용 / 수정 후

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

패스트캠퍼스 [직장인 실무교육]