HTML 전역 속성이란?
전역 속성 = 전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성이다.
그러나 일부 요소에는 아무런 효과도 없을 수 있다.
전역 특성은 모든 HTML 요소에 지정할 수 있으며,
심지어 표준에 명시되지 않은 요소에도 지정할 수 있다.
id 속성
id: 문서 전체에서 유일한 고유식별자(ID)를 정의한다.
-
id는 고유식별자 (Identification)이다. -
하나의 요소에 하나의 이름만 사용할 수 있다.
🚫문서 내에서 이름을 겹치게 사용할 수 없다. -
고유식별자의 목적
1. 프래그먼트 식별자를 사용해 요소를 가리킬 때.
2. 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위해. -
id속성의 값이 공백(스페이스, 탭 등)을 포함해서는 안된다.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/id
class 속성
class: 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않는다.
클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 document.getElementsByClassName() 같은 메서드를 통해 요소에 접근할 수 있는 방법이다.
-
id와 다르게 한 문서 내에서 같은class를 여러 개 쓸 수 있다. -
하나의 요소가 여러 클래스를 가질 수 있다.
-
여러 개의 style 과 script 를 적용하기 용이하다.
-
공백이 들어가면 공백을 기점으로 다른 클래스명으로 인식한다.
ex) class="hi hello" --> hi 와 hello 두 개의 클래스를 가짐.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/class
style 속성
style: 요소에 적용할 CSS 스타일 선언을 담는다.
-
스타일은 별도의 파일에 정의하는 것이 권장된다.
-
html 문서에 직접 작성하는
style속성과<style>태그는
주로 테스트 등 빠른 스타일링을 위한 목적으로 사용된다. -
가장 높은 style 우선순위를 가지므로, 별도의 style 문서가 존재한다면 사용을 지양하자.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/style
title 속성
title: 요소와 관련된 추가 정보를 제공하는 텍스트를 나타낸다.
-
요소에 마우스 커서를 올리면
title속성에 들어간 텍스트가 말풍선으로 뜬다. -
<pre>태그처럼 개행과 공백을 그대로 읽는다. -
요소가
title속성을 가지고 있지 않을 땐 부모 요소로부터 상속한다.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/title
lang 속성
lang: 요소 내의 수정 불가 또는 수정 가능한 텍스트가 사용해야 하는 언어를 정의한다.
-
html 문서 시작 시
<html>태그에 해당 문서가 어떤 언어로 작성되어있는지 나타낸다. -
lang의 디폴트값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋다. -
부모의
lang속성을 상속받는다.
따라서 전체 혹은 부분적으로 적용이 가능하다.
주요 언어 코드
- 한국어 : ko
- 영어 : en
- 중국어 : zh
- 일본어 : ja
- 독일 : de
- 프랑스 : fe
- 스페인 : es
- 러시아 : ru
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang
데이터 속성
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었다.
-
data-*: 표준이 아닌 속성이나 추가적인 DOM 속성이다.
data-[사용자 지정명]형태로 사용한다. -
Node.setUserData() 과 같은 다른 조작을 하지 않고도 추가 정보를 저장할 수 있도록 해준다.
-
어느 엘리멘트에나
data-로 시작하는 속성은 무엇이든 사용할 수 있다. -
화면에 보이지 않게 글이나 추가 정보 데이터를 엘리멘트에 담아 놓을 수 있다.
✅ 추후 JavaScript 혹은 CSS 에서 해당 데이터에 접근이 가능하다.
Example
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>🦊 MDN Link : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
draggable 속성
draggable: 요소의 드래그 가능 여부를 나타내는 열거형 특성이다.
네이티브 브라우저 동작 방식과 HTML Drag and Drop API 모두 통제한다.
-
draggable은true/false값 중 하나를 가질 수 있다.
ex)<img draggable="false"> -
draggable을 지정하지 않은 경우의 디폴트값은auto이며, 브라우저 기본 동작을 따른다.
텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다.
Tip) JavaScript 에서 요소를 클릭, 드래그, 놓음 등을 전부 인식 가능하다.
따라서, 각 이벤트마다의 행동을 정의할 수 있다.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/draggable
hidden 속성
hidden: 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 Boolean 특성이다.
-
브라우저는
hidden속성을 설정한 요소를 렌더링 하지 않는다.
즉, 화면에 표시되지 않는다. -
디폴트 값은
false이다. -
F12-개발자 도구에서 확인 가능하므로 중요한 정보는 저장하지 말도록 하자! -
hidden속성을 가진 요소의CSS-display속성 값을 변경하면 특성으로 인한 동작을 재정의한다.
ex)display: flex를 지정한 요소는hidden특성이 존재하더라도 화면에 보이게 된다.
🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/hidden
