어제 오늘 내일

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다. [HTML/CSS] 버튼 배경색 지정하기 그런데, 위 포스팅과 같이 배경색만 변경하면, 마우스 오버, 클릭 등의 액션이 발생해도 배경색이 그대로여서 마치 누를 수 없는 버튼처럼 느껴집니다. 이번에는 버튼에 마우스 오버, 클릭 등의 액션이 일어날 경우 버튼의 배경색을 변경하는 방법을 정리해보겠습니다. :hovor 마우스를 버튼에 올렸을 때, 지정한 스타일이 적용됩니다. :focus 버튼에 마우스가 올려지거나, Tab 키 등을 이용하여 버튼에 포커스가 간 경우에, 지정한 스타일이 적용됩니다. :active 버튼을 마우스로 클릭하고, 클릭을 해제 할 때까지, 지정한 스타일이 적용됩니다. 예제 버튼 .skyblue_btn { background-colo..

background-color 버튼의 배경색은 CSS의 background-color 속성으로 지정할 수 있습니다. 예제 Default 버튼 하늘색 오렌지색 보라색 .skyblue_btn { background-color: skyblue; } .orange_btn { background-color: #FFA500; } .purple_btn { background-color: rgb(128, 0, 128); } background-color 속성을 이용하여 버튼의 색깔을 변경하였습니다. 그런데, 배경색이 변경된 버튼은 기존의 버튼처럼, 마우스 오버가 되거나, 버튼이 클릭되었을 때 배경색이 변경되지 않아서, 마치 눌러지지 않는 버튼 처럼 보이고 있습니다. 다음 포스팅에서는 배경색이 변경된 버튼에 마우스 오버..