[HTML] attribute, property

어트리뷰트(attribute), 프로퍼티(property)는 속성이라는 공통된 특성이 존재하지만 실제 화면 개발에는 큰 차이점이 존재한다.

attribute는 HTML의 속성이다. 엘리멘트의 id, class와 같은 추가 정보를 일컫는다고 보면 된다.
정적인 값이다.

반면, property는 DOM내에서의 값이다. DOM은 단순히 HTML을 자바스크립트의 객체로 표현한 것이다. 그래서 HTML과 다르다. 하지만 HTML을 동적으로 수정하기 위해 생긴 개념이기 때문에 큰 연관성을 지닌다.

<input type="text" value="0">

여기서 DOM 문법을 통해 input.value 값을 가져와서 변경할 수 있다. 이 경우 input.value는 프로퍼티 값인데, 이 값을 재설정하면 DOM tree는 변경되겠지만 HTML attribute는 그대로인 것을 확인할 수 있다.

추가로 또 차이점은 attribute 에는 '-'이 들어갈 수 있지만, property는 자바스크립트 명명 규칙을 따르기 때문에 Camel Case로 적는다. 예를 들어, background-color, backgroundColor 이렇게 다르게 표기한다.

참고자료

• 한방에 이해하는 attribute 와 property 속성 차이 (링크)