HTML
HTML 의미와 DOM의 현재 상태
요소의 시맨틱 역할, HTML 마크업에 적힌 초기 속성(attribute), 그리고 DOM 객체의 현재 상태(property)를 구분해 다룹니다.
이럴 때 필요해요
키보드와 스크린리더에서도 자연스럽게 동작하는 UI를 만들고, 폼 입력값을 읽을 때 초기값과 현재값을 헷갈리는 버그를 막기 위해 필요합니다.
어떻게 동작하나요?
<div>에 스타일을 입히고 클릭 이벤트만 붙여서 버튼을 만들면 마우스로는 눌리지만 키보드 Tab 키로 초점이 가지 않고 Enter나 Space 키로도 실행되지 않습니다. HTML 태그는 단순한 모양 상자가 아니라 역할과 기본 동작을 함께 담고 있기 때문입니다. 페이지 이동은 <a href>, 동작 실행은 <button>, 문서의 주요 구획은 <main>과 <nav>처럼 의미에 맞는 시맨틱 요소를 고르면 기본 키보드 제어와 보조 기술 안내를 자연스럽게 얻을 수 있습니다.
HTML을 자바스크립트로 다룰 때는 마크업 텍스트에 적힌 속성인 attribute와 메모리에 만들어진 DOM 객체의 프로퍼티인 property를 구분해야 합니다. getAttribute()로 읽는 attribute는 항상 문자열(또는 null) 형태의 초기 설정값에 가깝고, element.value나 element.checked로 읽는 DOM property는 불리언이나 문자열 등 타입이 있는 현재 런타임 상태입니다.
예를 들어 <input value="초기값">이라는 입력창에 사용자가 '수정값'이라고 타이핑하면, 화면과 input.value 프로퍼티는 '수정값'으로 바뀌지만 input.getAttribute('value')는 처음 마크업에 적혀 있던 '초기값'을 그대로 유지합니다. 따라서 사용자가 지금 입력한 값을 검증하거나 서버로 보낼 때는 DOM property를 읽고, 폼을 처음 상태로 되돌릴 때만 초기 attribute를 참고해야 합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
// <input id="name" value="초기값">
const input = document.querySelector("#name");
input.value = "수정값";
console.log(input.getAttribute("value")); // 초기값
console.log(input.value); // 수정값input 요소가 있는 브라우저 환경의 예시입니다. 사용자가 값을 바꾼 뒤에도 마크업 초기값(getAttribute)과 현재 입력 상태(input.value)는 서로 다른 값을 가리킨다는 점을 보여 줍니다.
자주 헷갈리는 포인트
- disabled="false"처럼 불리언 attribute에 문자열 false를 넣어도 속성이 존재한다는 이유만으로 참(true)으로 동작할 수 있습니다.
- 시맨틱 태그를 사용했다는 것만으로 포커스 순서나 대체 텍스트 같은 접근성 검증이 모두 끝났다고 생각하면 안 됩니다.
내 말로 설명해 보기
클릭 이벤트만 연결한 div 대신 button 요소를 사용하면 브라우저로부터 어떤 기본 접근성과 키보드 동작을 얻을 수 있나요?
함께 읽으면 좋은 개념
관련 면접 질문 4개
HTML attribute와 DOM property는 무엇이 다르고 언제 값이 달라지나요?
HTML attribute는 HTML 마크업 텍스트에 적힌 초기 속성으로 getAttribute()로 읽으면 문자열이나 null을 반환하는 반면, DOM property는 자바스크립트 DOM 노드의 객체 프로퍼티로서 불리언, 숫자 등 타입 있는 현재 상태를 나타냅니다. id처럼 서로 반영되는 것도 있지만, input의 value나 checked처럼 사용자가 입력창에 글자를 치거나 체크박스를 누르면 초기값인 attribute는 그대로 남고 현재 상태인 property만 달라집니다.
꼬리질문과 참고자료 →HTML 마크업의 attribute와 자바스크립트 DOM property는 어떻게 구분하나요?
HTML attribute는 HTML 문서에 작성된 직렬화된 초기 속성값이고, DOM property는 메모리에 생성된 DOM 객체가 들고 있는 실시간 상태값입니다. 예를 들어 <input value="초기값">에 사용자가 새 글자를 입력하면 input.getAttribute('value')는 여전히 '초기값'을 돌려주지만, input.value 프로퍼티는 사용자가 방금 수정한 현재 문자열을 반환합니다. 따라서 화면의 현재 상호작용 상태를 읽고 바꿀 때는 DOM property를 기준으로 다루어야 합니다.
꼬리질문과 참고자료 →시맨틱 HTML을 사용하는 것이 접근성과 기본 동작 설계에 왜 중요한가요?
시맨틱 HTML은 요소의 시각적 모양이 아니라 콘텐츠의 의미와 역할에 맞는 태그를 선택해, 브라우저의 기본 상호작용과 보조 기술 해석을 자연스럽게 얻는 방식입니다. 예를 들어 페이지 이동에는 <a href>, 동작 실행에는 <button>을 쓰면 별도 자바스크립트 없이도 탭 포커스 이동과 Enter·Space 키 실행, 스크린리더 역할 안내가 기본 제공됩니다. 또한 <main>, <nav>, 제목 태그로 문서 구조를 나누면 보조 기술과 검색 엔진이 구조를 정확히 파악하도록 돕습니다.
꼬리질문과 참고자료 →