jQuery에서 하이픈이 있는 CSS 속성
CSS에서 흔히 그렇듯이, 속성이 하이픈으로 구분된 여러 단어로 구성되어 있다고 가정해 보겠습니다:
<p class="www">text</p>
이 경우에는 아무런 문제가 없습니다. 이 속성은 Javascript 코드에서도 CSS와 동일하게 작성됩니다:
$('.www').css('font-size', '20px');
여러 CSS 속성을 설정하려는 경우,
css 메서드에 객체를 매개변수로 전달할 수 있습니다.
이 객체의 키는 CSS 속성이고,
객체의 값은 CSS 속성의 값입니다:
$('.www').css({color: 'red', font: '12px Arial'});
그러나, 여기서는
font-size와 같은
속성에 문제가 발생합니다. font-size라고 쓰는 것이 아니라,
fontSize라고 작성해야 합니다:
$('.www').css({color: 'red', fontSize: '12px'});
이런 방식이 마음에 들지 않는다면,
font-size 키를 따옴표로 묶으십시오:
$('.www').css({color: 'red', 'font-size': '12px'});
보시다시피, jQuery는 사용자의 선호도에 따라 다양한 메서드 사용 옵션을 제공합니다. 자신에게 더 편리한 것을 사용하십시오.
모든 h3에 초록색의
굵은 텍스트를 적용하세요.
모든 h2에 하늘색과
font-size: 30px를 적용하세요.
