💡 HTML 전역 속성이란?
모든 HTML 요소에서 공통으로 사용할 수 있는 속성들을 의미한다.
✏️ id
문서 내에서 유일한 고유 식별자(ID)를 의미한다.
아이디를 작성할 때는 영문자로 시작해야 하며, 띄어쓰기가 존재해서는 안 된다.
만약 기호를 사용해야 한다면, `혹은-`만 사용하는 걸 추천!_
✏️ class
문서 전체에서 접근이 가능하며, 중복 사용이 가능하다.
클래스의 이름 사이에 띄어쓰기가 존재해서는 안 되지만, 하나의 요소에 여러 개의 클래스를 적용하는 경우에는 공백으로 구분한다.
✏️ style
요소 내에 스타일 속성을 적용할 때 사용한다.
주로 하나의 요소에만 스타일을 적용하고 싶을 때, 스크립트 이벤트가 필요할 때, 테스트를 할 때 등 사용한다.
하지만 HTML 내에 스타일을 작성하면, 스타일 시트 파일보다 적용되는 순위가 높아서 스타일 시트의 선언이 무시당하는 경우가 있다. 그러니 특수한 상황이 아니라면 권장하지 않는다.
✏️ title
속성의 값으로 원하는 문자열을 작성할 수 있으며, 마우스를 해당 요소에 오버했을 때 요소에 대한 설명을 보여주기 위해 사용된다.
단, 해당 속성은 HTML의pre태그처럼 문자열을 인식하기 때문에 무분별한 띄어쓰기는 No...
✏️ lang
요소 내의 텍스트를 컴퓨터가 어떤 언어로 읽어야 하는지를 명시해주는 요소이다.
주로 스크린 리더가 음성으로 읽어주기 위해 사용한다.
<html lang=”ko”>로 설정하여 전체 문서가 어떤 문서를 읽는지 알려주어야 한다. 이렇게 설정하면, 자식 요소들에도 속성 값이 상속되기 때문에 꼭 넣어줘야 한다.
만약 부분적으로 사용해야 하는 경우에는 해당 요소에 부분적으로 사용하면 된다.
✏️ data-*
사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스이다.
data-사용자정의이름으로 개발자의 마음대로 속성을 만들 수 있게 해주며, 속성의 값이 필요한 경우 Javascript에서 데이터를 읽고 사용할 수 있게 해준다.
✏️ draggable
요소를 클릭하여 드래그가 가능한지 불가능한지에 대한 여부를 작성해주는 속성이다.
boolean타입으로 여부를 결정할 수 있다.
- 기본값은
auto이지만, 요소마다 다를 수 있기에 꼭boolean타입으로 작성해주어야 한다. - 자바스크립트의 이벤트를 위해서 주로 사용하는 속성이다.
✏️ hidden
요소를 숨기기 위한 속성으로, 기본값은
false이다.
이 속성을 이용하여 스크립트 이벤트를 작성하거나 사용자에게 보여주면 안 되는 요소에게 적용한다.
단, CSS의 dispaly 속성 중 flex라는 값은 적용되지 않는다.
