css 효과 질문

조회수 2662회

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

  • (•́ ✖ •̀)
    알 수 없는 사용자

2 답변

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

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

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

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

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

    • (•́ ✖ •̀)
      알 수 없는 사용자
    • 답변 감사합니다. w3school 에서 제가 질문한것들 찾고 있는데요 영어나 문법으로 뭐라고 해야 할까요? 그리고 css3 가 css 보다 최신 버전이라고 생각하면 되나요? 알 수 없는 사용자 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등을 자체적으로 표현가능해졌다는것 입니다. (옛날에는 둥근모서리 같은결 포현하려면 모서리부분만 이미지로 만들어서 이미지 위에 덮었다고 하네요.)

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

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)