html/css 독학하기

전역속성

토픽 html/css 독학하기 > html사전

설명

HTML defines a few attributes that are common to all HTML elements. These attributes can be used on all elements, though the attributes may have no effect on some elements. 

HTML은 모든 HTML 요소들에 대해 공통적인 몇 개의 속성을 정의한다. 이 속성들은 모든 요소들에서 사용될 수 있다. 이 속성이 적용되지 않는 요소에서 사용된 경우 아무런 효과도 내지 않는다.

참고 : The HTML5 specification states that global attributes may be specified on all HTML elements, even those not specified by HTML5. This means that their usage with non-standard, incorrect, or elsewhere-defined elements is allowed, though using these elements themselves is not allowed.

참고: HTML5 명세는 전역 속성이 모든 HTML 요소들에 대해 정의된다고 말한다. 비록 그 요소들이 HTML5에 정의되지 않았더라도. 이것은 비표준적인, 잘못된, 혹은 별도로 정의된 요소들의 속성으로 사용되어도 괜찮다는 것을 말한다. 즉 요소 자체는 허용되지 않더라도, 그러한 허용되지 않는 요소들에 대해 정의된 속성의 사용은 허용된다는 것을 말한다.

accesskey

This attribute provides a hint for generating a keyboard shortcut for the current element. This attribute consists of a space-separated list of characters (one single Unicode code point). The browser should use the first one that exists on the computer keyboard layout.

이 속성은 현재 요소의 키보드 단축키를 생성하는 데에 쓰일 힌트를 제공한다. 이 속성은 빈 칸으로 구분된 문자(유니코드 문자 한 개)들의 목록으로 이루어져 있다. 브라우저는 첫 번째 문자를 사용하여야 한다. 이 문자는 컴퓨터 키보드 레이아웃 상에 존재하여야 한다.

HTML 4 In previous versions of HTML, only one character could be specified. Also it wasn't a global attribute and could be applied only to <a>, <area>, <button>, <input>, <label>, <legend> and <textarea>.

HTML 4 - 이전 버전의 HTML에서, 단 하나의 문자만 정의할 수 있었다. 또한 전역 속성이 아니었고 오직 <a>, <area>, <button>, <input>, <label>, <legend>, <textarea> 에서만 적용할 수 있었다.

참고 : HTML5, section 8.5 ( HTML 4: HTML4.01, section 17.11.2)

accesskeylabel

This attribute provides a human-readable text string describing the keyboard shortcut specified by the accesskey attribute. For example, if accesskey is "g", this would likely be "Alt + Shift + G" on Windows and Linux and "Cmd-G" on Mac.

이 속성은 accesskey 속성에서 정의된 키보드 단축키를 사람이 이해할 수 있는 글자 문자열로 제공한다. 예를 들어, accesskey가 "g"라면, 이는 윈도우와 리눅스에서는 "Alt + Shift + G"로, 맥에서는 "Cmd-G"로 나타낸다.

참고 : HTML5, section 8.4.3

class

This attribute is a space-separated list of the classes of the element. Classes allows CSS and Javascript to select and access specific elements via the class selectors or functions like the DOM method document.getElementsByClassName().

이 속성은 빈 칸으로 구분되는 요소의 클래스 목록을 정의한다. 클래스는 CSS와 자바스크립트를 허용하며, 이는 클래스 선택자나 함수들을 통하여 특정 요소를 선택하고 접속할 수 있게 해준다. 이에 해당하는 클래스 선택자나 함수에는 DOM 메소드인 document.getElementsByClassName() 이 있다.

contenteditable - HTML5

This enumerated attribute indicates if the element should be editable by the user. If so, the browser modifies its widget to allow editing. The attribute must take one of the following values:

  • true or the empty string, which indicates that the element must be editable;
  • false, which indicates that the element must not be editable.

If this attribute is not set, its default value is inherited from its parent element.

