⭐ 속성
attribute
속성은 HTML 구성 요소 유형의 수정자 modifier
태그에 추가적인 정보를 제공하는 key-value
태그 안에 삽입된다.
속성값은 따옴표 "" ''로 둘러싸여 있다.
주요 속성
id 요소의 고유 식별자
class 스타일링이나 스크립트를 위한 그룹 식별자
src 이미지, 비디오 등의 소스 경로
alt 대체 텍스트
href 링크 URL
<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를 할당하면 안된다</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 속성: 링크 연결 -->
<!-- 5.style 속성: 인라인 형식으로 css 스타일 적용 -->
<div style="color: blue; font-size: 22px;">스타일 속성 테스트</div>
<!-- 6.data- 속성: 사용자 정의 데이터 저장 -->
<button data-my="asd1234" ondblclick="alert('클릭됨')">버튼</button>
</body>
'HTML CSS' 카테고리의 다른 글
| html/css) css 선택자 selector (0) | 2025.05.28 |
|---|---|
| html/css) 시멘틱 태그 semantic tag (0) | 2025.05.28 |
| html/css) table 태그로 표 만들기 (0) | 2025.05.28 |
| html/css) 태그 tag 활용 (0) | 2025.05.28 |
| html/css, Javascript 기초개념 (0) | 2025.05.27 |
