이전 연구를 통해 우리는 이미 HTML 태그에 대한 간단한 이해를 가지고 있으며 태그에 대한 추가 정보를 포함하는 일부 속성을 태그에 추가할 수 있음을 알고 있습니다. 예를 들면 다음과 같습니다.
- href 속성은 <a> 태그에 대한 링크 주소를 제공할 수 있습니다.
- src 속성은 <img> 태그의 이미지 경로를 제공할 수 있습니다.
- style 속성은 거의 모든 태그에 대한 CSS 스타일을 정의할 수 있습니다.
이 섹션에서는 HTML 태그 속성의 개념과 사용법에 대해 설명합니다.
속성이란 무엇인가
속성은 HTML 태그에 대한 몇 가지 추가 정보를 제공하거나 HTML 태그를 수정할 수 있습니다. 시작 태그에 속성을 추가해야 하며 구문 형식은 다음과 같습니다.
속성="값"
attr은 속성 이름을 나타내고 value는 속성 값을 나타냅니다. " "속성 값은 큰따옴표 또는 작은따옴표 로 묶어야 합니다 ' '.
큰따옴표와 작은따옴표 모두 속성 값을 둘러쌀 수 있지만 표준화와 전문성을 위해 가능한 한 큰따옴표를 사용하십시오.
태그에는 속성이 없거나 하나 이상의 속성이 있을 수 있습니다.
HTML 속성을 사용하는 예:
<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到百度，你已经在百度使用超过3年的时间了。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>특수 속성
많은 HTML 속성이 있으며 대략 두 가지 범주로 나눌 수 있습니다.
- 일부 속성은 대부분 또는 모든 HTML 태그에 적용되며 이러한 속성을 공통 속성이라고 합니다.
- 일부 속성은 하나 이상의 특정 HTML 태그에만 적용할 수 있으며 이러한 속성을 전용 속성이라고 합니다.
다음 예제와 같이 HTML의 <img> 태그에는 src 및 alt라는 두 개의 전용 속성이 있고 <a> 태그에도 href 및 target이라는 두 개의 전용 속성이 있습니다.
<img src="./logo.png" alt="百度Logo" width="100" height="50">
<a href="https://www.baidu.com" target="_blank">百度</a>일반 속성 소개
HTML 태그에는 id, title, class, style 등과 같은 몇 가지 일반 속성이 있습니다. 이러한 일반 속성은 대부분의 HTML 태그에서 사용할 수 있습니다. 아래에서 사용법을 간략하게 소개하겠습니다.
1) 아이디
id 속성은 레이블에 고유한 이름(식별자)을 부여하는 데 사용되며 CSS 또는 JavaScript를 사용하여 레이블을 조작할 때 id 속성을 통해 레이블을 찾을 수 있습니다.
태그에 대한 id 속성을 정의하면 다음과 같은 많은 편의를 제공할 수 있습니다.
- 태그에 고유 식별자로 id 속성이 있는 경우 id 속성을 통해 태그를 쉽게 찾을 수 있습니다.
- HTML 문서에 이름이 같은 태그가 여러 개 포함된 경우 id 속성의 고유성을 사용하여 태그를 쉽게 구분할 수 있습니다.
참고: id 속성의 값은 HTML 문서 내에서 고유해야 합니다.
샘플 코드는 다음과 같습니다.
<input type="text" id="username" />
<div id="content">百度</div>
<p id="url">https://www.baidu.com/</p>2) 클래스
id 속성과 마찬가지로 class 속성도 태그의 이름(식별자)을 정의할 수 있습니다. 차이점은 class 속성이 전체 HTML 문서에서 고유할 필요는 없으며 동일한 class 속성 값을 정의할 수 있다는 것입니다. 여러 태그의 경우. 또한 다음과 같이 HTML 태그에 대해 여러 클래스 속성 값을 정의할 수도 있습니다.
<div class="className1 className2 className3"></div>
<p class="content">百度</p>
<div class="content">https://www.baidu.com/</div>CSS 또는 JavaScript를 사용하여 HTML 태그를 조작할 때 class 특성을 사용하여 해당 HTML 태그를 찾을 수도 있습니다. class 속성이 고유하지 않기 때문에 CSS 또는 JavaScript를 통한 HTML 태그 작업은 동일한 이름의 class 속성을 가진 모든 태그에 적용됩니다.
3) 제목
제목 속성은 레이블의 내용을 설명하는 데 사용되며 마우스가 레이블 위로 이동하면 다음 예제와 같이 제목 속성의 값이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<a href="https://www.baidu.com" title="百度一下">百度一下</a>
</body>
</html>실행 결과는 아래 그림과 같습니다.
