목록hover (3)

Simple Is Best

18. [CSS] CSS Animation - 2

이번 포스팅은 이해가 잘 되지 않으실수 있습니다ㅠ 글로 서술하려니 참 힘드네요... 오늘은 이전 포스팅에서 배웠던 내용들을 응용하여 더 자세한 애니메이션 기법에 대해서 알아보겠습니다. 애니메이션에 대해서 아직 자세히 알지 못한다면, 이전 포스팅을 참고하셔도 좋을 것 같습니다! https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com 애니메이션의 기본 제작 방식 1. 시작 화면 제작 2. 결과 화면 제작 ..
HTML & CSS 2021. 7. 10. 18:47
17. [CSS] CSS Animation - 1

이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이션을 주는 방법이 많더라구요! 또한, 이런 애니메이션 효과는 JavaScript를 활용하여도 충분히 쉽게 부여할 수 있는 기능들 입니다. 하지만 CSS만을 활용한 동적 효과를 부여하는 공부는 CSS에 대한 깊은 이해가 바탕이 되어야 가능 한 것이기 때문에 이를 공부하면서 다시 CSS 개념을 되짚는 마음으로 본 포스팅을 작성합니다. 애니메이션의 본질적인 학습을 위해서 레이아웃 배치에 관한 내용은 생략하겠습니다. 애니메이션 제작 기본 방칙 ★★★ 1. 시작 화면 제작 2. 결과 화면 제작 3. 시작화면..
HTML & CSS 2021. 7. 10. 18:03
12. [CSS] Pseudo - class

이번 포스팅에서는 [Pseudo-class]에 대해서 알아보겠습니다. Pseudo-class .클래스명:예상동작{ } 개념을 나열하는 식이 아닌 실제로 만들어보면서 알아보겠습니다. 예제1. 버튼 색상 변경 버튼은 유저가 누르고 싶게 끔 만들어야 한다. 1. 원래의 버튼 상태입니다. 2. 버튼에 마우스 커서를 가져다 올렸을 때 색깔을 변하게 합니다. (hover) 3. 버튼에 마우스 커서를 클릭하고 손가락을 떼기 이전까지 색을 설정합니다. (active) 4. 손가락을 뗀 이후, 버튼의 색상 변경입니다. (focus) CSS .btn-style { padding: 20px; background-color: coral; color : white; border-radius: 5px; border:none; f..
HTML & CSS 2021. 7. 7. 13:52
이전 Prev 1 Next 다음