목록Pseudo-class (1)

Simple Is Best

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 다음