이 열거형 속성은 요소가 사용자에 의해 편집될 수 있는지를 정의한다. 만약 그렇다면, 브라우저는 해당 위젯에 대한 편집을 허용한다. 이 속성은 적어도 다음 중 하나의 값을 가져야 한다:

  • true 혹은 빈 문자열, 이는 해당 요소가 편집 가능함을 알려준다.
  • false, 이는 해당 요소가 편집할 수 없음을 알려준다.

만약 이 속성이 정의되지 않았다면, 기본값은 해당 요소의 부모 요소의 속성값을 물려받는다.

참고 : Usage note: This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true, false or the empty string is mandatory and that a shorthand like <label contenteditable>Example Label</label> is not allowed. The correct usage is <label contenteditable="true">Example Label</label>.

참고: 사용시 유의 사항: 이 속성은 열겨형으로서 불리언 값이 아니다. 이는 반드시 명시적으로 true, false, 혹은 빈 문자열을 사용해야 함을 의미한다. <label contenteditable>Example Label</label>과 같은 사용은 허용되지 않으며, <label contenteditable="true">Example Label</label>과 같이 사용해야 맞다.

참고 : HTML5, section 8.7

contextmenu - HTML5

This attribute is related to the new HTML5 Interactive Commands.

이 속성은 새로운 HTML5 대화형 명령어와 관련있다.

data - HTML5

This class of attributes, called custom data attributes, allows proprietary information to be exchanged between the HTML and its DOM representation that may be used by scripts. All such custom data are available via the HTMLElement interface of the element the attribute is set on. The HTMLElement.dataset property gives access to them.
The * may be replaced by any name following the production rule of xml names with the following restrictions:

  • the name must not start with xml, whatever case is used for these letters;
  • the name must not contain any semicolon (U+003A);
  • the name must not contain capital A to Z letters.

참고 : HTML5, section 3.2.3.8

이 속성 클래스는 사용자 정의 데이터 속성으로 불리며, 스크립트에 사용될 HTML과 그 DOM 표현 사이의 교환 정보를  제공한다. 모든 사용자 정의 데이터는 해당 속성이 정의된 요소의 HTMLElement 인터페이스를 통해 사용할 수 있다. HTMLElement.dataset 속성이 그러한 접속을 제공한다.
*로 표기된 부분은 다음의 xml 이름 짓기 규칙에 따라 치환될 수 있다. 다음과 같은 제약조건이 있다:

  • 이름은 xml로 시작해서는 안된다. 대소문자는 상관없다.
  • 이름은 세미콜론을 포함해서는 안된다.
  • 이름은 A에서 Z까지의 대문자를 포함해서는 안된다.

dir

This enumerated attribute indicates the directionality of the element's text. It can have the following values:

  • ltr, which means left to right and is to be used for languages that are written from the left to the right (like English);
  • rtl, which means right to left and is to be used for languages that are written from the right to the left (like Arabic);
  • auto, which let the user agent decides. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then apply that directionality to the whole element. HTML5 Unimplemented
  • This attribute is mandatory for the <bdo> element where it has a different semantic meaning.
  • This attribute is not inherited by the <bdi> element. If not set, its value is auto.
  • This attribute can be overridden by the CSS properties direction and unicode-bidi, if a CSS page is active and the element supports these properties.
  • As the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related CSS properties when possible. That way, the text will display correctly even on a browser that doesn't support CSS or has the CSS deactivated.
  • The auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.

참고 : HTML5, section 3.2.3.5 ( HTML 4: HTML4.01, section 8.2)

