HTML 속성은 요소에 대한 추가적인 정보를 정의할 수 있습니다. 요소마다 속성을 부여할 수 있습니다.
![HTML로고](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
HTML 속성 기본 구조
<태그 속성="값">내용</태그>
'속성'은 속성 이름, "값"은 해당 속성의 값입니다.
예를들어 아래의 HTML 코드에서 'img' 태그는 'src'와 'alt'라는 두 개의 속성을 가지고 있습니다.
<img src="이미지.jpg" alt="강아지 이미지">
여기서 'src' 속성은 이미지의 위치(소스)를, 'alt' 속성은 이미지가 표시되지 못할 때 보여주는 대체 텍스트입니다.
HTML 속성 종류
HTML 속성은 크게 세가지로 분류할 수 있습니다.
- 글로벌 속성: 모든 HTML 요소에서 사용할 수 있습니다. class, id, style 등이 있습니다.
- 이벤트 속성: 이벤트 속성은 웹 페이지에서 발생하는 사용자의 행동인 클릭, 마우스 오버 등에 대응하는 이벤트를 다룹니다. onclick, onload, onerror 등이 있습니다.
- 특정 요소 속성: 요소에만 적용되는 속성입니다. 예를 들어 href는 <a> 태그에서 src와 alt는 <img> 태그에서 사용됩니다.
HTML 글로벌 속성
id 속성은 HTML 요소를 식별하는 데 사용되며 CSS나 JavaScript에서 요소를 찾을 때 이용합니다.
<p id="첫-단락">이것은 첫 단락입니다.</p>
class 속성은 스타일 시트와 JavaScript에서 특정 요소에 접근하거나 스타일을 적용하기 위해 사용됩니다. 한 요소는 여러 개의 클래스를 가질 수 있고 같은 클래스는 여러 요소에 적용될 수 있습니다.
<p class="중요 공지">이것은 중요한 공지입니다.</p>
style 속성을 사용하면 요소에 직접 CSS 스타일을 적용할 수 있습니다.
<p style="color:red">이것은 빨간색 단락입니다.</p>
title 속성은 요소에 대한 추가적인 정보를 제공하는 툴팁을 만듭니다.
<p title="이것은 툴팁입니다.">마우스를 올려 보세요.</p>
contenteditable 속성은 요소가 사용자에 의해 편집 가능하게 지정합니다.
<p contenteditable="true">이 텍스트를 편집해 보세요.</p>
lang 속성은 요소의 언어를 지정합니다.
<p lang="ko">이 텍스트는 한국어로 작성되었습니다.</p>
tabindex 속성은 키보드를 사용하여 요소를 탐색할 때의 순서를 지정합니다.
<input type="text" tabindex="1"> <input type="text" tabindex="2">
hidden 속성은 요소를 숨깁니다.
<p hidden>이 텍스트는 숨겨져 있습니다.</p>
HTML 이벤트 속성
onclick 속성은 사용자가 요소를 클릭했을 때 실행될 JavaScript를 정의합니다.
<button onclick="alert('안녕')">클릭하세요</button>
onload 속성은 객체가 로드되었을 때 실행될 JavaScript를 정의합니다.
<body onload="alert('페이지 로드됨')">...</body>
onmouseover, onmouseout: onmouseover 속성은 사용자의 마우스가 요소 위로 이동했을 때 onmouseout 속성은 마우스가 요소를 벗어났을 때 실행될 JavaScript를 정의합니다.
<div onmouseover="alert('안녕')" onmouseout="alert('잘가')">마우스를 올려 보세요.</div>
onkeydown, onkeyup, onkeypress: 이 세 가지 속성은 키보드 이벤트와 관련이 있습니다. onkeydown은 키를 누를 때, onkeyup은 키를 눌렀다 놓을 때, onkeypress는 키를 누르고 있을 때 실행될 JavaScript를 정의합니다.
<input type="text" onkeydown="alert('키를 눌렀습니다.')" onkeyup="alert('키를 놓았습니다.')" onkeypress="alert('키를 누르고 있습니다.')">
onfocus, onblur: onfocus 속성은 요소가 포커스를 얻었을 때, onblur 속성은 요소가 포커스를 잃었을 때 실행될 JavaScript를 정의합니다.
<input type="text" onfocus="alert('포커스를 얻었습니다.')" onblur="alert('포커스를 잃었습니다.')">
onsubmit 속성은 폼이 제출될 때 실행될 JavaScript를 정의합니다. 이 속성은 주로 유효성 검사에 사용됩니다.
<form onsubmit="return validateForm()"> <input type="text" name="name"> <input type="submit" value="제출"> </form>
HTML 특정 요소 속성
href 속성은 <a> 태그에서 사용되며 링크의 목적지를 지정합니다.
<a href="https://tip1spoon.tistory.com/">tip1spoon 블로그 방문하기</a>
src 속성은 <img>, <script>, <iframe> 등의 태그에서 사용되며 내장된 리소스의 URL을 지정합니다.
<img src="이미지.jpg" alt="강아지 이미지">
alt 속성은 <img> 태그에서 사용되며 이미지의 대체 텍스트를 제공합니다. 이미지가 표시되지 못할 때 이 텍스트가 사용자에게 보여집니다.
<img src="이미지.jpg" alt="강아지 이미지">
disabled 속성은 <input>, <button>, <textarea>, <select>와 같은 form 요소가 사용자에 의해 변경 또는 사용이 불가능하게 됩니다.
<input type="text" disabled>
placeholder 속성은 <input> 또는 <textarea> 요소에 대한 짧은 도움말이나 안내 텍스트를 제공합니다. 사용자가 아직 어떠한 정보도 입력하지 않았을 때 보여집니다.
<input type="text" placeholder="여기에 이름을 입력하세요.">
autofocus 속성은 페이지가 로드될 때 자동으로 특정 입력 요소에 포커스를 설정합니다.
<input type="text" autofocus>
multiple 속성은 <input> 요소에서 파일을 여러 개 선택할 수 있도록 허용합니다.
<input type="file" multiple>
checked 속성은 <input> 요소의 타입이 체크박스(checkbox)나 라디오 버튼(radio)일 때, 해당 요소가 기본적으로 선택된 상태로 표시됩니다.
<input type="checkbox" checked>