🔥아이티 부수기🔥

@keyframes

- @keyframes는 css 애니메이션을 정의하는 문법으로 각 구간에 어떤 스타일로 적용한지 지정한다.

- 구성요소

   1. animation name : @keyframes 정의한 애니메이션을 적용할 때 필요한 이름 (내가 정한다)

   2. 구간 : from to / 0 - 100%

   3. css 스타일 : 구간에 적용시킬 스타일

animation

- @keyframes 에서 정의한 animation을 css animation 속성을 통해 사용 할수 있다.

- animation  속성

  : animation-duration, animation-timing-function, animation-delay 등등이 있다. 

    (더 많은 속성을 보고 싶다면 참고에 MDN 사이트를 확인)

💡 예시

@keyframes 애니메이션 이름
{
	from {
		// 적용시킬 CSS
	 }
	 to {
		// 적용시킬 CSS
	 }
}

// 예시 ------------------------------------------------------------------------------
@keyframes fadeIn
{
	from {
	   opacity: 0;
	 }
	 to {
	   opacity: 1;
	 }
}
.bgImage
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	z-index: -1;
	animation: fadeIn .5s linear;
}

참고
webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068developer.mozilla.org/ko/docs/Web/CSS/animation

가상요소 

- css 의사요소(가상요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다. 

가상선택자 :after(::after)

css에서 :after는 선택한 요소의 맨마지막 자식으로 가상요소를 하나 생성한다.

보통 content 속성과 함게 짝지어, 요소에 장식용 콘텐츠를 추가할 떄 사용한다.

기본값은 인라인이다.

추가된 요소는 소스 안에서 ::after 라는 형식으로 보여진다.

참고

developer.mozilla.org/ko/docs/Web/CSS/::after