💡 HTML 전역 속성
- 전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성이다.
- 일부 요소에는 아무런 효과도 없을 수 있다.
- 전역 특성은 모든 HTML 요소에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있다.
title
- 요소의 정보나 설명을 지정
- 요소에 마우스 커서를 올리면
title속성에 들어간 텍스트가 보임<a href="https://www.naver.com" title="네이버로 이동">네이버</a>
네이버
style
- 스타일은 별도의 파일에 정의하는 것으로 권장됨
- 요소에 적용할 스타일(CSS)을 지정
class
- 요소를 지칭하는 중복 가능한 이름
- CSS 또는 JavaScript로 제어하기 위한 Tag
- 대소문자를 구분하지 않음
- 하나의 요소가 여러 클래스를 가질 수 있음, 공백으로 구분
- class="VE Log" -> VE와 Log, 2개 클래스를 가진 Tag
<span>요소</span>를 지칭하는 <span class="red">중복</span> 가능한 이름
CSS👇
.red {
color: red;
}
<<출력>>
요소를 지칭하는 중복 가능한 이름
id
- 요소를 지칭하는 고유한 이름
- 하나의 요소에 하나의 이름만 사용 가능
- CSS에서 제어 할때는 class를 제어하는 것과 비슷함
<span id="blue">요소</span>를 지칭하는 <span class="red">중복</span> 가능한 이름
CSS👇
.red {
color: red;
}
#abc {
color: blue;
}
<<출력>>
요소를 지칭하는 고유한 이름
data
- 요소에 데이터를 지정
data-{사용자 지정}형태로 사용- HTML에서 body Tag가 만들어지기 전, 호출되므로
defer라는 속성을 추가<HTML>
<head>
<script defer src="main.js"></script>
</head>
<body>
<div data-wepsite="naver">네이버</div>
<div data-wepsite="google">구글</div>
</body><JavaScript>
const els = document.querySelectorAll('div')
els.forEach(el => {console.log(el.dataset.fruitName)})<출력>
naver
google
