속성 , 프로퍼티

1. 속성(Attributes):
   • HTML 코드 상에서 요소 태그에 직접 작성됩니다. (예: <input id="my-input" class="my-class" value="initial value"> 여기서 id, class, value가 속성입니다.)
   • HTML 문서의 초기 상태를 나타냅니다.
2. 프로퍼티(Properties):
   • 브라우저가 HTML 코드를 파싱하여 DOM 요소를 생성할 때, 이 DOM 객체에 자동으로 추가되는 객체의 속성입니다.
   • 해당 DOM 요소의 현재 상태를 나타냅니다. 자바스크립트에서 element.id, element.className, element.value와 같이 접근하고 조작하는 대상입니다.
3. 관계 및 동기화:
   • 브라우저는 HTML 속성을 읽어와 해당 DOM 객체의 초기 프로퍼티 값을 설정합니다.
   • 많은 경우, 속성과 프로퍼티는 서로 **매핑(Mapping)**되어 있으며 **"실시간 동기화(live synchronization)"**가 일어납니다. 즉, 속성 값이 변하면 관련 프로퍼티 값도 업데이트되고, 프로퍼티 값이 변하면 속성 값(또는 적어도 브라우저의 내부 상태)도 업데이트되는 경우가 많습니다.
   • 하지만 이 매핑과 동기화 방식은 속성과 프로퍼티의 종류에 따라 다를 수 있습니다.
     • id 속성 -> id 프로퍼티: 1:1 매핑이며 실시간 동기화됩니다.
     • class 속성 -> className 프로퍼티: 이름은 다르지만 실시간 동기화됩니다. (element.classList 프로퍼티도 관련 있습니다.)
     • value 속성 -> value 프로퍼티: 1:1 매핑이지만, 사용자의 입력 등으로 프로퍼티 값이 변경되어도 HTML 소스의 value 속성 값이 항상 즉시 업데이트되는 것은 아닐 수 있습니다 (파일에서는 '1-way live-sync'로 표현된 부분이 이와 관련될 수 있으나, 실제로는 프로퍼티 변경이 UI 및 내부 상태에 더 직접적으로 반영됩니다).

요약하자면, 속성은 HTML에 작성된 요소의 초기 설정값이고, 프로퍼티는 자바스크립트로 접근/조작 가능한 DOM 객체의 현재 상태입니다. 둘은 밀접하게 연결되어 종종 동기화되지만, 완전히 동일하지는 않으며 특히 동적인 상태 변화는 주로 프로퍼티를 통해 다루어집니다. 파일은 MDN 문서를 참고하여 각 프로퍼티의 정확한 동작을 확인할 것을 권장하고 있습니다.