[jQuery] 06. css()로 스타일 변경하기

지난 글에서는 jQuery의 text(), html(), val() 사용법에 대해 알아봤습니다.

이번 글에서는 jQuery에서 HTML 요소의 스타일을 변경할 때 사용하는 css() 메서드에 대해 알아보겠습니다.

css()를 사용하면 글자 색상, 배경색, 크기, 여백, 테두리 같은 CSS 스타일을 jQuery 코드로 변경할 수 있습니다.

1. css()란?

css()는 선택한 HTML 요소의 CSS 스타일을 가져오거나 변경할 때 사용하는 jQuery 메서드입니다.

기본 문법은 다음과 같습니다.

$("선택자").css("속성", "값");

예를 들어 글자 색상을 파란색으로 바꾸고 싶다면 다음과 같이 작성합니다.

$("#text").css("color", "blue");

위 코드는 id가 text인 요소의 글자 색상을 파란색으로 변경합니다.

2. 글자 색상 변경하기

가장 먼저 글자 색상을 변경하는 예제를 만들어보겠습니다.

📌 예제 코드

<p id="text">색상이 변경될 문장입니다.</p>
<button id="btn">색상 변경</button>

<script>
  $("#btn").click(function() {
    $("#text").css("color", "blue");
  });
</script>

📌 실행 결과

처음에는 기본 색상의 문장이 표시됩니다.
버튼을 클릭하면 문장의 글자 색상이 파란색으로 변경됩니다.

3. 배경색 변경하기

css()를 사용하면 배경색도 쉽게 변경할 수 있습니다.

배경색을 변경할 때는 background 또는 background-color 속성을 사용할 수 있습니다.

📌 예제 코드

<div id="box" style="width:200px; height:100px; background:#eeeeee; padding:20px;">
  박스입니다.
</div>

<button id="bgBtn">배경색 변경</button>

<script>
  $("#bgBtn").click(function() {
    $("#box").css("background", "skyblue");
  });
</script>

📌 실행 결과

처음에는 회색 박스가 표시됩니다.
버튼을 클릭하면 박스의 배경색이 하늘색으로 변경됩니다.

4. 글자 크기 변경하기

글자 크기를 변경할 때는 font-size 속성을 사용합니다.

CSS 값에는 px, em, rem 같은 단위를 함께 작성하는 것이 좋습니다.

📌 예제 코드

<p id="title">jQuery 글자 크기 변경</p>
<button id="sizeBtn">크기 변경</button>

<script>
  $("#sizeBtn").click(function() {
    $("#title").css("font-size", "30px");
  });
</script>

📌 실행 결과

처음에는 기본 크기의 문장이 표시됩니다.
버튼을 클릭하면 글자 크기가 30px로 커집니다.

5. 테두리 변경하기

css()로 border 속성을 사용하면 요소에 테두리를 줄 수 있습니다.

📌 예제 코드

<div id="card" style="width:200px; padding:20px; background:#f7f7f7;">
  카드 박스
</div>

<button id="borderBtn">테두리 변경</button>

<script>
  $("#borderBtn").click(function() {
    $("#card").css("border", "3px solid blue");
  });
</script>

📌 실행 결과

처음에는 테두리가 없는 박스가 표시됩니다.
버튼을 클릭하면 파란색 테두리가 생깁니다.

6. 여러 CSS를 한 번에 변경하기

css()는 여러 스타일을 한 번에 변경할 수도 있습니다.

여러 속성을 변경할 때는 중괄호 안에 속성과 값을 작성합니다.

📌 기본 문법

$("선택자").css({
  "속성1": "값1",
  "속성2": "값2",
  "속성3": "값3"
});

📌 예제 코드

<div id="box" style="width:200px; padding:20px; background:#eeeeee;">
  스타일이 변경될 박스입니다.
</div>

<button id="styleBtn">스타일 변경</button>

