속성을 의미하는 Attribute와 Property의 차이점

---

속성을 의미하는 Attribute와 Property의 차이점

웹 개발을 하다 보면 HTML 요소의 '속성'을 지칭하는 두 가지 용어, **'Attribute'**와 **'Property'**를 자주 접하게 된다. 둘 다 우리말로는 '속성'이라 번역되기에 혼란을 주기 쉽지만, 이 둘은 웹 브라우저가 HTML 문서를 처리하는 방식에서 중요한 차이점을 가진다. 이 글에서는 Attribute와 Property의 명확한 개념과 기능적 차이를 HTML 문서와 DOM(문서 객체 모델)의 관점에서 자세히 설명한다.

1. Attribute (어트리뷰트)

Attribute는 HTML 마크업 코드 안에 직접 정의된 값이다. 이는 HTML 요소의 시작 태그 내에 이름="값"의 형태로 존재한다. Attribute는 웹 페이지가 처음 로드될 때 요소에 대한 초기 정보나 정적인 설정을 제공하는 역할을 한다. 한 번 설정되면 특별한 조작 없이는 변하지 않는 고정된 값으로 생각하면 이해하기 쉽다.

• HTML 마크업에 존재하는 값이다.
• 요소의 초기 정보 및 정적인 설정을 담당한다.
• 예시: <img src="image.jpg" alt="설명">에서 src와 alt는 이미지의 초기 경로와 설명을 지정하는 Attribute이다.
• JavaScript에서는 getAttribute() 또는 setAttribute() 메서드를 통해 접근하고 변경한다.

2. Property (프로퍼티)

Property는 브라우저가 HTML 문서를 파싱하여 생성하는 DOM(문서 객체 모델) 객체에 존재하는 값이다. 즉, HTML 요소가 JavaScript 객체로 변환되었을 때 그 객체의 속성을 Property라고 부른다. Property는 요소의 현재 상태를 나타내며, 사용자의 상호작용이나 JavaScript 코드에 의해 동적으로 변할 수 있다.

• DOM 객체에 존재하는 값이다.
• 요소의 현재 상태를 나타내며 동적으로 변할 수 있다.
• 예시: <input type="text" value="초기값">이 있을 때, 사용자가 이 입력 필드에 "새로운 값"을 입력하면 inputElement.value (Property)는 "새로운 값"으로 변경된다. 하지만 HTML 마크업에 정의된 value Attribute는 여전히 "초기값" 그대로 남아있다.
• JavaScript에서는 DOM 객체에 직접 접근하여 element.property명 형태로 값을 읽거나 쓸 수 있다.

3. 핵심적인 차이점 요약

구분	Attribute (어트리뷰트)	Property (프로퍼티)
존재 위치	HTML 마크업	DOM(JavaScript 객체)
값의 성격	정적 (초기값)	동적 (현재 상태)
접근 방법 (JS)	getAttribute(), setAttribute()	. (점) 연산자 (element.property명)
주요 역할	요소의 초기 설정	요소의 동적인 상태 관리

4. 예시를 통한 이해

HTML <input> 요소를 통해 Attribute와 Property의 차이를 더 자세히 알아보자.

<input id="myInput" value="초기값" />

위 HTML 코드는 id와 value라는 두 개의 Attribute를 가지고 있다. 이제 JavaScript를 사용하여 이 요소에 접근해 본다.

const inputElement = document.getElementById("myInput");

// 1. Attribute 값 확인
console.log(inputElement.getAttribute("value")); // "초기값" 출력 (HTML에 정의된 값)

// 2. Property 값 확인
console.log(inputElement.value); // "초기값" 출력 (DOM 객체의 현재 값)

// 3. Property 값 변경 (사용자가 입력 필드에 값을 입력한 상황과 유사)
inputElement.value = "새로운 값";

// 4. 변경 후 Attribute와 Property 값 비교
console.log(inputElement.getAttribute("value")); // 여전히 "초기값" 출력 (Attribute는 변하지 않는다)
console.log(inputElement.value); // "새로운 값" 출력 (Property는 변경된 현재 상태를 반영한다)

이 예시에서 볼 수 있듯이, inputElement.value (Property)를 변경해도 HTML 마크업 내의 value Attribute는 변하지 않는다. 이는 Property가 DOM 객체의 현재 상태를 나타내기 때문이며, Attribute는 HTML 문서의 초기값을 그대로 유지하기 때문이다. DOM은 JavaScript 모델이므로, 모든 Property 변경이 HTML에 다시 반영될 필요는 없다. 오히려 이는 불필요한 리소스 낭비가 될 수 있다.

만약 DOM과 HTML 양쪽 모두에서 특정 속성의 값을 변경하고 싶다면, setAttribute() 메서드를 사용해야 한다.

// setAttribute()를 사용하여 Attribute 값도 변경
inputElement.setAttribute("value", "99");

console.log(inputElement.getAttribute("value")); // "99" 출력
console.log(inputElement.value); // "99" 출력

5. 추가적인 차이점

1. 사용자 정의 속성 접근

   • HTML에 정의되지 않은 개발자 임의의 사용자 정의 속성은 Property로 자동 변환되지 않는다.
   • 예를 들어, <input custom="9999">와 같이 정의된 custom 속성은 inputElement.custom으로 접근하면 undefined가 출력된다.
   • 사용자 정의 속성에는 반드시 getAttribute()와 setAttribute()를 사용해야 접근할 수 있다.

   const inputElement = document.querySelector("input");
   console.log(inputElement.custom); // undefined
   console.log(inputElement.getAttribute("custom")); // '9999'

2. 속성 이름 제약사항

   • Property는 JavaScript 객체의 속성이므로 JavaScript 식별자 규칙을 따라야 한다.
   • 예를 들어, HTML Attribute에서는 background-image처럼 하이픈(-)을 사용할 수 있지만, JavaScript Property에서는 backgroundImage와 같이 카멜 케이스(CamelCase)로 작성해야 한다.
   • class와 같이 JavaScript 예약어와 겹치는 HTML Attribute는 className과 같은 다른 Property 이름으로 매핑된다.

3. 성능 차이

   • 일반적으로 Property에 직접 접근하는 방식이 getAttribute() 또는 setAttribute() 메서드를 사용하는 것보다 약간 더 빠르다.
   • 따라서 사용자 정의 속성처럼 Property로 접근할 수 없는 특별한 경우가 아니라면, Property를 직접 사용하는 것이 성능 면에서 더 효율적이다.

6. 결론

Attribute는 HTML 마크업에 정의된 정적인 초기값이며, Property는 DOM 객체에 존재하는 동적으로 변하는 현재 상태를 나타낸다. 이 둘의 명확한 차이를 이해하는 것은 웹 개발에서 HTML과 JavaScript를 유연하고 효율적으로 다루는 데 매우 중요하다고 할 수 있다.

---