반응형
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 속성 값을 변경하면 특성으로 인한 동작을 재정의함!
반응형
