반응형
웹 페이지 버튼
페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다.
hover
button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데
button 위에 mouse를 올려 두면 hover 효과가 나타난다
.button {
background-color : white - 처음 기본 색깔이 흰색이지만
&:hover {
background-color : red - 마우스를 올려두면 빨강색으로 변함
}
}
active
button을 사용자가 눌렀을 때 나타내는 상태가 active 입니다. 일반적으로 시각적인 피드백을 제공하기 위해서나 스타일을 변경하여 상호작용이 있음을 보여주기 위해서 사용 된다.
.button {
background-image : url("button.png")
background-position: center top
}
.button:active {
background-position : center bottom; / 버튼이 눌렸을 때 배경 이미지를 아래쪽으로 이동
}
반응형
'Front-End > Html | CSS' 카테고리의 다른 글
css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) (0) | 2025.02.08 |
---|---|
HTML 기본 - 프론트 엔드 (0) | 2023.05.12 |
display | position 차이 (0) | 2023.05.05 |
댓글