스타일 소개

01_스타일을 다루는 방법

스타일을 다루는 방법은 두 가지가 있다.

 

정적인 방법

작성한 스타일을 직접 변경하는 방법을 말하며 스타일 변경 후 문서를 재실행해야 한다.

 

동적인 방법

웹 문서를 실행한 상태에서 자바스크립트와 jQuery를 이용해 스타일을 다루는 방법을 말한다. 문서를 재실행할 필요가 없다. 

 

02_jQuery를 활용한 스타일 다루는 방법의 특징

스타일 역시 jQuery에서는 스타일을 좀더 쉽게 다룰 수 있는 다양한 기능을 제공한다.

 

02_1_스타일 위치와 관계 없이 스타일 속성 접근 가능

자바스크립트를 이용하는 경우

 

자바스크립트의 경우 인라인 스타일이냐 아니냐에 따라 스타일 속성 접근 방법이 다르다. 

 우선 style속성으로 접근할 수 있는 스타일 속성은 인라인 속성만을 접근할 수 있다.

내부, 외부 스타일 속성은 window.getComputedStyle()메서드를 이용해야 한다.

 

jQuery를 이용하는 경우

 

jQuery에서는 css()메서드를 이용해 인라인 스타일 속성인지 아닌지 신경 쓸 필요 없이 스타일 속성값을 귑게 구할 수 있다. 

 

02_2_스타일 속성 이름을 그대로 사용 가능

자바스크립트를 이용하는 경우

예를 들어 font-size와 같이 두 개의 단어로 된 속성은 낙타 표기업으로 접근해야 한다.

즉 

this.style.font-size가 아닌 

this.style.fontsize로 접근해야 한다.

 

jQuery를 이용하는 경우

 

jQuery는 스타일 속성이름과낙타 표기법 둘 다 사용 가능하다.

 

 

02_3_ 여러 스타일 속성값을 쉽게 변경 가능

자바스크립트를 이용하는 경우

여러 스타일의 속성값을 변경하는 경우는 style.속성이름 = 값 방식으로 스타일 개수 만큼 작성해야한다.

 

jQuery를 이용하는 경우

jQuery는 리터럴 방식을 이용해 스타일 속성이름과 값을 묶어 한 번에 변경하거나 구할 수 있다.

 

02_4_ 단위 생략 가능

자바스크립트를 이용하는 경우

스타일 속성 중 font-size와 같은 숫자+단위 값을 갖는 경우는 반드시 단위가 포함된 문자열로 값을 설정해 줘야한다.

 

jQuery를 이용하는 경우

문자열을 빼도 사용가능하다 ex, 14px -> 14