id
문서 전체에서 유일한 고유식별자(ID)를 정의합니다.
- 고유식별자 : 문서 통틀어서 겹치지않게 하나만 필요함
고유식별자의 목적은 프래그먼트 식별자를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.
같은 태그가 여러개 일 때, 하나만 지정하고 싶다면 id를 사용하면 됩니다.
문자, 숫자, '_', '-' 및 '.'를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.
class
id와 다르게, 여러개에 중복 입력이 가능하다.
하나의 class에도 스페이스 후 여러개가 가능하다. 즉, 여러 style을 적용할 수 있다.
style
주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.
class를 이용하여 css를 우선적으로 적용하는 게 좋습니다.
title
마우스를 올리면 설명하는 문구가 나타납니다.
pre요소 처럼, 줄바꿈이나 띄어쓰기도 인식을 합니다.
자신의 부모로부터 속성을 상속받을 수 있습니다.
만약,
<div title="바깥쪽 박스">
<div title="첫번째 요소"> 안녕하세요 ! </div>
<div> 반갑습니다. </div>
</div>로 되어 있다면, 하위 요소가 우선적으로 뜨므로
'안녕하세요!'에는 '첫번째 요소'가,
'반갑습니다.'에는 '바깥쪽 박스'가 뜨게 됩니다.
lang
사용해야 하는 언어를 정의합니다.
중간에 언어가 바뀐다면 부분적으로 적용하면 됩니다.
부모 속성을 상속합니다.
data
자바스크립트를 이용하여 사용자 눈에는 보이지않지만 HTML요소가 가지고 있어야할 정보를 넣는 곳
draggable
드래그 가능 여부를 나타내는 열거형 특성
true 또는 false의 지정 또한 필수입니다.
기본적으로 auto로 설정되어 있습니다.
hidden
해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다.
임의의 요소에 hidden을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.
hidden 특성을 가진 요소의 CSS display 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다.
예컨대 display: flex를 지정한 요소는 hidden 특성이 존재하더라도 화면에 보이게 됩니다.
