diff options
Diffstat (limited to 'files/ko/web/html/attributes')
| -rw-r--r-- | files/ko/web/html/attributes/autocomplete/index.html | 247 | ||||
| -rw-r--r-- | files/ko/web/html/attributes/crossorigin/index.html | 96 | ||||
| -rw-r--r-- | files/ko/web/html/attributes/index.html | 733 |
3 files changed, 1076 insertions, 0 deletions
diff --git a/files/ko/web/html/attributes/autocomplete/index.html b/files/ko/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..50c8de42f9 --- /dev/null +++ b/files/ko/web/html/attributes/autocomplete/index.html @@ -0,0 +1,247 @@ +--- +title: HTML autocomplete 특성 +slug: Web/HTML/Attributes/autocomplete +tags: + - Attribute + - HTML + - Reference + - 자동완성 +translation_of: Web/HTML/Attributes/autocomplete +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>autocomplete</code></strong> 특성을 사용하면 {{glossary("user agent", "사용자 에이전트")}}의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다.</span> HTML <code>autocomplete</code> 특성은 텍스트와 숫자를 허용하는 {{HTMLElement("input")}} 요소, {{HTMLElement("textarea")}} 요소, {{HTMLElement("select")}} 요소, {{HTMLElement("form")}} 요소에 사용할 수 있습니다.</p> + +<p>자동완성으로 제안할 값의 출처는 대개 브라우저가 선택합니다. 사전 정의된 값을 사용할 수도 있으나 보통 과거에 사용자가 입력했던 값을 사용합니다. 예를 들어 사용자가 입력한 이름, 주소, 전화번호, 이메일 주소를 브라우저에 저장할 방법을 제공하기도 하고, 신용카드 정보를 미리 암호화해 저장하고 인증절차 후 자동완성 값으로 쓸 수도 있습니다.</p> + +<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 요소에 <code>autocomplete</code> 특성을 지정하지 않은 경우, 브라우저는 요소의 양식 소유자, 즉 조상 {{HTMLElement("form")}} 요소 또는 {{htmlattrxref("form", "input")}} 특성의 값을 <code>id</code> 특성으로 사용하는 <code><form></code> 요소의 <code>autocomplete</code> 특성을 사용합니다.</p> + +<p>더 많은 정보는 {{HTMLElement("form")}} 요소의 {{htmlattrxref("autocomplete", "form")}} 특성을 참고하세요.</p> + +<div class="blockIndicator note"> +<p><code><input></code>/<code><select></code>/<code><textarea></code> 요소가 다음 조건을 만족해야 사용자 에이전트가 자동완성을 제공할 수도 있습니다.</p> + +<ol> + <li><code>name</code> 또는 <code>id</code> 특성 존재</li> + <li><code><form></code> 요소의 자손일 것</li> + <li>양식에 {{HTMLElement("input/submit", "제출")}} 버튼이 있을 것</li> +</ol> +</div> + +<h2 id="값">값</h2> + +<dl> + <dt><code>off</code></dt> + <dd>브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다. + <div class="note"><strong>참고:</strong> 대부분의 최신 브라우저에서는 <code>autocomplete</code>을 <code>off</code>로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다. <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a> 문서를 참고하세요.</div> + </dd> + <dt><code>on</code></dt> + <dd>브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.</dd> + <dt><code>name</code></dt> + <dd>사람의 전체 이름. 사람 이름 구조의 복잡함과 다양성으로 인해 보통 개별 이름 구성요소보다 <code>name</code>을 사용하는 것을 선호하지만, 하나씩 받아야 한다면 다음 <code>autocomplete</code> 값도 사용할 수 있습니다. + <dl> + <dt><code>honorific-prefix</code></dt> + <dd>호칭. "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", "Mlle." 등.</dd> + <dt><code>family-name</code></dt> + <dd>성.</dd> + <dt><code>given-name</code></dt> + <dd>이름.</dd> + <dt><code>additional-name</code></dt> + <dd>가운데 이름.</dd> + <dt><code>honorific-suffix</code></dt> + <dd>접미사. "Jr.", "B.Sc.", "PhD.", "MBASW", "IV" 등.</dd> + <dt><code>nickname</code></dt> + <dd>별명, 별칭.</dd> + </dl> + </dd> + <dt><code>email</code></dt> + <dd>이메일 주소.</dd> + <dt><code>username</code></dt> + <dd>사용자 또는 계정 이름.</dd> + <dt><code>new-password</code></dt> + <dd>새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.</dd> + <dt><code>current-password</code></dt> + <dd>사용자의 현재 비밀번호.</dd> + <dt><code>one-time-code</code></dt> + <dd>사용자를 인증할 때 사용하는 1회성 코드.</dd> + <dt><code>organization-title</code></dt> + <dd>직위. "사장", "매니저", "시니어 테크니컬 커뮤니케이터" 등.</dd> + <dt><code>organization</code></dt> + <dd>회사 또는 조직명.</dd> + <dt><code>street-address</code></dt> + <dd>도로 주소. 여러 줄의 텍스트도 가능하며 두 번째 행정구역(시/군/구) 내에서 구분할 수 있는 주소여야 하지만, 도시 이름, 우편번호, 국가 이름은 포함해선 안됩니다.</dd> + <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt> + <dd>도로 주소의 각 줄. <code>street-address</code>가 존재하지 않는 경우에만 사용해야 합니다.</dd> + <dt><code>address-level4</code></dt> + <dd>4단계 주소에서 가장 상세한 {{anch("주소의 행정 단계", "행정구역")}}.</dd> + <dt><code>address-level3</code></dt> + <dd>최소 3단계 주소에서의 3단계 {{anch("주소의 행정 단계", "행정구역")}}.</dd> + <dt><code>address-level2</code></dt> + <dd>최소 2단계 주소에서의 2단계 {{anch("주소의 행정 단계", "행정구역")}}. 주소에 사용하는 행정구역을 두 단계로 분류하는 국가에서는 보통 도시, 마을 등입니다.</dd> + <dt><code>address-level1</code></dt> + <dd>첫 번째 {{anch("주소의 행정 단계", "행정구역")}}. 대한민국에서는 특별시·광역시·도, 미국에서는 주입니다.</dd> + <dt><code>country</code></dt> + <dd>국가 코드.</dd> + <dt><code>country-name</code></dt> + <dd>국가 이름.</dd> + <dt><code>postal-code</code></dt> + <dd>우편번호.</dd> + <dt><code>cc-name</code></dt> + <dd>신용카드 등 지불수단 소유자의 전체 이름. 보통 개별 이름 구성요소보다 이 쪽을 더 선호합니다.</dd> + <dt><code>cc-family-name</code></dt> + <dd>지불수단 소유자의 성.</dd> + <dt><code>cc-given-name</code></dt> + <dd>지불수단 소유자의 이름.</dd> + <dt><code>cc-additional-name</code></dt> + <dd>지불수단 소유자의 가운데 이름.</dd> + <dt><code>cc-number</code></dt> + <dd>신용카드 번호, 계좌번호 등 지불수단 식별 번호.</dd> + <dt><code>cc-exp</code></dt> + <dd>지불수단 유효기간. 보통 MM/YY 또는 MM/YYYY의 형태입니다.</dd> + <dt><code>cc-exp-month</code></dt> + <dd>지불수단 유효기간의 월.</dd> + <dt><code>cc-exp-year</code></dt> + <dd>지불수단 유효기간의 연도.</dd> + <dt><code>cc-csc</code></dt> + <dd>지불수단 보안 코드. 신용카드의 경우 뒷면의 세자리 숫자입니다.</dd> + <dt><code>cc-type</code></dt> + <dd>지불수단 유형. "Visa", "Master Card" 등.</dd> + <dt><code>transaction-currency</code></dt> + <dd>거래에 사용할 통화 단위.</dd> + <dt><code>transaction-amount</code></dt> + <dd>결제 양식에 나타나는 거래량, 금액. 단위는 <code>transaction-currency</code>에 나타난 값을 사용합니다.</dd> + <dt><code>language</code></dt> + <dd>선호 언어. <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">유효한 BCP 47 언어 태그</a>여야 합니다.</dd> + <dt><code>bday</code></dt> + <dd>생년월일.</dd> + <dt><code>bday-day</code></dt> + <dd>생일.</dd> + <dt><code>bday-month</code></dt> + <dd>생월.</dd> + <dt><code>bday-year</code></dt> + <dd>생년.</dd> + <dt><code>sex</code></dt> + <dd>성별. "남성", "여성", "안드로진" 등 줄바꿈 없는 자유형식 텍스트입니다.</dd> + <dt><code>tel</code></dt> + <dd>국가 코드를 포함한 전체 전화번호. 개별 전화번호 구성요소가 필요한 경우 다음 값을 사용할 수 있습니다. + <dl> + <dt><code>tel-country-code</code></dt> + <dd>국가 코드. 1(북미), 82(대한민국) 등.</dd> + <dt><code>tel-national</code></dt> + <dd>국가 코드를 제외한 전체 전화번호. 지역번호도 포함합니다. 대한민국 전화번호 "82-2-555-6502"의 경우 "02-555-6502"가 됩니다.</dd> + <dt><code>tel-area-code</code></dt> + <dd>지역번호.</dd> + <dt><code>tel-local</code></dt> + <dd>국가 코드와 지역번호를 제외한 전화번호. 두 부분으로 나눌 수도 있으며, "555-6502"의 경우 <code>tel-local-prefix</code>는 "555", <code>tel-local-suffix</code>는 "6502"가 됩나다.</dd> + </dl> + </dd> + <dt><code>tel-extension</code></dt> + <dd>내선번호.</dd> + <dt><code>impp</code></dt> + <dd>인스턴트 메시지 프로토콜 엔드포인트의 URL. "xmpp:username@example.net" 등.</dd> + <dt><code>url</code></dt> + <dd>URL. 홈페이지, 회사 웹 사이트 주소 등 양식의 맥락에 맞는 값입니다.</dd> + <dt><code>photo</code></dt> + <dd>이미지 URL. 사람, 회사, 연락처 정보 등 양식의 맥락에 맞는 값입니다.</dd> +</dl> + +<p><a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 표준</a>을 방문해 더 많은 정보를 알아보세요.</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><div> + <label for="cc-number">Enter your credit card number</label> + <input type="number" name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="주소의_행정_단계">주소의 행정 단계</h2> + +<p>네 단계의 행정 단계(<code>address-level1</code>부터 <code>address-level4</code>까지)는 주소의 위치를 점차 좁아지는 범위로 나타냅니다. 각각의 국가는 서로 다른 행정구역 시스템을 사용하며 주소를 작성하는 순서도 다를 수 있습니다.</p> + +<p><code>address-level1</code>은 항상 제일 큰 단계이므로, 국가 이름을 제외한 주소에서 가장 넓은 범위를 나타냅니다.</p> + +<h3 id="유연한_양식_레이아웃">유연한 양식 레이아웃</h3> + +<p>각각의 국가가 서로 다른 주소 형태를 사용하며, 구성요소의 위치는 물론 개수도 다를 수 있다는 점을 고려했을 때, 가능하다면 사용자가 입력하는 주소가 속한 국가에 따라서 양식의 형태를 바꾸는 것이 도움이 될 것입니다.</p> + +<h3 id="예제_2">예제</h3> + +<p>행정구역 단위 사용법은 국가마다 다릅니다. 다음은 일부 예제로, 모든 상황을 포함하지는 않을 것입니다.</p> + +<h4 id="대한민국">대한민국</h4> + +<p>도로명주소는 다음과 같은 형태입니다.</p> + +<ul> + <li>서울특별시 종로구 세종로 1</li> + <li>경기도 수원시 팔달구 효원로 1</li> + <li><span class="add_txt">충청남도 홍성군 홍북읍 충남대로 21</span></li> +</ul> + +<dl> + <dt><code><span class="add_txt">address-level1</span></code></dt> + <dd><span class="add_txt">시/도: "서울특별시", "경기도", "충청남도"</span></dd> + <dt><code>address-level2</code></dt> + <dd>시/군/구: "수원시", "홍성군", "종로구"</dd> + <dt><code>address-level3</code></dt> + <dd>구/읍/면: "팔달구", "홍북읍" + <div class="note"><strong>참고:</strong> 구/읍/면은 <code>address-level2</code>에 합쳐 "수원시 팔달구", "홍성군 홍북읍"의 형태로 작성하는 경우도 많습니다.</div> + </dd> + <dt><code>address-line1</code></dt> + <dd>도로명, 건물번호: "세종로 1", "효원로 1", "충남대로 21"</dd> + <dt><code>address-line2</code></dt> + <dd>상세주소. 아파트의 경우 동/호를 작성합니다. + <div class="note"><strong>참고:</strong> <code>street-address</code>를 사용하는 경우 도로명, 건물번호와 상세주소를 같이 작성합니다.</div> + </dd> +</dl> + +<p>우편번호 찾기 기능을 사용하는 경우 행정구역과 도로명, 건물번호까지는 사용자가 직접 입력하지 않는 점도 유의하세요.</p> + +<h4 id="미국">미국</h4> + +<p>평범한 주소는 다음 형태입니다.</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>미국에서의 가장 큰 행정구역은 "주"로, 위 주소에서는 "CA"("캘리포니아"의 미국 우정청 공식 줄임말)입니다. 따라서 <code>address-level1</code>은 주, 즉 "CA"를 사용합니다.</p> + +<p>두 번째 행정구역은 도시 혹은 마을 이름이므로 <code>adress-level2</code>는 "Examplevile"입니다.</p> + +<p>미국 주소는 3단계 이상을 사용하지 않습니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.global_attributes.autocomplete")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{htmlelement("input")}} 요소.</li> + <li>{{htmlelement("select")}} 요소.</li> + <li>{{htmlelement("textarea")}} 요소.</li> + <li>{{htmlelement("form")}} 요소.</li> + <li><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></li> + <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li> +</ul> diff --git a/files/ko/web/html/attributes/crossorigin/index.html b/files/ko/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..70131a4486 --- /dev/null +++ b/files/ko/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: 'HTML attribute: crossorigin' +slug: Web/HTML/Attributes/crossorigin +translation_of: Web/HTML/Attributes/crossorigin +--- +<div>{{draft}}</div> + +<p class="seoSummary">{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.</p> + +<p>Media element의 <code>crossorigin</code> 속성은 CORS 세팅입니다.</p> + +<p>세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Keyword</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.</td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>crossorigin</code> 또는 <code>crossorigin=""</code>처럼 빈 값을 할당하는건 <code>anonymous</code>와 동일합니다.</td> + </tr> + </tbody> +</table> + +<p>기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 <strong>user credentials</strong> 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a>에서 기술하고 있습니다.</p> + +<p>빈 문자열이나 잘못된 값일 경우 <code>anonymous</code> 와 동일하게 동작합니다.</p> + +<h3 id="예시_script_element의_crossorigin">예시: script element의 crossorigin</h3> + +<p>아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 <code>https://example.com/example-framework.js</code> 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" crossorigin="anonymous"></script></pre> + +<h3 id="예시_credential_포함한_Webmanifest">예시: credential 포함한 Webmanifest</h3> + +<p><a href="/en-US/docs/Web/Manifest">Manifest</a> 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 <code>use-credentials</code> 값을 사용해야 합니다.</p> + +<pre class="brush: html"><link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"></pre> + +<h2 id="사양">사양</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<h3 id="<script_crossorigin>"><script crossorigin></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.script.crossorigin")}}</p> + +<h3 id="<video_crossorigin>"><video crossorigin></h3> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.elements.video.crossorigin")}}</p> + +<h2 id="더_보기">더 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: <code>rel</code></a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div> diff --git a/files/ko/web/html/attributes/index.html b/files/ko/web/html/attributes/index.html new file mode 100644 index 0000000000..12e0c02235 --- /dev/null +++ b/files/ko/web/html/attributes/index.html @@ -0,0 +1,733 @@ +--- +title: HTML 특성 참고서 +slug: Web/HTML/Attributes +tags: + - HTML + - Reference +translation_of: Web/HTML/Attributes +--- +<div>{{HTMLSidebar}}</div> + +<p>HTML의 요소들은 <strong>특성</strong>을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.</p> + +<h2 id="특성_목록">특성 목록</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>특성 이름</th> + <th>요소</th> + <th>설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>서버에서 허용하는 유형의 목록. 보통 파일 유형을 의미합니다.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>지원하는 문자 집합의 목록.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>해당 요소로 초점을 이동시키거나 활성화시키기 위한 키보드 단축키를 정의합니다.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>폼(form)으로부터 전송된 정보를 처리할 프로그램의 URI입니다.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>해당 요소의 가로 정렬 방식을 명시합니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/allow">allow</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Specifies a feature-policy for the iframe.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>이미지를 표시할 수 없는 경우 표시할 대체 문구입니다.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>해당 스크립트는 비동기적으로 실행되어야함을 나타냅니다.</td> + </tr> + <tr> + <td><code>autocapitalize</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>사용자가 입력하거나 편집하는 문구를 자동으로 대문자로 바꿀지 여부와 방법을 제어합니다.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>이 폼 내의 컨트롤에 대해 브라우저가 지원하는 값 자동완성 기능을 기본으로 설정할 것인지를 나타냅니다.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>페이지가 로드된 후 자동으로 해당 요소로 초점이 이동합니다.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>오디오나 비디오가 가능한 빠른 시점에 재생됩니다.</td> + </tr> + <tr> + <td><code>background</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Specifies the URL of an image file. + <div class="note"><strong>Note:</strong> Although browsers and email clients may still support this attribute, it is obsolete. Use CSS {{ Cssxref("background-image") }} instead.</div> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>요소의 배경색입니다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("background-color") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>선의 굵기입니다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("border") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>이미 버퍼링된 미디어의 시간 범위를 가집니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture">capture</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>From the {{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}}spec, specifies a new file can be captured.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>공개 키와 같이 전송된 challenge 문자열입니다.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>페이지 또는 스크립트의 문자 인코딩을 선언합니다.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>페이지가 로딩될 때, 해당 요소가 체크되어 있어야하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>변경 또는 인용구문의 출처를 가리키는 URI를 가집니다.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>공통적인 속성으로 요소의 스타일을 지정할 때 CSS와 함께 자주 사용됩니다.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>로딩 후 실행할 애플릿의 클래스 파일의 URL을 명시합니다.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>이 속성은 코드(code) 속성이 참조하는 애플릿의 .class 파일이 저장되어 있는 디렉토리의 절대경로 또는 상대경로 URL을 제공합니다.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>이 속성은 미리 정의된 색상 명칭 또는 #RRGGBB 형식의 16진수로 명시된 색상으로 텍스트 색상을 설정한다.</p> + + <div class="note"> + <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("color") }} 속성을 대신 사용하시기 바랍니다.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea에 표시할 컬럼의 수를 정의한다.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>colspan 속성은 어떤 셀이 확장되어야 할 컬럼의 수를 정의한다.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>A value associated with <code>http-equiv</code> or <code>name</code> depending on the context.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates whether the element's content is editable.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines the ID of a {{ HTMLElement("menu") }} element which will serve as the element's context menu.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indicates whether the browser should show playback controls to the user.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>A set of values specifying the coordinates of the hot-spot region.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> + <td>How the element handles cross-origin requests</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/docs/Web/API/HTMLiframeElement/csp">csp</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ HTMLElement("object") }}</td> + <td>Specifies the URL of the resource.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Lets you attach custom attributes to an HTML element.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Indicates the date and time associated with the element.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/decoding">decoding</a></code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indicates the preferred method to decode the image.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indicates that the script should be executed after the page has been parsed.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates whether the user can interact with the element.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indicates that the hyperlink is to be used for downloading a resource.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Defines whether the element can be dragged.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates that the element accept the dropping of content on it.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Defines the content type of the form date when the <code>method</code> is POST.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/enterkeyhint">enterkeyhint</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>The <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"><code>enterkeyhint</code></a> specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describes elements which belongs to this one.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indicates the form that is the owner of the element.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formenctype">formenctype</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the <code>enctype</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formmethod">formmethod</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the submission method to use during form submission (<code>GET</code>, <code>POST</code>, etc.). If this attribute is specified, it overrides the <code>method</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formnovalidate">formnovalidate</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the <code>novalidate</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formtarget">formtarget</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the <code>target</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>IDs of the <code><th></code> elements which applies to this element.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Specifies the height of elements listed here. For all other elements, use the CSS {{cssxref("height")}} property.</p> + + <div class="note"> + <p><strong>Note:</strong> In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("height") }} property should be used instead.</p> + </div> + </td> + </tr> + <tr> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Prevents rendering of given element, while keeping child elements, e.g. script elements, active.</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the lower bound of the upper range.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td> 링크된 리소스의 URL</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>링크된 리소스의 언어를 나타냄</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td></td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td>Specifies a picture which represents the command.</td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의 값은 유일해야함.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/importance">importance</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>Indicates the relative fetch priority for the resource.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">integrity</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>Specifies a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> value that allows browsers to verify what they fetch.</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td> + <td>{{ HTMLElement("img") }}</td> + <td>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.</td> + </tr> + <tr> + <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td> + <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indicates that the image is part of a server-side image map.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Specifies the type of key generated.</td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies the kind of text track.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies a user-readable title of the text track.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>요소에서 사용된 언어를 정의합니다.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>요소에서 사용된 스크립트 언어를 정의합니다.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td> + <td>Indicates if the element should be loaded lazily (<code>loading="lazy"</code>) or loaded immediately (<code>loading="eager"</code>).</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list">list</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifies a list of pre-defined options to suggest to the user.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the upper bound of the lower range.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>문서의 캐시 매니페스트의 URL을 가리킵니다.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>허용되는 최대 값을 나타냅니다.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>요소에 허용되는 문자의 최대 길이를 나타냅니다.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Defines the minimum number of characters allowed in the element.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Specifies a hint of the media for which the linked resource was designed.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수 있음.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>허용되는 최소 값을 나타냄.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/muted">muted</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indicates whether the audio will be initially silenced on page load.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>요소의 이름. For example used by the server to identify the fields in form submits.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>This attribute indicates that the form shouldn't be validated when submitted.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Indicates whether the details will be shown on page load.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indicates the optimal numeric value.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Defines a regular expression which the element's value will be validated against.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>A URL indicating a poster frame to show until the user plays or seeks.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>요소가 수정될 수 있는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Specifies the relationship of the target object to the link object.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>이 요소가 채워져야 하는지를 나타냅니다.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea의 줄 개수를 정의합니다.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Defines the number of rows a table cell should span over.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td></td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Defines a value which will be selected on page load.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}</td> + <td></td> + </tr> + <tr> + <td><code>slot</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Assigns a slot in a shadow DOM shadow tree to an element.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck">spellcheck</a></code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Indicates whether spell checking is allowed for the element.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>내장 컨텐츠의 URL</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td></td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Defines the first number if other than 1.</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>이전 스타일을 오버라이드할 CSS 스타일을 정의함.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Overrides the browser's default tab order and follows the one specified instead.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>요소 위에 호버링했을떄 표시될 툴팁의 텍스트</td> + </tr> + <tr> + <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/translate">translate</a></code></td> + <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td> + <td>Specify whether an element’s attribute values and the values of its <code><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦">Text</a></code> node children are to be translated when the page is localized, or whether to leave them unchanged.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>요소의 타입을 정의함</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td>Note: In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead. In other cases, such as {{ HTMLElement("canvas") }}, the width must be specified with this attribute.</td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indicates whether the text should be wrapped.</td> + </tr> + </tbody> +</table> + +<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2> + +<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p> + +<p>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 {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p> + +<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. 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.</p> + +<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code><input></code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p> + +<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,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.</p> + +<p>IDL attributes can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> 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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, 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 (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML 요소</a></li> +</ul> |