#02 사용해보고 싶은 CSS 아카이브

 

 

• 주차별 멘토링 미션 시작!
• 앞으로 있을 클론과제를 위해 사용해 보면 좋을 거 같은 CSS를 모아봤다.
• 근데 내가 쓸 수 있을지는 모르겠네..^^ 아냐 할 수 있어ㅎ

 

---

1. button

 

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

 

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

 

- 가상선택자 hover 와 가상요소 before, after를 사용해서 버튼에 다양한 효과를 준다.

- 나는 뭔가 어떤 사이트에 들어갔을 때 간단해도 버튼에 간단한 효과가 있으면 계속 마우스를 올리게 되는 거 같음...!😋

 

See the Pen Confetti Button by Marco Biedermann (@marcobiedermann) on CodePen.

 

See the Pen Click to send by Dilum Sanjaya (@dilums) on CodePen.

 

- 자바스크립트도 필요하지만 언젠가는 꼭 해보고 싶은 다양한 버튼 효과들!

- gsap 라이브러리를 사용해서 다양한 애니메이션 처리를 해줌

 

2. 3D transform

 

See the Pen CSS Perspective Text Hover by James Bosworth (@bosworthco) on CodePen.

 

- 강의 들으면서 제일 흥미로웠던 효과 중 하나였던 transform 3d 속성과 메소드들 

- 3d 변환 함수와 호버만을 사용해서 효과를 준 게 간단해 보이면서도 재밌어 보인다. (근데 간단하지 않은...)

- 배울 때는 그저 정적으로 위치만 바꿀 수 있을 줄 알았는데 아니었네... 더 배워야지

 

3. navbar 

 

See the Pen bootstrap 4 navbar by Piyush (@piyushpd139) on CodePen.

 

- 부트스트랩을 사용한 메뉴바

 

✨

어쩌다 보니 사이트 클론과제를 위해 찾아본다고 해놓고 내가 보기에 멋있는 효과들만 모아둔거 같다. 

틈틈이 보고 익혀서 꼭 나중에 만들어봐야지!