HTML에서의 애트리뷰트와 프로퍼티는 어떤 차이가 있을까?

attribute vs property

둘 다 속성으로 번역된, 그 자체만으로는 어떤 차이를 가지고있는지 알지 못하고 있다는 것을 인지하게 된 출근길에, 갑자기 궁금해져 정리할 겸 폰으로 작성을 시작하게 됐습니다. 내용이 정확하진 않을 수 있으나 개념적으로는 아마 맞을 것이라는 생각을 가지며 정리겸 글을 작성합니다. 온전히 다 정리하고 작성해보고싶었는데, 이것도 완전히 이해했다고 말할 수 있으려면 너무 많은 시간을 필요로 할 것 같아 대략적으로 부족하겠지만 어느정도 느낌만 나눌 수 있도록 하기 위해 작성한 글이니 감안하고 읽어주세요! 만약 잘못된 부분이 있다면 꼭 알려주세요 ㅠㅠ

 

HTML에서의 attribute와 property는

HTML element들에게 부여할 수 있는 것을 의미합니다.

<a href="//fureweb.com">내 웹사이트</a>

a 태그라면 모두 가질 수 있는 “href” 라는 attribute가 있습니다. 그것에 “//fureweb.com”이라는 값을 부여하여 “내 웹사이트”라는 텍스트를 브라우저에서 클릭하게되면 이곳에 접속할 수 있게 됩니다. href에 부여된 값은 언제든 변할 수 있는 것이고, a 태그가 가진 고유한 값은 아닙니다. 또한 attribute는 메모리에 올라가 있지 않은 상태로 그것만으로는 아무런 의미가 생기지 않게 됩니다. attribute는 웹브라우저에의해 HTML 코드가 실행되어 DOM(Document Object Model)에 저장되었을때만, 저 a태그가 가진 property로써 그 타입과 이름이 저장될 수 있어 생성된 그 페이지 내에서만 비로소 property를 통해 의미가 생기게 됩니다.

 

그렇다면 property란?

property는 찰흙이 기본적으로가지고있는 끈적거리는 성질이나, 금속이라면 기본적으로 가지고있는 전기를 흘려보내는 성질과 같은 개념입니다.

(참조 : http://stackoverflow.com/questions/258469/what-is-the-difference-between-attribute-and-property)

attribute와는 다르게 누군가 그것을 어떤 태그에 붙여놓은 뒤 브라우저에서 실행하여 DOM 안에 저장해 놓아야만 의미가 생기는 개념이 아닌 그 자체가 가진 고유한 성질과 같은 개념이라고 합니다.

attribute를 통해 선언하지 않더라도 HTML의 요소들이 기본적으로 가지고있는 property들이 존재합니다. 하지만 그것의 역할을 특정하기 위해서는 그 이상의 attribute의 선언이 필요하겠죠.

 

결론

attribute와 property는 서로 다릅니다. -_-

결론적으로 제가 이해한 attribute는 논리적인 개념으로 자바에서의 class와 같은 느낌이었습니다.

property는 물리적인 개념으로 자바에서 class를 통해 instantiate 된 object와 같은 느낌입니다.

그래서 간단하게 요약하자면 웹 애플리케이션에서의 attribute는 HTML에게 의미가 있는 것이고 (정적인 영역)

property는 javascript에게 의미가 있다고 생각하면 될 것 같습니다. (동적인 영역, DOM에 저장되어있는 것을 뽑아와서 조작할 수 있으니)

뭔가 깊게 그리고 명쾌하게 설명하고 싶은데 이건 철학적인 영역인것같아서 설명할 엄두가 잘 안나네요 ㅠㅠ 나중에 누군가 알려주시거나 배우게 된다면 글을 수정하여 내용을 보충하는 형태로 두던지 하겠습니다.

 

위 내용에 틀린 개념설명이 있거나 하면 꼭 알려주세요!! 잘못된 정보를 제공하는건 아닌가 싶기도 하는 마음이 있지만, 그러다간 글을 아예 못쓸 것 같아 일단 기록을 위해 작성해 놓습니다! (면피용-_-)