이 열거형 속성은 요소의 텍스트의 방향성을 지정한다. 다음과 같은 값을 가진다:

  • ltr, 왼쪽에서 오른쪽으로 쓴다. 영어와 같은 쓰기방식에 사용된다.
  • rtl, 오른쪽에서 왼쪽으로 쓴다. 아랍어와 같은 쓰기방식에 사용된다.
  • auto, 사용자 자동 정의. 요소 내의 글자들을 해석하여 명시적으로 방향성을 나타내는 문자를 찾으면, 해당 방향성으로 요소 전체의 방향성을 결정한다. HTML5에서는 구현되지 않았다.
  • <bdo> 요소에 있어 이 속성은 필수적이다. 의미적으로 다른 값을 갖는다.
  • <bdi> 요소의 경우 이 속성은 상속되지 않는다. 지정되지 않은 경우, 기본값은 auto이다.
  • 이 속성은 CSS 속성의 방향과 유니코드-bidi에 의해 덮어 쓰일 수 있다. 만약 CSS 페이지가 활성화 된 상태라면 요소는 이와같은 속성을 지원한다.
  • 텍스트의 방향성이 의미론적으로 그 내용물과 연관되어 있고 표현과는 관계없다면, 가능한 CSS 속성보다 이 속성을 우선시하여 사용할 것을 권장한다. 이 방법은 텍스트가 CSS 속성을 지원하지 않거나 CSS가 비활성화된 상태에서도 브라우저로 하여금 해당 텍스트를 목적에 알맞게 보여주게 한다.
  • auto값은 방향성을 알 수 없는 데이터에 대하여 사용되어야 한다. 예를 들어, 사용자의 입력값에 의하여 최종적으로 데이터베이스에 저장되는 데이터가 그렇다.

draggable - HTML5

This enumerated attribute indicates whether the element can be dragged, using the Drag and Drop API. It can have the following values:

  • true, which indicates that the element may be dragged
  • false, which indicates that the element may not be dragged.

If this attribute is not set, its default value is auto, meaning the behavior should be the one defined by default by the browser.

  • This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true or false is mandatory and that a shorthand like <label draggable>Example Label</label> is not allowed. The correct usage is <label draggable="true">Example Label</label>.
  • By default, only text selections, images, and links can be dragged. For all others elements, the event ondragstart must be set in order to the drag and drop mechanism to work, as shown in this comprehensive example.

참고 : HTML5, section 3.9.5

이 열거형 속성은 해당 요소가 드래그 될 수 있는지 드래그 앤 드롭 API를 사용하여 지정한다. 다음과 같은 값을 가질 수 있다:

  • true, 이 요소는 드래그 될 수 있다.
  • false, 이 요소는 드래그 될 수 없다.

만약 이 속성이 정의되지 않은 경우, 기본값은 auto 이다. auto값은 브라우저에 정의된 기본값을 그대로 따른다.

  • 이 속성은 열거형이며 불리언이 아니다. 이것은 명시적으로 속성값을 지정해줘야 한다는 것을 의미한다. 예를 들어 <label draggable>Example Label</label>과 같이 줄여 쓰는 것은 허용하지 않으며, <label draggable="true">Example Label</label>과 같이 사용하여야 옳다.
  • 기본적으로 선택된 텍스트, 이미지, 그리고 링크만이 드래그될 수 있다. 이외의 요소들에 대해서는 ondragstart이벤트가 정의되어야만 드래그 앤 드롭 기능을 동작시킬 수 있다. 이에 대해서는 상세한 예제를 참조하라.

dropzon - HTML5

This enumerated attribute indicates what types of content can be dropped on an element, using the Drag and Drop API. It can have the following values:

  • copy, which indicates that dropping will create a copy of the element that was dragged
  • move, which indicates that the element that was dragged will be moved to this new location.
  • link, will create a link to the dragged data.

참고 : HTML5, section 8.6.8

이 열거형 속성은 어떤 형식의 내용물이 요소 내에 드롭될 수 있는지를 드래그 앤 드롭 API를 사용하여 지정한다. 다음과 같은 값을 가진다:

  • copy, 복사본을 생성한다.
  • move, 해당 위치로 이동한다.
  • link, 대상의 링크를 생성한다.

hidden - HTML5

This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.

  • This attribute must not be used to hide content that could be legitimately be shown. For example, it shouldn't be used to hide tabs panels of a tabbed interface, as this is a styling decision and another style showing them would lead to a perfectly correct page.
  • Hidden elements shouldn't be linked from non-hidden elements.
  • Elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

HTML5, section 8.1

