[CSS] Chapter 13. HTML에 동적 움직임을 부여하기

1. :hover{}

CSS에서 hover는 특정 id나 class, 태그 뒤에 붙여 마우스 커서가 위치했을 때의 모양을 변경하는 기능이다. 

 

객체:hover{적용할 스타일}

 

마우스 커서의 위치에 따라 사진이 조금 커지는 등의 동작을 설정할 수 있다.

NAVER 등에서 자주 사용되는 모양을 확인할 수 있으니 참고하자.

 

2. JavaScript: DOM 구조를 이용하여 태그의 style을 설정하기 

CSS는 style에서 지정하는 모양에 따라 태그의 표현 방식을 조정하는 기법이다.

이러한 조정 과정에서 DOM 구조를 이용하면 특정 태그나 id, class의 모양을 변경할 수 있다. 

 

객체.style.backgroundRepeat="no-repeat";

 

위와 같이 style의 모양을 변경할 수 있는데, Css에서 background-repeat항목을 바꾸는 것이다.

해당 규칙은 - 뒤에 위치한 첫 소문자를 대문자로 변경하고, 해당 속성이 가지고 있는 값을 지정하는 것이다. 

 

객체*{background-repeat: no-repeat;}

객체.style.backgroundRepeat="no-repeat";

 

위의 속성 지정자는 오른쪽에서는 style 태그 안 혹은 css 안에서의 모양이고, 왼쪽은 html의 javascript에서의 모양이다.

이유는 - 모양은 JavaScript에서 연산자로 사용되기 때문이다. 

 

3. DOM 구조에서 this 

 상위 요소와 동일한 DOM 경로를 설정하는 것이다. 

document.getElementById(“main”).addEventListener(“click”, function(){

this.style.backgroundRepeat=”repeat”;

});

/*아래와 위는 동일하다.*/

document.getElementById(“main”).addEventListener(“click”, function(){

document.getElementById(“main”).style.backgroundRepeat=”repeat”;

});