전역속성
전역속성은 어떤 태그에서도 전부 다 사용할 수 있는 속성입니다.
1. id 와 class 전역속성
id와 class는 식별자라고 불리우는 속성입니다. 차이점은 id는 고유 식별자로 id의 이름이 겹치게 작성을 할 수 없다는 것입니다.
1-1 id
id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다. 고유식별자의 목적은 프래그먼트 식별자를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.
또한 id의 특성의 값이 공백 없이 사용을 해야하며 또한 첫글자가 숫자나 특수문자를 사용할 수 없습니다.
1-2 class
class 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. id와 다르게 class는 여러가지 요소에도 적용을 할 수 있습니다. 또한 class의 특성의 값에 공백을 사용할 수 있습니다.
2. style 전역속성
head에서 사용하는 style태그와 다른 style속성입니다! style태그는 문서전체에 적용할 css문법을 html에 적용하기 위해 사용을했다면 style속성은 하나의 요소에만 스타일을 적용할 때 사용을 합니다. 물론 스타일을 별도의 파일에 정의하는 것이 권장됩니다.
3. title 전역속성
title 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다. title속성을 사용하면 추가적인 정보를 툴팁으로 나타내게 됩니다. 또한 pre처럼 title의 값에 공백이나 개행이 있으면 전부 인식을 해 출력을 합니다.
만약, 부모요소와 자식요소가 모두 title을 가지고 있다면 자식요소의 title이 툴팁에 우선적으로 나오게 됩니다. 즉 특성이 상속됩니다.
4. lang 전역속성
이전에 head에 들어가는 charset="utf-8"을 명시했습니다. 사람이 아닌 컴퓨터가 이해할 수 있는 언어를 명시하는 것이 charset이었습니다. 하지만 lang속성은 실제로 이 컨텐츠를 읽는 사람이 사용하는 언어를 명시를 합니다. 이는 웹 접근성을 높이기 위한 수단입니다.
<html lang="ko">만약 전체문서는 한글로 이루어져있지만 일부 문단이 영어로 작성되어 있다면 head부분에 ko로 명시를 하고 해당 태그에만 en으로 lang속성을 부분적으로 적용할 수 있습니다.
5. data 전역속성
데이터 속성은 'data-'로 사용이 되며, -이하로 속성의 이름을 사용자가 지정할 수 있습니다.
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>위 예시에서 data-가 붙어있는 속성들은 실제로 HTML 존재하는 속성이 아니며 사용자가 지정을 해 준 것입니다. 보통 자바스크립을 적용할 때 사용을 합니다. 예시를 보며 설명을 하면, article이 가지고 있는 정보를 최종적으로 사용자에게는 보이지 않게 하고 싶지만 자바스크립트가 정보를 읽어 갈 수 있도록 할 때 사용을 합니다. 정리를 하자면 자바스크립트를 사용해서 암시적으로 사용자의 눈에는 보이지 않지만 html요소가 가지고 있어야할 정보를 넣는 곳이라고 생각하면 쉽습니다.
6. draggable 전역속성
드래그가 가능한지, 가능하지 않은지에 대한 여부를 명시하는 속성입니다. draggable 특성은 불리언이 아니고 열거형 특성이므로, true 또는 false의 지정 또한 필수입니다. 그러므로 <img draggable>처럼 사용할 수 없고, 올바른 사용법은 <img draggable="false">입니다. draggable을 지정하지 않은 경우의 기본값은 auto로, 브라우저 기본 동작을 따릅니다. 자바스크립트를 이용해 이벤트에 따른 행동을 지정할 때 사용할 수 있습니다.
7. hidden 전역속성
불리언 속성입니다. 기본값은 false입니다. 시각적으로만 보이지 않게 하는 경우 hidden속성을 사용하는 것이 좋으며 보안상의 이유로 일시적으로 가리는 경우 hidden속성을 사용해서는 안됩니다. css display속성 값을 재정의할 수도 있습니다.
