[HTML] 요소들의 속성

HTML 태그는 기본적으로 구조만을 담당합니다.

하지만 속성(attribute)을 통해 태그에 의미, 스타일, 동작 등 다양한 기능을 부여할 수 있습니다.

이번 글에서는 HTML의 대표적인 속성들과, 전역 속성, 이벤트 속성까지 차근차근 알아보겠습니다.

---

✅ 속성은 어디에 들어가는가?

속성은 보통 이렇게 사용됩니다.

<tagname 속성명="값"></tagname>

예를 들어 아래와 같이 사용됩니다.

<a href="https://naver.com" target="_blank" title="네이버로 이동">
  네이버
</a>

여기서 <a>는 링크 태그,

그 안에 있는 href, target, title이 바로 속성(attribute)입니다.

---

✅ 자주 사용하는 HTML 속성들

✨ id

• 해당 요소의 고유한 식별자
• 한 페이지 내에서 하나의 요소에만 사용해야 합니다
• JavaScript, CSS에서 참조할 때 많이 사용됩니다

<div id="main-title">메인 제목</div>

---

✨ class

• 공통 스타일을 적용하거나 그룹화된 요소를 관리할 때 사용합니다
• 여러 개를 띄어쓰기로 구분하여 설정할 수 있습니다

<p class="text warning">경고 메시지</p>

---

✨ style

• 인라인 스타일을 직접 지정할 수 있습니다
• CSS를 따로 분리하는 것이 좋지만, 빠른 테스트나 간단한 스타일에 사용됩니다

<h1 style="color: red; font-size: 24px;">빨간 제목</h1>

---

✨ title

• 요소에 마우스를 올리면 툴팁(설명)이 나타납니다
• 접근성이나 UX 향상을 위해 사용됩니다

<button title="저장하기">💾</button>

---

✨ alt

• 이미지가 로딩되지 않을 때 대체 텍스트를 보여줍니다
• 스크린 리더 사용자를 위한 접근성을 위해 꼭 사용하는 것이 좋습니다

<img src="cat.jpg" alt="귀여운 고양이">

---

✨ href

• <a> 태그에서 링크 주소를 설정할 때 사용합니다

<a href="https://example.com">사이트 방문</a>

---

✨ src

• 이미지, 비디오, 오디오 등 외부 리소스 경로를 지정할 때 사용합니다

<img src="logo.png" alt="사이트 로고">

---

✅ 전역 속성(Global Attributes)

전역 속성이란, 모든 HTML 요소에 공통적으로 사용할 수 있는 속성을 말합니다.

속성	설명
id	고유 식별자
class	클래스 이름
style	인라인 스타일
title	마우스 툴팁 설명
hidden	해당 요소를 화면에 표시하지 않음
tabindex	키보드 포커스 순서 제어
contenteditable	해당 요소의 내용을 사용자 편집 가능하게 함
draggable	요소를 드래그할 수 있는지 여부 지정
lang	해당 요소의 언어 설정 (예: lang="en")
data-*	사용자 정의 데이터 속성 (data-user-id, data-role 등)

예:

<p id="intro" class="info" title="소개 글입니다." lang="ko">
  반갑습니다!
</p>

---

✅ 이벤트 속성(Event Attributes)

이벤트 속성은 사용자 행동에 반응하도록 동작을 지정할 수 있는 속성입니다.

자바스크립트를 연동해서 많이 사용합니다.

속성	설명
onclick	클릭했을 때 실행
onmouseover	마우스를 올렸을 때
onchange	값이 변경되었을 때 (예: input)
onkeyup	키보드를 눌렀다 뗐을 때
onsubmit	폼을 제출할 때

예:

<button onclick="alert('클릭되었습니다!')">눌러보세요</button>

---

✅ 정리

속성 종류	대표 속성	설명
자주 쓰는 기본 속성	id, class, style, alt, href, src	요소의 의미, 스타일, 연결 등을 지정
전역 속성	title, hidden, tabindex, lang, data-*	모든 HTML 요소에 적용 가능
이벤트 속성	onclick, onchange, onsubmit 등	사용자 동작에 따라 동작 실행 (JS 연동)

---

✅ 마무리

HTML 속성은 단순히 태그에 기능을 더하는 것을 넘어, 웹 페이지의 동작, 디자인, 접근성까지도 책임지는 중요한 요소입니다.

기초적인 속성부터 전역 속성, 이벤트 속성까지 제대로 이해하면 웹 개발의 기반이 훨씬 탄탄해집니다.