이 불리언 속성은 아직, 흑은 더 이상 관련되지 않았음을 알려준다. 예를 들면, 로그인 과정이 완료되기까지 사용할 수 없는 요소들을 숨기려는 경우 사용될 수 있다. 브라우저는 그렇게 지정된 요소들을 나타내지 않을 것이다.

  • 이 속성은 응당 보여주어야 하는 것을 감추는 용도로 사용해서는 안된다. 패널이나 탭 인터페이스를 감추는 용도로 사용해서는 안된다. 이것은 스타일 결정에 의한 것이며 다른 스타일 기법으로 완벽하게 올바른 페이지를 나타낼 것이다.
  • 숨겨진 요소들은 숨겨지지 않은 요소들로부터 링크되서는 안된다.
  • 숨겨진 요소의 하위 요소들은 활성화 상태가 유지된다. script 요소는 실행될 수 있고, form 요소는 제출할 수 있다.

id

This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

  • This attribute's value is an opaque string: this means that web author must not use it to convey any information. Particular meaning, for example semantic meaning, must not be derived from the string.
  • This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID.  In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.
  • Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

HTML5, section 3.2.3.1 ( HTML 4: HTML4.01, section 7.5.2)

itemid - HTML5

This attribute is related to the HTML5 Microdata feature.

itemprop - HTML5

This attribute is related to the HTML5 Microdata feature.

itemref - HTML5

This attribute is related to the HTML5 Microdata feature.

itemscope - HTML5

This attribute is related to the HTML5 Microdata feature.

itemtype - HTML5

This attribute is related to the HTML5 Microdata feature.

lang

This attribute participates in defining the language of the element, the language that non-editable elements are written in or the language that editable elements should be written in. The tag contains one single entry value in the format defines in the Tags for Identifying Languages (BCP47) IETF document. If the tag content is the empty string the language is set to unknown; if the tag content is not valid, regarding to BCP47, it is set to invalid.

  • Even if the lang attribute is set, it may not be taken into account, as the xml:lang attribute has priority. Read the algorithm determining the language of an element's content to see how the language is determined in all cases.
  • For the CSS pseudo-class :lang, two invalid language names are different if their names are different.

참고 : HTML5, section 3.2.3.3( HTML 4: HTML4.01, section 8.1)

spellcheck - HTML5

This enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values:

  • true, which indicates that the element should be, if possible, checked for spelling errors;
  • false, which indicates that the element should not be checked for spelling errors.

If this attribute is not set, its default value is element-type and browser-defined. This default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true.

You can consult this article to see a comprehensive example of the use of this attribute.

  • This attribute is an enumerated one and not a Boolean one. This means that the explicit usage of one of the values true or false is mandatory and that a shorthand like <label spellcheck>Example Label</label> is not allowed. The correct usage is <label spellcheck="true">Example Label</label>.
  • This attribute is merely a hint for the browser: browsers are not required to be able to check for spelling errors. Typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking.

참고 : HTML5, section 8.8

style

This attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.

참고 : This attribute must not be used to convey semantic information. Even if all styling is removed, a page should remain semantically correct. Typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute.

참고 : HTML5, section 3.2.3.7( HTML 4: HTML4.01, section 14.2.2)

tabindex

This integer attribute indicates if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:

  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
  • a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).

An element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.

You can consult this article to see a comprehensive explanation of focus management.

HTML5, section 8.4.1( HTML 4: HTML4.01, section 17.11.1)

title

This attribute contains a text representing advisory information related to the element it belongs too. Such information can typically, but not necessarily, be presented to the user as a tooltip. Here are some typical uses of this attribute:

  • Link: the title or a description of the linked document
  • Media element like an image: a description or associated credits
  • Paragraph: a footnote or a commentary about it
  • Quotation: some information about the author, and so on.

If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant for it (and can legitimately be used as the tooltip for that element. If this attribute is set to the empty string, it explicitly means that its nearest ancestor's title is not relevant for this element (and shouldn't be used in the tooltip for that element).

Additional semantics are attached to the title attributes of the <link>, <abbr> and <input>.

참고

원문 : https://developer.mozilla.org/en/HTML/global_attributes

댓글

댓글 본문