2021.01.06(수)

• [인프런] 개인프로필카드 디자인
• [인프런] 쇼핑몰 아이템 UI 호버 이펙트01 (와이어 프레임 설계 , 중요기능 제작)
• [인프런] 쇼핑몰 아이템 UI 호버 이펙트 02 (세부 HTML 작성 및 상세 css 디자인)
• [인프런] 쇼핑몰 아이템 UI 호버 이펙트 03 (제이쿼리 상호작용 만들기)
• [인프런] HTML 가로 배치하기 (float , overlfow , clear , inline-block)
• [인프런] 비디오 백그라운드를 활용한 렌딩페이지 (웹폰트, 동영상제어, 로고)
• [인프런] 비디오 백그라운드를 활용한 렌딩페이지 (애니메이션 콘텐츠 제작)
  
  

오늘 메모한것 :

• border-radius 속성을 줬는데도 적용이 안될경우, overflow: hideen 을 넣기.

• position 속성은 정말 필요한 경우만 사용.

• 하나의 버튼이 클래스를 넣고 빼는걸 (스위치 효과) 둘다 가지고 있는게 toggleClass.

$('.like').click(function(){
        $(this).toggleClass('active')
    })

• css fliter 속성은 흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용시킴. (fliter 속성은 ie에서 적용되지 않음.)
  
  

Float : left?

• float : left : 자식 요소에 float 속성이 사용되면 부모 요소는 자식요소가 없다고 판단해서 높이값을 잃음.
  -> 해결방법은 부모요소에 overflow:hidden 을 주면됨.

• 블록 요소만 margin:auto로 중앙에 배치될 수 있음. 인라인 및 인라인 블록은 안됨.

• 인라인 블록이나 인라인 요소는 부모요소에서 text-align : center;를 줘서 가운데로 보낼 수 있음.

• float 속성이 적용되면 다음 요속 float 속성을 상속 받는데 이것을 해제시키는게 claer 속성.

• clear : left : float : left 해제 / clear: right : float : right 해제 / clear : both : left right 양쪽 다 해제.
  
  

Video 태그 속성

• autoplay : 자동재생

• muted : 영상에 소리가 있다면 음소거.

• loop : 무한 반복

• poster 속성 : 해당 비디오가 로딩이 안되서 나오지 않을 때 포스터 이미지를 보여줌.
  
  

Animation-fill-mode

• none (기본값)
• forwards (마지막 프레임 유지)
• backwards(처음에 적용된 스타일 값으로 유지)
• both(forwards + backwards)