[HTML]태그의 전역 속성

 전역 속성이란 전체 영역에서 모두 사용할 수 있는 속성입니다. 

 

• <태그 title="설명"></태그>

 title 속성은 요소의 정보나 설명을 지정하는 속성입니다. 웹 페이지에서 해당 요소에 마우스를 갖다대면 지정한 설명을 볼 수 있습니다. 

<div>
	<p title="hello">Hello!</p>
</div>

 

• <태그 style="스타일"></태그>

 style 속성은 요소에 적용할 스타일을 지정합니다. 이 방식을 인라인 방식의 스타일 선언 방식이라고 합니다. 

 

 하지만 이 방식은 지나치게 우선되어 있기 때문에 유지보수에 악영향을 미칠 수 있으므로 권장하진 않습니다. 

 

<div>
	<p style="color: red;">Hello!</p>
</div>

• <태그 class="이름"></태그>

 class 속성은 요소를 지칭하는 중복 가능한 이름을 지정합니다. 

 

 css나 javascript에서 요소를 정확하게 제어하기 위해 선택자로 사용됩니다. 

<!-- html -->
<div>
	<p class="hello">Hello!</p>
</div>

/* css */
.hello {
	color: red;
}

 

 

• <태그 id="이름"></태그>

 id 속성은 요소를 지칭하는 고유한 이름을 지정합니다. 

 

 class 속성과 유사하지만 주로 중복이 되면 안되는 핵심적인 요소에 사용합니다. 

 

<!-- html -->
<div>
	<p id="hello">Hello!</p>
</div>

/* css */
#hello {
	color: red;
}

 

 

• <태그 data-이름="데이터"></태그>

 

 

 

 

 data-이름 속성은 요소에 데이터를 지정하는 속성입니다. 이때 데이터는 기본적으로 text 형태로 지정합니다. 

 

 이 속성을 사용하여 javascript 내부에서 해당 data-이름을 가진 태그들에 접근할 수 있습니다. 

<!-- html -->
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

// javascript
const els = document.querySelectorAll("div");
els.forEach(el => {
	console.log(el.dataset.fruitName);
});

//apple
//banana