코딩스쿨

HTML Attributes

1. HTML Attributes란?

HTML 속성은 요소에 추가적인 기능이나 의미를 부여하는 방법입니다. 속성은 항상 시작 태그 내에서 사용되며, 이름="값" 형식으로 작성됩니다. 속성은 요소의 동작을 변경하거나 요소에 대한 추가 정보를 제공합니다.

2. HTML Attributes의 주요 특징

속성은 항상 시작 태그 내에서만 사용됩니다. 끝 태그에서는 사용되지 않습니다.
속성 값은 큰따옴표( " " )로 감싸야 합니다. 숫자나 문자열이 될 수 있으며, URL이나 색상 같은 정보도 포함됩니다.
속성은 여러 개 사용할 수 있습니다. 각 속성은 공백으로 구분됩니다.

<a href="https://www.example.com" target="_blank">Example 웹사이트</a>

3. 자주 사용하는 HTML Attributes

3.1 href (하이퍼링크 속성)

링크를 생성하는 <a> 요소에 사용되며, 클릭 시 이동할 목적지를 지정합니다.

<a href="https://www.example.com">Example 웹사이트</a>

3.2 src (이미지/미디어 소스 경로)

이미지(<img>), 비디오(<video>), 오디오(<audio>) 요소에 사용되며, 파일 경로를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

<video src="movie.mp4" controls></video>

3.3 alt (대체 텍스트)

이미지가 표시되지 않을 때 대체 텍스트를 제공하는 속성입니다. 스크린 리더에서 이미지 설명을 읽을 때도 사용됩니다.

<img src="image.jpg" alt="이것은 이미지입니다">

3.4 title (툴팁 텍스트)

요소에 마우스를 올렸을 때 나타나는 툴팁 텍스트를 지정합니다.

<p title="이것은 툴팁입니다">이 텍스트에 마우스를 올려보세요</p>

3.5 target (링크 열기 방식)

<a> 요소에서 사용되며, 링크를 클릭했을 때 새 창이나 새 탭에서 열지 여부를 결정합니다.

<a href="https://www.example.com" target="_blank">새 창에서 열기</a>

3.6 id (고유 식별자)

HTML 요소에 고유한 식별자를 부여합니다. 각 요소는 고유한 id를 가져야 하며, CSS나 JavaScript에서 요소를 참조할 때 유용합니다.

<div id="header">헤더 영역</div>

3.7 class (클래스)

여러 요소에 공통된 스타일을 적용하거나, JavaScript로 여러 요소를 그룹화하는 데 사용됩니다.

<div class="box">박스 1</div>

<div class="box">박스 2</div>

3.8 style (인라인 스타일)

요소에 직접 CSS 스타일을 적용할 때 사용됩니다. CSS를 인라인으로 설정할 수 있습니다.

<p style="color: blue; font-size: 16px;">파란색 텍스트</p>

3.9 disabled (비활성화)

입력 요소나 버튼을 비활성화할 때 사용됩니다. 비활성화된 요소는 사용자가 상호작용할 수 없습니다.

<input type="text" disabled>

<button disabled>제출</button>

4. 글로벌(Global) Attributes

모든 HTML 요소에서 사용할 수 있는 속성을 글로벌 속성이라고 합니다. 몇 가지 주요 글로벌 속성은 다음과 같습니다:

id: HTML 문서 내에서 요소를 고유하게 식별합니다.
class: 동일한 스타일을 적용하거나 특정 그룹화가 필요한 요소에 사용됩니다.
style: 요소의 인라인 스타일을 정의합니다.
title: 요소에 마우스를 올렸을 때 표시되는 설명 텍스트입니다.
data-*: 사용자 정의 데이터 속성을 저장할 때 사용됩니다.

<div data-user="JohnDoe" data-id="1234">사용자 정보</div>

5. HTML 속성의 사용 예시

5.1 링크에 속성 사용하기

<a href="https://www.example.com" target="_blank" title="Example 웹사이트로 이동">Example 웹사이트</a>

5.2 이미지에 속성 사용하기

<img src="image.jpg" alt="이미지 설명" width="300" height="200">

5.3 폼 요소에 속성 사용하기

<form action="/submit" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username" required>
    <input type="submit" value="제출">
</form>

코딩 스쿨 HTML