HTML 요소 속성이란? 속성 이해하기

HTML 속성은 요소에 대한 추가적인 정보를 정의할 수 있습니다. 요소마다 속성을 부여할 수 있습니다.

HTML로고

HTML 속성 기본 구조

<태그 속성="값">내용</태그>

'속성'은 속성 이름, ""은 해당 속성의 값입니다.


예를들어 아래의 HTML 코드에서 'img' 태그는 'src'와 'alt'라는 두 개의 속성을 가지고 있습니다.

<img src="이미지.jpg" alt="강아지 이미지">

여기서 'src' 속성은 이미지의 위치(소스)를, 'alt' 속성은 이미지가 표시되지 못할 때 보여주는 대체 텍스트입니다.

 

HTML 속성 종류

HTML 속성은 크게 세가지로 분류할 수 있습니다.

  • 글로벌 속성: 모든 HTML 요소에서 사용할 수 있습니다. class, id, style 등이 있습니다.
  • 이벤트 속성: 이벤트 속성은 웹 페이지에서 발생하는 사용자의 행동인 클릭, 마우스 오버 등에 대응하는 이벤트를 다룹니다. onclick, onload, onerror 등이 있습니다.
  • 특정 요소 속성: 요소에만 적용되는 속성입니다. 예를 들어 href<a> 태그에서 srcalt<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>
반응형