[HTML 개념잡기] HTML의 속성

6. HTML의 속성

 

1) 전역 속성

전역 속성은 문서 전체에 사용 가능하다.

✔ id, class : 식별자

id : 고유식별자

id 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의한다.

• 프래그먼트 식별자를 사용해 요소를 가리킬 때 사용
• 특정 요소를 식별하기 위해 사용함
• 특성 값에 공백이 들어가면 안됨
• 숫자, 특수문자로 시작하면 안됨(-, _, / 제외)

class

class 전역 특성은 공백으로 구분한 요소 클래스의 목록이다.

• CSS나 JavaScript에서 메서드를 통해 요소에 접근할 수 있음
• 여러 요소에 동일한 class를 적용할 수 있음
• 하나의 요소가 여러 개의 class 사용 가능. (공백으로 둘 수 있음)
• CSS보다 우선순위가 높음

 

 

✔ style

style 전역 특성은 요소에 적용할 CSS 스타일 선언을 담는다.

• 별도의 파일에 정의하는 것을 권장
• 빠른 스타일링을 위한 목적으로 사용됨

 

 

✔ title

title 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타낸다.

• 마우스 hover 시 title이 뜸
• 하위 요소의 title이 우선됨

 

 

✔ lang

lang 전역 특성은 요소 내 수정 불가한 텍스트의 언어와 수정 가능한 텍스트가 사용해야 하는 언어를 정의한다.

• 특성은 언어 하나를 정의할 수 있음
• 기본 값은 '알 수 없음'이므로 항상 적절한 값을 지정하는 것이 좋음
• 지정 안하면 부모 요소에서 받아옴

 

✔ data

data-* 속성은 표준이 아니지만 추가적인 DOM 속성, Node.setUserData()와 같이 다른 조작을 안하고도 HTML요소에 추가 정보를 저장할 수 있도록 한다.

• 속성의 이름을 정해줄 수 있음
• 직접적으로 접근하지 못하게 하지만 요소가 가지고 있는 정보를 얻기 위함

 

 

✔ draggable

draggable 전역 특성은 요소의 드래그 가능 여부를 나타내는 열거형 특성이다.

• 두 값 중 하나를 가진다.
• true: 요소를 드래그 할 수 있음
• false: 요소를 드래그 할 수 없음
• 열거형 특성으로 값 지정이 필수임

 

 

✔ hidden

hidden 전역 특성은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성이다.

• 브라우저는 hidden으로 설정한 요소를 렌더링 하지 않음
• 기본값은 false임
• 해당 요소를 추가하면 시각적 방식 외 스크린 리더 등 다른 모든 표시 방식에서 숨겨짐
• 중요한 정보를 숨길 때 사용하지 말 것
• hidden 특성을 가진 요소의 CSS display 속성 값을 변경하면 특성으로 인한 동작을 재정의함!