From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- .../index.html" | 928 --------------------- files/ko/learn/html/forms/index.html | 358 -------- .../sending_and_retrieving_form_data/index.html | 249 ------ .../html/forms/your_first_html_form/index.html | 272 ------ .../author_fast-loading_html_pages/index.html | 132 +++ .../index.html | 268 ------ .../html/howto/use_data_attributes/index.html | 82 ++ .../index.html" | 82 -- .../ideo_and_audio_content/index.html | 327 -------- .../video_and_audio_content/index.html | 327 ++++++++ 10 files changed, 541 insertions(+), 2484 deletions(-) delete mode 100644 "files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" delete mode 100644 files/ko/learn/html/forms/index.html delete mode 100644 files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/ko/learn/html/forms/your_first_html_form/index.html create mode 100644 files/ko/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html create mode 100644 files/ko/learn/html/howto/use_data_attributes/index.html delete mode 100644 "files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html (limited to 'files/ko/learn/html') diff --git "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" "b/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" deleted file mode 100644 index 37bfbb57ae..0000000000 --- "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" +++ /dev/null @@ -1,928 +0,0 @@ ---- -title: HTML_폼_구성_방법 -slug: Learn/HTML/Forms/HTML_폼_구성_방법 -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

- -

HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. XForms같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. How to build custom form widgets

- -

글로벌 구조

- -

<form> 요소

- -

{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.

- -

우리는 저번 문서에서 이미 이 내용을 다루었다.

- -
주의:폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.
- -

언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.

- -
-

주의:HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.

-
- -

{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.

- -


-  {{HTMLElement("form")}} 요소 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("accept-charset","form")}}UNKNOWN서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.
{{htmlattrxref("action","form")}} 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL 
{{htmlattrxref("autocomplete","form")}}on이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. on 또는 off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded\method 속성이 post 값으로 지정되면,  서버로 폼을 전송하는 콘텐츠 MIME의 타입을 지정한다.: -
    -
  • application/x-www-form-urlencoded
    • -
  • multipart/form-data: {{HTMLElement("input")}}요소의 type 속성을 file로 지정한 경우 이 속성의 값을 사용한다. 
    • -
  • text/plain
    • -
-
{{htmlattrxref("method","form")}}get브라우저가 폼을 전송하기위해 사용하는 HTTP의 방식을 지정한다.
- 이 속성은 두개의 값중 한개를 가진다.  get 또는 post.
{{htmlattrxref("name","form")}} 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 id 속성으로 대신 지정할 수 있다.
{{htmlattrxref("novalidate","form")}}(false)이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.
{{htmlattrxref("target","form")}}_self폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. -
    -
  • _self: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.
    • -
  • _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다.
    • -
  • _parent: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 _self 키워드와 똑같이 작동한다.
    • -
  • _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  _self 키워드와 똑같이 작동한다.
    • -
-
- -

요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.

- -

기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.

- -

 <fieldset> 와 <legend> 요소

- -

{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어  Jaws, NVDA같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. 

- -

아래 조그만 예제가 있다.

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -

이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,

- -

이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.

- -

{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("fieldset")}} 요소의 속성
속성 이름기본값설명
{{htmlattrxref("disabled","fieldset")}}(false)만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.
- -

The <label> element

- -

