HTML 속성(Attribute)이란?

HTML 속성(Attribute)은 HTML 요소에 추가적인 정보를 제공하는 역할을 합니다. 속성은 항상 시작 태그 내부에 정의되며, 일반적으로 속성명="속성값" 형식으로 사용됩니다.

예를 들어, 링크를 생성하는 <a> 태그에서 href 속성은 사용자가 클릭할 때 이동할 주소를 지정합니다.

<a href="https://www.example.com">Example 링크</a>

1. HTML 속성의 주요 특징

  • HTML 태그에 부가적인 정보를 제공
  • 항상 시작 태그 내부에 작성
  • 속성 값은 큰따옴표("") 또는 작은따옴표('')로 감싸는 것이 권장됨
  • HTML5부터는 일부 속성(예: checked, disabled)은 속성명만 작성하는 것도 가능

2. HTML 속성의 종류

HTML 속성은 크게 전역 속성(Global Attributes)과 개별 태그 전용 속성(Specific Attributes)으로 나뉩니다.

① 전역 속성 (Global Attributes)

전역 속성은 대부분의 HTML 요소에서 공통적으로 사용할 수 있는 속성입니다.

속성 설명 예제
id HTML 요소에 고유한 식별자(아이디)를 부여 <p id="intro">소개글</p>
class CSS 스타일 적용을 위한 클래스 이름을 지정 <p class="text-bold">굵은 텍스트</p>
style 인라인 CSS 스타일 지정 <p style="color: red;">빨간 글씨</p>
title 마우스를 올리면 나타나는 설명 <p title="도움말">마우스를 올려보세요</p>
hidden 요소를 화면에 표시하지 않음 <p hidden>이 글은 보이지 않습니다</p>

② 개별 태그 전용 속성 (Specific Attributes)

어떤 HTML 태그에서만 사용할 수 있는 속성들이 있습니다.

  • <a> 태그의 href 속성: 이동할 링크 주소를 지정
  • <img> 태그의 src 속성: 이미지 파일의 경로를 지정
  • <input> 태그의 type 속성: 입력 필드의 타입을 지정 (text, password, email 등)

3. 예제 코드

다양한 속성을 사용한 HTML 코드 예제입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 속성 예제</title>
    <style>
      .highlight { color: blue; font-weight: bold; }
    </style>
  </head>
  <body>
    <h2 id="title" class="highlight" title="마우스를 올려보세요">HTML 속성 예제</h2>

    <a href="https://www.google.com" target="_blank">Google로 이동</a>

    <p style="color: red;">이 문장은 빨간색입니다.</p>

    <img src="example.jpg" alt="예제 이미지">

    <input type="text" placeholder="이름을 입력하세요">
  </body>
</html>

💡 결론

HTML 속성(Attribute)은 요소에 추가적인 정보를 제공하며, 웹 개발에서 매우 중요한 역할을 합니다.

전역 속성과 특정 태그 전용 속성을 잘 이해하고 활용하면 더욱 효율적인 HTML 문서를 작성할 수 있습니다. 🚀

반응형

'Frondend' 카테고리의 다른 글

[HTML] LocalStorage 와 SessionStorage  (0) 2025.02.20
[Frontend] Axios Interceptor vs Transform(Request/Response)  (0) 2025.02.18
[HTML/JavaScript] querySelector, getElementById, addEventListener  (0) 2025.02.18
[HTML] dl, dt, dd 태그  (2) 2025.02.18
[HTML/JavaScript] DOM 트리  (0) 2025.02.17

티스토리툴바