사용해보고 싶은 CSS

우선 CSS는 간단한 작업(버튼의 색을 바꾸는 것과 같은 ), JavaScript는 복잡한 작업(공이 튀는 바운스 애니메이션 같은 세밀한 제어가 필요한 애니메이션) 에 쓰임

스크롤 해도 고정되는 배너 CSS
깜빡이는 효과 [Blink Effect}
배경 이미지 고정하기 [background-attachment]
애니메이션(@keyframes)

🎈스크롤 해도 고정되는 배너

• position : fixed;
  position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정한다. position 속성을 fixed로 지정해줄 경우, 해당 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 브라우저 화면(viewport)상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있게 된다. 브라우저 화면을 스크롤 했을 때도 영향을 받지 않기 때문에 fixed로 설정되어 있는 엘리먼트는 그자리에서 움직이지 않게된다.
  

🎈깜빡이는 효과 만들기

@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}

.blink {
  animation: blink-effect 1s step-end infinite;

  /*
  animation-name: blink-effect;
  animation-duration: 1s;
  animation-iteration-count:infinite;
  animation-timing-function:step-end;
  */
}

출처: https://7942yongdae.tistory.com/69 [개발자 일지:티스토리]

🎈배경이미지 고정하기

• background-attachment: fixed;

  이 속성 한줄이면 된다.

  창을 줄일때 이미지가 찌그러지지 않게 하기(cover)

🎈@keyframes이 무엇인가?

• CSS 애니메이션 sequence 내 중간 단계의 양상을 설명하는 규칙을 설정한다고 mozilla에서 소개하고 있다. 이규칙은 애니메이션 효과를 정의할 때 사용된다. 애니메이션의 각 단계(step)별로 CSS 스타일을 정의하고, 이를 사용하여 애니메이션을 제어한다.

🧨더욱더 많이 써보고 싶은 CSS 효과들이 많지만 실습 할 때 더욱더 알아보고 직접 써보기도 해보자!