📌 전역 특성(Global attributes)
모든 HTML에서 공통으로 사용할 수 있는 특성 ! 일부 요소에는 아무런 효과도 없을 수 있음
✔️ id 속성
❓ 문서 전체에서 유일한 고유식별자( ID, identification )를 정의
- 하나의 요소에 하나의 이름만 사용 가능
- 문서 내에 같은 아이디 중복 사용 불가
- CSS, JavaScript에서
id를 활용하여 요소 선택 id,class이름 규칙- 대소문자 구분
- 공백이나 특수 문자 포함 불가
- 숫자나 문자로 시작, 숫자로만 이루어진 경우 사용 불가
<img src='./logo.png' id='logo' alt='logo' /> #logo {
width: 300px;
}✔️ class 속성
- 요소를 그룹화 또는 식별하기 위해 활용
id와 다르게 한 문서 내에서 같은class를 여러 번 반복하여 사용 가능- 여러 개의 요소에 동일한 style 과 script 를 적용할 때 용이
- 하나의 요소가 여러 개의
class를 가질 수 있음class="bgColor textColor"
- 공백이 들어가면 공백을 기점으로 다른 클래스명으로 인식
<div class='bgColor textColor'> .bgColor{
background-color: #B2CCFF;
}
.textColor{
color: #6699FF;
}✔️ style 속성
- 요소에 적용할 CSS 스타일 선언
- 가장 높은 style 우선순위를 가지므로, 별도의 style 문서가 존재한다면 사용을 지양
- 스크립트 이벤트가 필요할 때, 테스트를 할 때 등 사용
<p style="background-color: #B2CCFF;">
<span style="color: #6699FF;"> inline style </span> example
</p>✔️ title 속성
- 요소와 관련된 추가 정보를 제공하는 텍스트
- 마우스를 해당 엘리먼트 위에 올려놓았을 때 툴팁(tooltip)이 표시
- 웹 접근성(accessibility) 향상: 스크린 리더가 해당 요소의 목적을 정확하게 인식할 수 있도록 도움
- 보조 기술을 위해
iframe요소에 이름 부여 - 진짜
lable을 표시하지 못할 때에 대비해input요소에 프로그래밍을 통한 레이블 추가 table요소 컨트롤에 레이블 추가
- 보조 기술을 위해
✔️ lang 속성
- 요소 내의 텍스트를 컴퓨터가 어떤 언어로 읽어야 하는지 명시해주는 요소
- 스크린 리더가 음성으로 읽어줄 때 활용됨
<html lang=”ko”>로 전체 문서가 어떤 언어로 읽는지 설정: 부모의lang속성을 상속 !
✔️ data-* 속성
- 사용자 정의 데이터 속성을 지정
- HTML에 Javascript에서 이용할 수 있는 데이터를 저장할 수 있다.
- 어느 엘리멘트에나
data-로 시작하는 속성은 무엇이든 사용 가능
<div
id="test"
data-index="123"
data-name="test div"
data-parent="section">
...
</div>✔️ draggable 속성
- 요소가
Drag and Drop API를 사용 가능한지 여부를 지정 - 속성 값( default = auto || boolean )
auto: 브라우저 기본 동작을 따름, 텍스트 선택 영역, 이미지, 링크 외에는 드래그 불가true: 요소를 드래그 할 수 있음false: 요소를 드래그 할 수 없음<div draggable="true">- cf. JavaScript 에서 요소를 클릭, 드래그, 놓음 등을 전부 인식 가능하므로 각 이벤트마다 행동 정의 가능
✔️ tabindex 속성
- tab 키를 사용하여 웹페이지 탐색 시 포커스 가능 여부와 포커스 순서를 제어하기 위해서 사용
tabindex="-1"을 지정하여 순서에서 제외 가능- tab키로 원래 포커스가 불가능한 요소를 대상으로
tabindex="양수"을 지정하여 포커스 가능
<div tabindex="2" /> // tab 2
<div /> // tab 3
<div tabindex="1" /> // tab 1
<div /> // tab 4