< 개념 정리 >
- HTML 속성(Attribute): HTML 태그에 추가적인 정보를 제공하는 key-value 쌍 (예: 속성명="값")
- 역할: 태그의 동작, 스타일, 데이터 등을 정의하거나 제어
- 작성 규칙:
- 속성은 시작 태그 안에 작성
- 속성명은 소문자 권장, 값은 따옴표로 감쌈 ("" 또는 '')
- 주요 속성 예시:
- id: 요소의 고유 식별자
- class: 스타일링이나 스크립트를 위한 그룹 식별자
- src: 이미지, 비디오 등의 소스 경로
- alt: 대체 텍스트 (접근성 중요)
- href: 링크 URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 속성에 대해 알아보자</title>
<!-- 내부 스타일 시트 선언 -->
<style>
/* css 주석 */
.info-text {
color: blueviolet;
}
</style>
</head>
<body>
<!-- 각 태그에 속성이란 것들을 설정할 수 있다. -->
<!--1. id 속성: 요소를 고유하게 식별할 수 있는 속성이다. -->
<h1 id="main-title" style="color: red;" >HTML 속성 배우기</h1>
<h2 id="main-title2">id 속성 확인(렌더링되는 페이지에 같은 id 값을 할당해서는 안된다)</h2>
<!--2. class 속성: 여러 요소에 공통된 값을 지정할 수 있다. -->
<p class="info-text">이것은 첫번째 문단 입니다.</p>
<p class="info-text">이것은 두번째 문단 입니다.</p>
<!--3. src와 alt 속성: 경로(이미지 파일 경로 - alt 대체 속성) -->
<img src="../ch02/img/sample.png" alt="배경이미지">
<!--4. href 속성: 링크 연결 -->
<a href="https://www.naver.com/" target="_blank">네이버 사이트로 이동하기</a>
<!--5. style 속성: 인라인 형식으로 css 스타일 적용 -->
<div style="color: blue;font-size: 22px;">스타일 속성 테스트</div>
<!--6. data- 속성: 사용자 정의 데이터 저장 -->
<button data-my="asd1234" ondblclick="alert('클릭됨')">버튼</button>
</body>
</html>