💡 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라는 값은 적용되지 않는다.
