Part9. HTML의 전역 속성/특수기호

강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/
강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

 

1. HTML의 전역 속성

- 모든 HTML 요소에서 공통적으로 사용 가능한 속성

▪ class

- 공백으로 구분된 요소의 별칭을 지정

- CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근

- 별명을 설정

- class는 중복이 가능함

▪ id

- 문서에서 고유한 식별자(idenifier, ID)를 정의

- CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsById, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근

- 이름을 설정(고유함)

▪ style

- 요소에 적용할 CSS를 선언

- CSS의 인라인 작성 방식

▪ title

- 요소의 정보(설명)을 지정

▪ lang

- 요소의 언어(ISO 639-1)를 지정

- 전역 속성인데, 일반적으로 html태그의 속성을 많이 사용됨

▪ data-*

- 사용자 정의 데이터 속성을 지정
- HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용

▪ draggable

- 요소가 Drag and Drop API를 사용 가능한지 여부를 지정

▪ hidden

- 요소를 숨김

▪ tabindex

- Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정

- 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨

- 비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용

- tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능

- tabindex="1" 이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음

 

2. HTML의 특수기호

▪  

- 띄어쓰기를 여러 번 할 때 사용

▪ <  >

- 태그를 출력하려고 할 때

- <> 대신 &lt;&gt; 사용

 

나머지는 HTML Entity List 를 검색해서 필요한 거 사용하기