웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

제이쿼리 css 메소드로 스타일 지정하기

Last Modified : 2019-08-14 / Created : 2019-08-06
8,756
View Count

제이쿼리의 메소드 css()에 대하여 알아봅니다. css() 메소드는 어떻게 적용하고 어느 경우에 사용할 수 있을까요?




# jQuery css 메소드는?


css 메소드는 선택한 DOM 엘리먼트에 인라인 방식으로 스타일을 추가하거나 가지고 있는 값을 가져올 수 있습니다. 이때 값을 추가하는 경우 태그에 style 어트리뷰트가 추가되어 원하는 스타일이 설정됩니다.

@ 변경 전
<span>Webisfree.com</span>

@ 변경 후
<span style="color: red">Webisfree.com</span>


간단한 css를 사용하는 문법은 아래와 같습니다.

$(element).css();


이처럼 태그에 인라인 방식(inline)으로 스타일을 추가하는 방법은 css()와 attr('style')을 사용하는 방법 두 가지가 존재합니다. attr()은 style 어트리뷰트를 추가할 수 있는 방법인데요 ~ css()를 사용하면 아래와 같은 장점이 있습니다.


! css()와 attr('style', '스타일값')의 차이점은?


새로운 스타일을 지정할 경우 attr('style')을 사용하면 기존에 가지고 있던 값들이 모두 삭제되고 새로운 값으로 스타일이 나타나게 됩니다. 하지만 css()를 사용하면 기존 값은 그대로 유지되면서 새로운 값만 추가하거나 변경할 수 있게되죠.



! css() 메소드 예제보기

그럼 간단한 예제를 알아볼께요. 아래의 텍스트 문구의 배경색 또는 텍스트색을 css()를 사용하여 변경하려고 합니다. 먼저 코드를 살펴봅니다.
<span class="test">Webisfree.com</span>

이제 제이쿼리 css()를 적용해야죠. 먼저 어떤 값이 적용되어 있는지 가져와 보겠습니다.
$('.test').css('color');

// 값이 없으므로 undefined

설정된 값이 없죠. 하지만 아래 태그라면 어떨까요?
<span class="test" style="color: red">Webisfree.com</span>

다시 코드를 적용하면 결과가 달라집니다.
$('.test').css('color');

// 'red'를 반환

이제 다른 값을 설정해보도록 하겠습니다.
$('.test').css('color', 'blue');

// color 값이 blue로 바뀌어 나타남

아주 간단하게 바뀌었습니다. html 코드는 아래와 같이 변경되어 나타날 것입니다.
<span class="test" style="color: blue">Webisfree.com</span>



# css에 여러 개의 멀티값으로 설정하는 방법

css() 메소드는 하나가 아닌 여러 개의 값을 multi로 설정할 수 있습니다. 이 경우는 아래처럼 json 형태의 값을 콤마를 사용하여 여러 개 설정하면 됩니다. 예를들어 아래와 같이 설정할 수 있습니다.
$('.test').css({'background': 'red', 'font-size': '10%'});

위 코드를 실행하면 배경색과 폰트의 크기가 모두 style로 적용되어 나타날 것입니다.


! 예제코드 동작해보기


아래는 위 예제를 실제로 구현해 본 모습입니다. 어떻게 변경되어 나타났는지 확인해보세요.
<span class="test">Webisfree.com</span>
<script>
  $('.test').css('color', 'blue');
</script>

위 태그를 실행하면 아래와 같이 나타납니다.
<span class="test">Webisfree.com</span>
<script>
$('.test').css('color', 'blue');
</script>

폰트 색이 파란색으로 style이 적용되었습니다.

이번에는 멀티로 스타일을 지정하는 예제를 동작해보겠습니다.
<span class="test2">Webisfree.com</span>
<script>
  $('.test2').css({'background': 'red', 'font-size': '10%'});
</script>

위 태그를 실행하면 아래와 같이 나타납니다.
<span class="test2">Webisfree.com</span>
<script>
$('.test2').css({'background': 'red', 'font-size': '10%'});
</script>


여기까지 몇 가지 예제를 구현해보았습니다.

Previous

제이쿼리 다음 엘리먼트 찾기 next() nextAll()

Previous

jQuery 선택자 first() 메소드 알아보기