css 효과 질문


웹페이지에서 박스 모양의 섹션들이 있잔아요 마우스 커서를 (클릭말고) 박스에 대면 그 박스 주위에 살짝 명암이 나타나거나 색상이 변한다거나 그 박스만 살짝 흔들리면서 그 박스만 돋보이게 효과는 css 로 어떤 문법을 써야 하나요? 아니면 다른 언어로 표현 하는 겁니까?

  • 2016년 07월 03일에 작성됨

조회수 301


2 답변


명암이나 색상이 변하게 하는것 같은 경우엔 그냥 css로도 됩니다

박스가 흔들리거나 돋보이게 하는건 css3이나 자바스크립트를 사용하셔야 합니다

브라우저 지원폭이 넓은건 자바스크립트이고 좀 깔끔한건 css3이 깔끔합니다

자바스크립트로 만드려면 jQuery 라는 라이브러리를 추천해드립니다

예전부터 쓰여왔고 지금도 널리 쓰이는 아주 훌륭한 라이브러리입니다

  • 2016년 07월 03일에 작성됨
    웹을 좋아함

  • 답변 감사합니다. w3school 에서 제가 질문한것들 찾고 있는데요 영어나 문법으로 뭐라고 해야 할까요? 그리고 css3 가 css 보다 최신 버전이라고 생각하면 되나요?    kafka   2016.7.3 21:43     

아래의 링크들을 돌아다녀보세요. css3에서는 마우스를 올렸(hover)을때 컬러나 그림자 뿐만아니라, 간단한 크기, 애니메이션도 줄수있어요.

호버 애니메이션 hover animation

  1. http://ianlunn.github.io/Hover/

전반적인 css 애니메이션

  1. http://www.minimamente.com/example/magic_animations/
  2. http://elrumordelaluz.github.io/csshake/
  3. http://daneden.github.io/animate.css/

ps : 참고로 위에 댓글로 질문하신 css와 css3의 차이를 아주 간단하게 말하면 이미지를 사용하지 않은 표현범위가 다양해졌다는건데요. 첨부 이미지없이 gradient, border-radius, shadow등을 자체적으로 표현가능해졌다는것 입니다. (옛날에는 둥근모서리 같은결 포현하려면 모서리부분만 이미지로 만들어서 이미지 위에 덮었다고 하네요.)

  • 2016년 07월 04일에 작성됨
    Css / visual design

  • 좋은 정보 감사드립니다. hover 라는 css 문법이 단순히 움직음을 표현하는 문법이라고 이해하면 되나요?    kafka   2016.7.4 13:05     
  • 아니요 hover는 요소에 마우스를 올려논 상태를 뜻해요. 보통에 선택됨(focus), 마우스올림(hover), 실행(active) 같은 상태가 있을수 있어요.     los0731   2016.7.4 23:18     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close