속성(attribute)과 프로퍼티(property)

속성(attribute)과 프로퍼티(property)는 둘 다 객체의 특징이나 상태를 나타내는 값(value)입니다. 하지만 둘의 의미와 활용 방법에 차이가 있습니다.

속성(attribute)은 HTML과 CSS에서 많이 사용되는 용어로, 요소(element)에 대한 속성값을 정의합니다. 예를 들어, img 요소의 경우 src, alt, width, height 등의 속성을 가지며, 이러한 속성은 HTML 태그에 직접 정의됩니다.

프로퍼티(property)는 객체(object)에 대한 속성값을 정의합니다. 자바스크립트에서 객체의 속성은 프로퍼티로 정의되며, 객체의 상태를 나타내기 위한 값을 갖습니다. 예를 들어, 객체의 크기를 나타내는 width와 height는 프로퍼티로 정의됩니다. 이러한 프로퍼티는 객체의 메서드(method)에서도 활용될 수 있습니다.

속성과 프로퍼티의 가장 큰 차이점은 값을 가져오고 설정하는 방법입니다. 속성은 HTML 요소의 속성값을 가져오거나 설정할 수 있지만, 프로퍼티는 객체의 속성값을 가져오거나 설정할 수 있습니다. 이것은 객체의 속성이 자바스크립트에서 직접 정의되는 반면, HTML 속성은 HTML 요소에 정의된다는 것을 나타냅니다.

예를 들어, img 요소의 width 속성을 변경하려면 다음과 같이 작성합니다.

<img src="example.png" alt="example" width="100" height="100">

const imgElement = document.querySelector('img');
imgElement.width = 200;

위 코드에서 width 속성은 HTML 태그에 정의되어 있지만, 자바스크립트에서는 img 요소의 width 프로퍼티를 변경합니다.

속성과 프로퍼티는 서로 혼용해서 사용될 수 있습니다. HTML 요소의 속성은 자바스크립트에서 객체로 나타낼 수 있으며, 이러한 객체의 프로퍼티를 조작할 수 있습니다.

예를 들어, HTML 요소의 class 속성은 자바스크립트에서 className 프로퍼티로 나타낼 수 있습니다.

<div class="example">Hello, World!</div>

const divElement = document.querySelector('div');
divElement.className = 'new-class';

위 코드에서 class 속성은 HTML 요소에 정의되어 있으며, 자바스크립트에서는 className 프로퍼티를 사용하여 class 속성값을 변경합니다.