<script>
  $("#styleBtn").click(function() {
    $("#box").css({
      "background": "royalblue",
      "color": "white",
      "font-size": "20px",
      "font-weight": "bold",
      "border-radius": "10px",
      "padding": "30px"
    });
  });
</script>

📌 실행 결과

버튼을 클릭하면 박스의 배경색이 파란색으로 변경됩니다.
글자색은 흰색으로 변경됩니다.
글자 크기와 굵기도 함께 변경됩니다.
박스의 모서리가 둥글게 변경됩니다.

7. 현재 CSS 값 가져오기

css()는 스타일을 변경하는 것뿐만 아니라 현재 적용된 CSS 값을 가져올 수도 있습니다.

값을 가져올 때는 속성 이름만 작성합니다.

📌 기본 문법

$("선택자").css("속성");

📌 예제 코드

<p id="text" style="color:red;">색상 값을 확인할 문장입니다.</p>
<button id="checkBtn">색상 확인</button>

<script>
  $("#checkBtn").click(function() {
    var color = $("#text").css("color");
    alert(color);
  });
</script>

📌 실행 결과

버튼을 클릭하면 현재 글자 색상 값이 alert 창에 표시됩니다.
브라우저에 따라 rgb 형태로 표시될 수 있습니다.

8. 클릭할 때마다 스타일 변경하기

click 이벤트와 css()를 함께 사용하면 사용자의 동작에 따라 스타일을 변경할 수 있습니다.

이번에는 버튼을 클릭하면 박스 디자인이 바뀌는 예제를 만들어보겠습니다.

📌 예제 코드

<div id="box" style="width:220px; height:100px; background:#eeeeee; padding:20px;">
  기본 박스
</div>

<br>

<button id="changeBtn">디자인 변경</button>

<script>
  $("#changeBtn").click(function() {
    $("#box").css({
      "background": "orange",
      "color": "white",
      "border": "3px solid darkorange",
      "border-radius": "15px"
    });
  });
</script>

📌 실행 결과

처음에는 회색 박스가 표시됩니다.
디자인 변경 버튼을 클릭합니다.
박스의 배경색, 글자색, 테두리, 둥근 모서리가 변경됩니다.

9. hover와 css() 함께 사용하기

hover 이벤트와 css()를 함께 사용하면 마우스를 올렸을 때 스타일이 바뀌는 효과를 만들 수 있습니다.

📌 예제 코드

<button id="btn">마우스를 올려보세요</button>

<script>
  $("#btn").hover(
    function() {
      $("#btn").css({
        "background": "blue",
        "color": "white"
      });
    },
    function() {
      $("#btn").css({
        "background": "",
        "color": ""
      });
    }
  );
</script>

📌 실행 결과

버튼 위에 마우스를 올리면 배경색이 파란색으로 변경됩니다.
글자색은 흰색으로 변경됩니다.
마우스를 치우면 원래 스타일로 돌아옵니다.

10. 여러 요소 중 클릭한 요소만 변경하기

여러 개의 요소가 있을 때 클릭한 요소만 스타일을 변경하고 싶다면 $(this)를 사용합니다.

$(this)는 현재 이벤트가 발생한 자기 자신을 의미합니다.

📌 예제 코드

<button class="btn">버튼 1</button>
<button class="btn">버튼 2</button>
<button class="btn">버튼 3</button>

<script>
  $(".btn").click(function() {
    $(this).css({
      "background": "yellow",
      "font-weight": "bold"
    });
  });
</script>

📌 실행 결과

화면에 버튼 3개가 표시됩니다.
버튼 1을 클릭하면 버튼 1만 노란색으로 변경됩니다.
버튼 2를 클릭하면 버튼 2만 노란색으로 변경됩니다.
클릭한 요소만 변경할 때 $(this)를 사용하면 편리합니다.

11. 전체 예제

