전역속성

전역속성

특정 태그에서만이 아니라, 전체 태그에서 사용할 수 있는 속성

1. id

• 고유 식별자
• HTML 문서 전체에서 고유한 값을 가져야 함
• 공백 불가, 숫자나 특수문자로 시작할 수 없음!
  

2. class

• 식별자
• HTML 문서 전체에서 고유값을 가질 필요 없음 → 같은 class가질 수 있음
• 공백 사용 가능 : class를 여러개 가질 때 사용
  

3. style

• 하나의 요소에만 style 적용할 때 사용
• style sheet에서 작성한 style보다 최우선되어 적용됨
  

4. title

• 하나의 태그에 추가적인 설명을 툴팁으로 적용(마우스 올리면 말풍선이 보여짐)
• 개행과 스페이스 모두 인식
  

5. lang

• 웹 접근성을 높이기 위한 수단
• html태그에서 lang 속성은 전체 문서가 어떤 언어로 이루어져 있는지 나타냄
• 상속 됨
• 부분적으로 특정 태그에서 다른 언어를 사용하게되면 명시해줘야 함
  

6. data

• 속성의 이름을 정해줄 수 있음 : data-*속성로 정의
• data-columns : 실제 존재하는 속성이 아님(속성을 만든 사람이 붙여준 것)
• 자바스크립트 적용시에 사용
  • 태그에 대한 정보가 필요할 때 사용(html 요소가 가지고 있어야 하는 정보를 넣는 속성) : 화면을 보는 사람들의 눈에는 보이지 않지만 자바스크립트가 해당 태그에 대한 정보를 이해하길 원할때 사용

    <article
        id="electric"
        data-columns="3"
        data-index-number="12314"
        data-parent="cars"
    >    
    </article>

  • 몇개의 columns을 갖고 있는지, index-number가 몇개인지 등
    

7. draggable

• 드래그가 가능한지 여부를 나타내는 속성
• true, false를 반드시 명시(boolean속성은 아님 → boolean속성인 경우 기본값은 true로 기재하지 않아도 됨)
• 자바스크립트와 관계가 있는 속성 → 이벤트에 따른 행동을 적용할 수 있음
  

8. hidden

• boolean
• 시각적으로도 스크린리더 등 다른 모든 표시 방식에서 숨겨짐
• 사용자에게 보이지 않길 원하는 요소를 hidden으로 처리
  • 그러나, 보안상의 정보를 숨기고 싶을때는 hidden 사용금지
  • 개발자 도구에서는 태그의 내용을 모두 볼수 있음