전역 속성

HTML 에서 속성이란
열리는 태그에 작성하는 href, target, src 같은 HTML 의 기능을 확장해주는 개념이다.

 

기본적으로 요소들은 자신이 사용할 수 있는 속성이 정해져 있다. (img태그: src, a태그: href 등)
하지만 전역 속성은 body 에서 사용하는 태그들의 전체 영역에서 언제든지 사용할 수 있다.

 

1.title

<a href="https://naver.com" target="_blank" title="네이버로 이동">NAVER</a>

 

요소의 정보나 설명을 지정한다.
해당 요소에 마우스를 올리면 일종의 tooltip 처럼 title 속성이 출력된다.

 

2. style

요소에 적용할 스타일을 지정한다.

 

3. class

요소를 지칭하는 중복 가능한 이름이다.

css, js 에서 해당 요소를 제어하기 위해서 사용한다.

 

4. id

요소를 지칭하는 중복이 불가능한 고유한 이름이다.

자주 사용하지는 않지만, 중요한 위치에 이름을 부여할 때에는 id 를 사용하는 것이 효율적이다.

해당하는 요소를 빠르게 찾아서 제어할 수 있기 때문이다.

 

5. data

<div data-cute-animal="cat">고양이</div>
<div data-cute-animal="dog">강아지</div>

<div data-이름=“데이터”></div> 형태로 사용하며,

요소에 데이터를 지정할 수있다.

const items = document.querySelectorAll('div');
items.forEach((item) => {
  console.log(item.dataset.cuteAnimal);
});

// cat
// dog

주의할 점은, javaScript 에서는 하이픈을 사용하는 이름 지정이 허용되지 않기 때문에

data 속성 이름을 카멜케이스로 작성해야 한다는 것이다.