이번에는 css()를 사용해서 카드 박스 스타일을 변경하는 전체 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery css() 사용법</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <h2>jQuery css() 공부</h2>

  <div id="card" style="width:250px; padding:20px; background:#eeeeee; border-radius:5px;">
    버튼을 클릭하면 스타일이 변경됩니다.
  </div>

  <br>

  <button id="changeBtn">스타일 변경</button>
  <button id="resetBtn">초기화</button>

  <script>
    $(function() {
      $("#changeBtn").click(function() {
        $("#card").css({
          "background": "royalblue",
          "color": "white",
          "font-size": "20px",
          "font-weight": "bold",
          "padding": "30px",
          "border-radius": "15px",
          "box-shadow": "0 4px 10px rgba(0,0,0,0.2)"
        });
      });

      $("#resetBtn").click(function() {
        $("#card").css({
          "background": "#eeeeee",
          "color": "black",
          "font-size": "16px",
          "font-weight": "normal",
          "padding": "20px",
          "border-radius": "5px",
          "box-shadow": "none"
        });
      });
    });
  </script>

</body>
</html>

📌 실행 결과

처음에는 기본 회색 카드 박스가 표시됩니다.
스타일 변경 버튼을 클릭하면 카드 디자인이 변경됩니다.
배경색, 글자색, 크기, 굵기, 여백, 그림자가 적용됩니다.
초기화 버튼을 클릭하면 다시 처음 스타일로 돌아옵니다.

12. 자주 하는 실수

📌 1. CSS 속성 이름을 잘못 쓰는 경우

CSS 속성 이름은 정확하게 작성해야 합니다.

// 잘못된 예
$("#box").css("fontcolor", "red");

// 올바른 예
$("#box").css("color", "red");

📌 2. 여러 CSS를 쓸 때 쉼표를 빼먹는 경우

여러 스타일을 한 번에 작성할 때는 각 속성 사이에 쉼표를 넣어야 합니다.

// 잘못된 예
$("#box").css({
  "color": "white"
  "background": "blue"
});

// 올바른 예
$("#box").css({
  "color": "white",
  "background": "blue"
});

📌 3. 단위를 빼먹는 경우

크기나 여백을 줄 때는 px 같은 단위를 함께 작성하는 것이 좋습니다.

// 좋지 않은 예
$("#box").css("width", "200");

// 좋은 예
$("#box").css("width", "200px");

📌 4. jQuery 연결을 빼먹는 경우

jQuery 문법을 사용하려면 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

13. 핵심 정리

css()는 선택한 요소의 스타일을 가져오거나 변경하는 메서드입니다.
기본 문법은 $("선택자").css("속성", "값")입니다.
글자 색상, 배경색, 크기, 여백, 테두리 등을 변경할 수 있습니다.
여러 CSS를 한 번에 변경할 때는 객체 형태로 작성합니다.
현재 CSS 값을 가져올 때는 $("선택자").css("속성") 형태로 작성합니다.
클릭한 요소만 변경하고 싶을 때는 $(this)를 사용합니다.
jQuery 코드는 document ready 안에서 작성하면 안전합니다.

이번 글에서는 jQuery의 css() 메서드를 사용해서 스타일을 변경하는 방법을 알아봤습니다.

css()는 버튼 클릭, 마우스 hover, 입력 이벤트 등과 함께 사용하면 화면을 동적으로 바꾸는 데 매우 유용합니다.

다음 글에서는 [jQuery] 07. attr()와 prop() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

jQuery 선택자 개념 정리 한눈에정리(그림포함) (0)	2026.05.13
[jQuery] 05. text(), html(), val() 사용법 (0)	2026.03.03
[jQuery] 04. mouseover와 hover 이벤트 사용법 (0)	2026.03.02
[jQuery] 03. click 이벤트 사용법 (0)	2026.03.02
[jQuery] 02. 선택자(Selector) 기본 문법 (0)	2026.02.25