[jQuery] 07. attr()와 prop() 사용법

지난 글에서는 jQuery의 css() 메서드로 HTML 요소의 스타일을 변경하는 방법을 알아봤습니다.

이번 글에서는 HTML 요소의 속성을 다룰 때 사용하는 attr()와 prop()에 대해 알아보겠습니다.

처음 보면 attr()와 prop()는 비슷해 보이지만, 사용하는 상황이 다릅니다. 특히 체크박스, 라디오 버튼, disabled 같은 상태 값을 다룰 때는 차이를 꼭 알고 있어야 합니다.

1. attr()란?

attr()는 HTML 요소의 속성(attribute) 값을 가져오거나 변경할 때 사용하는 jQuery 메서드입니다.

HTML 태그에는 id, class, src, href, alt, title 같은 속성이 있습니다.

📌 예시

<a href="https://www.google.com">구글 이동</a>

<img src="cat.jpg" alt="고양이 이미지">

위 코드에서 href, src, alt가 바로 HTML 속성입니다.

2. attr()로 속성 값 가져오기

attr() 안에 속성 이름만 작성하면 해당 속성 값을 가져올 수 있습니다.

📌 기본 문법

$("선택자").attr("속성명");

📌 예제 코드

<a id="link" href="https://www.google.com">구글 이동</a>
<button id="btn">href 확인</button>

<script>
  $("#btn").click(function() {
    var hrefValue = $("#link").attr("href");
    alert(hrefValue);
  });
</script>

📌 실행 결과

버튼을 클릭하면 a 태그의 href 속성 값을 가져옵니다.
alert 창에 "https://www.google.com"이 표시됩니다.

3. attr()로 속성 값 변경하기

attr()에 속성명과 값을 함께 작성하면 속성 값을 변경할 수 있습니다.

📌 기본 문법

$("선택자").attr("속성명", "변경할 값");

📌 예제 코드

<a id="link" href="https://www.google.com">구글 이동</a>
<button id="changeBtn">네이버로 변경</button>

<script>
  $("#changeBtn").click(function() {
    $("#link").attr("href", "https://www.naver.com");
    $("#link").text("네이버 이동");
  });
</script>

📌 실행 결과

처음에는 링크가 구글 주소를 가지고 있습니다.
버튼을 클릭하면 href 속성이 네이버 주소로 변경됩니다.
링크 글자도 "네이버 이동"으로 변경됩니다.

4. img 태그의 src 변경하기

attr()는 이미지 주소를 변경할 때도 자주 사용합니다.

img 태그의 src 속성을 바꾸면 화면에 보이는 이미지가 변경됩니다.

📌 예제 코드

<img id="photo" src="cat.jpg" alt="고양이" width="200">
<button id="imgBtn">이미지 변경</button>

<script>
  $("#imgBtn").click(function() {
    $("#photo").attr("src", "dog.jpg");
    $("#photo").attr("alt", "강아지");
  });
</script>

📌 실행 결과

처음에는 cat.jpg 이미지가 표시됩니다.
버튼을 클릭하면 src 값이 dog.jpg로 변경됩니다.
화면의 이미지가 강아지 이미지로 바뀝니다.
alt 속성도 "강아지"로 변경됩니다.

5. 여러 속성 한 번에 변경하기

attr()도 여러 속성을 한 번에 변경할 수 있습니다.

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

📌 기본 문법

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

📌 예제 코드

<a id="link" href="#" title="기본 링크">링크입니다</a>
<button id="setBtn">속성 변경</button>

<script>
  $("#setBtn").click(function() {
    $("#link").attr({
      "href": "https://jquery.com",
      "title": "jQuery 공식 사이트",
      "target": "_blank"
    });

    $("#link").text("jQuery 공식 사이트 열기");
  });
</script>

📌 실행 결과

