ATTRIBUTES

  • bug_report

Attributes

애트리뷰트(attribute)는 요소의 속성을 의미한다. 요소가 가지고 있는 역할과 기능에 따라 해당 요소만이 특별히 갖는 애트리뷰트(attribute)가 있다. 그리고 비슷한 역할과 동작을 하는 요소들이 공통으로 갖는 애트리뷰트(attribute)도 있다.

한편 모든 HTML 요소가 공통으로 갖는 글로벌 애트리뷰트(global attributes)가 있다. 글로벌 애트리뷰트(global attributes)의 경우 HTML 전체 요소를 대상으로 하지만 모든 요소가 글로벌 애트리뷰트(global attributes)를 사용할 수 있는 것은 아니므로 요소별 레퍼런스를 살펴야 한다.

HTML 표준 체계가 W3C에서 WHATWG로 변경되면서 애트리뷰트(attributes)를 콘텐츠 속성(content attributes) 이라는 명칭으로 사용한다. 사실 의미는 그대로이지만 좀더 직접적인 표현을 사용하지 않았나 생각한다. 또한 IDL(interface description language) 속성이라는 용어도 등장한다. 쉽게 말하면 요소의 애트리뷰트(attribute)를 자바스크립트에서 해당 요소의 인터페이스에 있는 프로퍼티(property)로 사용할 수 있음을 의미한다. 여전히 자바스크립트에서는 프로퍼티(property)라 불리지만 HTML 관점에서는 콘텐츠 속성(content attribute)과 차별이 필요하기에 IDL 속성이라는 개념을 사용하는 것으로 판단된다. 요소의 콘텐츠 속성(content attribute)이 IDL 속성으로 지원하지만 콘텐츠 속성(content attribute)에는 없고 IDL 속성으로만 존재하는 것도 있다.

현재 섹션에서 소개하는 애트리뷰트(attributes)는 공통으로 사용하는 것을 위주로 추려 소개하고 있지만 사실은 더 많이 존재한다.  요소에서 사용 가능한 애트리뷰트(attributes)를 직접 확인하는 것이 좋은 방법이다.

