[Java / 자바] CSS (동적 효과 주기)

공부/Java  2015.07.01 09:00

안녕하세요. 명월입니다.


이전 포스트에서 CSS의 선택자(Selector)에 대해 공부했습니다. 이번 포스트에서는 동적 효과 주기에 대해 기초적인 부분만 공부해 보겠습니다.
선택자도 마찬가지고 효과 주는 부분도 양이 방대하기 때문에 이 포스트 내에서 전부 소개가 불가능 할 듯 싶습니다. 다음에 기회가 되면 자세히 포스팅이 되었으면 좋겠네요.


CSS 효과 주기 부분은 (선택자)Selector와 다르게 유저가 특정 동작을 할 때 반응하는 CSS

저번 포스팅에서는 Css의 (선택자)Selecter에 대해서 알아보았으면 이번 포스팅에서는 Effect에 대해서 알아 보겠습니다.


CSS 동적 효과주기(의사 클래스)는 사용자가 특정 동작을 할 때 반응하는 스타일 시트 입니다.
역시 예제를 통해서 공부를 하는 편이 이해가 빠르겠습니다.



위 예제는 BODY에는 input 요소로 버튼을 만들었습니다. 그 위에 CSS를 입혀서 border와 색상 크기등을 변경을 했습니다.


css 예제


위와 같은 요소에 우리는 그 위에 마우스를 올리면 색깔이 변하는 효과를 넣어 보겠습니다.



CSS Style영역을 보면 input[type=button]에 hover라는 의사클래스를 넣었습니다. 이 CSS 영역은 바탕을 파란색으로 글씨는 흰색으로 변하는 소스네요.


css 예제


동적인 표현이라 이미지만으로는 표현이 어렵지만 실제로는 버튼 위로 마우스를 올리면 파란색으로 변하고 벗어나면 빨간색으로 변하는 것을 확인 할 수 있습니다.



-------------------------------------포스트 작성중 2015/03/11--------------------------------------------
죄송합니다 블로그 개선중이라 중간중간 누락되는 부분이 발생하네요.



댓글 0개가 달렸습니다.
댓글쓰기