{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.

- -

{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.

- -


- {{HTMLElement("label")}} 요소의 속성

- -


-  

- - - - - - - - - - - - - - - - -
속성 명기본값설명
{{htmlattrxref("for","label")}} {{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.
- -

요소는 for속성으로 지정한 위젯과 묶여진다. for속성은 해당 위젯의 실제 id 속성을 참조한다. 위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.

- -

심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-    <label for="taste_1">I like cherry</label>
-  </p>
-  <p>
-    <label for="taste_2">
-      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
-      I like banana
-    </label>
-  </p>
-</form>
- -

몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.

- -

다음 예제를 보아라

- -
<form>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <p>
-    <label for="name">
-      <span>Name: </span>
-      <input type="text" id="name" name="username" required />
-      <strong><abbr title="required">*</abbr></strong>
-    </label>
-  </p>
-
-  <p>
-    <label for="birth">
-      <span>Date of birth: </span>
-      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
-    </label>
-  </p>
-</form>
- -

이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. 이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.

- -

첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.

- -

두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.

- -

<output> 요소

- -

이 요소는 계산의 출력을 저장하는데 사용된다. It formally defines a relationship between the fields used to get the data required to perform the calculation and an element to be used to display the results. It is also understood as a live region by some assistive technologies (which means that when the content of the {{HTMLElement("output")}} element changes, the assistive technology is aware of that change and can react to it).

- -

{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("output")}} 요소 속성
Attribute nameDefault valueDescription
{{htmlattrxref("for","output")}} 스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)
- -

form이 사용되는 일반적인 form 구조

- -

HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.

- -

예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.

- -

게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

- -

HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

- -

간단한 지불 폼을 만들어 보자

- -
<form>
-  <h1>Payment form</h1>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <section>
-    <h2>Contact information</h2>
-
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-        <li>
-          <label for="title_1">
-            <input type="radio" id="title_1" name="title" value="M." />
-            Mister
-          </label>
-        </li>
-        <li>
-          <label for="title_2">
-            <input type="radio" id="title_2" name="title" value="Ms." />
-            Miss
-          </label>
-        </li>
-      </ul>
-    </fieldset>
-
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <input type="text" id="name" name="username" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-
-     <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <input type="email" id="mail" name="usermail" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <h2>Payment information</h2>
-
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-        <select id="card" name="usercard">
-          <option value="visa">Visa</option>
-          <option value="mc">Mastercard</option>
-          <option value="amex">American Express</option>
-        </select>
-      </label>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <input type="text" id="number" name="cardnumber" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <input type="text" id="date" name="expiration" required />
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formated as mm/yy</em>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <p>
-      <button>Validate the payment</button>
-    </p>
-  </section>
-</form>
- -

See this form in action (with a touch of CSS):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

HTML 위젯

- -

When you build a form, you need to use some widgets to collect data from the user. In this article we will see how to display those widgets; if you want to know more about the way those widgets work, it is detailed in the article: The native form widgets.

- -

The <input> element

- -

이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. 이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. 

- -

This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
type 속성 의 값설명필수 속성관련된 속성
단일 선 텍스트 필드
text이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음) {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
email하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
password텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search검색 하기 위한 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
tel전화 번호를 입력할 수 있는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url절대 URL을 다루기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
텍스트 입력 없는 컨트롤
checkbox체크박스 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color색상을 입력 받기위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileA control that lets the user select a file. {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden보여주지 않는 컨트롤 이지만 서버로 전송되는 필드  
number소숫점을 입력받는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range정확하지 않는 숫자를 입력받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
시간 과 날짜 컨트롤
date(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeUTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
버튼
button기본 행동이 없는 누르는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image그래픽적인 전송버튼{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset폼의 내용을 초기화 하는 컨트롤 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit폼을 전송하는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
- -

몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. 이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.

- -

요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.

- -

<textarea> 요소

- -

이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{HTMLElement("textarea")}} 요소 속성
Attribute name기본값설명
{{htmlattrxref("cols","textarea")}}20보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비
{{htmlattrxref("rows","textarea")}} 보여지는 텍스트 행의 수
{{htmlattrxref("wrap","textarea")}}softhard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.
- -

 {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.

- -

이는 두가지 영향이 있다.

- - - -

 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.

- -
<form>
-  <p>
-    <label for="text_1">With regular HTML</label><br>
-    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
-  </p>
-  <p>
-    <label for="text_2">With escaped HTML</label><br>
-    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
-  </p>
-  <p>
-    <button>Send me</button>
-  </p>
-</form>
- -

<select>, <option>그리고 <optgroup> 요소

- -

요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 The native form widgets.

- -

선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.

- -

Let's take an example:

- -
<form>
-  <p>
-    <label for="myFruit">Pick a fruit</label>
-    <select id="myFruit" name="fruit">
-      <!-- There is a trick here you think you'll pick
-         a banana but you'll eat an orange >:-) -->
-      <option value="orange">Banana</option>
-      <option>Cherry</option>
-      <optgroup label="berries">
-        <option>Blueberry</option>
-        <option>Raspberry</option>
-        <option>Strawberry</option>
-      </optgroup>
-    </select>
-  </p>
-</form>
- -

{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다. 만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.

- -

{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다..

- - - - - - - - - - - - - - - - - - - - - - -
{{HTMLElement("option")}} 요소 의 속성
속성 이름기본값설명
{{htmlattrxref("label","option")}} 이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.
{{htmlattrxref("selected","option")}}(false)만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("optgroup")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("label","optgroup")}} The name of the group of options. This attribute is mandatory.
- -

<datalist>요소 

- -

이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.

- -

{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.

- -

요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.

- -
<form>
-  <p>
-    <label for="myFruit">What is your favorite fruit?</label>
-    <input type="text" id="myFruit" name="fruit" list="fruitList" />
-
-    <datalist id="fruitList">
-      <label for="suggestion">or pick a fruit</label>
-      <select id="suggestion" name="altFruit">
-        <option value="banana">Banana</option>
-        <option value="cherry">Cherry</option>
-        <option value="strawberry">Strawberry</option>
-      </select>
-    </datalist>
-  </p>
-</form>
- -

한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

<meter> 와 <progress> 요소들 

- -

이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.

- - - -

속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.

- -


- {{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
{{htmlattrxref("min","meter")}}0The lower numeric bound of the measured range.
{{htmlattrxref("max","meter")}}1The upper numeric bound of the measured range.
{{htmlattrxref("low","meter")}}the min valueThe upper numeric bound of the low end of the measured range.
{{htmlattrxref("high","meter")}}the max valueThe lower numeric bound of the high end of the measured range.
{{htmlattrxref("optimum","meter")}} The optimal numeric value.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("progress")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("max","progress")}} This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.
- -

The <button> element 

- -

{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. 버튼은 type속성에 따라 3가지 타입을 가진다.

- - - -


- {HTMLElement("button")}} 요소의 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("type","button")}}submit버튼의 타입.  button, reset, submit 이 있다.
{{htmlattrxref("formaction","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.
{{htmlattrxref("formenctype","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.
{{htmlattrxref("formmethod","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.
{{htmlattrxref("formnovalidate","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.
{{htmlattrxref("formtarget","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.
- -

기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.

- -
Note: For historical reasons, the {{HTMLElement("button")}} element wasn't used very often and in many forms developers preferred to use buttons made with the {{HTMLElement("input")}} element. This is due to a bug in legacy versions of Internet Explorer (IE). In IE6 and IE7, if you add a name and a value attribute to a {{HTMLElement("button")}} element, they do not send the content of the value attribute but the raw content of the button instead. This has been fixed since IE8, so there is no longer any reason to avoid using the {{HTMLElement("button")}} element.
- -
 
- -

공통 속성

- -

Many of the elements used to define form widgets have some their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets. Here is a list of those common attributes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
autofocus(false)This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
disabled(false)This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the disabled attribute set, then the element is enabled.
form The form element that the widget is associated with. The value of the attribute must be the id attribute of a {{HTMLElement("form")}} element in the same document. In theory, it lets you set a form widget outside of a {{HTMLElement("form")}} element. In practice, however, there is no browser which supports that feature.
name The name of the element; this is submitted with the form data.
value The element's initial value.
- -

Using ARIA to structure HTML forms

- -

ARIA is a W3C Candidate Recommendation which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "How to build custom form widgets" article, but there are some basics that are good to know.

- -

Before going further, it's worth noting that support for ARIA and assistive technologies among browsers is far from perfect, but it's improving. Just to understand the issue, when a browser encounters an ARIA attribute, it has to send information to the operating system's accessibility layer. Not all browsers are good at doing this cross platform. The assistive technologies, on their own, have to connect themselves to the OS accessibility layer to handle the information that comes from the browsers. Surprisingly, not all assistive technologies do it well. So using ARIA does not mean that your web application will be accessible, but it means that you do your best to achieve this. Unfortunately, for the time being, ARIA remains a best effort technology, but it's always better than nothing.

- -

If you want to dig into using ARIA with HTML forms, feel free to read the related section in the ARIA documentation.

- -

The aria-labelledby attribute

- -

This attribute is a convenient way to define a label without using the {{HTMLElement("label")}} element. The attribute is set on the widget element and references the id attribute of the element to use as a label.

- -
<form>
-  <p id="fruitLabel">What's your favorite fruit</p>
-  <p>
-    <input type="text" name="fruit" aria-labelledby="fruitLabel">
-  </p>
-</form>
- -

Conceptually, it's the opposite of the for attribute on the {{HTMLElement("label")}} element. With the for attribute, you reference the id of the widget but with the aria-labbeldby attribute, you reference the id of the label.

- -

The aria-describedby attribute

- -

This attribute works like the aria-labelledby attribute. The difference is mainly semantic. A label defines the essence of an object, while a description provides more information that the user might need. This attribute is not advised for form elements, you should rely on the aria-labelledby attribute, except if you want to provide extensive information on the current form element. It is to be used as a provider for a longer description.

- -

The aria-label attribute

- -

This attribute is used when there is no explicit label in the DOM for a given widget. It lets you provide a widget that will be passed to assitive technologies without actually creating a DOM node for it.

- -
<form>
-  <p>
-    <input type="search" name="q" aria-label="Search" />
-    <input type="submit" value="Go" />
-  </p>
-</form>
- -

The role attribute

- -

This is the most important ARIA attribute. It lets you give specific semantic information, understandable by assitive technologies, for a given HTML element. There are many roles available and some of them are dedicated to form widgets.

- -

ARIA tries to provide semantics for widgets that are not currently available in HTML as well as for elements that already exist. We will see in detail how to use those roles in the article: How to build custom form widgets.

- -

Those roles for form widgets are :

- - - -

It's also worth noting that there's something called a composite role:

- - - -

If those roles are extremely useful, know that there are more; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.

- -

결론

- -

You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: The native form widgets.

- -

볼거리

- - diff --git a/files/ko/learn/html/forms/index.html b/files/ko/learn/html/forms/index.html deleted file mode 100644 index f7244cbdc1..0000000000 --- a/files/ko/learn/html/forms/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: HTML 폼 가이드 -slug: Learn/HTML/Forms -translation_of: Learn/Forms ---- -

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

- -

항목

- -
    -
  1. 나의 첫 HTML 폼
    2. -
  2. HTML HTML 폼 구성 방법
    3. -
  3. 기본 폼 위젯
    4. -
  4. CSS와 HTML 폼 -
      -
    1. HTML 폼 스타일
      2. -
    2. HTML 폼을 위한 고급 스타일
      3. -
    3. 폼 위젯을 위한 호환성 테이블 속성
      4. -
    -
    5. -
  5. 데이터 주고 받기
    6. -
  6. 데이터 유효성 검사
    7. -
  7. 사용자 폼 위젯 만드는 방법
    8. -
  8. 자바스크립트를 통해서 폼 전달 하기 -
      -
    1. FormData 객체 사용
      2. -
    -
    9. -
  9. 기존 브라우저에서 HTML 폼
    10. -
- -

HTML 문서

- -

HTML 요소

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
요소관련 DOM 인터페이스설명
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}button 요소는 클릭할 수 있는 버튼을 나타낸다.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. 
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}form  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}legend 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}optgroup 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}HTML option 요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}output 요소는 계산 결과를 나타냅니다.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.
- -
-

Note: 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.

-
- -

HTML 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름요소설명
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset{{ HTMLElement("form") }}지원하는 문자 집합 목록
action{{ HTMLElement("form") }}폼을 통해서 전송 정보를 처리하는 프로그램의 URL 
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge{{ HTMLElement("keygen") }}공개 키(public key)와 함께 전송되는 문자열입니다.
checked{{ HTMLElement("input") }} -

해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. 

-
cols{{ HTMLElement("textarea") }} -

textarea의 세로줄 수를 설정합니다.

-
data{{ HTMLElement("object") }}자원의 URL을 명시합니다.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype{{ HTMLElement("form") }}POST방식으로 전송되는 데이터의 타입을 설정합니다.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 소유자인 폼을 나타냅니다.

-
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}허용되는 최댓값을 나타냅니다.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}요소에서 허용되는 특징의 최대 수를 명시합니다.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}허용되는 최솟값을 나타냅니다.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 이름. For example used by the server to identify the fields in form submits.

-
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("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.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }}
target{{ HTMLElement("form") }}
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
- -

Normative reference

- - diff --git a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index f1d7c35437..0000000000 --- a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Sending and retrieving form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

- -

데이터는 어디로 갈까?

- -

클라이언트/서버 구조

- -

웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다. 서버 응답은 요청과 똑같은 프로토콜을 사용한다.

- -

A basic schema of the Web client/server architecture

- -

클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.

- -

클라이언트측: 데이터 보내기

- -

{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.

- -

{{htmlattrxref("action","form")}} 속성

- -

이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.

- -
Examples
- -

첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.

- -
<form action="http://foo.com">
- -

여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.

- -
<form action="/somewhere_else">
- -

아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.

- -
<form>
- -

이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.

- -
<form action="#">
- -
-

Note: HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. 반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도  {{htmlattrxref("action","form")}} 속성에서 안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 

-
- -

{{htmlattrxref("method","form")}} 속성

- -

이 속성은 데이터를 어떻게 보낼 것인지 정의한다. HTTP protocol 은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.

- -

이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.

- -
GET 방식
- -

GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. 바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.

- -
예제
- -

다음 폼을 생각 해 봅시다.

- -
<form action="http://foo.com" method="get">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

GET 방식을 사용하면 HTTP 요청은 다음과 같다.

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
POST 방식
- -

POST 방식은 조금 다르다. 이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" 만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.

- -

예제

- -

이 폼을 생각해보라(위 예제와 똑같다)

- -
<form action="http://foo.com" method="post">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.

- -

물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). 사용자에게 보여지는 것은 호출한 URL뿐이다. 그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.

- -
    -
  1. 만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.
    2. -
  2. 만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.
    3. -
- -

서버측: 데이터 가져오기

- -

어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.

- -

예제: PHP 날것

- -

PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.

- -
<?php
-  // The global $_POST variable allow to access the data send with the POST method
-  // To access the data send with the GET method, you can use $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.

- -
Hi Mom
- -

예제: Python

- -

이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.

- -
#!/usr/bin/env python
-import html
-import cgi
-import cgitb; cgitb.enable()     # for troubleshooting
-
-print("Content-Type: text/html") # HTTP header to say HTML is following
-print()                          # blank line, end of headers
-
-form = cgi.FieldStorage()
-say  = html.escape(form["say"].value);
-to   = html.escape(form["to"].value);
-
-print(say, " ", to)
- -

이 결과는 PHP와 똑같다?.

- -
Hi Mom
- -

다른 언어와 프레임 워크

- -

 Perl, Java, .Net, Ruby등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) 다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.

- - - -

이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다. 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.

- -

특별한 경우: 파일 보내기

- -

파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.

- -

{{htmlattrxref("enctype","form")}} 속성

- -

이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. 서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. 기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다

- -

만약 파일을 보내고 싶다면 두 가지를 해야한다.

- - - -

예제 

- -
<form method="post" enctype="multipart/form-data">
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -
-

Note: 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.

-
- -
-

Warning: 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.

-
- -

보안 코너

- -

데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.

- -

일반적인 보안 결함

- -

무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.

- -

XSS 과 CSRF

- -

크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.

- -

XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(same origin policy)의 접근 제어를 우회하여 사용 될 수 있다. 이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.

- -

CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)

- -

XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.

- -

이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.

- -

SQL injection

- -

SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request and hopes that the server will execute it (many times when the application server tries to store the data). This is actually one of the main vector attacks against web sites.

- -

The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using mysql_real_escape_string() on a PHP/MySQL infrastructure).

- -

HTTP header injection 와 email injection

- -

These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users but are an open door to deeper problems such as session hijacking or phishing attacks.

- -

These attacks are mostly silent, and can turn your server into a zombie.

- -

Be paranoid: Never trust your users

- -

So, how do you fight these threats? This is a topic far beyond this guide; however there are a few rules it's good to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.

- -

All data that comes to your server must be checked and sanitized. Always. No exception.

- - - -

If you follow these three rules of thumb, you should avoid many/most problems; however, it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.

- -

결론

- -

여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

- -

볼거리

- -

If you want to learn more about securing a web application, you can dig into these resources:

- - diff --git a/files/ko/learn/html/forms/your_first_html_form/index.html b/files/ko/learn/html/forms/your_first_html_form/index.html deleted file mode 100644 index b997fc1f08..0000000000 --- a/files/ko/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: 나의 첫 HTML 폼 -slug: Learn/HTML/Forms/Your_first_HTML_form -translation_of: Learn/Forms/Your_first_form ---- -

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

- -

시작하기전에

- -

HTML 폼 이란?

- -

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

- -

HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. 대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

- -

폼을 사용하려면 무엇이 필요합니까?

- -

HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. 물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.

- -

HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 Sending and retrieving form data.

- -

폼 디자인하기

- -

코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.

- - - -

이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.

- -

The form to build, roughly sketch

- -

우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.

- -

HTML를 직접 다루어 보자

- -

자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

- -

{{HTMLElement("form")}} 요소

- -

모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 action 속성과 method 속성은 필수적으로 설정해야 한다.

- - - -

만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기

- -

우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.

- -

HTML코드를 다음과 같이 짤 것이다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-</form>
- -

{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. How to structure an HTML form.

- -

{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. native form widgets 우리의 예제에서는 이 속성의 기본 값인 오직 text값만 사용했다. 이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다. 또한 오직 이메일 주소만 받는 한줄 텍스트 필드 email값을 사용했다. 이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. Form data validation

- -

마지막 요소를 보기전에 다음 <input /> VS <textarea></textarea>요소를 봐야한다. 이것은 이상한 HTML 요소중 하나이다. <input>태그는 자동 닫힘 태그다 무슨 의미냐면 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. 요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.

- -
<input type="text" value="by default this element is filled with this text" />
- -

이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.

- -
<textarea>by default this element is filled with this text</textarea>
- -

 {{HTMLElement("button")}} 요소로 끝내기

- -

우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

버튼은 다음과 같은 3개 종류가 있다. submit, reset, button.

- - - -

알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.

- -

CSS로 더욱 나이스하게 만들기

- -

이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.

- -

- -

CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.

- -

폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.

- -
form {
-    /* Just to center the form on the page */
-    margin: 0 auto;
-    width: 400px;
-    /* To see the outline of the form */
-    padding: 1em;
-    border: 1px solid #CCC;
-    border-radius: 1em;
-}
- -

그 다음 각각 폼 위젯사이에 여백을 추가하자.

- -
form div + div {
-    margin-top: 1em;
-}
- -

이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.

- -
label {
-    /* To make sure that all label have the same size and are properly align */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  Styling HTML forms

- -

폰트, 크기, 테두리를 변경 해보자

- -
input, textarea {
-    /* To make sure that all text fields have the same font settings
-       By default, textareas have a monospace font */
-    font: 1em sans-serif;
-
-    /* To give the same size to all text field */
-    width: 300px;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-
-    /* To harmonize the look & feel of text field border */
-    border: 1px solid #999;
-}
- -

HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.

- -
input:focus, textarea:focus {
-    /* To give a little highlight on active elements */
-    border-color: #000;
-}
- -

다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 vertical-align 속성을  top이라 변경 해야 한다.

- -

또하나 유용한 resize 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.

- -
textarea {
-    /* To properly align multiline text fields with their labels */
-    vertical-align: top;
-
-    /* To give enough room to type some text */
-    height: 5em;
-
-    /* To allow users to resize any textarea vertically
-       It does not work on every browsers */
-    resize: vertical;
-}
- -

버튼도 특별한 스타일이 필요하다. 이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다

- -
.button {
-    /* To position the buttons to the same position of the text fields */
-    padding-left: 90px; /* same size as the label elements */
-}
-
-button {
-    /* This extra margin represent roughly the same space as the space
-       between the labels and their text fields */
-    margin-left: .5em;
-}
- -

이제 폼이 더 나이스 해졋다.

- -

- -

웹서버로 데이터 보내기

- -

까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.

- -

{{HTMLElement("form")}} 요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.

- -

이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.

- -

그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_email" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로  HTTP POST 방식으로 전송된다.

- -

서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

결론

- -

축하한다! 첫번째 HTML폼을 만들었다.

- - - - - - - - - - - - - - - -
Live example
{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
Check out the source code
- -

하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.

- -

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..09ac7171e0 --- /dev/null +++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,132 @@ +--- +title: Tips for Authoring Fast-loading HTML Pages +slug: Tips_for_Authoring_Fast-loading_HTML_Pages +tags: + - HTML +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

+

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

+

페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.

+

Tips

+

페이지 무게를 줄여라

+

페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.

+

불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다

+

HTML Tidy등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.

+

파일 수를 최소화하라

+

웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.

+

브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 If-Modified-Since 요청을 웹 서버로 보내게 됩니다.

+

웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.

+

브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.

+

도메인 검색을 줄이라

+

각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.

+

이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.

+

재사용되는 내용을 캐시하라

+

캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.

+

특히 Last-Modified 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 Last-Modified 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.

+

그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.

+

추가 정보:

+
    +
  1. RSS 해커들을 위한 HTTP 조건부 GET
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

페이지 컴포넌트의 순서를 최적화

+

사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.

+

페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.

+

페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.

+

inline script 수를 최소화

+

inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 document.write()의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. document.write()에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.

+

최신 CSS와 올바른 markup을 사용하라

+

최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.

+

올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 + + 전처리(pre-process) + 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, HTML Tidy는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.

+

내용을 조각내라

+

table기반의 레이아웃을 <div>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.

+

아래와 같이 깊게 중첩된 table 대신

+
+ 
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+

중첩되지 않은 table 또는 div를 쓰라

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+

그림과 표의 크기를 명시하라

+

브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 그림의 height와 width가 명시되어야 합니다.

+

표는 CSS 선택자:속성 조합이다.

+
+

table-layout: fixed;

+
+

그리고 COL과 COLGROUP 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.

+

사용자 에이전트의 요구사항을 적절하게 선택하라

+

웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?

+

이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.

+

그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.

+

페이지 구조 예

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+
+
+
+
+ · BODY
+
+ · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.
+
+
+
+
+
+ · SCRIPT ...
+ DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+ 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.
+
+
+
+

관련 링크

+ +
+

원문 정보

+ +
+

 

diff --git a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html deleted file mode 100644 index 8a1d0cb625..0000000000 --- a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: 약자 표시 및 이해시키는 방법 -slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -tags: - - HTML - - 초보 -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -
-

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

-
- - - - - - - - - - - - -
먼저:기초적인 HTML 문서 만들기에 익숙해지셔야 합니다.
목표:HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.
- -

약자에 대해

- -

항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)

- -

We have to make sure that our readers can understand our abbreviations. In standard writing, it's really common to spell out the abbreviation only on its first occurrence, then just use the abbreviation everywhere:

- -
유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.
- -
-

이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.

-
- -

abbr 요소

- -

HTML 약자 요소 ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.

- -
-

알림: <acronym> 요소에 대해 들어보셨겠지만, <acronym>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.

-
- -
<p>I need to talk to you <abbr>ASAP</abbr>.</p>
- -

이렇게 title 속성으로 약자를 설명할 수도 있습니다:

- -
<p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p>
- -

언제 title 속성을 적어야 할까요? 마음대로 시면 됩니다. It can be overkill to spell out a very common abbreviation like "ASAP" or an abbreviation used many times in your document. When in doubt, err on the side of providing the full description.

- -
-

Note: In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your title attribute as inside your <abbr> element.

-
- -

{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 title 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:

- -

{{ EmbedLiveSample('The_abbr_element','100%',90) }}

- -
-

중요: 만약 사람들이 약자를 이해하는 것을 따진다면, 절대로 title 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.

-
- -

실전

- -

{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <abbr>로 표시하고 title 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. 용어 사전에서 모든 약자들을 보실 수 있습니다.

- - - -

{{ EmbedLiveSample('Exercise','100%',220) }}

- -

더 알아보기

- - diff --git a/files/ko/learn/html/howto/use_data_attributes/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..d4abd5da57 --- /dev/null +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: 데이터 속성 사용하기 +slug: Learn/HTML/Howto/데이터_속성_사용하기 +tags: + - HTML + - HTML5 + - 가이드 + - 예제 + - 웹 + - 전용 데이터 속성 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

+ +

HTML 문법

+ +

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

JavaScript 에서 접근하기

+ +

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

+ +

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

+ +

CSS 에서 접근하기

+ +

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

+ +

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

+ +

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

+ +

문제점

+ +

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

+ +

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

+ +

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

+ +

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

+ +

더 알아보기

+ + diff --git "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" "b/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" deleted file mode 100644 index d4abd5da57..0000000000 --- "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 -tags: - - HTML - - HTML5 - - 가이드 - - 예제 - - 웹 - - 전용 데이터 속성 -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

- -

HTML 문법

- -

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

JavaScript 에서 접근하기

- -

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

- -

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

- -

CSS 에서 접근하기

- -

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

- -
article::before {
-  content: attr(data-parent);
-}
- -

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

- -

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

- -

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

- -

문제점

- -

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

- -

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

- -

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

- -

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

- -

더 알아보기

- - diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html deleted file mode 100644 index d6930ac381..0000000000 --- a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html +++ /dev/null @@ -1,327 +0,0 @@ ---- -title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

- - - - - - - - - - - - -
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
- -

웹 상에서 비디오 그리고 오디오

- -

Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

- -

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

- -

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

- -
-

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

-
- -

The <video> element

- -

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

The features of note are:

- -
-
{{htmlattrxref("src","video")}}
-
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
-
{{htmlattrxref("controls","video")}}
-
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
-
The paragraph inside the <video> tags
-
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.
-
- -

The embedded video will look something like this:

- -

A simple video player showing a video of a small white rabbit

- -

You can try the example live here (see also the source code.)

- -

Using multiple source formats to improve compatibility

- -

There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.

- -

Contents of a media file

- -

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

- -

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

- -

Diagram conceptualizing the contents of a media file at the track level.

- -

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

- -

For example:

- - - -

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

- -

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.

- -

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

- -

Media file support in browsers

- -
-

Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

- -

Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

-
- -

The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of {{Glossary("Codec","codecs")}}, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

- -

Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.

- -

Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.

- -

One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

- -

So how do we do this? Take a look at the following updated example (try it live here, also):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Here we've taken the src attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

- -

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

- -

Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

- -

Other <video> features

- -

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

The resulting UI looks something like this:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

The new features are:

- -
-
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
-
You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.
-
{{htmlattrxref("autoplay","video")}}
-
Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
-
{{htmlattrxref("loop","video")}}
-
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
-
{{htmlattrxref("muted","video")}}
-
Causes the media to play with the sound turned off by default.
-
{{htmlattrxref("poster","video")}}
-
The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.
-
{{htmlattrxref("preload","video")}}
-
-

Used for buffering large files; it can take one of three values:

- -
    -
  • "none" does not buffer the file
    • -
  • "auto" buffers the media file
    • -
  • "metadata" buffers only the metadata for the file
    • -
-
-
- -

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

- -

The <audio> element

- -

The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

This produces something like the following in a browser:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note: You can run the audio demo live on Github (also see the audio player source code.)

-
- -

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

- - - -

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

- -

Restarting media playback

- -

At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:

- -
const mediaElem = document.getElementById("my-media-element");
-mediaElem.load();
- -

Detecting track addition and removal

- -

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:

- -
const mediaElem = document.querySelector("video");
-mediaElem.audioTracks.onaddtrack = function(event) {
-  audioTrackAdded(event.track);
-}
-
- -

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

- -

Displaying video text tracks

- -

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

- - - -

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the {{htmlelement("track")}} element.

- -
-

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

-
- -

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

- -
-
subtitles
-
Translations of foreign material, for people who don't understand the words spoken in the audio.
-
captions
-
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
-
timed descriptions
-
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
-
- -

A typical WebVTT file will look something like this:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

To get this displayed along with the HTML media playback, you need to:

- -
    -
  1. Save it as a .vtt file in a sensible place.
    2. -
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. -
- -

Here's an example:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

This will result in a video that has subtitles displayed, kind of like this:

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

- -
-

Note: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

-
- -

Active learning: Embedding your own audio and video

- -

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

- -

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

- -

We would like you to:

- -
    -
  1. Save your audio and video files in a new directory on your computer.
    2. -
  2. Create a new HTML file in the same directory, called index.html.
    3. -
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. -
  4. Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.
    5. -
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. -
- -

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

- -

Summary

- -

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..d6930ac381 --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,327 @@ +--- +title: 비디오 그리고 오디오 컨텐츠 +slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

+ + + + + + + + + + + + +
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
+ +

웹 상에서 비디오 그리고 오디오

+ +

Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

+ +

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

+ +

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

+ +
+

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

+
+ +

The <video> element

+ +

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

The features of note are:

+ +
+
{{htmlattrxref("src","video")}}
+
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
+
{{htmlattrxref("controls","video")}}
+
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
+
The paragraph inside the <video> tags
+
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.
+
+ +

The embedded video will look something like this:

+ +

A simple video player showing a video of a small white rabbit

+ +

You can try the example live here (see also the source code.)

+ +

Using multiple source formats to improve compatibility

+ +

There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.

+ +

Contents of a media file

+ +

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

+ +

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

+ +

Diagram conceptualizing the contents of a media file at the track level.

+ +

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).

+ +

For example:

+ + + +

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

+ +

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.

+ +

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

+ +

Media file support in browsers

+ +
+

Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

+ +

Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.

+
+ +

The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of {{Glossary("Codec","codecs")}}, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

+ +

Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.

+ +

Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.

+ +

One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.

+ +

So how do we do this? Take a look at the following updated example (try it live here, also):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Here we've taken the src attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.

+ +

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.

+ +

Refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.

+ +

Other <video> features

+ +

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

The resulting UI looks something like this:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

The new features are:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.
+
{{htmlattrxref("autoplay","video")}}
+
Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
+
{{htmlattrxref("loop","video")}}
+
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
+
{{htmlattrxref("muted","video")}}
+
Causes the media to play with the sound turned off by default.
+
{{htmlattrxref("poster","video")}}
+
The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.
+
{{htmlattrxref("preload","video")}}
+
+

Used for buffering large files; it can take one of three values:

+ +
    +
  • "none" does not buffer the file
    • +
  • "auto" buffers the media file
    • +
  • "metadata" buffers only the metadata for the file
    • +
+
+
+ +

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

+ +

The <audio> element

+ +

The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

This produces something like the following in a browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note: You can run the audio demo live on Github (also see the audio player source code.)

+
+ +

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

+ + + +

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

+ +

Restarting media playback

+ +

At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:

+ +
const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+ +

Detecting track addition and removal

+ +

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:

+ +
const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+
+ +

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

+ +

Displaying video text tracks

+ +

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

+ + + +

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the WebVTT file format and the {{htmlelement("track")}} element.

+ +
+

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

+
+ +

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

+ +
+
subtitles
+
Translations of foreign material, for people who don't understand the words spoken in the audio.
+
captions
+
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
+
timed descriptions
+
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
+
+ +

A typical WebVTT file will look something like this:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

To get this displayed along with the HTML media playback, you need to:

+ +
    +
  1. Save it as a .vtt file in a sensible place.
    2. +
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. +
+ +

Here's an example:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

This will result in a video that has subtitles displayed, kind of like this:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.

+ +
+

Note: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

+
+ +

Active learning: Embedding your own audio and video

+ +

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

+ +

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

+ +

We would like you to:

+ +
    +
  1. Save your audio and video files in a new directory on your computer.
    2. +
  2. Create a new HTML file in the same directory, called index.html.
    3. +
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. +
  4. Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.
    5. +
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. +
+ +

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

+ +

Summary

+ +

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf