HTML 속성 정리

HTML 속성

• HTML 요소의 동작이나 모양을 제어하는 데 사용됨

---

HTML 속성 종류

---

• id
  • 문서 내에서 특정 요소를 고유하게 식별하는 데 사용
  • 보통 자바스크립트와 CSS 에서 요소를 참조하거나 스타일을 적용할때 유용함
• class
  • 요소에 하나 이상의 클래스를 지정하여 스타일을 적용할 수 있음
  • 동일한 클래스 이름을 가진 여러 요소에 스타일을 적용할 수 있음
  • 보통 자바스크립트와 CSS에서 요소를 그룹화하거나 공통 스타일을 적용할때 사용
  • 예시) 

<div class="container">컨테이너 내용</div>
<style>
  .container {
    background-color: lightgrey;
  }
</style>

 

• href
  • <a> 태그에서 링크의 URL을 지정함
  • 하이퍼링크를 만들 때 사용됨
• src
  • 외부 자원의 URL 지정
  • 예시)

<img src="logo.png" alt="로고 이미지">
<script src="app.js"></script>

• alt
  • <img>태그에서 이미지가 로드되지 않을 때 대체 텍스트를 제공하는 속성
  • 시각 장애인 사용자를 위한 대체 정보 제공
  • 예시)

<img src="logo.png" alt="회사 로고">

• value
  • <input> 및 <option> 태그에서 사용됨
  • 입력 필드나 선택 항목의 기본값을 설정함
  • 예시)

<input type="text" value="기본값">
<select>
  <option value="1">옵션 1</option>
  <option value="2" selected>옵션 2</option>
</select>

• type
  • 요소의 유형 정의
  • input, button, form 등에서 사용됨
• name
  • input, select, textarea 등의 폼 요소에서 폼 데이터의 이름 지정
  • 예시)

<input type="text" name="username">
<textarea name="comments"></textarea>

• placeholder
  • input 및 textarea 요소에 표시되는 안내 텍스트
  • 사용자가 입력하기 전까지 나타남
  • 주로 입력 필드에 대한 힌트를 제공하거나 예시를 제공할 때 사용됨
  • 예시)

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

• checked
  • radio & checkbox 요소에서 기본적으로 체크된 상태를 설정
  • 예시)

<input type="checkbox" checked> 동의합니다
<input type="radio" name="gender" value="male" checked> 남성

• disabled
  • 요소를 비활성화하여 사용자 입력을 받지 않도록 함
  • 예시)

<input type="text" disabled>
<button disabled>비활성화된 버튼</button>

• readonly
  • 입력 필드를 읽기 전용으로 설정하여 사용자가 값을 수정할 수 없도록 함
  • 값만 읽을 수 있도록 설정할 때 사용
  • 예시)

<input type="text" value="읽기 전용" readonly>

 

<요약>

id: 요소의 고유 식별자
class: 요소에 적용할 스타일 클래스
style: 인라인 스타일
href: 링크 URL
src: 외부 자원의 URL
alt: 이미지 대체 텍스트
title: 툴팁 텍스트
value: 입력 필드 및 선택 항목의 값
type: 입력 요소의 유형
name: 폼 데이터의 이름
placeholder: 입력 필드의 힌트 텍스트
checked: 체크박스 및 라디오 버튼의 기본 체크 상태
disabled: 비활성화 상태
readonly: 읽기 전용 상태