We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

HTML의 요소들은 속성을 가지고 있습니다; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

속성 리스트

속성 이름 요소 설명
hidden 전역 속성 Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link>  링크된 리소스의 URL
hreflang <a>, <area>, <link> 링크된 리소스의 언어를 나타냄
http-equiv <meta>  
icon <command> Specifies a picture which represents the command.
id 전역 속성 일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의 값은 유일해야함.
ismap <img> Indicates that the image is part of a server-side image map.
itemprop 전역 속성  
keytype <keygen> Specifies the type of key generated.
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang 전역 속성 요소에서 사용된 언어를 정의합니다.
language <script> 요소에서 사용된 스크립트 언어를 정의합니다.
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> 미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다.
low <meter> Indicates the upper bound of the lower range.
manifest <html> 문서의 캐시 매니페스트의 URL을 가리킵니다.
max <input>, <meter>, <progress> 허용되는 최대 값을 나타냅니다.
maxlength <input>, <textarea> 요소에 허용되는 문자의 최대 길이를 나타냅니다.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> 폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수 있음.
min <input>, <meter> 허용되는 최소 값을 나타냄.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> 요소의 이름. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping <a>, <area>  
placeholder <input>, <textarea> 필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> 전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다.
pubdate <time> Indicates whether this date and time is the date of the nearest <article> ancestor element.
radiogroup <command>  
readonly <input>, <textarea> 요소가 수정될 수 있는지를 나타냅니다.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> 이 요소가 채워져야 하는지를 나타냅니다.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows <textarea> textarea의 줄 개수를 정의합니다.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>  
spellcheck 전역 속성 요소에 spell checking이 허용되는지를 나타냅니다.
scope <th>  
scoped <style>  
seamless <iframe>  
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>  
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>  
span <col>, <colgroup>  
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> 내장 컨텐츠의 URL
srcdoc <iframe>  
srclang <track>  
srcset <img>  
start <ol> Defines the first number if other than 1.
step <input>  
style 전역 속성 이전 스타일을 오버라이드할 CSS 스타일을 정의함.
summary <table>  
tabindex 전역 속성 Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>  
title 전역 속성 요소 위에 호버링했을떄 표시될 툴팁의 텍스트
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> 요소의 타입을 정의함
usemap <img><input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> 페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead. In other cases, such as <canvas>, the width must be specified with this attribute.
wrap <textarea> Indicates whether the text should be wrapped.
border <img>, <object>, <table>

테두리 폭.

참고: This is a legacy attribute. Please use the CSS border property instead.

buffered <audio>, <video> Contains the time range of already buffered media.
challenge <keygen> A challenge string that is submitted along with the public key.
charset <meta>, <script> 페이지나 스크립트의 문자 인코딩을 선언함,
checked <command>, <input> 페이지가 로드된뒤, 요소가 체크 되어야 하는지를 나타냅니다.
cite <blockquote>, <del>, <ins>, <q> Contains a URI which points to the source of the quote or change.
class 전역 속성 Often used with CSS to style elements with common properties.
code <applet> 로드되고 실행되어야할 애플릿의 클래스 파일의 URL을 지정합니다.
codebase <applet> This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color <basefont>, <font>, <hr>

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.

cols <textarea> textarea의 칸 갯수를 지정합니다.
colspan <td>, <th> The colspan attribute defines the number of columns a cell should span.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable 전역 속성 Indicates whether the element's content is editable.
contextmenu 전역 속성 Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> 브라우저가 사용자에게 재생 컨트롤을 보여줘야 하는지를 나타냅니다.
coords <area> A set of values specifying the coordinates of the hot-spot region.



리소스의 URL을 나타냄.


전역 속성

당신이 HTML 요소에 커스텀 속성을 부착할수 있게 해줌.

datetime <del>, <ins>, <time> 요소와 관련된 날짜와 시간을 나타냅니다.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> 스크립트가 페이지가 파싱된후에 실행되어야하는지를 나타냅니다.
dir 전역 속성 텍스트의 방향을 정의합니다. 허용되는 값은 ltr (Left-To-Right) 또는 rtl (Right-To-Left) 입니다.
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> 요소가 사용자와 상호작용할수 있는지를 나타냅니다.
download <a>, <area> 하이퍼링크가 리소르를 다운로드 하기 위해 사용되는지를 나타냅니다.
draggable 전역 속성 요소가 드래그되어질 수 있는지 없는지는 나타냄.
dropzone 전역 속성 요소에 컨텐츠를 드랍하는것을 허용하는지를 나타냅니다.
enctype <form> Defines the content type of the form date when the method is POST.
for <label>, <output> Describes elements which belongs to this one.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> <form>에 지정되있는 액션을 오버라이딩하는 요소의 액션을 지정합니다.
headers <td>, <th> IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead. In other cases, such as <canvas>, the height must be specified with this attribute.
accept <form>, <input> List of types the server accepts, typically a file type.
accept-charset <form> 지원되는 문자셋의 리스트
accesskey 전역 속성 요소에 포커스를 추가하거나 활성화 시키기 위한 키보드의 단축키를 정의합니다.
action <form> The URI of a program that processes the information submitted via the form.
align <applet>, <caption>, <col>, <colgroup><hr>, <iframe>, <img>, <table>, <tbody><td><tfoot> , <th>, <thead>, <tr> 요소의 수직 정렬을 지정합니다.

<applet>, <area>, <img>, <input>

이미지를 표시할수 없을때의 대체 텍스트.
async <script> 스크립트가 비동기로 실행되어야하는걸 나타냄.
autocomplete <form>, <input> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> 페이지가 로드된후에 요소가 자동적으로 포커스 되도록합니다.
autoplay <audio>, <video> 오디오나 비디오가 가능한 빨리 재생되도록 합니다.
autosave <input> Previous values should persist dropdowns of selectable values across page loads.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

요소의 배경 색깔.

주의: 이것은 레거시 속성입니다. 대신에 CSS background-color 속성을 사용해주세요.

Content versus IDL attributes

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute(). The content attribute is always a string even when the expected value should be an integer. For example, to set an <input> element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: azunyan3
최종 변경: azunyan3,