HTML DOM Style Object & CSS

HTML DOM Style 작성법

• css 파일 내에서 적용하지 않고, Javascript에서 활용하고자 할 때, 하단 속성으로 적용하면 사용이 가능하다.
• 보통 '-'로 이어지는 것이 지워지면서 첫문자가 대문자가 되는 형식같다.
• HTML DOM Style CSS 명칭 목록

CSS Reference

---

mouse event

mousever

• 특정 개체 위에 마우스가 올라갔을 때 나타나는 효과

mouseenter vs mouseover

• mouseenter 는 오직 마우스포인터가 가르킨 요소에서만 작동하지만, mouseover는 마우스포인터가 가리킨 요소 내 '자식요소'를 가르켜도 작동하는 차이가 있다.

참조사이트
mouseenter 과 mouseover 메서드의 차이
w3school

---

Transform

• 이미지 회전(rotate), 크기 조절(scale), 기울이기(skew), 이동의 효과(translate)를 부여할 수 있는 속성

참조사이트
CSS transform Property

Animation

• 화면 내에서 특정 개체의 움직임을 표현할 수 있는 방식

• 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다.

• CSS Animations

• HTML DOM Style animation Property

CSS와 Javascript에서의 사용 차이점

• UI요소에 대해 작고 자체적으로 포함된 상태는 CSS에서 활용
• 세밀하게 제어한다면 자바스크립를 사용
  → 더 자세한 내용 클릭

다양한 애니메이션 효과 참조사이트

1. [CSS Animation] 위아래로 움직이는 요소 만들기
2. CSS 애니메이션 18가지 예제
3. css gpu 애니메이션
4. 화살표 애니메이션
5. 곡선path 애니메이션

그외
CSS Examples