diff options
Diffstat (limited to 'files/ko/learn/html')
| -rw-r--r-- | files/ko/learn/html/forms/html_폼_구성_방법/index.html | 928 | ||||
| -rw-r--r-- | files/ko/learn/html/forms/index.html | 358 | ||||
| -rw-r--r-- | files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html | 249 | ||||
| -rw-r--r-- | files/ko/learn/html/forms/your_first_html_form/index.html | 272 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/author_fast-loading_html_pages/index.html | 133 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html | 268 | ||||
| -rw-r--r-- | files/ko/learn/html/howto/use_data_attributes/index.html (renamed from files/ko/learn/html/howto/데이터_속성_사용하기/index.html) | 3 | ||||
| -rw-r--r-- | files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html (renamed from files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html) | 3 |
8 files changed, 137 insertions, 2077 deletions
diff --git a/files/ko/learn/html/forms/html_폼_구성_방법/index.html b/files/ko/learn/html/forms/html_폼_구성_방법/index.html deleted file mode 100644 index 37bfbb57ae..0000000000 --- a/files/ko/learn/html/forms/html_폼_구성_방법/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 ---- -<p>HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) <span style="line-height: 1.5;">HTML 폼의 <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">접근성</a>은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.</span></p> - -<p><span style="line-height: 1.5;">HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. </span>폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. <a href="https://developer.mozilla.org/en-US/docs/Archive/Web/XForms">XForms</a>같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></p> - -<h2 id="글로벌_구조" style="line-height: 30px;">글로벌 구조</h2> - -<h3 id="<form>_요소" style="line-height: 24px;"><form> 요소</h3> - -<p>{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.</p> - -<p>우리는 저번 문서에서 이미 이 내용을 다루었다.</p> - -<div class="note"><strong>주의:</strong>폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.</div> - -<p>언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수 있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.</p> - -<div class="note"> -<p><strong>주의:</strong>HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.</p> -</div> - -<p>{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.</p> - -<p><br> - <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;"> {{HTMLElement("form")}} 요소 속성</strong></p> - -<table> - <thead> - <tr> - <th scope="col">속성 이름</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td> - <td><code>UNKNOWN</code></td> - <td>서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">UNKNOWN</span><span style="line-height: 1.5;">이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.</span></td> - </tr> - <tr> - <td>{{htmlattrxref("action","form")}}</td> - <td> </td> - <td>폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL </td> - </tr> - <tr> - <td>{{htmlattrxref("autocomplete","form")}}</td> - <td><code>on</code></td> - <td>이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. <code>on</code> 또는 <code>off</code>.</td> - </tr> - <tr> - <td>{{htmlattrxref("enctype","form")}}</td> - <td><code>application/x-www-form-urlencoded</code></td> - <td>\<code>method</code> 속성이 <code>post 값으로 지정되면</code>, 서버로 폼을 전송하는 콘텐츠 <a href="http://en.wikipedia.org/wiki/Mime_type">MIME</a>의 타입을 지정한다.: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code>: {{HTMLElement("input")}}요소의 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">type</span> 속성을 <em>file</em>로 지정한 경우 이 속성의 값을 사용한다. </li> - <li><code>text/plain</code></li> - </ul> - </td> - </tr> - <tr> - <td>{{htmlattrxref("method","form")}}</td> - <td><code>get</code></td> - <td><span style="line-height: 1.5;">브라우저가 폼을 전송하기위해 사용하는 <a href="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a>의 방식을 지정한다.</span><br> - <span style="line-height: 1.5;">이 속성은 두개의 값중 한개를 가진다.</span> <code>get</code> 또는 <code>post</code>.</td> - </tr> - <tr> - <td>{{htmlattrxref("name","form")}}</td> - <td> </td> - <td>폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">id</span> 속성으로 대신 지정할 수 있다.</td> - </tr> - <tr> - <td>{{htmlattrxref("novalidate","form")}}</td> - <td>(<em>false</em>)</td> - <td>이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.</td> - </tr> - <tr> - <td>{{htmlattrxref("target","form")}}</td> - <td><code>_self</code></td> - <td>폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. - <ul> - <li><code>_self</code>: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.</li> - <li><code>_blank</code>: 응답을 새로운 브라우징 컨텍스트로 불러온다.</li> - <li><code>_parent</code>: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 <code>_self 키워드와 똑같이 작동한다</code>.</li> - <li><code>_top</code>: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면 <code>_self 키워드와 똑같이 작동한다</code>.</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.</p> - -<p><span style="line-height: 1.5;">기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다.</span> 이것은 요소들을 실제로 {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.</p> - -<h3 id="<fieldset>_와_<legend>_요소" style="line-height: 24px;"> <fieldset> 와 <legend> 요소</h3> - -<p>{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어 <span style="line-height: 1.5;"> </span><a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" style="line-height: 1.5;" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a>,<span style="line-height: 1.5;"> </span><a href="http://www.nvda-project.org/" rel="external" style="line-height: 1.5;" title="http://www.nvda-project.org/">NVDA</a><span style="line-height: 1.5;">같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다.</span><span style="line-height: 1.5;"> </span></p> - -<p>아래 조그만 예제가 있다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,</p> - -<p>이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}} 요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}} 요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.</p> - -<p>{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.</p> - -<table> - <caption>{{HTMLElement("fieldset")}} 요소의 속성</caption> - <thead> - <tr> - <th scope="col">속성 이름</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("disabled","fieldset")}}</td> - <td>(<em>false</em>)</td> - <td>만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.</td> - </tr> - </tbody> -</table> - -<h3 id="The_<label>_element" style="line-height: 24px;">The <label> element</h3> - -<p>{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.</p> - -<p>{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.</p> - -<p><br> - <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{{HTMLElement("label")}} </strong><span style="font-style: inherit; line-height: 1.5;">요소의 속성</span></p> - -<p><br> - </p> - -<table> - <thead> - <tr> - <th scope="col">속성 명</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("for","label")}}</td> - <td> </td> - <td>{{HTMLElement("label")}} 요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.</td> - </tr> - </tbody> -</table> - -<p><span style="line-height: 1.5;">요소는 for속성으로 지정한 위젯과 묶여진다. </span>for속성은 해당 위젯의 실제 id 속성을 참조한다. <span style="line-height: 1.5;">위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.</span></p> - -<p>심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.</p> - -<p>다음 예제를 보아라</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. <span style="line-height: 1.5;">이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.</span></p> - -<p>첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다 이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다). 만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.</p> - -<p>두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.</p> - -<h3 id="<output>_요소" style="line-height: 24px;"><output> 요소</h3> - -<p>이 요소는 계산의 출력을 저장하는데 사용된다. 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).</p> - -<p>{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.</p> - -<table> - <caption>{{HTMLElement("output")}} 요소 속성</caption> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("for","output")}}</td> - <td> </td> - <td>스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)</td> - </tr> - </tbody> -</table> - -<h3 id="form이_사용되는_일반적인_form_구조" style="line-height: 24px;">form이 사용되는 일반적인 form 구조</h3> - -<p>HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.</p> - -<p>예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은 {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.</p> - -<p>게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.</p> - -<p>HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.</p> - -<p>간단한 지불 폼을 만들어 보자</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>See this form in action (with a touch of CSS):</p> - -<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p> - -<h2 id="HTML_위젯" style="line-height: 30px;">HTML 위젯</h2> - -<p>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: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p> - -<h3 id="The_<input>_element" style="line-height: 24px;">The <input> element</h3> - -<p>이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. <span style="line-height: 1.5;">이와 같은 다형성 떄문에 {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만 type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지 선택하는 것은 어려울 수 있다. </span></p> - -<p>This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):</p> - -<table> - <thead> - <tr> - <th scope="col">type 속성 의 값</th> - <th scope="col">설명</th> - <th scope="col">필수 속성</th> - <th scope="col">관련된 속성</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" style="text-align: center;">단일 선 텍스트 필드</th> - </tr> - <tr> - <td><code>text</code></td> - <td>이것은 가장 기본적인 텍스트 필드이다. type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음)</td> - <td> </td> - <td>{{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")}}</td> - </tr> - <tr> - <td><code>email</code></td> - <td>하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드</td> - <td> </td> - <td>{{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")}}</td> - </tr> - <tr> - <td><code>password</code></td> - <td>텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <td><code>search</code></td> - <td>검색 하기 위한 텍스트 필드</td> - <td> </td> - <td>{{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")}}</td> - </tr> - <tr> - <td><code>tel</code></td> - <td>전화 번호를 입력할 수 있는 텍스트 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <td><code>url</code></td> - <td>절대 URL을 다루기 위한 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">텍스트 입력 없는 컨트롤</th> - </tr> - <tr> - <td><code>checkbox</code></td> - <td>체크박스</td> - <td> </td> - <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>color</code></td> - <td>색상을 입력 받기위한 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>file</code></td> - <td>A control that lets the user select a file.</td> - <td> </td> - <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>보여주지 않는 컨트롤 이지만 서버로 전송되는 필드</td> - <td> </td> - <td> </td> - </tr> - <tr> - <td><code>number</code></td> - <td>소숫점을 입력받는 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> - </tr> - <tr> - <td><code>radio</code></td> - <td>라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드</td> - <td> </td> - <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>range</code></td> - <td>정확하지 않는 숫자를 입력받기 위한 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">시간 과 날짜 컨트롤</th> - </tr> - <tr> - <td><code>date</code></td> - <td>(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>UTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>datetime-local</code></td> - <td>타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>month</code></td> - <td>타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>time</code></td> - <td>타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>week</code></td> - <td>타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">버튼</th> - </tr> - <tr> - <td><code>button</code></td> - <td>기본 행동이 없는 누르는 버튼</td> - <td> </td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>image</code></td> - <td>그래픽적인 전송버튼</td> - <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td> - <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>reset</code></td> - <td>폼의 내용을 초기화 하는 컨트롤</td> - <td> </td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>submit</code></td> - <td>폼을 전송하는 버튼</td> - <td> </td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - </tbody> -</table> - -<p><span style="line-height: 1.5;">몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는 text 속성으로 렌더링 한다. </span>이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.</p> - -<p>요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.</p> - -<h3 id="<textarea>_요소" style="line-height: 24px;"><textarea> 요소</h3> - -<p>이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.</p> - -<table> - <caption> {{HTMLElement("textarea")}} 요소 속성</caption> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("cols","textarea")}}</td> - <td><code>20</code></td> - <td>보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비</td> - </tr> - <tr> - <td>{{htmlattrxref("rows","textarea")}}</td> - <td> </td> - <td>보여지는 텍스트 행의 수</td> - </tr> - <tr> - <td>{{htmlattrxref("wrap","textarea")}}</td> - <td><code>soft</code></td> - <td>hard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.</td> - </tr> - </tbody> -</table> - -<p> {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.</p> - -<p>이는 두가지 영향이 있다.</p> - -<ul> - <li>만약 {{HTMLElement("input")}}요소에 기본값을 정의하기 원한다면, value 속성을 사용하여 지정해야 되나, {{HTMLElement("textarea")}}요소에서는 기본값을 {{HTMLElement("textarea")}} 태그 사이에 넣기만 하면된다.</li> - <li>자연스러움 때문에 {{HTMLElement("textarea")}} 요소는 오직 텍스트 콘텐츠만 받아들인다. 이 의미는 어떠한 HTML콘텐츠도 {{HTMLElement("textarea")}} 요소에 넣으면 텍스트 콘텐츠로 렌더링 된다.</li> -</ul> - -<p> 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<h3 id="<select>_<option>그리고_<optgroup>_요소" style="line-height: 24px;"><select>, <option>그리고 <optgroup> 요소</h3> - -<p>요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택 박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p> - -<p>선택 박스 안의 값들은 {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.</p> - -<p>Let's take an example:</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p><span style="line-height: 1.5;">{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다.</span> <span style="line-height: 1.5;">만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.</span></p> - -<p><span style="line-height: 1.5;">{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다.</span>.</p> - -<table> - <caption>{{HTMLElement("option")}} 요소 의 속성</caption> - <thead> - <tr> - <th scope="col">속성 이름</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("label","option")}}</td> - <td> </td> - <td>이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.</td> - </tr> - <tr> - <td>{{htmlattrxref("selected","option")}}</td> - <td>(<em>false</em>)</td> - <td>만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.</td> - </tr> - </tbody> -</table> - -<table> - <caption>Attributes for the {{HTMLElement("optgroup")}} element</caption> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("label","optgroup")}}</td> - <td> </td> - <td>The name of the group of options. <strong>This attribute is mandatory.</strong></td> - </tr> - </tbody> -</table> - -<h3 id="<datalist>요소" style="line-height: 24px;"><datalist>요소 </h3> - -<p>이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.</p> - -<p>{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.</p> - -<p>요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.</p> - -<table> - <tbody> - <tr> - <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> - </tr> - <tr> - <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> - </tr> - </tbody> -</table> - -<h3 id="<meter>_와_<progress>_요소들" style="line-height: 24px;"><meter> 와 <progress> 요소들 </h3> - -<p>이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.</p> - -<ul> - <li>{{HTMLElement("meter")}} 요소는 정적인 값을 최소와 최대 값사이에 상대적인 위치를 나타낸다</li> - <li>The {{HTMLElement("progress")}} 요소는 최소와 최대값을 시간에 따라 바뀌는 가변적인 값을 나타낸다. 값이 변하면 자바스크립트를 이용하여 다룰수 있다는것을 주목할 필요가 있다. 요소 자신은 값을 변화시키기 위한 어떠한 매커니즘도 가지고 있지 않다.</li> -</ul> - -<p>속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.</p> - -<p><br> - <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다</strong></p> - -<table> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("min","meter")}}</td> - <td>0</td> - <td>The lower numeric bound of the measured range.</td> - </tr> - <tr> - <td>{{htmlattrxref("max","meter")}}</td> - <td>1</td> - <td>The upper numeric bound of the measured range.</td> - </tr> - <tr> - <td>{{htmlattrxref("low","meter")}}</td> - <td>the <code>min</code> value</td> - <td>The upper numeric bound of the low end of the measured range.</td> - </tr> - <tr> - <td>{{htmlattrxref("high","meter")}}</td> - <td>the <code>max</code> value</td> - <td>The lower numeric bound of the high end of the measured range.</td> - </tr> - <tr> - <td>{{htmlattrxref("optimum","meter")}}</td> - <td> </td> - <td>The optimal numeric value.</td> - </tr> - </tbody> -</table> - -<table> - <caption>Attributes for the {{HTMLElement("progress")}} element</caption> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("max","progress")}}</td> - <td> </td> - <td>This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.</td> - </tr> - </tbody> -</table> - -<h3 id="The_<button>_element" style="line-height: 24px;">The <button> element </h3> - -<p>{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. <span style="line-height: 1.5;">버튼은 type속성에 따라 3가지 타입을 가진다.</span></p> - -<ul> - <li>전송 버튼은 폼 데이터들을 {{HTMLElement("form")}}요소에 action 속성에 정의 된 웹 페이지에 보낸다.</li> - <li>리셋 버튼은 폼의 모든 위젯들을 기본 값으로 재설정한다. 폼 사용자 경험 관점에서 이 버튼을 사용하는것은 좋지 않은 사례로 간주되고 이를 피해야 한다. 이것은 사용자가 단순히 실수로 한것이 모든 작업을 잃게 할 수 있다.</li> - <li>익명 버튼은 어떠한 의미도 없는 대신 자바스크립트를 이용하여 다룰 수 있다..</li> -</ul> - -<p><br> - <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{HTMLElement("button")}} 요소의 속성</strong></p> - -<table> - <thead> - <tr> - <th scope="col">속성 이름</th> - <th scope="col">기본값</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("type","button")}}</td> - <td><code>submit</code></td> - <td>버튼의 타입. <code>button</code>, <code>reset</code>, <code>submit 이 있다.</code></td> - </tr> - <tr> - <td>{{htmlattrxref("formaction","button")}}</td> - <td> </td> - <td>만약 버튼이 submit 버튼이면 이 속성은 {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.</td> - </tr> - <tr> - <td>{{htmlattrxref("formenctype","button")}}</td> - <td> </td> - <td>만약 버튼이 submit 버튼이면 이 속성은 {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.</td> - </tr> - <tr> - <td>{{htmlattrxref("formmethod","button")}}</td> - <td> </td> - <td>만약 버튼이 submit 버튼이면 이 속성은 {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.</td> - </tr> - <tr> - <td>{{htmlattrxref("formnovalidate","button")}}</td> - <td> </td> - <td>만약 버튼이 submit 버튼이면 이 속성은 {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.</td> - </tr> - <tr> - <td>{{htmlattrxref("formtarget","button")}}</td> - <td> </td> - <td>만약 버튼이 submit 버튼이면 이 속성은 {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.</td> - </tr> - </tbody> -</table> - -<p>기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.</p> - -<div class="note"><strong>Note:</strong> 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 <code>name</code> and a <code>value</code> attribute to a {{HTMLElement("button")}} element, they do not send the content of the <code>value</code> 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.</div> - -<div class="note"> </div> - -<h3 id="공통_속성" style="line-height: 24px;">공통 속성</h3> - -<p>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:</p> - -<table> - <thead> - <tr> - <th scope="col">Attribute name</th> - <th scope="col">Default value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>autofocus</code></td> - <td>(<em>false</em>)</td> - <td>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.</td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>(<em>false</em>)</td> - <td>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 <code>disabled</code> attribute set, then the element is enabled.</td> - </tr> - <tr> - <td><code>form</code></td> - <td> </td> - <td>The form element that the widget is associated with. The value of the attribute must be the <code>id</code> 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.</td> - </tr> - <tr> - <td><code>name</code></td> - <td> </td> - <td>The name of the element; this is submitted with the form data.</td> - </tr> - <tr> - <td><code>value</code></td> - <td> </td> - <td>The element's initial value.</td> - </tr> - </tbody> -</table> - -<h2 id="Using_ARIA_to_structure_HTML_forms" style="line-height: 30px;">Using <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> to structure HTML forms</h2> - -<p><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C Candidate Recommendation</a> which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>" article, but there are some basics that are good to know.</p> - -<p>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.</p> - -<p>If you want to dig into using ARIA with HTML forms, feel free to <a href="/en-US/docs/Accessibility/ARIA/forms" title="/en-US/docs/Accessibility/ARIA/forms">read the related section in the ARIA documentation</a>.</p> - -<h3 id="The_aria-labelledby_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> attribute</h3> - -<p>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 <code>id</code> attribute of the element to use as a label.</p> - -<pre class="brush:html;" style="font-size: 14px;"><form> - <p id="fruitLabel">What's your favorite fruit</p> - <p> - <input type="text" name="fruit" aria-labelledby="fruitLabel"> - </p> -</form></pre> - -<p>Conceptually, it's the opposite of the <code>for</code> attribute on the {{HTMLElement("label")}} element. With the <code>for</code> attribute, you reference the <code>id</code> of the widget but with the <code>aria-labbeldby</code> attribute, you reference the <code>id</code> of the label.</p> - -<h3 id="The_aria-describedby_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a> attribute</h3> - -<p>This attribute works like the <code>aria-labelledby</code> 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 <code>aria-labelledby</code> 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.</p> - -<h3 id="The_aria-label_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"><code>aria-label</code></a> attribute</h3> - -<p>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.</p> - -<pre class="brush:html;" style="font-size: 14px;"><form> - <p> - <input type="search" name="q" aria-label="Search" /> - <input type="submit" value="Go" /> - </p> -</form></pre> - -<h3 id="The_role_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute</h3> - -<p>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.</p> - -<p>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.</p> - -<p>Those roles for form widgets are :</p> - -<ul> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> - <li>Radio</li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> - <li>Spinbutton</li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> -</ul> - -<p>It's also worth noting that there's something called a composite role:</p> - -<ul> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a></li> - <li>Radiogroup</li> -</ul> - -<p>If those roles are extremely useful, know that <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques">there are more</a>; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.</p> - -<h2 id="결론" style="line-height: 30px;">결론</h2> - -<p>You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p> - -<h2 id="볼거리" style="line-height: 30px;">볼거리</h2> - -<ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> -</ul> 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 ---- -<p><span class="seoSummary">이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다.</span> HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!</p> - -<h2 id="항목" style="line-height: 30px; font-size: 2.14285714285714rem;">항목</h2> - -<ol> - <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/HTML/%ED%8F%BC/My_first_HTML_form">나의 첫 HTML 폼</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">HTML HTML 폼 구성 방법</a></li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">기본 폼 위젯</a></li> - <li>CSS와 HTML 폼 - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">HTML 폼 스타일</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">HTML 폼을 위한 고급 스타일</a></li> - <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">폼 위젯을 위한 호환성 테이블 속성</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">데이터 주고 받기</a></li> - <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">데이터 유효성 검사</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">사용자 폼 위젯 만드는 방법</a></li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">자바스크립트를 통해서 폼 전달 하기</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">FormData 객체 사용</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">기존 브라우저에서 HTML 폼</a></li> -</ol> - -<h2 id="HTML_문서" style="line-height: 30px; font-size: 2.14285714285714rem;">HTML 문서</h2> - -<h3 id="HTML_요소" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 요소</h3> - -<table> - <thead> - <tr> - <th scope="col">요소</th> - <th scope="col">관련 DOM 인터페이스</th> - <th scope="col">설명</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;"><code>button 요소는 클릭할 수 있는 버튼을 나타낸다.</code></td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;"><span style="font-family: 'Courier New';">datalist</span> 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. </td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;"><span style="font-family: 'Courier New';">fieldset 요소는</span> 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;"><code>form</code> 요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;"><code>input 요소는</code> 대화형 컨트롤 폼들을 생성하는데 사용됩니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;"><code>keygen</code> 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;"><code>label</code> 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;"><code>legend</code> 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;"><code>meter </code>요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;"><code>optgroup</code> 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">HTML<em> </em><code>option<em> </em></code>요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;"><code>output </code>요소는 계산 결과를 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;"><code>progress</code> 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;"><code>select</code> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;"><code>textarea</code> 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note:</strong> 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.</p> -</div> - -<h3 id="HTML_속성" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 속성</h3> - -<table class="standard-table"> - <thead> - <tr> - <th>속성 이름</th> - <th>요소</th> - <th>설명</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>지원하는 문자 집합 목록</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>폼을 통해서 전송 정보를 처리하는 프로그램의 URL </td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>공개 키(public key)와 함께 전송되는 문자열입니다.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td> - <p>해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. </p> - </td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td> - <p>textarea의 세로줄 수를 설정합니다.</p> - </td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td>자원의 URL을 명시합니다.</td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td></td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.</td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td>POST방식으로 전송되는 데이터의 타입을 설정합니다.</td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Describes elements which belongs to this one.</td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td> - <p>요소의 소유자인 폼을 나타냅니다.</p> - </td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Specifies the type of key generated.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifies a list of pre-defined options to suggest to the user.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>허용되는 최댓값을 나타냅니다.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>요소에서 허용되는 특징의 최대 수를 명시합니다.</td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>허용되는 최솟값을 나타냅니다.</td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td> - <p>요소의 이름. For example used by the server to identify the fields in form submits.</p> - </td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>This attribute indicates that the form shouldn't be validated when submitted.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the optimal numeric value.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Defines a regular expression which the element's value will be validated against.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Provides a hint to the user of what can be entered in the field.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the element can be edited.</td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether this element is required to fill out or not.</td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a textarea.</td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td>Defines a value which will be selected on page load.</td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("input") }}</td> - <td>The URL of the embeddable content.</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td></td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td></td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Defines the type of the element.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("input") }}</td> - <td></td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Defines a default value which will be displayed in the element on page load.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Indicates whether the text should be wrapped.</td> - </tr> - </tbody> -</table> - -<h3 id="Normative_reference" style="line-height: 24px; font-size: 1.71428571428571rem;">Normative reference</h3> - -<ul> - <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> -</ul> 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 ---- -<p><span style="line-height: 1.5;">많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. </span>서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.</p> - -<h2 id="데이터는_어디로_갈까">데이터는 어디로 갈까?</h2> - -<h3 id="클라이언트서버_구조">클라이언트/서버 구조</h3> - -<p><span style="line-height: 1.5;">웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다.</span> 서버 응답은 요청과 똑같은 프로토콜을 사용한다.</p> - -<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="height: 141px; width: 400px;"></p> - -<p>클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.</p> - -<h3 id="클라이언트측_데이터_보내기">클라이언트측: 데이터 보내기</h3> - -<p>{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록 설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.</p> - -<h4 id="htmlattrxrefactionform_속성">{{htmlattrxref("action","form")}} 속성</h4> - -<p>이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.</p> - -<h5 id="Examples">Examples</h5> - -<p>첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.</p> - -<pre class="brush: html"><form action="http://foo.com"></pre> - -<p class="brush: html">여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의 다른 URL로 전송된다.</p> - -<pre class="brush: html"><form action="/somewhere_else"></pre> - -<p class="brush: html">아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.</p> - -<pre class="brush: html"><form></pre> - -<p class="brush: html">이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.</p> - -<pre class="brush: html"><form action="#"></pre> - -<div class="note"> -<p><strong>Note: </strong>HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는 곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. <span style="line-height: 1.5;">반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도 </span> {{htmlattrxref("action","form")}} 속성에서 <span style="line-height: 1.5;">안전하지 않은 HTTP URL을 지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 </span></p> -</div> - -<h4 id="htmlattrxrefmethodform_속성">{{htmlattrxref("method","form")}} 속성</h4> - -<p>이 속성은 데이터를 어떻게 보낼 것인지 정의한다. <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> <span style="line-height: 1.5;">은 요청 방법에 대해 다양한 방법들을 제공한다. HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.</span></p> - -<p>이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.</p> - -<h5 id="GET_방식">GET 방식</h5> - -<p><span style="line-height: 1.5;">GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. </span>바디가 비어 있기 때문에, 만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.</p> - -<h6 id="예제">예제</h6> - -<p>다음 폼을 생각 해 봅시다.</p> - -<pre class="brush: html"><form action="http://foo.com" method="get"> - <input name="say" value="Hi"> - <input name="to" value="Mom"> - <button>Send my greetings</button> -</form></pre> - -<p>GET 방식을 사용하면 HTTP 요청은 다음과 같다.</p> - -<pre>GET /?say=Hi&to=Mom HTTP/1.1 -Host: foo.com</pre> - -<h5 id="POST_방식">POST 방식</h5> - -<p><span style="line-height: 1.5;">POST 방식은 조금 다르다. </span>이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" <span style="line-height: 1.5;">만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.</span></p> - -<p>예제</p> - -<p>이 폼을 생각해보라(위 예제와 똑같다)</p> - -<pre class="brush: html"><form action="http://foo.com" method="post"> - <input name="say" value="Hi"> - <input name="to" value="Mom"> - <button>Send my greetings</button> -</form></pre> - -<p>POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,</p> - -<pre>POST / HTTP/1.1 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 - -say=Hi&to=Mom</pre> - -<p>Content-Length 헤더는 바디의 크기를 나태내고, Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.</p> - -<p><span style="line-height: 1.5;">물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). </span>사용자에게 보여지는 것은 호출한 URL뿐이다. <span style="line-height: 1.5;">그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만, POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.</span></p> - -<ol> - <li>만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.</li> - <li>만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.</li> -</ol> - -<h3 id="서버측_데이터_가져오기">서버측: 데이터 가져오기</h3> - -<p>어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.</p> - -<h4 id="예제_PHP_날것">예제: PHP 날것</h4> - -<p>PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.</p> - -<pre class="brush: php"><?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;</pre> - -<p>이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.</p> - -<pre>Hi Mom</pre> - -<h4 id="예제_Python">예제: Python</h4> - -<p>이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. <span style="line-height: 1.5;">CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.</span></p> - -<pre class="brush: python">#!/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)</pre> - -<p>이 결과는 PHP와 똑같다?.</p> - -<pre>Hi Mom</pre> - -<h4 id="다른_언어와_프레임_워크">다른 언어와 프레임 워크</h4> - -<p> <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) <span style="line-height: 1.5;">다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.</span></p> - -<ul> - <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> for PHP</li> - <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> for Python</li> - <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> for Ruby</li> - <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> for Java</li> - <li>etc.</li> -</ul> - -<p><span style="line-height: 1.5;">이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다.</span> 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.</p> - -<h2 id="특별한_경우_파일_보내기">특별한 경우: 파일 보내기</h2> - -<p>파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.</p> - -<h3 id="htmlattrxrefenctypeform_속성">{{htmlattrxref("enctype","form")}} 속성</h3> - -<p><span style="line-height: 1.5;">이 속성은 Content-Type HTTP 헤더의 값을 지정할 수 있게 해준다. </span>서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. <span style="line-height: 1.5;">기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다</span></p> - -<p>만약 파일을 보내고 싶다면 두 가지를 해야한다.</p> - -<ul> - <li>{{htmlattrxref("method","form")}} 속성을 POST 속성으로 지정 해야한다. 왜냐하면 파일 콘텐츠는 폼을 이용하여 URL 매개변수로 보낼수 없기 때문이다.</li> - <li>{{htmlattrxref("enctype","form")}}의 값을 multipart/form-data 이라고 지정 해야한다. 왜냐하면 데이터는 여러 조각으로 나누워 지고 각 파일 조각에 같이 보내질 폼바디 텍스트가 추가 되기 때문이다.</li> -</ul> - -<p>예제 </p> - -<pre class="brush: html"><form method="post" enctype="multipart/form-data"> - <input type="file" name="myFile"> - <button>Send the file</button> -</form></pre> - -<div class="note"> -<p><strong>Note:</strong> 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.</p> -</div> - -<div class="warning"> -<p><strong>Warning:</strong> 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.</p> -</div> - -<h2 id="보안_코너">보안 코너</h2> - -<p>데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.</p> - -<h3 id="일반적인_보안_결함">일반적인 보안 결함</h3> - -<p>무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.</p> - -<h4 id="XSS_과_CSRF">XSS 과 CSRF</h4> - -<p>크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.</p> - -<p>XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(<a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" style="line-height: 1.5;" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">same origin policy</a><span style="line-height: 1.5;">)의 접근 제어를 우회하여 사용 될 수 있다.</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.</span></p> - -<p>CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)</p> - -<p>XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.</p> - -<p>이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.</p> - -<h4 id="SQL_injection">SQL injection</h4> - -<p>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 <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">one of the main vector attacks against web sites</a>.</p> - -<p>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 <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> on a PHP/MySQL infrastructure).</p> - -<h4 id="HTTP_header_injection_와_email_injection">HTTP header injection 와 email injection</h4> - -<p>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.</p> - -<p>These attacks are mostly silent, and can turn your server into a <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> - -<h3 id="Be_paranoid_Never_trust_your_users">Be paranoid: Never trust your users</h3> - -<p>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.</p> - -<p>All data that comes to your server must be checked and sanitized. Always. No exception.</p> - -<ul> - <li>Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.</li> - <li>Limit the incoming amount of data to allow only what's necessary.</li> - <li>Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).</li> -</ul> - -<p>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.</p> - -<h2 id="결론">결론</h2> - -<p>여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">perform client side data validation</a> but the server can't trust this validation because it has no way to truly know what really happens on the client side.</p> - -<h2 id="볼거리">볼거리</h2> - -<p>If you want to learn more about securing a web application, you can dig into these resources:</p> - -<ul> - <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li> - <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li> - <li><a href="https://code.google.com/intl/en/edu/security/index.html" rel="external" title="https://code.google.com/intl/en/edu/security/index.html">Learning material from Google</a></li> -</ul> 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 ---- -<p>이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (<a href="/en-US/docs/HTML/Introduction" title="/en-US/docs/HTML/Introduction">the basics of HTML</a>, <a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">CSS</a>)</p> - -<h2 id="시작하기전에" style="line-height: 30px;">시작하기전에</h2> - -<h3 id="HTML_폼_이란" style="line-height: 24px;">HTML 폼 이란?</h3> - -<p>HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.</p> - -<p>HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스, 버튼, 체크박스, 라디오 버튼이 될 수 있다. <span style="line-height: 1.5;">대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.</span></p> - -<h3 id="폼을_사용하려면_무엇이_필요합니까" style="line-height: 24px;">폼을 사용하려면 무엇이 필요합니까?</h3> - -<p>HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. <span style="line-height: 1.5;">물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.</span></p> - -<p>HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 <a href="/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> - -<h2 id="폼_디자인하기" style="line-height: 30px;">폼 디자인하기</h2> - -<p>코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다. 간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.</p> - -<ul> - <li>Smashing는 폼 UX에 매우 좋은 잡지다 <a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>의 <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li> - <li>UXMatters 도 좋은 폼 양식을 볼수 있다. <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> 의 <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> -</ul> - -<p>이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.</p> - -<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> - -<p>우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.</p> - -<h2 id="HTML를_직접_다루어_보자" style="line-height: 30px;">HTML를 직접 다루어 보자</h2> - -<p>자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.</p> - -<h3 id="HTMLElement(form)_요소" style="line-height: 24px;">{{HTMLElement("form")}} 요소</h3> - -<p>모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:</p> - -<pre class="brush:html;" style="font-size: 14px;"><form action="/my-handling-form-page" method="post"> - -</form></pre> - -<p>이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 <code style="font-size: 14px;">action</code> 속성과 <code style="font-size: 14px;">method</code> 속성은 필수적으로 설정해야 한다.</p> - -<ul> - <li><code style="font-size: 14px;">action</code> 속성은 데이터를 보낼 URL을 지정한다.</li> - <li><code style="font-size: 14px;">method</code> 속성은 어떤 HTTP 방식을 사용할 것인지 지정한다.(GET 이나 POST)</li> -</ul> - -<p>만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> - -<h3 id="HTMLElement(label)_HTMLElement(input)_그리고_HTMLElement(textarea)_요소_추가하기" style="line-height: 24px;">{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기</h3> - -<p>우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.</p> - -<p>HTML코드를 다음과 같이 짤 것이다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>.</p> - -<p>{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a> 우리의 예제에서는 이 속성의 기본 값인 오직 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">text</span><span style="line-height: 1.5;">값만 사용했다.</span><span style="line-height: 1.5;"> </span>이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다.<span style="line-height: 1.5;"> </span>또한 오직 이메일 주소만 받는 한줄 텍스트 필드 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">email</span>값을 사용했다.<span style="line-height: 1.5;"> </span>이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다<span style="line-height: 1.5;">. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. </span><a href="/en-US/docs/HTML/Forms/Data_form_validation" style="line-height: 1.5;" title="/en-US/docs/HTML/Forms/Data_form_validation">Form data validation</a></p> - -<p>마지막 요소를 보기전에 다음 <code style="font-size: 14px;"><input /></code> VS <code style="font-size: 14px;"><textarea></textarea>요소를 봐야한다</code>. 이것은 이상한 HTML 요소중 하나이다. <code style="font-size: 14px;"><input>태그는 자동 닫힘 태그다 무슨 의미냐면</code> 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. <span style="line-height: 1.5;">요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.</span></p> - -<pre class="brush:html;" style="font-size: 14px;"><input type="text" value="by default this element is filled with this text" /></pre> - -<p>이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면, {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><textarea>by default this element is filled with this text</textarea></pre> - -<h3 id="HTMLElement(button)_요소로_끝내기" style="line-height: 24px;"> {{HTMLElement("button")}} 요소로 끝내기</h3> - -<p>우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.</p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>버튼은 다음과 같은 3개 종류가 있다. <code style="font-size: 14px;">submit</code>, <code style="font-size: 14px;">reset</code>, <code style="font-size: 14px;">button</code>.</p> - -<ul> - <li><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">submit</span> 버튼을 클릭하면 폼 데이터를 {{HTMLElement("form")}} 요소의 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">action</span>속성에 정의된 웹페이지 에 전송된다.</li> - <li> <code style="font-size: 14px;">reset</code> 버튼을 클릭하면 모든 폼 위젯을 기본 값으로 바꾼다. UX 관점에서 이방법은 안좋은 방법이라 본다.</li> - <li><code style="font-size: 14px;">button 버튼은... 아무것도 안한다! 이 말이 이상하게 들릴수도 있지만 JavaScript를 사용하면 놀랍게 유용한 사용자 버튼이 될 수 있다.</code></li> -</ul> - -<p>알아두어야 할것은 {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다. {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.</p> - -<h2 id="CSS로_더욱_나이스하게_만들기" style="line-height: 30px;">CSS로 더욱 나이스하게 만들기</h2> - -<p>이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.</p> - -<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> - -<p>CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.</p> - -<p>폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.</p> - -<pre class="brush:css;" style="font-size: 14px;">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; -}</pre> - -<p>그 다음 각각 폼 위젯사이에 여백을 추가하자.</p> - -<pre class="brush:css;" style="font-size: 14px;">form div + div { - margin-top: 1em; -}</pre> - -<p>이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.</p> - -<pre class="brush:css;" style="font-size: 14px;">label { - /* To make sure that all label have the same size and are properly align */ - display: inline-block; - width: 90px; - text-align: right; -}</pre> - -<p>HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></p> - -<p>폰트, 크기, 테두리를 변경 해보자</p> - -<pre class="brush:css;" style="font-size: 14px;">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; -}</pre> - -<p>HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.</p> - -<pre class="brush:css;" style="font-size: 14px;">input:focus, textarea:focus { - /* To give a little highlight on active elements */ - border-color: #000; -}</pre> - -<p>다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로 {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면 {{HTMLElement("textarea")}}요소의 <code style="font-size: 14px;">vertical-align</code><span style="line-height: 1.5;"> 속성을 </span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">top이라 변경 해야 한다</code><span style="line-height: 1.5;">.</span></p> - -<p>또하나 유용한 <code style="font-size: 14px;">resize</code> 프로퍼티는 사용자가 쉽게 {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.</p> - -<pre class="brush:css;" style="font-size: 14px;">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; -}</pre> - -<p>버튼도 특별한 스타일이 필요하다. <span style="line-height: 1.5;">이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다</span></p> - -<pre class="brush:css;" style="font-size: 14px;">.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; -}</pre> - -<p>이제 폼이 더 나이스 해졋다.</p> - -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> - -<h2 id="웹서버로_데이터_보내기" style="line-height: 30px;">웹서버로 데이터 보내기</h2> - -<p>까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.</p> - -<p>{{HTMLElement("form")}} 요소는 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">action속성과 </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">method속성을 </span><span style="line-height: 1.5;">사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.</span></p> - -<p>이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.</p> - -<p>그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">name</span><span style="line-height: 1.5;">속성을 지정해야한다.</span></p> - -<pre class="brush:html;" style="font-size: 14px;"><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></pre> - -<p>우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다. "<code style="font-size: 14px;">user_name</code>", "<code style="font-size: 14px;">user_email</code>" and "<code style="font-size: 14px;">user_message</code>". 이 데이터는 "<code style="font-size: 14px;">/my-handling-form-page</code>"로 HTTP POST 방식으로 전송된다.</p> - -<p><span style="line-height: 1.5;">서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. </span>스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> - -<h2 id="결론" style="line-height: 30px;">결론</h2> - -<p>축하한다! 첫번째 HTML폼을 만들었다.</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Live example</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/My_first_HTML_form/Example" title="/en-US/docs/HTML/Forms/My_first_HTML_form/Example">Check out the source code</a></td> - </tr> - </tbody> -</table> - -<p>하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.</p> - -<p>{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</p> 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..71d5a7517a --- /dev/null +++ b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,133 @@ +--- +title: Tips for Authoring Fast-loading HTML Pages +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - HTML +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Tips_for_Authoring_Fast-loading_HTML_Pages +--- +<p><span class="comment">Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction.</span> 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 <a>이 글의 토론 페이지</a>에 조언해 주시기 바랍니다.</p> +<p>최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.</p> +<p>페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.</p> +<h3 id="Tips" name="Tips"><strong>Tips</strong></h3> +<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>페이지 무게를 줄여라</strong></h4> +<p>페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.</p> +<p>불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다</p> +<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.</p> +<h4 id=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC" name=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC"><strong>파일 수를 최소화하라</strong></h4> +<p>웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.</p> +<p>브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 <code>If-Modified-Since</code> 요청을 웹 서버로 보내게 됩니다.</p> +<p>웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.</p> +<p>브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.</p> +<h4 id=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>도메인 검색을 줄이라</strong></h4> +<p>각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.</p> +<p>이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.</p> +<h4 id=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>재사용되는 내용을 캐시하라</strong></h4> +<p>캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.</p> +<p>특히 <code>Last-Modified</code> 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 <code>Last-Modified</code> 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.</p> +<p>그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.</p> +<p>추가 정보:</p> +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">RSS 해커들을 위한 HTTP 조건부 GET</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li> +</ol> +<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94"><strong>페이지 컴포넌트의 순서를 최적화</strong></h4> +<p>사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.</p> +<p>페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.</p> +<p>페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.</p> +<h4 id="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94" name="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94"><strong>inline script 수를 최소화</strong></h4> +<p>inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 <code>document.write()</code>의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. <code>document.write()</code>에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.</p> +<h4 id=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC" name=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC"><strong>최신 CSS와 올바른 markup을 사용하라</strong></h4> +<p>최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.</p> +<p>올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 + <i> + 전처리(pre-process)</i> + 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.</p> +<h4 id=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC" name=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC"><strong>내용을 조각내라</strong></h4> +<p>table기반의 레이아웃을 <code><div></code>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.</p> +<p>아래와 같이 깊게 중첩된 table 대신</p> +<div class="geckoVersionNote"> + <pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +</div> +<p>중첩되지 않은 table 또는 div를 쓰라</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE></pre> +<h4 id=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>그림과 표의 크기를 명시하라</strong></h4> +<p>브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 <span style="line-height: 1.5;">그림의 </span><code style="font-style: normal; line-height: 1.5;">height</code><span style="line-height: 1.5;">와 </span><code style="font-style: normal; line-height: 1.5;">width</code><span style="line-height: 1.5;">가 명시되어야 합니다.</span></p> +<p>표는 CSS 선택자:속성 조합이다.</p> +<div class="geckoVersionNote"> + <p><code style="font-style: normal; line-height: 1.5;">table-layout: fixed;</code></p> +</div> +<p><span style="line-height: 1.5;">그리고 </span><code style="font-style: normal; line-height: 1.5;">COL</code><span style="line-height: 1.5;">과 </span><code style="font-style: normal; line-height: 1.5;">COLGROUP</code><span style="line-height: 1.5;"> 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.</span></p> +<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC"><strong>사용자 에이전트의 요구사항을 적절하게 선택하라</strong></h4> +<p>웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?</p> +<p>이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.</p> +<p>그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.</p> +<h3 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88">페이지 구조 예</h3> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...<br> + 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.</dd> + <dd> + 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd> + · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.</dd> + <dd> + 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd> + <dd> + 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.</dd> + </dl> + </dd> +</dl> +<h3 id=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC" name=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC">관련 링크</h3> +<ul> + <li>책: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li><a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)</li> +</ul> +<div class="originaldocinfo"> + <h3 id=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4">원문 정보</h3> + <ul> + <li>저자: Bob Clary, Technology Evangelist, Netscape Communications</li> + <li>최종 갱신일: Published 04 Apr 2003</li> + <li>저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.</li> + <li>알림: 이 문서는 본래 DevEdge 사이트의 일부분이었습니다.</li> + </ul> +</div> +<p> </p> 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 ---- -<div class="summary"> -<p>HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">먼저:</th> - <td><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">기초적인 HTML 문서 만들기</a>에 익숙해지셔야 합니다.</td> - </tr> - <tr> - <th scope="row">목표:</th> - <td>HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.</td> - </tr> - </tbody> -</table> - -<h2 id="약자에_대해">약자에 대해</h2> - -<p>항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)</p> - -<p>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:</p> - -<blockquote>유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.</blockquote> - -<div> -<p>이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.</p> -</div> - -<h2 id="abbr_요소">abbr 요소</h2> - -<p><em>HTML 약자 요소</em> ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.</p> - -<div class="note"> -<p><strong>알림:</strong> <code><acronym></code> 요소에 대해 들어보셨겠지만, <code><acronym</code><code>></code>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.</p> -</div> - -<pre class="brush: html"><p>I need to talk to you <abbr>ASAP</abbr>.</p></pre> - -<p>이렇게 <code>title</code> 속성으로 약자를 설명할 수도 있습니다:</p> - -<pre class="brush: html"><p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p></pre> - -<p>언제 <code>title</code> 속성을 적어야 할까요? 마음대로 시면 됩니다. 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.</p> - -<div class="note"> -<p><strong>Note: </strong>In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your <code>title</code> attribute as inside your <code><abbr></code> element.</p> -</div> - -<p>{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 <code>title</code> 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:</p> - -<p>{{ EmbedLiveSample('The_abbr_element','100%',90) }}</p> - -<div class="note"> -<p><strong>중요: </strong>만약 사람들이 약자를 이해하는 것을 따진다면, <strong>절대로</strong> <code>title</code> 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.</p> -</div> - -<h2 id="실전">실전</h2> - -<p>{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <code><abbr></code>로 표시하고 <code>title</code> 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. <a href="/en-US/docs/Glossary">용어 사전</a>에서 모든 약자들을 보실 수 있습니다.</p> - -<div class="hidden"> -<pre class="brush: html"><div class="exercise"> - <main> - <div class="instruction">Mark all the abbreviations with the <code>&lt;abbr&gt;</code> element</div> - <div class="playground"><textarea spellcheck="false"></textarea></div> - <div class="checking"> - <button>Show results</button><span class="count"></span> - </div> - <div class="result">Web <abbr title="developers">dev.</abbr> use <abbr title="Hypertext Markup Language">HTML</abbr> to structure documents, <abbr title="Cascading StyleSheet">CSS</abbr> to style them, and JavaScript to add special effects by using some dedicated <abbr title="Application Programming Interface">API</abbr>s.</div> - </main> -</div></pre> - -<pre class="brush: css">body { - font: 1em/100% sans-serif; - padding: 0; - margin: 0; -} - -.exercise { - background: #F9FAFB; - border-radius: 5px; - height: 13em; - overflow: hidden; -} - -.instruction, .count { - padding: .5em; - font-style: italic; - font-size: .95em; -} - -.playground { - padding: 0 .5em; -} - -.playground textarea { - display: block; - font-size : 1em; - line-height: 1.5em; - font-family: monospace; - box-sizing: border-box; - width : 100%; - padding : .5em; - height : 9.7em; -} - -.checking { - padding: .5em; -} - -.checking button { - box-sizing: border-box; - box-shadow:inset 0 1px 0 0 #bcd9a3; - background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); - background-color:#b4d665; - border-radius:5px; - border:1px solid #8aa164; - cursor:pointer; - font-size:1em; - padding:.5em; - text-decoration:none; -} -.checking button:hover { - background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); - background-color:#89a646; -} -.checking button:active { - transform: translate(0, 1px); -} - -.result { - height: 10em; - line-height: 1.4em; - padding: .5em; - box-sizing: border-box; -} - -main { - transform: translate(0,0); - transition: transform 300ms; -} - -.next main { - transform: translate(0, -10em); -} - -abbr { - display: inline-block; - white-space: nowrap; -} - -abbr.ok { - color: green; -} - -abbr.ok:after { - content: ' ✔︎'; -} - -abbr.fail { - color: red; -} - -abbr.fail:after { - content: ' ✘'; -} - -abbr.warning { - color: orange; -} - -abbr.warning:after { - content: ' !'; - font-weight: bold; -} -</pre> - -<pre class="brush: js">window.addEventListener('load', function () { - var content = document.querySelector('.exercise'); - var input = document.querySelector('.playground textarea'); - var button = document.querySelector('.checking button'); - var message = document.querySelector('.checking .count'); - var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); - var data = { - pass : 0, fail : 0, warning : 0 - }; - - input.value = document.querySelector('.result').textContent; - - function toggleResult(e) { - e.preventDefault(); - var classList = content.className.split(' '); - - if (classList.length === 1 && checkResult()) { - content.className = 'exercise next'; - message.innerHTML = 'Get ' + data.pass + ', ' + - 'Get ' + data.warning + ' without full description, ' + - 'Miss ' + data.fail + '.'; - button.innerHTML = 'Try again'; - } else { - content.className = 'exercise'; - message.innerHTML = ''; - button.innerHTML = 'Show results'; - } - } - - function checkResult() { - var i, j, node = document.createElement('div'); - node.innerHTML = input.value; - data = { pass : 0, fail : 0, warning : 0 }; - - var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); - - if (userAbbr.length === 0) { - alert("You haven't marked any abbreviations (there are " + abbr.length + " to find)."); - return false; - } - - for (i in abbr) { - var txt = abbr[i].textContent; - var fail = true; - - for (j in userAbbr) { - var userText = userAbbr[j].textContent; - - if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { - fail = false; - if (userAbbr[j].title) { - data.pass += 1; - abbr[i].className = 'ok'; - } else { - data.warning += 1; - abbr[i].className = 'warning'; - } - } - } - - if (fail) { - data.fail += 1; - abbr[i].className = 'fail'; - } - } - - return true; - } - - button.addEventListener('click', toggleResult); -}); -</pre> -</div> - -<p>{{ EmbedLiveSample('Exercise','100%',220) }}</p> - -<h2 id="더_알아보기">더 알아보기</h2> - -<ul> - <li>{{HTMLElement("abbr")}} 참고 문서.</li> -</ul> diff --git a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html index d4abd5da57..a2f568d908 100644 --- a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -1,6 +1,6 @@ --- title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 +slug: Learn/HTML/Howto/Use_data_attributes tags: - HTML - HTML5 @@ -9,6 +9,7 @@ tags: - 웹 - 전용 데이터 속성 translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Learn/HTML/Howto/데이터_속성_사용하기 --- <div>{{LearnSidebar}}</div> diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index d6930ac381..984a8d3479 100644 --- a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html +++ b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -1,7 +1,8 @@ --- title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content --- <div>{{LearnSidebar}}</div> |