카테고리

  • Implicit Use

    모든 HTML 요소가 기본적으로 사용하는 애트리뷰트(attributes)로 요소별로 나타나지 않으며 글로벌 애트리뷰트(global attributes)에도 나타나지 않는다.

    • class

      요소를 식별하는 중복될 수 있는 값을 지정한다.

    • id

      요소를 식별할 수 있는 고유 값을 설정한다.

    • slot

      쉐도우(shadow) 트리(tree)에서 정의된 슬롯(slot)을 요소에 할당한다.

  • Globals

    모든 HTML 요소에서 공통으로 사용하는 애트리뷰트(attributes)이다. 하지만 모든 요소가 사용할 수 없는 애트리뷰트(attributes)도 존재하므로 요소별 레퍼런스를 참고한다.

    • accesskey

      유저 에이전트가 요소를 활성화하거나 포커스를 맞추는 키보드 단축키를 생성하기 위한 가이드로 사용된다.

    • autocapitalize

      사용자가 입력 또는 편집시 텍스트 입력이 자동으로 대문자로 표시되는지 여부와 방법을 제어한다.

    • autofocus

      페이지가 로드되는 즉시 요소가 포커스를 갖는다. 입력 요소의 경우 입력 대기 상태가 된다.

    • contenteditable

      요소의 편집에 대한 여부와 방식을 지정한다.

    • data-*

      사용자 데이터를 지정하는 특별한 속성이다. DOM으로 데이터를 받아 자바스크립트 로직에 사용할 수 있다.

    • dir

      요소의 텍스트 콘텐츠의 방향을 지정한다.

    • draggable

      요소의 드래그 가능 여부를 제어한다.

    • enterkeyhint

      가상 키보드의 엔터(enter)키에 대해 표시할 작업 레이블(또는 아이콘)을 지정하는 열거형 애트리뷰트이다.

    • exportparts

      쉐도우(shadow) 트리에 존재하는 요소를 선택하고 스타일을 지정할 수 있는 식별값으로 사용된다.

    • hidden

      웹브라우저가 요소의 콘텐츠를 출력하지 않아야 함을 나타낸다.

    • inert

      트리 자손을 포함한 모든 요소들이 비활성된다.

    • inputmode

      콘텐츠를 입력하는 사용자에게 가장 유용한 입력 메커니즘의 종류를 지정하는 열거형 애트리뷰트이다.

    • is

      표준 HTML 요소를 사용자 정의 내장 요소처럼 작동하도록 지정한다. 

    • itemid

      고유한 전역 식별자 형식으로 마이크로데이터를 제공한다.

    • itemprop

      마이크로데이터(microdata)를 제공하기 위한 데이터의 이름을 정의한다.

    • itemref

      itemscope가 정의된 요소의 하위 데이터가 아닌 경우 원하는 항목에 연결을 정의할 수 있다.

    • itemscope

      마이크로데이터(microdata)의 범위에 해당하는 요소에게 선언한다.

    • itemtype

      itemscope 애트리뷰트가 정의된 데이터 구조에서 itemprop 애트리뷰트를 정의하는 데 사용되는 어휘의 URL을 지정한다.

    • lang

      요소의 콘텐츠에 대한 기본 언어를 지정한다. 유효한 BCP 47 언어 태그이거나 빈 문자열이어야 한다. 빈 문자열로 지정하면 기본 언어를 알 수 없음을 나타낸다.

    • nonce

      콘텐츠 보안 정책에서 주어진 요소에 대해 주어진 가져오기를 진행할 수 있는지 여부를 결정하는 데 사용할 수 있는 암호화 nonce(한번 사용하는 암호화 임시값)를 정의한다.

    • part

      쉐도우 트리의 모든 요소를 대상으로 사용 가능하며 쉐도우 트리 외부에 요소를 노출하는 데 사용된다.

    • popover

      요소가 명시적으로 표시될 때 까지 숨겨진 상태가 된다.

    • spellcheck

      요소의 콘텐츠에 대한 철자 오류 검사 여부를 지정한다.

    • style

      요소에 한정된 스타일을 빠르게 적용할 수 있다.

    • tabindex

      요소에 순차적으로 포커스(focus)를 허용하거나 방지할 수 있으며 순차적(또는 역순) 포커스(focus) 탐색을 위한 상대적 순서를 설정할 수 있다.

    • title

      요소에 대한 필요한 정보를 나타내는 텍스트이며 마우스 포인터를 올리면 말풍선으로 내용을 출력한다.

    • translate

      페이지가 현지화될 때 요소의 애트리뷰트 값과 하위 텍스트를 번역할지에 대한 여부를 지정한다.

  • Common by Element

    역할과 기능에서 비슷한 메커니즘(mechanism)을 갖는 요소별로 공통으로 사용하는 애트리뷰트(attributes)이다.

    • alt

      지정된 요소의 대체 텍스트를 나타낸다.

    • blocking

      외부 리소스를 가져올 때 특정 작업(예: render)을 차단해야 함을 명시적으로 설정한다. 기본값은 차단 가능성이 없는 상태이다.

    • crossorigin

      교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.

    • fetchpriority

      연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.

    • height

      요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

    • href

      유효한 URL을 설정한다. 설정된 URL은 요소에 따라 용도가 정해진다. 리소스를 가져오거나 하이퍼링크를 위한 목적지로 사용될 수 있다. 또한 참조되는 값으로 사용될 수 있다.

    • hreflang

      연결할 대상 리소스의 사용 언어를 나타낸다. 가능한 값은 BCP47에 따른다. 권고 사항으로 어떤 경우이든 반드시 강제하지 않는다. 리소스를 가져올 때 리소스 링크에 포함된 메타데이터가 아니라 리소스와 관련된 언어 정보만 사용하여 언어를 결정해야 한다.

    • integrity

      요청에 대한 무결성 메타데이터를 나타낸다.

      지원하는 해시(hash)는 sha256, sha384, sha512이다. 온라인에서 해시를 생성하는 서비스가 있으므로 참고한다. 오픈 소스 라이브러리를 CDN으로 서비스하는 경우에 기본적으로 무결성 해시 키를 제공하는 곳도 있다.

    • loading

      리소스의 로딩 시점을 설정한다.

    • media

      미디어쿼리 리스트(media query list)를 지정한다.

    • name

      요소를 식별할 수 있는 값을 지정한다.

    • referrerpolicy

      리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.

    • rel

      리소스를 연결하는 경우 관계를 정의한다. 연결 유형은 지정된 값을 공백으로 구분한 리스트로 작성해야 한다. 그러나 특별히 명시된 경우를 제외하고는 두 번 이상 지정할 수 없다.

    • src

      사용할 리소스의 경로를 설정한다.

    • target

      하이퍼링크 또는 기타 연결을 설정하는 경우 연결된 리소스를 여는 방식을 지정한다.

    • type

      가장 많이 사용되는 대표적인 text/html, text/css, text/javascript가 있고 그외의 유형은 Media Types를 참고하라.

    • width

      요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

  • Media Content

    미디어를 삽입하는 요소에서 공통으로 사용하는 애트리뷰트(attributes)이다.

    • autoplay

      비디오, 오디오 미디어에 대한 자동 재생을 설정한다.

    • controls

      비디오나 오디오를 제어하기 위한 UI를 표시한다.

    • loop

      비디오나 오디오 재생이 끝나면 처음으로 돌아가서 다시 재생한다.

    • muted

      오디오를 출력하지 않게 한다.

    • poster

      비디오가 재생되기 전 보여질 이미지를 명시적으로 지정한다.

    • preload

      미디오 요소(<audio>, <video>)로 사용되는 리소스에 대한 네트워크 작업 방식을 지정한다.

  • Form Content

    양식(form)  관련 요소에서 사용하는 애트리뷰트(attributes)이다. HTML 요소 중에서 양식 관련 요소에서 사용하는 애트리뷰트(attributes)의 비중이 높은 편이다.

    • Common

      양식(form)과 관련된 요소들이 공통으로 사용하는 애트리뷰트(attributes)이다.

      • autocomplete

        양식(form) 내에 있는 입력 요소들의 자동 채우기 설정을 지정한다. 자동 채우기는 다음과 같이 두 가지 방식이 가능하다.

        자동 완성 기대 맨틀(autofill expectation mantle)
        사용자로부터 예상되는 입력을 나타낸다. 설정하는 방법은 on 키워드는 활성되고 off 키워드는 비활성된다. 생략될 수 있으며 생략되거나 유효하지 않은 경우에 기본값은 on이다. type 애트리뷰트가 hidden이 아닌 경우 사용된다.
        자동 완성 앵커 맨틀(autofill anchor mantle)
        주어진 값의 의미를 설명한다. 자동 완성 세부 토큰으로 구성된 공백으로 구분된 토큰의 정렬된 집합인 값을 가져야 한다. onoff 키워드는 사용할 수 없다. type 애트리뷰트가 hidden인 경우 사용된다.

        지금까지의 내용은 HTML Standard 표준 사양에 나와있는 내용이지만 자동 완성 앵커 맨틀(autofill anchor mentle)에 대해 다음과 같은 이슈가 있다.

        • typehidden인 요소에게 자동 완성 기능 적용이 올바른가? [open issue]
        • 유저 에이전트에서의 동작 지원 여부가 명확하지 않다.

        현재로서는 이 이슈에 대해 앞으로 시간을 두고 확인이 필요해 보이며 일반적인 자동 완성 기능인 자동 완성 기대 맨틀(autofill expectation mantle)의 구현을 위한 애트리뷰트라고 보는 편이 나을 것 같다.

      • dirname

        양식(form)을 제출시 입력된 텍스트의 쓰기 방향(dir 애트리뷰트)을 참조한다. 유저 에이전트는 이 값을 사용하여 사용자가 입력한 값을 전송시 쓰기 방향 값도 함께 전송한다. 지정되지 않은 경우 유저 에이전트는 상위 요소의 dir을 사용한다. 그래도 명시된 방향을 알 수 없다면 유저 에이전트는 문서의 기본 방향을 사용한다.

        이 애트리뷰트가 명시되면 양식 요소의 값은 빈 문자열이 아니어야 한다.

        dirname은 "<attribute-name-value>-dir"로 설정한다.
        <form>
          <input type="text" name="username" dirname="username-dir">
        </form>
        실제 전송(문서의 dir 애트리뷰트 값은 명시되지 않았다는 전제로 기본 값인 ltr로 전송된다.)
        username=tom&username-dir=ltr
      • disabled

        요소를 비활성화한다.

      • form

        <form> 요소와 연결할 때 연결하고자 하는 <form> 요소의 id를 지정한다.

      • formaction

        양식(form)이 제출될 때 서버쪽 처리 페이지 URL을 해당 <form> 요소가 아닌 지정 가능한 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소에 명시된 action 애트리뷰트의 서버쪽 처리 페이지 URL로 전송된다.

      • formenctype

        양식(form)이 제출될 때 값의 인코딩 유형을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 enctype 애트리뷰트에서 지정된 인코딩 유형으로 전송된다.

      • formmethod

        양식(form)이 제출될 때 전송 방식을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 method 애트리뷰트에서 지정된 인코딩 유형으로 전송된다.

      • formnovalidate

        명시된 요소의 입력된 값이 제출될 때 입력된 데이터의 유효성 검사를 하지 않는다. 명시되지 않은 경우 상위 <form> 요소의 설정을 따라간다.

      • formtarget

        양식(form)이 제출될 때 action 또는 formaction 애트리뷰트에 설정된 서버쪽 처리 페이지를 여는 방식을 해당 <form> 요소가 아닌 지정 가능한 입력 요소에서 지정한다. 명시되지 않은 경우 해당 <form> 요소의 target 애트리뷰트에서 지정된 방식으로 연다.

      • multiple

        두 개 이상의 값을 지정할 수 있는 여부를 나타낸다.

      • name

        요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox"> 요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.

        <form> 요소에서 name 애트리뷰트가 HTML5에서 폐기되었다. 대신에 id 애트리뷰트를 식별값으로 사용한다.
      • novalidate

        양식(form)을 서버에 전송시 입력된 데이터에 대한 유효성 검사를 하지 않는다.

      • pattern

        입력된 값을 검사할 정규식을 지정한다.

      • placeholder

        입력 요소에 입력할 값에 대한 힌트를 사용자에게 제시한다.

      • popovertarget

        동일한 트리에서 popover 애트리뷰트가 있는 토글(toggle), 표시, 숨길 팝오버 요소의 id를 지정한다.

      • popovertargetaction

        대상 팝오버(popover) 요소의 토글(toggle), 표시(show) 또는 숨김(hide) 여부를 나타낸다.

      • readonly

        입력 요소에 대한 편집 가능 여부를 나타낸다. 지정이 되면 편집이 불가능하다.

      • required

        필수로 입력해야 할 입력 요소로 지정할지 여부를 나타낸다. 지정이 되면 필수 입력 요소가 된다.

      • value

        입력 요소의 기본 값을 지정한다.

    • Form Element

      양식(form) 요소에 사용되는 애트리뷰트(attributes)이다.

      • accept-charset

        양식(form)을 제출할 때 사용되는 문자 인코딩을 지정한다.

      • action

        양식을 제출할 URL을 지정한다. 즉 작성된 데이터를 받아서 처리하는 서버 로직이 위치하는 URL을 의미한다.

      • enctype

        양식(form)을 서버에 전송할 때 전송되는 데이터의 인코딩(MIME) 유형을 지정한다.

      • method

        양식(form)을 서버에 전송할 때 전송 방식을 지정한다.

    • Input Element

      • accept

        허용되는 파일 유형에 대한 힌트를 유저 에이전트에게 제공하기 위해 지정될 수 있다. type 애트리뷰트가 file인 경우에 사용이 가능하다.

        아래에 예시된 유형 이외의 유효한 MIME 유형을 지정하거나 세부적인 파일 확장자를 지정할 수도 있다. 파일 확장자의 경우는 첫 문자가 닷(.)이어야 한다.

      • checked

        type 애트리뷰트가 checkbox이거나 radio일 때 유저 에이전트는 해당 요소가 선택된 상태로 처리한다.

      • max

        요소에게 입력이 허용된 범위에서 최대값을 나타낸다. 입력된 값이 최대값을 벗어나는 경우 제약 조건 유효성 검사는 양식(form) 제출을 차단한다.

        값이 최대값을 초과하면 스크립트에서는 validationState.rangeOverflowtrue가 되고 CSS에서는 :out-of-range:invalid 가상 클래스와 일치한다.

        max 애트리뷰트를 사용하는 타입은 다음과 같다. {{conn_doc_7911}}  

      • maxlength

        최대 입력 길이를 나타낸다.

      • min

        요소에게 입력이 허용된 범위에서 최소값을 나타낸다. 입력된 값이 최소값보다 작은 경우 제약 조건 유효성 검사는 양식(form) 제출을 차단한다.

        값이 최소값을 미만이면 유효하지 않으므로 CSS에서는 :out-of-range:invalid 가상 클래스와 일치한다.

        min 애트리뷰트를 사용하는 타입은 다음과 같다. {{conn_doc_7911}}  

      • minlength

        최소 입력 길이를 나타낸다.

      • size

        문자열을 입력하는 동안 가려지지 않고 볼 수 있는 문자 수를 나타낸다. 요소의 입력 방향 크기에 관여하지만 엄밀히 디자인적인 애트리뷰트는 아니다. 0보다 큰 값이며 기본 값은 20이다.

      • step

        허용되는 값을 제한하여 값의 세분성을 지정한다. 직접 입력이외의 방식(스피너 버튼, 키보드 방향키, 마우스 휠 등)의 증감 신호를 통해서 값이 일정 크기로 변경되는 효과를 얻는다.

        step 애트리뷰트를 사용하는 타입은 다음과 같다. {{conn_doc_7911}}  

      • type

        <input>요소에서 입력 유형을 지정한다.

    • Button Element

      • type

        버튼의 역할을 명시적으로 지정한다.

  • Resources

    외부 리소스를 가져오는 요소에서 사용하는 애트리뷰트(attributes)이다.

    • async

      자바스크립트가 웹 문서에 포함이 되지만 웹 문서와는 완전하게 독립적으로 동작하도록 한다.

    • defer

      웹브라우저가 스크립트 문서를 분석한 후 DOMContentLoaded가 발생되기 이전에 실행하도록 한다.

    • nomodule

      ES6의 module을 지원하는 웹브라우저에서 실행하지 않을 스크립트임을 나타낸다.