HTML Attributes Reference
1. HTML Attribute란?
- *HTML Attribute(속성)**은 HTML 태그에 추가 정보를 제공하는 요소입니다. 각 HTML 태그에는 다양한 속성을 추가할 수 있으며, 이를 통해 해당 태그가 어떻게 작동하고, 어떻게 표시될지를 정의합니다. 속성은 항상 태그의 시작 태그에 추가되며, 이름과 값을 포함합니다.
기본 속성 사용 예시:
<a href="<https://www.example.com>" target="_blank">Example Link</a>
위의 <a> 태그에는 두 개의 속성, href와 target이 사용되었습니다.
href: 링크의 목적지를 정의하는 속성.target: 링크를 새 창에서 열지 여부를 정의하는 속성.
2. HTML 전역 속성 (Global Attributes)
전역 속성은 HTML의 모든 태그에서 사용할 수 있는 속성입니다. 이 속성은 특정 요소에 적용되는 스타일, 행동 또는 식별자를 정의하는 데 자주 사용됩니다.
| 속성 | 설명 | 예시 |
|---|---|---|
id |
요소의 고유 식별자입니다. CSS나 JavaScript에서 참조할 때 사용됩니다. | <div id="main"></div> |
class |
여러 요소에 공통으로 적용할 수 있는 클래스 이름을 지정합니다. | <p class="text-center"></p> |
style |
인라인 스타일을 적용할 수 있는 속성으로, CSS 스타일 규칙을 정의합니다. | <h1 style="color: blue;"></h1> |
title |
요소에 마우스를 올렸을 때 나타나는 툴팁 텍스트를 설정합니다. | <img src="image.jpg" title="이미지 설명"> |
data-* |
사용자 정의 데이터를 저장할 수 있는 속성으로, data- 접두사를 사용합니다. |
<div data-user="John"></div> |
hidden |
해당 요소를 숨깁니다. 브라우저에 표시되지 않도록 설정합니다. | <p hidden>This text is hidden</p> |
tabindex |
요소의 탭 순서를 정의합니다. | <button tabindex="1">Click me</button> |
lang |
요소의 언어를 정의합니다. | <html lang="ko"></html> |
dir |
텍스트의 방향성을 설정합니다. ltr(왼쪽에서 오른쪽) 또는 rtl(오른쪽에서 왼쪽)로 설정합니다. |
<p dir="rtl">Right to Left</p> |
contenteditable |
요소를 편집 가능하도록 설정합니다. | <div contenteditable="true">Edit me</div> |
3. HTML 속성 유형
HTML 속성은 크게 기본 속성, 불리언 속성, 이벤트 속성, 사용자 정의 속성으로 나눌 수 있습니다.
3.1 기본 속성
기본 속성은 이름과 값을 가지며, 값을 통해 속성의 동작을 설정합니다.
<img src="image.jpg" alt="이미지 설명">
src: 이미지 파일의 경로.alt: 이미지가 표시되지 않을 때 대신 표시되는 텍스트.
3.2 불리언 속성
불리언 속성은 값을 가지지 않으며, 속성이 있으면 참(true), 없으면 거짓(false)으로 간주됩니다. 주로 요소의 상태를 정의할 때 사용됩니다.
<input type="checkbox" checked>
checked: 체크박스가 선택된 상태로 설정됨.
3.3 이벤트 속성
이벤트 속성은 JavaScript를 사용하여 사용자 상호작용에 반응하는 행동을 정의합니다. 마우스 클릭, 키보드 입력 등 다양한 이벤트를 처리할 수 있습니다.
<button onclick="alert('Clicked!')">Click me</button>
onclick: 버튼 클릭 시 이벤트를 처리하는 속성.
3.4 사용자 정의 속성 (data-* 속성)
data-* 속성은 요소에 추가 데이터를 저장하기 위한 사용자 정의 속성입니다. JavaScript를 통해 이러한 데이터를 동적으로 사용할 수 있습니다.
<div data-id="1234" data-role="admin"></div>
data-id: 사용자 정의 데이터로 ID를 저장.data-role: 사용자 역할을 저장하는 사용자 정의 데이터.
4. 자주 사용하는 HTML 속성
HTML 태그마다 특정 속성이 있으며, 아래는 다양한 HTML 요소에서 자주 사용되는 속성들입니다.
| 태그 | 속성 | 설명 | 예시 |
|---|---|---|---|
<a> |
href |
링크할 URL을 지정합니다. | <a href="<https://www.example.com>">Link</a> |
<a> |
target |
링크를 열 위치를 지정합니다. _blank로 설정하면 새 창에서 열립니다. |
<a href="#" target="_blank"></a> |
<img> |
src |
이미지 파일의 경로를 지정합니다. | <img src="image.jpg"> |
<img> |
alt |
이미지가 표시되지 않을 때 보여줄 텍스트를 지정합니다. | <img src="image.jpg" alt="설명"> |
<input> |
type |
입력 필드의 유형을 정의합니다. (텍스트, 비밀번호, 이메일 등) | <input type="text"> |
<input> |
placeholder |
입력 필드에 힌트 또는 안내 텍스트를 표시합니다. | <input placeholder="Enter your name"> |
<input> |
value |
입력 필드에 미리 설정된 값을 지정합니다. | <input value="Hello"> |
<button> |
disabled |
버튼을 비활성화합니다. | <button disabled>Disabled Button</button> |
<form> |
action |
폼 데이터를 제출할 URL을 지정합니다. | <form action="/submit"></form> |
<form> |
method |
폼 데이터를 전송할 방식(GET 또는 POST)을 지정합니다. | <form method="post"></form> |
<iframe> |
src |
삽입할 외부 문서나 웹 페이지의 URL을 지정합니다. | <iframe src="<https://www.example.com>"></iframe> |
<iframe> |
width, height |
iframe의 크기를 지정합니다. | <iframe width="600" height="400"></iframe> |
5. HTML Input 속성
HTML <input> 요소에는 다양한 속성이 있으며, 이 속성들은 입력 필드의 유형, 제한 조건 및 기본값 등을 지정하는 데 사용됩니다.
| 속성 | 설명 | 예시 |
|---|---|---|
type |
입력 필드의 유형을 지정합니다. (텍스트, 비밀번호, 이메일 등) | <input type="email"> |
placeholder |
입력 필드에 표시될 안내 텍스트를 정의합니다. | <input placeholder="Enter your name"> |
value |
입력 필드의 초기 값을 지정합니다. | <input value="John"> |
required |
필수 입력 필드를 지정합니다. | <input required> |
min, max |
숫자 입력 필드의 최소값과 최대값을 설정합니다. | <input type="number" min="1" max="10"> |
maxlength |
입력 필드의 최대 입력 길이를 설정합니다. | <input type="text" maxlength="10"> |
disabled |
입력 필드를 비활성화합니다. | <input type="text" disabled> |
readonly |
입력 필드를 읽기 전용으로 설정합니다. | <input type="text" readonly> |
checked |
체크박스 또는 라디오 버튼을 기본 선택 상태로 설정합니다. | <input type="checkbox" checked> |
6. HTML 속성의 유효성
HTML5는 속성의 유효성을 검사하는 다양한 방법을 제공합니다. 예를 들어, required, minlength, maxlength와 같은
속성은 입력된 값이 조건을 충족하는지 검사할 수 있습니다. 또한, HTML5의 pattern 속성을 사용하면 정규 표현식을 통해 입력 값의 형식을 제한할 수 있습니다.
예시: 이메일 형식 검증
<input type="email" pattern="[a-z0-9._%+-]+@[