8.14 HTML/CSS 공부

/*CSS Animation*/
animation: keyframe duration delay(지연 유무 없으면 값 생략) linear(부드럽게) infinite(무한 반복);

Animation 개발 순서
1.CSS로 모양을 다 만들고
2.keyframe 제작
3.animation에 적용

keyframe에서 animation할때 하나의 %에서 다른 %로 연결시 적용 속성이 같아야함

animation-delay: s
calc(100% - 10px)

animation-direction: reverse -> 거꾸로 animation 행동 (반시계 등)

border radius 찌그러짐 주기
border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;

hover 응용 잘 생각
.square:hover span:nth-child(1)
.square:hover span

animation: circle 6s linear infinite;
animation: circle 4s linear infinite;

button에는 기본적으로 border가 있음
제거하고 싶으면 하자

자식이 부모 속성 상속 받기 inherit

transition은 display에 적용 안됨
opacity로 적용

position이 absolute되면 어떤 요소든 inline-block됨

before, after는 무조건 content로 시작

visibility: hidden 기억 -> 자리에는 있으나 존재를 아예 없는셈 취급
보이게 할려면 visibility: visible
display: none -> 자리도 없앰

z-index: 1; 앞으로 들어나게 하는것 3차원 생각하자

transition은 속성이 자신에게도 존재할때 행해진다 시작점 -> 끝점

transform: skew -> 비틀어짐

box-shadow : x축 y축 퍼짐정도 색