HTML 전역 속성

Global attribute :

HTML 요소들에는 속성을 적용할 수 있다.

각 요소마다 사용할 수 있는 속성이 다양하게 있다.

그 중 모든 요소에 사용할 수 있는 속성을 전역 속성이라고 한다.

주요 전역 속성

style, class, id, tabindex, title, data-xxx

style

: 인라인으로 요소에 직접 css 스타일을 선언할때 사용한다.

<div style="width:10px; height:10px; border:1px solid red;"></div>

인라인 CSS 장단점

장점

문서에서 높은 우선 순위 또는 특수성을 갖는 스타일이 적용이 된다.

외부 css 파일로 이동하지 않고 바로 스타일 적용이 가능하다.

단점

각각 하나하나 인라인 스타일을 적용하기 때문에 수정이 필요할 때 모든 스타일을 하나하나 수정해줘야한다.

html 문서 코드량이 많아지고 복잡해진다.

가상 클래스 사용이 어렵다. (:hover, :active ..)

class

: 여러개의 엘리먼트를 하나의 이름으로 묶어 사용할 수 있게 한다.

<div class="contents red small"></div>

한칸씩 띄워 여러개의 class 이름을 부여할 수 있다.

class를 선택할 때는

.contents

와 같은 선택자로 사용할 수 있다.

id

: 유일한 이름을 부여하고 특정지어 사용할 수 있게 한다.

<div id="divBox"></div>

id를 선택할 때는

#divBox

과 같은 선택자로 사용할 수 있다.

tabindex

: tab키로 포커싱이 가능한 요소를 불가능하게 하거나 불가능한 요소를 가능하게 만든다.

포커싱이 불가능한 div 요소를

<div tabindex="0"></div>

tab으로 포커싱이 가능해진다.

tabindex 값을 -1로 하면 포커싱을 불가능하게 할 수 있다.

title

: 해당 엘리먼트 위에 올려놓았을 때 tooltip을 표시한다.

<div title="div box"></div>

data-

: dataset에 속성을 저장하여 사용할 수 있게 한다.

<div id="divBox" data-value="isTrue">

dataset에 저장된 속성 console 에서 확인하기

id를 사용해 선택하고 dataset 안에 넣어둔 value 값을 확인할 수 있다.

data- 속성 활용 문제점

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 말자!
(접근 보조 기술이 접근할 수 없기 때문이다.)

검색 크롤러가 데이터 속성의 값을 찾지 못한다.

인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않는다.
IE 10 이하를 지원하기 위해서는 대신 getAttribute()를 통해 데이터 속성을 접근해야 합니다.

JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조하다.

MDN