본문 바로가기

가상클래스2

[날마다 3분 CSS] 가상클래스 :active :active는 CSS의 가상 클래스로 웹 브라우저에서 사용자가 활성화한 요소(버튼 등)를 나타낸다. 즉 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다. ( 한 요소에서 마우스를 클릭한 후 떼지 않고 꾹누르고 있으면 계속 활성화 되어있는 것이다.) 아래는 마우스 클릭 시 박스색깔이 파란색으로 바뀌며 넓이가 300px로 커지는 active 효과입니다. HTML 삽입 미리보기할 수 없는 소스 css 선택자뒤에 :active 붙여 코드를 작성합니다. HTML 삽입 미리보기할 수 없는 소스 .box2와 .box:active와 비교했을때 .box:active에서 변경사항인 width, background-color 값이 사용자 마우스 클릭 시 활성화되어 색깔과 모양이 변하게 된다. 💫실습 - 주황색 박스.. 2022. 10. 4.

[날마다 3분 CSS] 가상클래스 :hover :hover는 CSS의 가상 클래스로 웹 브라우저에서 사용자의 마우스가 요소에 올라가면 활성화된다. 아래는 마우스를 올리면 넓이와 높이가 커지며 박스색깔이 빨간색으로 바뀌는 hover 효과입니다. HTML 삽입 미리보기할 수 없는 소스 css 선택자뒤에 :hover 붙여 코드를 작성합니다. HTML 삽입 미리보기할 수 없는 소스 위에서 보듯이 마우스가 올라가기전( .box1 ) css와 마우스가 올라간 후( box1:hover )의 css를 볼 수 있다. 넓이/높이 100px의 오렌지 색깔 박스가 마우스가 올라갔을 때 넓이/높이 300px의 빨간색 박스로 변하는 코드이다. 이렇게 마우스가 올라갔을 때 와 올라가지 않았을 때 전과 후의 상태를 정의하여 요소가 변하는 효과를 줄 수 있는 것이다. 💫실습 - .. 2022. 10. 4.

이전 1 다음

티스토리툴바