HTML 전역속성 탐방하기 🎀

HTML 전역 속성

전역 속성은 모든 HTML 요소에 사용할 수 있는 속성입니다. (일부 요소에서는 효과가 없을 수 있지만, 문법적으로는 사용 가능)

 

핵심 전역 속성

• accesskey: 요소에 대한 단축키를 지정합니다.
  • 브라우저 및 운영체제에 따라 단축키 조합이 다를 수 있습니다. (접근성 문제 유발 가능성)
  • 사용자에게 단축키 정보를 명확하게 제공해야 합니다.

 

• autocapitalize: (모바일 장치 가상 키보드) 텍스트 입력 시 자동 대문자 변환 방식을 제어합니다.
  • off / none: 자동 대문자 변환 없음.
  • on / sentences: 문장의 첫 글자를 대문자로.
  • words: 각 단어의 첫 글자를 대문자로.
  • characters: 모든 글자를 대문자로.

 

• autofocus: 페이지 로드 시 요소에 자동으로 포커스를 줍니다.
  • 한 페이지에 하나의 요소에만 사용해야 합니다.
  • 사용자의 의도와 다른 동작을 유발할 수 있으므로 신중하게 사용해야 합니다.

 

• class: 요소에 하나 이상의 클래스 이름을 지정합니다 (공백으로 구분). CSS 스타일 적용 및 JavaScript에서 요소 선택 시 사용.

 

• contenteditable: 사용자가 요소의 내용을 편집할 수 있는지 여부를 지정합니다.
  • true / 빈 문자열: 편집 가능.
  • false: 편집 불가능.
  • plaintext-only (실험적): 텍스트만 편집 가능 (HTML 태그 무시).

 

• data-*: 사용자 정의 데이터를 요소에 저장합니다. JavaScript에서 이 데이터에 접근하여 활용할 수 있습니다.
  • data- 접두사 다음에 유효한 이름을 붙여 사용 (예: data-my-custom-attribute).

 

• dir: 텍스트 방향을 지정합니다.
  • ltr: 왼쪽에서 오른쪽 (left-to-right).
  • rtl: 오른쪽에서 왼쪽 (right-to-left).
  • auto: 브라우저가 자동으로 텍스트 방향을 판단.

 

• draggable: 요소가 드래그 가능한지 여부를 지정합니다.
  • true: 드래그 가능.
  • false: 드래그 불가능.
  • auto: 브라우저 기본 동작 따름.

 

• enterkeyhint: (모바일 장치 가상 키보드) Enter 키의 동작을 나타내는 아이콘 또는 레이블을 설정합니다.
  • enter: 삽입
  • done: 완료
  • go: 이동
  • next: 다음
  • previous: 이전
  • search: 검색
  • send: 보내기

 

• hidden: 요소를 숨깁니다. (렌더링되지 않음)
  • CSS의 display: none과 유사하지만, hidden 속성은 의미론적으로 요소를 숨기는 것입니다. (예: 아직 관련 없는 콘텐츠)

 

• id: 문서 내에서 고유한 식별자를 요소에 부여합니다. CSS 스타일 적용, JavaScript에서 요소 선택, 앵커(anchor)의 대상으로 사용.

 

• inert: (실험적) 요소와 그 하위 요소를 비활성화합니다. 클릭, 포커스 등 사용자 상호작용 불가.

 

• inputmode: (모바일 장치 가상 키보드) 사용자 입력 시 어떤 종류의 키보드를 표시할지 힌트를 제공합니다.
  • none: 키보드 없음.
  • text: 기본 텍스트 키보드.
  • tel: 전화번호 키보드.
  • url: URL 키보드.
  • email: 이메일 주소 키보드.
  • numeric: 숫자 키보드.
  • decimal: 소수점 포함 숫자 키보드.
  • search: 검색 키보드.

 

• is: (실험적) 표준 HTML 요소를 사용자 정의 요소처럼 동작하게 합니다. (웹 컴포넌트 관련)

 

• itemid, itemprop, itemref, itemscope, itemtype: 마이크로데이터(microdata)를 사용하여 웹 페이지에 구조화된 데이터를 추가하는 데 사용됩니다. (검색 엔진, 웹 크롤러에 추가 정보 제공)

 

• lang: 요소의 언어를 지정합니다. (예: ko (한국어), en (영어)) 접근성 측면에서 중요하며, 스크린 리더가 올바른 발음으로 콘텐츠를 읽도록 도와줍니다.

 

• nonce: (콘텐츠 보안 정책, CSP 관련) 인라인 스크립트/스타일의 실행을 허용하기 위한 암호화된 일회용 토큰.

 

• part: (실험적, 웹 컴포넌트 shadow DOM 관련) shadow DOM 내의 요소에 클래스 이름을 부여하여 외부에서 스타일을 적용할 수 있게 합니다.

 

• popover: (실험적) 요소를 팝오버(popover)로 만듭니다.
  • popover="auto": 닫기 버튼이나 외부 클릭으로 닫을 수 있다.
  • popover="manual": 수동으로만 닫을 수 있다.

 

• slot: (웹 컴포넌트 shadow DOM 관련) shadow DOM 내에서 외부 콘텐츠를 삽입할 위치(슬롯)를 지정합니다.

 

• spellcheck: 요소의 맞춤법 검사 여부를 지정합니다.
  • true: 맞춤법 검사 수행.
  • false: 맞춤법 검사 수행 안 함.

 

• style: 요소에 인라인 CSS 스타일을 적용합니다. (일반적으로는 외부 CSS 파일 사용 권장)

 

• tabindex: 요소의 탭 순서를 지정합니다.
  • 0: 브라우저 기본 탭 순서에 포함.
  • 양수: 탭 순서를 명시적으로 지정 (낮은 숫자부터).
  • -1: 탭 순서에서 제외 (포커스는 가능).

 

• title: 요소에 대한 추가 정보를 제공하는 툴팁(tooltip) 텍스트를 지정합니다.

 

• translate: 페이지 번역 시 요소의 내용을 번역할지 여부를 지정합니다.
  • yes: 번역.
  • no: 번역 안 함.