버튼을 클릭하면 href, title, target 속성이 한 번에 변경됩니다.
링크를 클릭하면 새 탭으로 jQuery 공식 사이트가 열립니다.

6. prop()란?

prop()는 HTML 요소의 상태(property) 값을 가져오거나 변경할 때 사용하는 jQuery 메서드입니다.

특히 체크박스의 체크 여부, 버튼의 비활성화 여부처럼 true 또는 false로 판단되는 상태를 다룰 때 많이 사용합니다.

checked
selected
disabled
readonly

이런 값들은 attr()보다 prop()로 다루는 것이 더 정확합니다.

7. prop()로 체크박스 상태 확인하기

체크박스가 체크되어 있는지 확인할 때는 prop("checked")를 사용합니다.

📌 예제 코드

<label>
  <input type="checkbox" id="agree">
  약관에 동의합니다
</label>

<button id="checkBtn">체크 확인</button>

<script>
  $("#checkBtn").click(function() {
    var isChecked = $("#agree").prop("checked");

    if (isChecked) {
      alert("체크되어 있습니다.");
    } else {
      alert("체크되어 있지 않습니다.");
    }
  });
</script>

📌 실행 결과

체크박스를 선택한 뒤 버튼을 누르면 "체크되어 있습니다."가 표시됩니다.
체크하지 않고 버튼을 누르면 "체크되어 있지 않습니다."가 표시됩니다.

8. prop()로 체크 상태 변경하기

prop()를 사용하면 체크박스를 체크하거나 체크 해제할 수도 있습니다.

📌 예제 코드

<label>
  <input type="checkbox" id="agree">
  약관 동의
</label>

<button id="onBtn">체크하기</button>
<button id="offBtn">체크 해제</button>

<script>
  $("#onBtn").click(function() {
    $("#agree").prop("checked", true);
  });

  $("#offBtn").click(function() {
    $("#agree").prop("checked", false);
  });
</script>

📌 실행 결과

"체크하기" 버튼을 클릭하면 체크박스가 체크됩니다.
"체크 해제" 버튼을 클릭하면 체크박스의 체크가 해제됩니다.

9. prop()로 버튼 비활성화하기

버튼이나 input을 비활성화할 때는 disabled 속성을 사용할 수 있습니다.

이때도 prop()를 사용하는 것이 좋습니다.

📌 예제 코드

<button id="submitBtn">제출하기</button>
<button id="disableBtn">제출 버튼 비활성화</button>
<button id="enableBtn">제출 버튼 활성화</button>

<script>
  $("#disableBtn").click(function() {
    $("#submitBtn").prop("disabled", true);
  });

  $("#enableBtn").click(function() {
    $("#submitBtn").prop("disabled", false);
  });
</script>

📌 실행 결과

"제출 버튼 비활성화"를 클릭하면 제출 버튼을 누를 수 없게 됩니다.
"제출 버튼 활성화"를 클릭하면 다시 제출 버튼을 누를 수 있습니다.

10. attr()와 prop()의 차이

attr()와 prop()의 가장 큰 차이는 다루는 대상입니다.

attr() : HTML 태그에 적힌 속성 값을 다룰 때 사용합니다.
prop() : 현재 요소의 상태 값을 다룰 때 사용합니다.

📌 attr()를 사용하기 좋은 경우

href 변경
src 변경
alt 변경
title 변경
target 변경

📌 prop()를 사용하기 좋은 경우

checkbox가 체크되어 있는지 확인
radio가 선택되어 있는지 확인
button을 disabled 처리
input을 readonly 처리
option이 selected 상태인지 확인

11. 전체 예제

이번에는 attr()와 prop()를 함께 사용한 예제를 만들어보겠습니다.

