한국어는 같은 글자라고 하더라도 어떤 상황에서 사용하느냐에 따라 그 의미가 달라지는 경우가 있다.
예를 들어 사과, 다리, 굴 등등 그 수를 셀 수 없을 정도로 많다.
물론 영어도 그런 단어들이 있다. like, fire, right 등의 단어가 있다.
그렇다고 여러 국가의 동음이의어에 대해서 알아볼 건 아니다.
이번에 알아볼 내용은 웹 프로그래밍에서 attribute와 property의 차이점이다.
한국어로 번역하면 두 글자 모두 '속성'이라는 동일한 의미를 포함하고 있다.
하지만 같은 속성이라고 하더라도 웹 프로그래밍에서 두 속성은 분명한 차이점이 존재한다.
Attribute & Property
먼저 attribute를 한 마디로 설명하면 HTML 태그에 부여한 속성이다.
<form class="inputBox">
<input type="text" placeholder="검색어 입력" />
<button type="submit">검색</button>
</form>예를 들어 위와 같은 코드가 있다고 가정하면
form 태그에 있는 class / input 태그에 있는 type, placeholder / button에 있는 type이 되겠다.
property 역시 HTML 태그의 속성을 의미하긴 하는데 환경이 다르다.
property는 HTML DOM에서 표시한 태그의 속성이다.
document.querySelector("form").className
document.querySelector("input").value
document.querySelector("button").value여기서 볼 수 있는 className 혹은 value를 property라고 한다.
이렇게 보면 사실 이름만 다르지 지칭하고 있는 값은 같기 때문에 같은 걸
이름만 다르게 부르는 게 아닌가 하는 생각이 들 수 있다.
같아 보이지만 미묘하게 다른 둘
그럼 같아 보이는 이 둘이 어떤 차이점을 가지고 있는지 조금 더 세세하게 살펴보자.
1. 사용 환경의 차이
우선 앞서 설명했던 것처럼 attribute와 property는 사용하는 환경에 따라 다르게 불린다.
HTML 태그의 속성으로 HTML 문서 내에서 사용되면 attribute라고 하고,
HTML 문서를 통해 구현된 DOM에서 접근하면 property라고 할 수 있다.
2. 속성 이름의 차이
attribute와 property는 같은 값을 지칭하고 있다고 하더라도,
실제 사용하는 속성의 이름은 조금씩 차이가 있다.
대표적으로 위에 사용한 예시인 class와 className이 있다.
두 속성 모두 태그의 class 선택자를 의미하는데 어떤 환경이냐에 따라 이름이 달라진다.
3. 정적 vs 동적
이 부분이 attribute와 property의 가장 큰 차이점이라고 볼 수 있겠다.
attribute는 HTML 문서 내에서 사용이 된다고 했고, property는 DOM에서 사용되는 속성이라 했다.
그 말은 attribute는 정적으로 변하지 않는다는 의미가 되겠고
property는 동적으로 값이 변할 수 있다는 의미가 되겠다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="./style.css" rel="stylesheet" />
</head>
<body>
<input type="text" value="hello!" />
<script src="./app.js"></script>
</body>
</html>const input = document.querySelector("input");
input.value = "bye bye!";예를 들어 위와 같은 코드가 있다고 가정해 보자
HTML 문서 안에 input 태그 속성으로 value를 사용했고, 그 값으로 "hello"라는 문자를 할당했다.
그다음 자바스크립트를 통해 해당 input 요소를 특정하고 그 요소의 value라는 속성에 "bye bye"라는 문자를 할당했다.
결과는 위의 사진과 같이 나왔는데
화면에 그려진 input 창 안에 value는 bye bye라는 문자로 표시 됐지만,
개발자 도구를 통해 확인해 본 HTML 문서에는 input에 value가 "hello" 문자가 들어가 있는 것을 볼 수 있다.
이 부분이 attribute와 property의 가장 큰 차이점이 되는 것이다.
attribute는 HTML 문서에 한번 작성되면 변하지 않는다.
그러나 property는 자바스크립트를 이용해서 동적으로 변화시킬 수 있다.
사실 용어에 대한 정리를 한 부분이지만,
개발자 간의 소통에서 정확한 용어를 사용하고 그 용어에 대한 명확한 이해가 필요하기에
이러한 용어 정리도 꼭 필요한 부분이라고 생각한다.
포스팅 작성에 참고한 감사한 글들
'Stack > HTML' 카테고리의 다른 글
| input 태그의 inputmode 속성 : 가상 키보드 타입 지정하기 (0) | 2024.12.02 |
|---|---|
| section과 article : 같은 듯, 다른 듯 애매한 둘 (1) | 2024.11.03 |
| DOM이란? : 돔돔 돔돔 돔돔 (1) | 2024.10.16 |
| HTML에서 JS를 불러오는 최적의 위치와 설정은? (2) | 2024.10.11 |
| HTML은 프로그래밍 언어인가요? (0) | 2024.09.25 |