html의 모든 요소에 쓰일 수 있는 공통적인 속성(attribute)들을 정리하였다.

---

id와 class

id와 class는 html 요소를 구분하기 위해 흔히 사용되는 속성이다.
CSS 스타일 적용, js에서 요소 지정 등에 쓰인다.

id

<[태그_이름] id="[id 이름]"> ...

• 아이디(id)의 이름은 모두 달라야 한다. 같은 이름을 여러 번 사용할 수 없다.
• id 값을 이용하면 URI 프래그먼트를 사용할 수 있다.

class

<[태그_이름] class="[class 이름]"> ...
<[태그_이름] class="[class 이름1] [class 이름2] ..."> ...

• 아이디(id)와는 다르게 여러 요소들을 지정할 수 있고, 같은 이름을 여러 번 쓸 수 있다.
• 클래스(class)를 여러 개 적용하고 싶을 경우, 따옴표 안에 띄어쓰기로 분리하여 작성한다.

---

비표준 속성

비표준 속성은 CSS와 연동하여 선택자로 활용하거나, JS와 연동하여 값을 표시하거나 구분하는 용도로 활용한다.

dataset

다만 이런 비표준 속성은 내가 쓴 비표준 속성 이름이 만일 나중에 표준 속성으로 생긴다면 곤란해진다. 이럴 때 사용하는 것이 dataset property이다.

• data-로 시작하는 속성은 js 기준으로 모두 dataset이라는 property 아래로 들어간다.

html

<!--사용-->
<[태그_이름] data-[이름]="[값]">

Javascript

//접근
[요소].dataset.[이름]

---

이벤트 핸들러 속성

이벤트(event)를 핸들링 하기 위해 사용하는 속성들. 이벤트 속성의 이름은 on과 이벤트 이름을 붙여서 쓰면 된다.
(예시: click 이벤트의 이벤트 속성은 onclick)

<[태그_이름] on[이벤트 이름]="[값]">