체크박스에 동의해야만 링크가 활성화되고, 버튼을 누르면 링크 주소도 변경되도록 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery attr prop 예제</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

  <h2>jQuery attr(), prop() 공부</h2>

  <p>
    <a id="siteLink" href="#" title="아직 주소 없음">사이트 이동</a>
  </p>

  <label>
    <input type="checkbox" id="agree">
    링크 사용에 동의합니다
  </label>

  <br><br>

  <button id="setLinkBtn">링크 주소 설정</button>
  <button id="goBtn" disabled>이동하기</button>

  <script>
    $(function() {
      $("#setLinkBtn").click(function() {
        $("#siteLink").attr({
          "href": "https://jquery.com",
          "title": "jQuery 공식 사이트",
          "target": "_blank"
        });

        $("#siteLink").text("jQuery 공식 사이트");
        alert("링크 주소가 설정되었습니다.");
      });

      $("#agree").change(function() {
        var isChecked = $("#agree").prop("checked");

        if (isChecked) {
          $("#goBtn").prop("disabled", false);
        } else {
          $("#goBtn").prop("disabled", true);
        }
      });

      $("#goBtn").click(function() {
        var href = $("#siteLink").attr("href");
        alert("이동할 주소: " + href);
      });
    });
  </script>

</body>
</html>

📌 실행 결과

처음에는 이동하기 버튼이 비활성화되어 있습니다.
링크 주소 설정 버튼을 클릭하면 a 태그의 href, title, target 속성이 변경됩니다.
체크박스를 체크하면 이동하기 버튼이 활성화됩니다.
체크를 해제하면 이동하기 버튼은 다시 비활성화됩니다.
이동하기 버튼을 클릭하면 현재 링크 주소가 alert 창에 표시됩니다.

12. 자주 하는 실수

📌 1. 체크박스 상태를 attr()로 확인하는 경우

체크박스가 현재 체크되어 있는지 확인할 때는 attr()보다 prop()를 사용하는 것이 좋습니다.

// 좋지 않은 예
$("#agree").attr("checked");

// 좋은 예
$("#agree").prop("checked");

📌 2. disabled 상태를 attr()로만 처리하는 경우

버튼의 현재 활성화 상태를 다룰 때는 prop()를 사용하는 것이 더 명확합니다.

// 좋지 않은 예
$("#btn").attr("disabled", "disabled");

// 좋은 예
$("#btn").prop("disabled", true);

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

href, src, alt, title 같은 속성 이름은 정확하게 작성해야 합니다.

// 잘못된 예
$("#link").attr("herf", "https://example.com");

// 올바른 예
$("#link").attr("href", "https://example.com");

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

attr(), prop()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

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

13. 핵심 정리

attr()는 HTML 속성 값을 가져오거나 변경할 때 사용합니다.
href, src, alt, title, target 같은 속성은 attr()로 다루기 좋습니다.
prop()는 요소의 현재 상태 값을 가져오거나 변경할 때 사용합니다.
checked, selected, disabled, readonly 같은 상태 값은 prop()로 다루기 좋습니다.
체크박스의 체크 여부는 prop("checked")로 확인합니다.
버튼 비활성화는 prop("disabled", true)로 처리할 수 있습니다.
attr()와 prop()는 비슷해 보이지만 역할이 다르므로 상황에 맞게 사용해야 합니다.

이번 글에서는 jQuery의 attr()와 prop() 사용법에 대해 알아봤습니다.

단순한 HTML 속성 변경은 attr(), 현재 상태를 다루는 값은 prop()를 사용한다고 기억하면 이해하기 쉽습니다.

다음 글에서는 [jQuery] 08. addClass(), removeClass(), toggleClass() 사용법에 대해 알아보겠습니다.

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

[jQuery] 09. show(), hide(), toggle() 사용법 (0)	2026.06.20
[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법 (0)	2026.06.20
[jQuery] 06. css()로 스타일 변경하기 (0)	2026.05.21
jQuery 선택자 개념 정리 한눈에정리(그림포함) (0)	2026.05.13
[jQuery] 05. text(), html(), val() 사용법 (0)	2026.03.03