2021-07-15 Part(1)_ch(10)_(11~12)

언더바와 하이푼

container 과 container__name은 일부분관계

btn과 btn--primary는 어떤 상태를 나타내는 관계

 

border-radius로 모서리깎은뒤 이미지깎기

를 위해서 이미지는 밖으로 튀어나가는데 이부분은 overflow:hidden으로 숨긴다.

box-shadow 박스 뒤 그림자
box-shadow : x축 y축 blur축 rgba(r,g,b,투명도 .15)

box-shadow : x축 y축 blur축 rgba(0,0,0, .15)

position값이 fixed나 absolute일시 가로값이 최대한 늘어나려는게아니라 최대한 줄어들려고한다. 가로 사이즈를 100%로 하면 뷰포트로 기준으로 100%사용가능하다.

 

자바스크립트 window와 lodash.js , gsap.to

document는 html구조이고
window는 브라우저 탭 구조이다.

._throttle(함수,시간)
lodash.js선언후 _.throttle(function( ){console.log('hello')}, 300))
단위 300은 0.3초 3000은 3초로
lodash에서 _.throttle기능으로 0.3초 마다 작동되도록 설정하는 기능이다.

badegeEl.style.css속성 = "block"
형식으로 선언할수있다. badege.El.style.display="block"

gsap.to(처리할요소, 지속시간(s생략), 옵션(값이 숫자가아니면 " "처리)

애니메이션 처리하는 기능이다.

gsap.to(badgeEl, .6, {css옵션:값} ) 

gsap.to(badgeEl, .6, {css옵션:값} ) 

 

display:none같은 속성은 숫자가아니라서 transition이나 gsap으로 수치변화를 통한 자연스러운 전환을 만들수 없다.