diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/guide | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/web/guide')
23 files changed, 3352 insertions, 0 deletions
diff --git a/files/ko/web/guide/ajax/community/index.html b/files/ko/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..76af2fd193 --- /dev/null +++ b/files/ko/web/guide/ajax/community/index.html @@ -0,0 +1,21 @@ +--- +title: Community +slug: Web/Guide/AJAX/Community +tags: + - AJAX +translation_of: Web/Guide/AJAX/Community +--- +<p>AJAX와 관련된 유용한 mailing lists, newsgroups, 포럼, 다른 커뮤니티를 원한다면, 링크를 클릭하세요.</p> + +<h2 id="Ajax_Resources" name="Ajax_Resources">Ajax Resources</h2> + +<h2 id="Ajax_Workshops__Courses" name="Ajax_Workshops_&_Courses">Ajax Workshops and Courses</h2> + +<ul> + <li><a class="external" href="http://skillsmatter.com/go/ajax-ria">skillsmatter.com</a>: JavaScript, Ajax 그리고 Reverse Ajax 기술의 대한 강의와 이벤트</li> + <li><a href="https://www.telerik.com/forums/aspnet-ajax" rel="noopener">telerik.com</a>: Ajax의 관한 활발한 커뮤니티 포럼</li> + <li><a href="https://community.tableau.com/search.jspa?q=ajax" rel="noopener">community.tableau.com</a>: Ajax에 사용가능한 커뮤니티 지원 포럼 및 강좌</li> + <li><a href="https://www.codementor.io/community/search?q=ajax" rel="noopener">codementor.io</a>: Ajax 포럼 및 튜토리얼이 있는 소셜 플랫폼</li> + <li><a href="https://www.lynda.com/search?q=ajax" rel="noopener">lynda.com</a>: Ajax 기초를 배울 수 있는 튜토리얼 제공</li> + <li><a href="https://www.onlineinterviewquestions.com/ajax-interview-questions/" rel="bookmark">Ajax </a>인터뷰 질문 및 질문의 답변<span class="comment">Interwiki links</span></li> +</ul> diff --git a/files/ko/web/guide/ajax/getting_started/index.html b/files/ko/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..35ba540c6f --- /dev/null +++ b/files/ko/web/guide/ajax/getting_started/index.html @@ -0,0 +1,296 @@ +--- +title: Ajax 시작하기 +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +<div class="warning"><strong>중요</strong>: 해당 문서는 2018/07/31 (원문 : 2018/04/23) 에 마지막으로 번역되었습니다. 원문의 변경이 잦아 내용이 다를 수 있으니 참고하십시오.</div> + +<p><span class="seoSummary">본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다.</span></p> + +<h3 id="AJAX.EB.9E.80.3F" name="AJAX.EB.9E.80.3F">AJAX란?</h3> + +<p>AJAX란 비동기 자바스크립트와 XML (<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 <code><a href="/ko/docs/XMLHttpRequest">XMLHttpRequest</a></code> 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.</p> + +<p>AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줍니다.</p> + +<ul> + <li>페이지 새로고침 없이 서버에 요청</li> + <li>서버로부터 데이터를 받고 작업을 수행</li> +</ul> + +<h3 id="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request" name="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request">1단계 – HTTP request 만드는 방법</h3> + +<p>JavaScript를 이용하여 서버로 보내는 <a href="/ko/docs/Web/HTTP">HTTP</a> request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요합니다. <code>XMLHttpRequest</code> 가 그러한 Object의 한 예입니다. 이러한 로직은 Internet Explorer의 <code>XMLHTTP</code> 라고 불리는 ActiveX 객체로 부터 시작되었습니다. 이후, Mozilla, Safari 등 기타 브라우저들이 Microsoft사의 ActiveX 객체의 매서드와 프로퍼티를 지원하는 <code>XMLHttpRequest</code> 객체를 적용합니다. 그러는 동안, Microsoft도 XMLHttpRequest를 적용합니다.</p> + +<pre class="brush: js">// 구버전을 위한 호환성 코드입니다. 더 이상 이렇게 작성하지 않아도 됩니다. +var httpRequest; +if (window.XMLHttpRequest) { // 모질라, 사파리, IE7+ ... + httpRequest = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE 6 이하 + httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> + +<div class="note">주의: 위의 코드는 XMLHttp 인스턴스를 만드는데 사용된 간단한 버전의 코드입니다. 좀 더 현실적인 사용 예를 보려면 이 글의 3단계를 보십시오.</div> + +<p>서버에 요청(Request)을 하기에 앞서, 서버로 보낸 요청에 대한 응답을 받았을 때 어떤 동작을 할 것인지 정해야합니다. 위에서 생성한 httpRequest 의 <code>onreadystatechange</code> property에 특정 함수(<code>nameOfTheFunction</code>)를 할당하면 요청에 대한 상태가 변화할 때 특정 함수(<code>nameOfTheFunction</code>)가 불리게 됩니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction; +</pre> + +<p>주목할 사항으로는 위에서는 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다는 점입니다. 단순하게 그 함수를 지정하는 것이므로 그 함수로 어떠한 변수도 전달하지 않습니다. 또한 단순하게 함수를 연결하면 되기 때문에 아래와 같이 JavaScript에서 사용되는 "임의 함수(anonymous functions)"방법으로 직접적인 함수 본체를 기입해도 됩니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = function(){ + // 서버의 응답에 따른 로직을 여기에 작성합니다. +}; +</pre> + +<p>위와 같이 서버로 부터 응답을 받은 후의 동작을 결정 한 뒤에, 요청을 합니다. 아래와 같이 HTTP request 객체의 <code>open()</code>과 <code>send()</code>를 사용하면 요청을 할 수 있습니다.</p> + +<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(null); +</pre> + +<p><code>open()</code> 메소드의 파라미터</p> + +<ul> + <li>첫번째 파라미터는 HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식 ─ 입니다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기해야합니다. 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있습니다. HTTP 요구 방식의 보다 자세한 정보는 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 명세</a>를 참고하기 바랍니다.</li> + <li>두번째 파라미터는 요구하고자하는 URL 입니다. 보안상의 이유로 서드 파티 도메인 상의 URL은 기본적으로 호출할 수 없습니다. 요구하는 모든 페이지에 정확한 도메인 네임을 사용하십시오. 그렇지 않으면 <code>open()</code> 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있습니다. 일반적인 오류는 당신의 사이트에 <code>domain.tld</code> 와 같은 형태로 접근하는 것 입니다. 이러한 경우 <code>www.domain.tld</code> 와 같은 형태로 페이지를 요구하기 바랍니다. 만약 다른 도메인으로 요청을 보내고 싶다면 <a href="/ko/docs/Web/HTTP/Access_control_CORS">HTTP 접근 제어 (CORS)</a> 를 참고하기 바랍니다.</li> + <li>세번째 파라미터(생략 가능)는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 <code>true</code>(기본값) 으로 설정된 경우에는 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행됩니다. 이것이 AJAX 의 첫번째 A (Asynchronous : 비동기성) 입니다. + <ul> + <li><code>false</code>로 설정된 경우 동기적으로 작동합니다. (<code>send()</code> 함수에서 서버로부터 응답이 올 때까지 기다림)<sup>역자 덧붙임</sup></li> + </ul> + </li> +</ul> + +<p><code>send()</code> 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 합니다. 예를 들자면 아래와 같습니다.</p> + +<pre><code>"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"</code></pre> + +<p><code>multipart/form-data</code>, JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능합니다.</p> + +<p>만약 <code>POST</code> 형식으로 데이터를 보내려 한다면, 요청(request)에 MIME type을 먼저 설정 해야 합니다. 예를 들자면 <code>send()</code>를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 합니다.</p> + +<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> + +<h3 id="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response" name="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response">2단계 – 서버 응답에 대한 처리</h3> + +<p>서버로 요청(request)을 보내기 전에, 위(1단계 - HTTP Request 만들기)에서는 서버의 응답을 처리하기 위한 자바스크립트 함수의 이름을 지정했었습니다.</p> + +<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;</pre> + +<p>이 함수는 무슨 일을 수행해야 할까요? 먼저, 해당 함수에서는 요구의 상태값을 검사할 필요가 있습니다. 만약 상태값이 <code>XMLHttpRequest.DONE</code> (상수 4로 정의되어 있습니다.) 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.</p> + +<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) { + // 이상 없음, 응답 받았음 +} else { + // 아직 준비되지 않음 +} +</pre> + +<p><code>readyState</code> 가 가질 수 있는 모든 값의 목록은 <a href="/en-US/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a>에 작성되어있으며 아래와 같습니다:</p> + +<ul> + <li>0 (uninitialized) - (<strong>request가 초기화되지 않음</strong>)</li> + <li>1 (loading) - (<strong>서버와의 연결이 성사됨</strong>)</li> + <li>2 (loaded) - (<strong>서버가 request를 받음</strong>)</li> + <li>3 (interactive) - (<strong>request(요청)을 처리하는 중</strong>)</li> + <li>4 (complete) - (<strong>request에 대한 처리가 끝났으며 응답할 준비가 완료됨</strong>)</li> +</ul> + +<p>(<a class="external" href="/en-US/docs/Web/Guide/AJAX/Getting_Started#Step_2_%E2%80%93_Handling_the_server_response">원문</a> 참고)</p> + +<p>그 다음에는 <a href="/ko/docs/Web/HTTP/Status">HTTP 응답 상태 코드</a>를 검사해야 합니다. 가능한 모든 코드 값의 목록은 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> 에서 확인할 수 있습니다. 아래 예제에서는 AJAX 요청이 정상적으로 처리되었는지 아닌지만을 검사하기 위해 응답 코드가 <a href="/ko/docs/Web/HTTP/Status#%EC%84%B1%EA%B3%B5_%EC%9D%91%EB%8B%B5">200 OK</a> 인지 검사하는 예제입니다.</p> + +<pre class="brush: js">if (httpRequest.status === 200) { + // 이상 없음! +} else { + // 요구를 처리하는 과정에서 문제가 발생되었음 + // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나 + // 혹은 500 (Internal Server Error) 이 될 수 있음 +} +</pre> + +<p>이제 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있다. 그리고 응답 데이터에 접근하기 위한 옵션이 2가지 있습니다.</p> + +<ul> + <li><code>http_request.responseText</code> – 서버의 응답을 텍스트 문자열로 반환할 것이다.</li> + <li><code>http_request.responseXML</code> – 서버의 응답을 <code>XMLDocument</code> 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.</li> +</ul> + +<p>위의 단계는 비동기식 요구(asynchronous request)를 사용했을 경우에 대한 설명입니다(즉, <code>open()</code>의 세번째 변수가 생략되었거나 <code>true</code> 일 경우). 동기식(Synchronous) 방법을 사용한다면 함수(<code>nameOfTheFunction</code>)를 명시할 필요 없이 <code>send()</code> 호출에 의해 반환되는 data를 바로 사용 할 수 있습니다. 그러나 이는 스크립트가 <code>send()</code>를 호출할 때 멈춰지며 서버의 응답이 완료 될 때까지 기다리기 때문에 나쁜 UX를 제공하게 합니다.</p> + +<h3 id="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example" name="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example">3단계 – 간단한 예제</h3> + +<p>이제 이들을 한데 모아서 간단한 HTTP Request를 수행해보겠습니다. 우리가 작성할 자바스크립트는 "I'm a test." 라는 문장이 적힌 <code>test.html</code> 이라는 HTML 문서를 요청해서 문서의 내용을 파라미터로 <code>alert()</code> 함수를 호출할 것입니다. 이 예제는 vanilla Javascript(순수 자바스크립트 - jQuery도 포함되어 있지 않습니다.)로 작성되었습니다. 또한 HTML, XML, PHP 파일들은 같은 경로에 위치되어 있어야 합니다.</p> + +<pre class="brush: html"><button id="ajaxButton" type="button">Make a request</button> + +<script> +(function() { + var httpRequest; + document.getElementById("ajaxButton").addEventListener('click', makeRequest); + + function makeRequest() { + httpRequest = new XMLHttpRequest(); + + if(!httpRequest) { + alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ'); + return false; + } + httpRequest.onreadystatechange = alertContents; + httpRequest.open('GET', 'test.html'); + httpRequest.send(); + } + + function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('request에 뭔가 문제가 있어요.'); + } + } + } +})(); +</script> +</pre> + +<p><br> + 이 예제에서:</p> + +<ul> + <li>사용자는 브라우저 상의 "Make a request" 라는 버튼을 클릭합니다;</li> + <li>버튼의 클릭 이벤트 핸들러는 <code>makeRequest()</code> 함수를 호출합니다;</li> + <li>브라우저는 서버로 요구를 보내고 <code>onreadystatechange</code> 에 설정된 <code>alertContents()</code> 함수가 수행됩니다;</li> + <li><code>alertContents()</code> 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 정상적인 경우 <code>test.html</code> 파일의 내용을 파라미터로 <code>alert()</code> 함수를 호출합니다.</li> +</ul> + +<div class="note"> +<p><strong>주의</strong>: Internet Explorer에서 정적 HTML 파일이 아닌 XML 파일을 받기 위한 request를 보내려면 응답 헤더를 반드시 설정해주어야 합니다. 헤더에 <code>Content-Type: application/xml</code>을 설정해주지 않으면 IE는 XML 요소에 접근하고자 할 때 "Object Expected" 예외에러를 발생시킵니다.</p> +</div> + +<div class="note"> +<p><strong>주의 2</strong>: 헤더에 <code>Cache-Control: no-cache</code> 를 설정 하지 않는다면, 브라우저는 응답을 캐싱하고 다시 요청하지 않을 수 있습니다. 이는 디버깅하기 매우 어려워 질 수 있음을 기억하십시오. 또는 GET 파라미터로 timestamp(시간정보)나 난수를 추가하면 캐싱을 방지할 수 있습니다. (<a href="/ko/docs/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache" title="https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">캐싱 우회</a>를 참고하세요)</p> +</div> + +<div class="note"> +<p><strong>주의 3</strong>: 만약 <code>httpRequest</code> 변수가 전역적으로 사용되면, <code>makeRequest()</code> 함수를 호출하는 여러 함수들 사이에서 경쟁 상태(race condition)가 발생할 수 있으며, 이 경우 다른 데이터를 덮어쓰게 됩니다. <code>XMLHttpRequest</code> 인스턴스는 함수 내의 지역 변수로 선언하는 것을 권장합니다.</p> +</div> + +<p>통신 에러 (서버가 다운되는 상황 등) 상황에서, status 필드를 접근하려 하면 <code>onreadystatechange</code> 메서드에서 예외에러를 발생 시킬 것입니다. 이러한 문제를 예방하기 위해서 <code>if...then</code> 구문을 <code>try…catch</code> 구문으로 감싸주세요.</p> + +<pre class="brush: js">function alertContents() { + try { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } + catch( e ) { + alert('Caught Exception: ' + e.description); + } +} +</pre> + +<h3 id="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response" name="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response">4단계 – 추가 예제 1 (XML response)</h3> + +<p>앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object) 중 <code>reponseText</code> 프로퍼티를 사용했고, <code>reponseText</code>는 <code>test.html</code>파일의 내용을 가지고 있었습니다. 이제 <code>responseXML</code>을 사용해 봅시다.</p> + +<p>첫째로, 나중에 요구하게 될 XML 문서를 만들어 봅시다. 이 문서(<code>test.xml</code>)은 아래와 같은 내용을 담고 있습니다:</p> + +<pre class="brush: xml"><?xml version="1.0" ?> +<root> + I'm a test. +</root> +</pre> + +<p>3단계 예제의 스크립트의 내용도 바꿔줍니다.</p> + +<p>파일의 확장자를 <code>.html</code>에서 <code>.xml</code>로 변경합니다:</p> + +<pre>... +onclick="makeRequest('test.xml')"> +... +</pre> + +<p>그 다음, <code>alertContents()</code>함수에서 <code>alert()</code>함수를 실행하는 라인 <code>alert(httpRequest.responseText);</code>을 아래와 같이 바꿉니다:</p> + +<pre class="brush: js">var xmldoc = httpRequest.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> + +<p>이 방법은 <code>responseXML</code>에 의한 <code>XMLDocument</code> 객체를 가져오고 XML 문서에 포함된 데이터를 가져오기 위해 DOM 메서드들을 사용했습니다. <code>test.xml</code>는 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">여기</a>에서 볼 수 있으며 위와 같이 수정한 업데이트된 테스트용 스크립트는 <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">여기</a>에서 볼 수 있습니다. (해당 테스트 문서는 구버전이기 때문에 button이 아닌 클릭가능한 밑줄 문장으로 구성되어 있습니다.<sup>역자 덧붙임</sup>)</p> + +<h3 id="Step_5_–_추가_예제_2_(data)">Step 5 – 추가 예제 2 (data)</h3> + +<p>마지막으로, 서버에 HttpRequest를 전송할 때 data를 포함해보고 응답을 받아봅시다. 이번에는 동적인 페이지를 요청(Request)할 것입니다. 서버의 <code>test.php</code> 코드는 전송받은 data를 이용하여 "계산된" 문자열인 "Hello, [user data]!"를 반환해줄 것입니다. 그리고 <code>alert()</code> 으로 확인해봅시다.</p> + +<p>먼저 유저가 편집할 수 있는 HTML 구성요소인 텍스트박스를 추가합니다:</p> + +<pre class="brush: html"><label>당신의 이름을 입력해주세요 : + <input type="text" id="ajaxTextbox" /> +</label> +<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> + Make a request +</span></pre> + +<p>텍스트박스에 입력된 유저의 데이터를 얻기 위해 클릭 이벤트 핸들러에도 몇 줄 추가해줍니다. 유저의 데이터와 서버 측에서 실행시킬 스크립트의 URL을 담아 <code>makeRequest()</code> 함수를 호출합니다.</p> + +<pre class="brush: js"> document.getElementById("ajaxButton").onclick = function() { + var userName = document.getElementById("ajaxTextbox").value; + makeRequest('test.php',userName); + };</pre> + +<p>유저 데이터를 받아 서버로 전송시키려면 makeRequest() 함수를 수정해야 합니다. HTTP 요구 방식을 <code>GET</code> 에서 <code>POST</code> 로 변경하고, 유저 데이터를 <code>httpRequest.send()</code> 의 인자로 넣어줍니다:</p> + +<pre class="brush: js"> function makeRequest(url, userName) { + + ... + + httpRequest.onreadystatechange = alertContents; + httpRequest.open('POST', url); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.send('userName=' + encodeURIComponent(userName)); + } +</pre> + +<p><code>alertContents()</code> 함수는 <strong>3단계</strong>와 같이 작성한다면 서버가 반환한 모든 값을 출력하므로 내버려두어도 상관없습니다. 그러나 만약 서버가 "계산된 문자열"과 "유저 데이터" 두 항목을 반환한다고 가정하면 서버의 응답 데이터는 다음과 같을 것입니다(유저가 "우희"라고 작성한다면):</p> + +<p><code>{"userData":"우희","computedString":"안녕, 우희!"}</code></p> + +<p>이 응답 데이터를 <code>alertContents()</code> 에서 사용하려면, <code>responseText</code> 프로퍼티의 값만을 사용한 출력물은 좋은 출력물이라고 할 수 없습니다. (위 문장이 그대로 alert 됩니다.)</p> + +<p>우리는 <code>computedString</code>만을 출력시키기 위해 파싱(parsing : 구문 분석)을 해야만 합니다 (위와 같은 포맷을 JSON 포맷이라고 합니다. 아래의 코드에서는 JSON 내장 객체를 이용하여 파싱합니다.<sup>역자 덧붙임</sup>):</p> + +<pre class="brush: js">function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + var response = JSON.parse(httpRequest.responseText); + alert(response.computedString); + } else { + alert('request에 뭔가 문제가 있어요.'); + } + } +}</pre> + +<p><code>test.php</code> 파일은 아래와 같아야 합니다:</p> + +<pre class="brush: php"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; +$computedString = "안녕, " . $name . "!"; +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array);</code></pre> + +<p>DOM methods에 대한 더 자세한 사항은 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 문서를 확인하십시오.</p> diff --git a/files/ko/web/guide/ajax/index.html b/files/ko/web/guide/ajax/index.html new file mode 100644 index 0000000000..e94f129272 --- /dev/null +++ b/files/ko/web/guide/ajax/index.html @@ -0,0 +1,71 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - DOM + - JavaScript + - References +translation_of: Web/Guide/AJAX +--- +<div class="callout-box"><strong><a href="/ko/AJAX/Getting_Started">시작하기</a></strong><br> +AJAX를 소개합니다.</div> + +<p><span class="seoSummary"><strong>Asynchronous JavaScript + XML(AJAX)</strong>은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, <a href="/ko/docs/Web/HTML">HTML</a> 또는 <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/CSS">CSS</a>, <a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/ko/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ko/docs/Web/XML">XML</a>, <a href="/ko/docs/Web/XSLT">XSLT</a>, 그리고 제일 중요한 <a href="/ko/docs/Web/API/XMLHttpRequest">XMLHttpRequest 객체</a>를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.</span><br> + 이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다. 덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다.</p> + +<p>AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 {{glossary("JSON")}}을 더 많이 사용합니다. JSON과 XML 양쪽 모두 AJAX 모델에서 정보를 담을 때 사용합니다.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="문서">문서</h2> + +<dl> + <dt><a href="/ko/docs/Web/Guide/AJAX/Getting_Started">시작하기</a></dt> + <dd><small>AJAX 기초를 다룬 후에 간단한 연습 예제 두 개를 제공합니다.</small></dd> + <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest API 사용하기</a></dt> + <dd>{{domxref("XMLHttpRequest")}} API는 Ajax의 핵심입니다. 이 글은 몇 가지 AJAX 기술을 사용하는 법을 설명합니다. + <ul> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using {{domxref("FormData")}} objects</li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li> + <li>using Ajax within <a href="/en-US/docs/Web/API/Worker">Web workers</a></li> + </ul> + </dd> + <dt><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></dt> + <dd>The Fetch API provides an interface for fetching resources. It will seem familiar to anyone who has used {{domxref("XMLHTTPRequest")}}, but this API provides a more powerful and flexible feature set.</dd> + <dt><a href="/ko/docs/Web/API/Server-sent_events">서버발 이벤트</a></dt> + <dd>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/Web/API/Event">Events</a> + data</em> inside the web page. See also: <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd> + <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">이진 데이터 주고받기</a></dt> + <dd>The <code>responseType</code> property of the <code>XMLHttpRequest</code> object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd> + <dt><a href="/ko/docs/Web/XML">XML</a></dt> + <dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd> + <dt><a href="/en-US/docs/Parsing_and_serializing_XML">XML 분석 및 직렬화</a></dt> + <dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd> + <dt><a href="/en-US/docs/XPath">XPath</a></dt> + <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd> + <dt>{{domxref("FileReader")}} API</dt> + <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read. File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}.</dd> + <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest">XMLHttpRequest의 HTML</a></dt> + <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to {{domxref("XMLHttpRequest")}}, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX">View All...</a></span></p> + +<h2 class="Other" id="같이_보기">같이 보기</h2> + +<dl> + <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: A New Approach to Web Applications</a></dt> + <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd> + <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest 명세</a></dt> + <dd>WHATWG Living Standard</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="관련_주제">관련 주제</h2> + +<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/XML">XML</a>, <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/XSLT">XSLT</a>, <a href="/en-US/docs/Glossary/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p> +</div> +</div> diff --git a/files/ko/web/guide/api/index.html b/files/ko/web/guide/api/index.html new file mode 100644 index 0000000000..e9ca5304d4 --- /dev/null +++ b/files/ko/web/guide/api/index.html @@ -0,0 +1,24 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - Web +translation_of: Web/Guide/API +--- +<p>The web includes a wide array of APIs that can be used from JavaScript to build increasingly more powerful and capable applications, running either on the web, locally, or through technology such as <a href="https://nodejs.org/">Node.js</a>, on a server. On this page you'll find a complete list of all of the APIs provided by the full web technology stack.</p> + +<h2 id="Web_API의_모든_것">Web API의 모든 것</h2> + +<p>{{ListGroups}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li> + <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> + <li><a href="/en-US/docs/Learn">Learning web development</a></li> +</ul> diff --git a/files/ko/web/guide/api/vibration/vibration/index.html b/files/ko/web/guide/api/vibration/vibration/index.html new file mode 100644 index 0000000000..16271ff248 --- /dev/null +++ b/files/ko/web/guide/api/vibration/vibration/index.html @@ -0,0 +1,100 @@ +--- +title: Vibration API +slug: Web/Guide/API/Vibration/Vibration +translation_of: Web/API/Vibration_API +--- +<div>{{DefaultAPISidebar("Vibration API")}}</div> + +<p>요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.</p> + +<p><strong>Vibration API</strong>는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.</p> + +<h2 id="Describing_vibrations">Describing vibrations</h2> + +<p>바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.</p> + +<h3 id="한번_진동시키기">한번 진동시키기</h3> + +<p>여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.</p> + +<pre class="brush:js">window.navigator.vibrate(200); +window.navigator.vibrate([200]); +</pre> + +<p>이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.</p> + +<h3 id="패턴이_있는_진동_만들기">패턴이 있는 진동 만들기</h3> + +<p>배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.</p> + +<pre class="brush: js">window.navigator.vibrate([200, 100, 200]); +</pre> + +<p>이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.</p> + +<p>여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.</p> + +<h3 id="이미_실행중인_진동_캔슬하기">이미 실행중인 진동 캔슬하기</h3> + +<p>{{domxref("window.navigator.vibrate()")}} <code>메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 </code>현재 진행중인 진동패턴은 취소될 것이다.</p> + +<h3 id="지속적인_진동_내보내기">지속적인 진동 내보내기</h3> + +<p>Some basic <code>setInterval</code> and <code>clearInterval</code> action will allow you to create persistent vibration:</p> + +<pre><code>var vibrateInterval; + +// Starts vibration at passed in level +function startVibrate(duration) { + navigator.vibrate(duration); +} + +// Stops vibration +function stopVibrate() { + // Clear interval and stop persistent vibrating + if(vibrateInterval) clearInterval(vibrateInterval); + navigator.vibrate(0); +} + +// Start persistent vibration at given duration and interval +// Assumes a number value is given +function startPeristentVibrate(duration, interval) { + vibrateInterval = setInterval(function() { + startVibrate(duration); + }, interval); +}</code></pre> + +<p>Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).</p> + +<h3 id="Why_use_Vibration_API">Why use Vibration API?</h3> + +<p>This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Vibration API')}}</td> + <td>{{Spec2('Vibration API')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div>{{Compat("api.Navigator.vibrate")}}</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("window.navigator.vibrate()")}}</li> +</ul> diff --git a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html new file mode 100644 index 0000000000..df8885e1e1 --- /dev/null +++ b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html @@ -0,0 +1,321 @@ +--- +title: HTML5 영상에 캡션과 자막 붙이기 +slug: >- + Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video +translation_of: >- + Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video +--- +<div class="summary"> +<p><span class="seoSummary">우리는 다른 글에서 {{ domxref("HTMLMediaElement") }}과(와) {{ domxref("Window.fullScreen") }} API를 활용하여 <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">다양한 브라우저에서 호환되는 영상 플레이어를 제작하는 방법</a>과 <a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">플레이어에 스타일을 적용하는 방법</a>을 살펴보았습니다. 이번 글에서는 위에서 제작했던 플레이어를 활용하여 {{ domxref("Web_Video_Text_Tracks_Format","WebVTT 포맷 파일") }}과(와) {{ htmlelement("track") }} 엘리먼트를 이용해 캡션과 자막을 붙이는 방법을 살펴보려고 합니다.</span></p> +</div> + +<h2 id="캡션이_포함된_영상_예제">캡션이 포함된 영상 예제</h2> + +<p>캡션이 포함된 영상 플레이어를 예시로 설명하기 위하여 <a href="http://www.blender.org/foundation/">Blender Foundation</a>에서 만든 <a href="http://www.sintel.org/">Sintel open movie</a>를 발췌하여 사용할 것입니다.</p> + +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<div class="note"> +<p><strong>Note</strong>: <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">소스코드</a>는 Github 에서 받을 수 있으며 <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">데모</a> 또한 확인해보실 수 있습니다.</p> +</div> + +<h2 id="HTML5와_영상_캡션">HTML5와 영상 캡션</h2> + +<p>영상에 캡션을 붙이는 법을 살펴보기 전에, 몇가지 짚고 넢어가야 할 것들이 있습니다.</p> + +<h3 id="캡션_vs_자막">캡션 vs 자막</h3> + +<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">캡션과 자막은 다른 개념입니다</a>: 이 두가지는 명백히 다른 개념이며 서로 다른 정보를 전달합니다. 이 두가지에 대해 명확하게 이해하고 있지 않다면 두 개념의 차이를 먼저 이해하고 오는 것이 좋습니다. 개념적으로는 다르더라도 기술적으로는 같은 방식을 따르기 때문에, 이 글에서 설명하는 것은 두 개념 모두에 적용됩니다.</p> + +<p>이 글에서는 화면에 보여지는 텍스트를 자막으로 간주하고 설명하고 있습니다. 여기서 자막은 영상의 언어를 이해하기 어려운 사람들을 위한 텍스트를 의미하며, 듣는 능력에 장애가 있는 사람들을 위한 텍스트를 의미하는 것은 아닙니다.</p> + +<h3 id="<track>_엘리먼트"><track> 엘리먼트</h3> + +<p>HTML5에서는 {{ htmlelement("track") }}를 이용하여 자막을 특정해서 보여줄 수 있습니다. 엘리먼트에서 제공하는 다양한 속성을 이용하여 추가하려는 컨텐트 유형, 언어, 자막 파일 등을 지정할 수 있습니다.</p> + +<h3 id="WebVTT">WebVTT</h3> + +<p>자막 데이터를 담고있는 파일은 특정한 파일 포맷을 따르는데, 이 글에서는 <a href="/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT)를 이용합니다. <a href="http://dev.w3.org/html5/webvtt/">WebVTT 스펙</a> 은 아직 개발 단계에 있지만 대부분 주요 기능은 안정화 단계에 있기 떄문에 지금도 충분히 사용 가능합니다.</p> + +<p>영상 제공자(<a href="http://www.blender.org/foundation/">Blender Foundation</a>같은)들은 영상과 함께 캡션과 자막을 텍스트 파일로 제공하는데 보통 SubRip Text(SRT) 포맷을 사용합니다. SRT 파일은 온라인에서 쉽게 찾을 수 있는 <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>같은 변환기를 이용해 WebVTT로 변환할 수 있습니다.</p> + +<h2 id="HTML과_CSS_수정">HTML과 CSS 수정</h2> + +<p>이번 섹션에서는 영상에 자막을 추가하기 위하여 이전 글에서 작성했던 코드의 마크업을 수정해볼 것입니다. 혹시 이번 섹션은 별로 관심이 없거나 바로 JavaScript 혹은 직접적인 CSS를 수정하는데에 더 관심이 있다면, {{ anch("Subtitle implementation") }} 섹션으로 건너뛰어도 무방합니다.<br> + <br> + 이번 예제에서는 <a href="http://www.sintel.org/">Sintel</a>이라는 다른 영상을 사용해보겠습니다. 이 영상은 연설하는 내용을 담고있기 떄문에 자막이 동작하는 것을 이해하는데 훨씬 더 적합할 것입니다.</p> + +<h3 id="HTML_마크업">HTML 마크업</h3> + +<p>위에서 언급한대로, 자막 파일을 HTML5 영상에 추가하기 위해서는 새로운 HTML5 <code><track></code> 엘리먼트를 활용해야 합니다. 우리는 지금 3가지 다른 언어의 자막— 영어, 독일어, 스페인어 —을 가지고 있기 때문에 HTML5 <code><video></code> 엘리먼트 안에 <code><track></code> 엘리먼트를 추가하여 3가지 언어에 대응하는 VTT 파일을 지정해주어야 합니다.:</p> + +<pre class="brush: html"><video id="video" controls preload="metadata"> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.webm" type="video/webm"> + <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> + <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> + <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"> +</video></pre> + +<p>위 코드에서 보듯, 각각의 <code><track></code> 엘리먼트는 다음의 속성 세트를 갖습니다:</p> + +<ul> + <li><code>subtitles</code>값을 갖고 있는 <code>kind</code> 는 해당 파일이 가지고 있는 내용의 유형을 가리킵니다.</li> + <li><code>label</code> 은 자막 세트가 갖는 언어를 상징하는 값입니다. — 예를 들어 <code>English</code> 혹은 <code>Deutsch</code> — 이 값들은 UI 상에서 사용자가 쉽게 원하는 자막을 선택할 수 있도록 보여지는데 사용됩니다.</li> + <li><code>src</code> 은 각 자막에 해당하는 WebVTT 파일 URL입니다.</li> + <li><code>srclang</code> 각 자막 파일의 언어 값을 가리킵니다.</li> + <li>English <code><track></code> 엘리먼트에 지정되어있는 <code>default</code> 속성은 브라우저로 하여금 기본 자막 파일이라고 알려주는 역할을 합니다. 자막 설정은 켜져있고 사용자가 아무런 선택도 하지 않을 경우 기본으로 보여질 자막을 의미합니다.</li> +</ul> + +<p>In addition to adding the <code><track></code> elements, we have also added a new button to control the subtitles menu that we will build. As a consequence, the video controls now look as follows:</p> + +<pre class="brush: html;highlight[13]"><div id="video-controls" class="controls" data-state="hidden"> + <button id="playpause" type="button" data-state="play">Play/Pause</button> + <button id="stop" type="button" data-state="stop">Stop</button> + <div class="progress"> + <progress id="progress" value="0" min="0"> + <span id="progress-bar"></span> + </progress> + </div> + <button id="mute" type="button" data-state="mute">Mute/Unmute</button> + <button id="volinc" type="button" data-state="volup">Vol+</button> + <button id="voldec" type="button" data-state="voldown">Vol-</button> + <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button> + <button id="subtitles" type="button" data-state="subtitles">CC</button> +</div></pre> + +<h3 id="CSS_Changes">CSS Changes</h3> + +<p>The video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.<br> + <br> + No image is used for the captions button, so it is simply styled as:</p> + +<pre class="brush: css">.controls button[data-state="subtitles"] { + height:85%; + text-indent:0; + font-size:16px; + font-size:1rem; + font-weight:bold; + color:#666; + background:#000; + border-radius:2px; +}</pre> + +<p>There are also other CSS changes that are specific to some extra JavaScript implementation, but these will be mentioned at the appropriate place below.</p> + +<h2 id="Subtitle_implementation">Subtitle implementation</h2> + +<p>A lot of what we do to access the video subtitles revolves around JavaScript. Similar to the video controls, if a browser supports HTML5 video subtitles, there will be a button provided within the native control set to access them. However, since we have defined our own video controls, this button is hidden, and we need to define our own.</p> + +<p>Browsers do vary as to what they support, so we will be attempting to bring a more unified UI to each browser where possible. There's more on browser compatibility issues later on.</p> + +<h3 id="Initial_setup">Initial setup</h3> + +<p>As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:</p> + +<pre class="brush: js">var subtitles = document.getElementById('subtitles');</pre> + +<p>We also initially turn off all subtitles, in case the browser turns any of them on by default:</p> + +<pre class="brush: js">for (var i = 0; i < video.textTracks.length; i++) { + video.textTracks[i].mode = 'hidden'; +}</pre> + +<p>The <code>video.textTracks</code> property contains an array of all the text tracks attached to the video. We loop through each one and set its <code>mode</code> to <code>hidden</code>.</p> + +<p>Note: The <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> gives us access to all the text tracks that are defined for an HTML5 video using the <code><track></code> element.</p> + +<h3 id="Building_a_caption_menu">Building a caption menu</h3> + +<p>Our aim is to use the <code>subtitles</code> button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely.<br> + <br> + We have added the button, but before we make it do anything, we need to build the menu that goes with it. This menu is built dynamically, so that languages can be added or removed later by simply editing the <code><track></code> elements within the video's markup.</p> + +<p>All we need to do is to go through the video's <code>textTracks</code>, reading their properties and building the menu up from there:</p> + +<pre class="brush: js">var subtitlesMenu; +if (video.textTracks) { + var df = document.createDocumentFragment(); + var subtitlesMenu = df.appendChild(document.createElement('ul')); + subtitlesMenu.className = 'subtitles-menu'; + subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off')); + for (var i = 0; i < video.textTracks.length; i++) { + subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label)); + } + videoContainer.appendChild(subtitlesMenu); +}</pre> + +<p>This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.</p> + +<p>The creation of each list item and button is done by the <code>createMenuItem()</code> function, which is defined as follows:</p> + +<pre class="brush: js">var subtitleMenuButtons = []; +var createMenuItem = function(id, lang, label) { + var listItem = document.createElement('li'); + var button = listItem.appendChild(document.createElement('button')); + button.setAttribute('id', id); + button.className = 'subtitles-button'; + if (lang.length > 0) button.setAttribute('lang', lang); + button.value = label; + button.setAttribute('data-state', 'inactive'); + button.appendChild(document.createTextNode(label)); + button.addEventListener('click', function(e) { + // Set all buttons to inactive + subtitleMenuButtons.map(function(v, i, a) { + subtitleMenuButtons[i].setAttribute('data-state', 'inactive'); + }); + // Find the language to activate + var lang = this.getAttribute('lang'); + for (var i = 0; i < video.textTracks.length; i++) { + // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off + if (video.textTracks[i].language == lang) { + video.textTracks[i].mode = 'showing'; + this.setAttribute('data-state', 'active'); + } + else { + video.textTracks[i].mode = 'hidden'; + } + } + subtitlesMenu.style.display = 'none'; + }); + subtitleMenuButtons.push(button); + return listItem; +}</pre> + +<p>This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's <code>mode</code> attribute to <code>showing</code>, and setting the others to <code>hidden</code>.</p> + +<p>Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.<br> + <br> + Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:</p> + +<pre class="brush: js">subtitles.addEventListener('click', function(e) { + if (subtitlesMenu) { + subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block'); + } +});</pre> + +<h3 id="Subtitle_menu_CSS">Subtitle menu CSS</h3> + +<p>We also added some rudimentary styling for the newly created subtitles menu:</p> + +<pre class="brush: css">.subtitles-menu { + display:none; + position:absolute; + bottom:14.8%; + right:20px; + background:#666; + list-style-type:none; + margin:0; + padding:0; + width:100px; + padding:10px; +} + +.subtitles-menu li { + padding:0; + text-align:center; +} + +.subtitles-menu li button { + border:none; + background:#000; + color:#fff; + cursor:pointer; + width:90%; + padding:2px 5px; + border-radius:2px; +}</pre> + +<h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2> + +<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p> + +<p>The <code>::cue</code> pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p> + +<ul> + <li>{{ cssxref("color") }}</li> + <li>{{ cssxref("opacity") }}</li> + <li>{{ cssxref("visibility") }}</li> + <li>{{ cssxref("text-decoration") }}</li> + <li>{{ cssxref("text-shadow") }}</li> + <li>{{ cssxref("background") }} shorthand properties</li> + <li>{{ cssxref("outline") }} shorthand properties</li> + <li>{{ cssxref("font") }} shorthand properties, including {{ cssxref("line-height") }}</li> + <li>{{ cssxref("white-space") }}</li> +</ul> + +<p>For example, to change the text colour of the text track cues you can write:</p> + +<pre class="brush: css">::cue { + color:#ccc; +}</pre> + +<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p> + +<pre>0 +00:00:00.000 --> 00:00:12.000 +<v Test>[Test]</v></pre> + +<p>Then this specific 'voice' will be stylable like so:</p> + +<pre class="brush: css">::cue(v[voice='Test']) { + color:#fff; + background:#0095dd; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.</p> +</div> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<p><a href="http://caniuse.com/webvtt">Browser support for WebVTT and the <code><track></code> element</a> is fairly good, although some browsers differ slightly in their implementation.</p> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<p>Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The <code>default</code> attribute is also supported.</p> + +<div class="note"> +<p><strong>Note</strong>: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an <code>.htaccess</code> file to an appropriate directory that contains <code>AddType text/vtt .vtt</code>.</p> +</div> + +<h3 id="Safari">Safari</h3> + +<p>Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.</p> + +<h3 id="Chrome_and_Opera">Chrome and Opera</h3> + +<p>These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the <code>default</code> attribute on the <code><track></code> element and will instead try to match the browser's language to the subtitle's language.</p> + +<h3 id="Firefox">Firefox</h3> + +<p>Firefox's implementation was completely broken due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=981280">bug</a>, leading to Mozilla turning off WebVTT support by default (you can turn it on via the <code>media.webvtt.enabled</code> flag.) However, <s>this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)</s> this has been fixed as of Firefox 31, and everything works as it should.</p> + +<h2 id="Plugins">Plugins</h2> + +<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p> + +<dl> + <dt><a href="http://plyr.io">plyr.io </a></dt> + <dd>This modern video player implements subtitles in both SRT and WebVTT file formats.</dd> + <dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt> + <dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd> + <dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt> + <dd>HTML5 player supporting WebVTT.</dd> + <dt><a href="http://www.jwplayer.com/">jwplayer</a></dt> + <dd>This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.</dd> + <dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt> + <dd>Another complete video player that also support video captions, albeit only in SRT format.</dd> + <dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt> + <dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd> + <dt><a href="http://sublimevideo.net">SublimeVideo</a></dt> + <dd>This player also supports captions through WebVTT and SRT files.</dd> + <dt><a href="http://www.videojs.com/">Video.js</a></dt> + <dd>Supports WebVTT video subtitles.</dd> + <dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt> + <dd>Supports multi-languages WebVTT closed captions</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p> +</div> diff --git a/files/ko/web/guide/audio_and_video_delivery/index.html b/files/ko/web/guide/audio_and_video_delivery/index.html new file mode 100644 index 0000000000..857a7eec17 --- /dev/null +++ b/files/ko/web/guide/audio_and_video_delivery/index.html @@ -0,0 +1,554 @@ +--- +title: Audio and Video Delivery +slug: Web/Guide/Audio_and_video_delivery +tags: + - Audio + - HTML5 + - Media + - NeedsTranslation + - TopicStub + - Video +translation_of: Web/Guide/Audio_and_video_delivery +--- +<div class="summary"> +<p>We can deliver audio and video on the web in a number of ways, ranging from 'static' media files to adaptive live streams. This article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular browsers.</p> +</div> + +<h2 id="The_Audio_and_Video_Elements">The Audio and Video Elements</h2> + +<p>Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:</p> + +<ul> + <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Audio Codec Compatibility Table</a></li> + <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Audio/Video Codec Compatibility Table</a></li> +</ul> + +<p>To deliver video and audio, the general workflow is usually something like this:</p> + +<ol> + <li>Check what format the browser supports via feature detection (usually a choice of two, as stated above.)</li> + <li>If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)</li> + <li>Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or <code>document.createElement('video')</code> perhaps?)</li> + <li>Deliver the media file to the player.</li> +</ol> + +<h3 id="HTML_Audio">HTML Audio</h3> + +<pre class="brush: html"><audio controls preload="auto"> + <source src="audiofile.mp3" type="audio/mpeg"> + + <!-- fallback for browsers that don't suppport mp3 --> + <source src="audiofile.ogg" type="audio/ogg"> + + <!-- fallback for browsers that don't support audio tag --> + <a href="audiofile.mp3">download audio</a> +</audio></pre> + +<p>The code above will create an audio player that attempts to preload as much audio as possible for smooth playback.</p> + +<div class="note"> +<p><strong>Note</strong>: The preload attribute may be ignored by some mobile browsers.</p> +</div> + +<p>For further info see <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Cross Browser Audio Basics (HTML5 Audio In Detail)</a></p> + +<h3 id="HTML_Video">HTML Video</h3> + +<pre class="brush: html"><video controls width="640" height="480" poster="initialimage.png" autoplay muted> + <source src="videofile.mp4" type="video/mp4"> + + <!-- fallback for browsers that don't suppport mp4 --> + <source src="videofile.webm" type="video/webm"> + + <!-- specifying subtitle files --> + <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> + <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> + + <!-- fallback for browsers that don't support video tag --> + <a href="videofile.mp4">download video</a> +</video></pre> + +<p>The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.</p> + +<div class="note"> +<p><strong>Note</strong>: The autoplay attribute may be ignored by some mobile browsers.</p> +</div> + +<p>For further info see <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/video"><video> element</a> and <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a>.</p> + +<h3 id="Audio_and_Video_Fallback">Audio and Video Fallback</h3> + +<p>You can create a more comprehensive Fallback using Flash. <a href="https://github.com/johndyer/mediaelement/blob/master/build/flashmediaelement.swf">Using flashmediaelement.swf</a> is one way.</p> + +<pre class="brush: html"><audio controls> + <source src="audiofile.mp3" type="audio/mpeg"> + <source src="audiofile.ogg" type="audio/ogg"> + <!-- fallback for non supporting browsers goes here --> + <a href="audiofile.mp3">download audio</a> + <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> + <param name="movie" value="flashmediaelement.swf" /> + <param name="flashvars" value="controls=true&isvideo=false&file=audiofile.mp3" /> + </object> +</audio></pre> + +<p>The process is very similar with video — just remember to set <code>isvideo=true</code> in the <code>flashvars value</code> parameters.<br> + <br> + <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">More options for Fallbacks</a>.</p> + +<h3 id="JavaScript_Audio">JavaScript Audio</h3> + +<pre class="brush: js">var myAudio = document.createElement('audio'); + +if (myAudio.canPlayType('audio/mpeg')) { + myAudio.setAttribute('src','audiofile.mp3'); +} else if (myAudio.canPlayType('audio/ogg')) { + myAudio.setAttribute('src','audiofile.ogg'); +} + +myAudio.currentTime = 5; +myAudio.play();</pre> + +<p>We set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it.</p> + +<div class="note"> +<p><strong>Note</strong>: Play will be ignored by some mobile browsers unless issued by a user-initiated event.</p> +</div> + +<p>It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:</p> + +<pre class="brush: html"><audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio></pre> + +<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p> + +<h3 id="JavaScript_Video">JavaScript Video</h3> + +<pre class="brush: js">var myVideo = document.createElement('video'); + +if (myVideo.canPlayType('video/mp4')) { + myVideo.setAttribute('src','videofile.mp4'); +} else if (myVideo.canPlayType('video/webm')) { + myVideo.setAttribute('src','videofile.webm'); +} + +myVideo.width = 480; +myVideo.height = 320;</pre> + +<p>We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.</p> + +<h2 id="Web_Audio_API">Web Audio API</h2> + +<pre class="brush: js"> var context; + var request; + var source; + + try { + context = new AudioContext(); + request = new XMLHttpRequest(); + request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true); + request.responseType = "arraybuffer"; + + request.onload = function() { + context.decodeAudioData(request.response, function(buffer) { + source = context.createBufferSource(); + source.buffer = buffer; + source.connect(context.destination); + // auto play + source.start(0); // start was previously noteOn + }); + }; + + request.send(); + + } catch(e) { + alert('web audio api not supported'); + }</pre> + +<p>In this example we retrieve an MP3 file via XHR, load it into a source and play it (<a href="http://jsbin.com/facutone/1/edit?js">Try it for yourself</a>). Find more about Web Audio API basics in <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a>.</p> + +<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2> + +<p>It's also possible to retrieve a live stream from a webcam and/or microphone using <code>getUserMedia</code> and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.</p> + +<p>To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:</p> + +<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> + +<p>Next, if supported connect the webcam source to the video element:</p> + +<pre class="brush: js">if (navigator.mediaDevices) { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(function onSuccess(stream) { + var video = document.getElementById('webcam'); + video.autoplay = true; + video.srcObject = stream; + }) + .catch(function onError() { + alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); + }); +} else { + alert('getUserMedia is not supported in this browser.'); +} +</pre> + +<p>To find out more, read our {{domxref("MediaDevices.getUserMedia")}} page.</p> + +<h2 id="Mediastream_Recording">Mediastream Recording</h2> + +<p>New standards are being rolled out to allow your browser to grab media from your mic or camera using <code>getUserMedia</code> and record it instantly using the new MediaRecorder API. You take the stream you receive from <code>getUserMedia</code>, pass it to a <code>MediaRecorder</code> object, take the resulting output and feed it to your audio or video source*.<br> + <br> + The main mechanism is outlined below:</p> + +<pre class="brush: js">navigator.mediaDevices.getUserMedia({audio:true}) + .then(function onSuccess(stream) { + var recorder = new MediaRecorder(stream); + + var data = []; + recorder.ondataavailable = function(e) { + data.push(e.data); + }; + recorder.start(); + recorder.onerror = function(e) { + throw e.error || new Error(e.name); // e.name is FF non-spec + } + recorder.onstop = function(e) { + var audio = document.createElement('audio'); + audio.src = window.URL.createObjectURL(new Blob(data)); + } + setTimeout(function() { + rec.stop(); + }, 5000); + }) + .catch(function onError(error) { + console.log(error.message); + }); +</pre> + +<p>See <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> for more details.</p> + +<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.</p> + +<h3 id="Encrypted_Media_Extensions_(EME)">Encrypted Media Extensions (EME)</h3> + +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> is a W3C proposal to extend <code>HTMLMediaElement</code>, providing APIs to control playback of protected content.<br> + <br> + The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.<br> + <br> + One of the principle uses of EME is to allow browsers to implement DRM (<a href="http://en.wikipedia.org/wiki/Digital_rights_management">Digital Rights Management</a>), which helps to prevent web-based content (especially video) from being copied.</p> + +<h3 id="Adaptive_Streaming">Adaptive Streaming</h3> + +<p>New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.</p> + +<p>The main formats used for adaptive streaming are <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#HLS">HLS</a> and <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE has been designed with DASH in mind. MSE defines byte streams according to <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> and <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.</p> + +<div class="note"> +<p><strong>Note</strong>: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.</p> +</div> + +<p>DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.<br> + <br> + For further information see <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a>.</p> + +<ul> +</ul> + +<h2 id="Customising_Your_Media_Player">Customising Your Media Player</h2> + +<p>You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the <code>controls</code> attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.</p> + +<p>If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.</p> + +<p>You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.</p> + +<p>A quick example — first set up your audio and custom controls in HTML:</p> + +<pre class="brush: html"> <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> + <button id="my-control">play</button></pre> + +<p>add a bit of JavaScript to detect events to play and pause the audio:</p> + +<pre class="brush: js">window.onload = function() { + + var myAudio = document.getElementById('my-audio'); + var myControl = document.getElementById('my-control'); + + function switchState() { + if (myAudio.paused == true) { + myAudio.play(); + myControl.innerHTML = "pause"; + } else { + myAudio.pause(); + myControl.innerHTML = "play"; + } + } + + function checkKey(e) { + if (e.keycode == 32 ) { //spacebar + switchState(); + } + } + + myControl.addEventListener('click', function() { + switchState(); + }, false); + + window.addEventListener( "keypress", checkKey, false ); +}</pre> + +<p>You can <a href="http://jsbin.com/jujeladu/2/edit">try this example out here</a>. For more information, see <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Creating your own custom audio player</a>.</p> + +<h2 id="Other_tips_for_audiovideo">Other tips for audio/video</h2> + +<h3 id="Stopping_the_download_of_media">Stopping the download of media</h3> + +<p>While stopping the playback of media is as easy as calling the element's <code>pause()</code> method, the browser keeps downloading the media until the media element is disposed of through garbage collection.</p> + +<p>Here's a trick that stops the download at once:</p> + +<pre class="brush: js">var mediaElement = document.querySelector("#myMediaElementID"); +mediaElement.<code>removeAttribute("src");</code> +mediaElement.<code>load();</code> +</pre> + +<p>By removing the media element's <code>src</code> attribute and invoking the load() method, you release the resources associated with the video, which stops the network download. You must call <code>load()</code> after removing the attribute, because just removing the <code>src</code> attribute does not invoke the load algorithm. If the <code><video></code> element also has <code><source></code> element descendants, those should also be removed before calling <code>load()</code>.</p> + +<p>Note that just setting the <code>src</code> attribute to an empty string will actually cause the browser to treat it as though you're setting a video source to a relative path. This causes the browser to attempt another download to something that is unlikely to be a valid video.</p> + +<h3 id="Seeking_through_media">Seeking through media</h3> + +<p>Media elements provide support for moving the current playback position to specific points in the media's content. This is done by setting the value of the <code>currentTime</code> property on the element; see {{ domxref("HTMLMediaElement") }} for further details on the element's properties. Simply set the value to the time, in seconds, at which you want playback to continue.</p> + +<p>You can use the element's <code>seekable</code> property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.</p> + +<pre class="brush: js">var mediaElement = document.querySelector('#mediaElementID'); +mediaElement.seekable.start(0); // Returns the starting time (in seconds) +mediaElement.seekable.end(0); // Returns the ending time (in seconds) +mediaElement.currentTime = 122; // Seek to 122 seconds +mediaElement.played.end(0); // Returns the number of seconds the browser has played +</pre> + +<h3 id="Specifying_playback_range">Specifying playback range</h3> + +<p>When specifying the URI of media for an {{ HTMLElement("audio") }} or {{ HTMLElement("video") }} element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.</p> + +<p>A time range is specified using the syntax:</p> + +<pre>#t=[starttime][,endtime]</pre> + +<p>The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).</p> + +<p>A few examples:</p> + +<dl> + <dt><span class="nowiki">http://example.com/video.ogv#t=10,20</span></dt> + <dd>Specifies that the video should play the range 10 seconds through 20 seconds.</dd> + <dt><span class="nowiki">http://example.com/video.ogv#t=,10.5</span></dt> + <dd>Specifies that the video should play from the beginning through 10.5 seconds.</dd> + <dt><span class="nowiki">http://example.com/video.ogv#t=,02:00:00</span></dt> + <dd>Specifies that the video should play from the beginning through two hours.</dd> + <dt><span class="nowiki">http://example.com/video.ogv#t=60</span></dt> + <dd>Specifies that the video should start playing at 60 seconds and play through the end of the video.</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p> +</div> + +<h2 id="Error_handling">Error handling</h2> + +<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the <code>error</code> event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.</p> + +<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p> + +<pre class="brush: html"><video> +<source id="mp4_src" + src="video.mp4" + type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> +</source> +<source id="3gp_src" + src="video.3gp" + type='video/3gpp; codecs="mp4v.20.8, samr"'> +</source> +<source id="ogg_src" + src="video.ogv" + type='video/ogv; codecs="theora, vorbis"'> +</source> +</video></pre> + +<p>Since Firefox doesn't support MP4 and 3GP on some platforms due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p> + +<h3 id="Checking_whether_the_browser_supports_the_supplied_formats">Checking whether the browser supports the supplied formats</h3> + +<p>Use the following verified sources within your audio and video elements to check support.</p> + +<ul> + <li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li> + <li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li> + <li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li> + <li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li> + <li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li> + <li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li> +</ul> + +<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br> + <br> + If these work but the files you are supplying don't, there are two possible issues:</p> + +<h4 id="1._The_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. The media server is not delivering the correct mime types with the file</h4> + +<p>Although this is usually supported, you may need to add the following to your media server's <code>.htaccess</code> file.</p> + +<pre># AddType TYPE/SUBTYPE EXTENSION + +AddType audio/mpeg mp3 +AddType audio/mp4 m4a +AddType audio/ogg ogg +AddType audio/ogg oga + +AddType video/mp4 mp4 +AddType video/mp4 m4v +AddType video/ogg ogv +AddType video/webm webm +AddType video/webm webmv</pre> + +<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been encoded incorrectly</h4> + +<p>Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:</p> + +<ul> + <li><a href="http://audacity.sourceforge.net/">Audacity</a> — Free Audio Editor and Recorder</li> + <li><a href="http://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li> + <li><a href="http://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li> + <li><a href="http://firefogg.org/">Firefogg</a> — Video and Audio encoding for Firefox</li> + <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> — Comprehensive command line encoder</li> + <li><a href="https://libav.org/">Libav</a> — Comprehensive command line encoder</li> + <li><a href="http://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li> + <li><a href="https://archive.org/">Internet Archive</a> — Free transcoding and storage</li> +</ul> + +<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3> + +<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p> + +<p>If at that point you add another source, by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p> + +<h3 id="Showing_fallback_content_when_no_source_could_be_decoded">Showing fallback content when no source could be decoded</h3> + +<p>Another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. Then you can replace the video with its fallback content:</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> + </a> + <p>Click image to play a video demo of dynamic app search</p> +</video> + +</pre> + +<pre class="brush: js">var v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + var d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="AudioVideo_JavaScript_Libraries">Audio/Video JavaScript Libraries</h2> + +<p>A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.</p> + +<h3 id="Audio_only">Audio only</h3> + +<ul> + <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> + <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li> + <li><a href="https://howlerjs.com/">HowlerJS</a></li> +</ul> + +<h3 id="Video_only">Video only</h3> + +<ul> + <li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li> + <li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li> + <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li> + <li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li> +</ul> + +<h3 id="Audio_and_Video">Audio and Video</h3> + +<ul> + <li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li> + <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li> +</ul> + +<h3 id="Web_Audio_API_2">Web Audio API</h3> + +<ul> + <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: A polyfill for older versions of the Web Audio API; Open Source (Apache 2 Licensed.)</li> +</ul> + +<h2 id="Basic_tutorials">Basic tutorials</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt> + <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt> + <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt> + <dd> + <div> + <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p> + </div> + </dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt> + <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt> + <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt> + <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd> +</dl> + +<h2 id="Streaming_media_tutorials">Streaming media tutorials</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt> + <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt> + <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd> + <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt> + <dd>Details how to set up adaptive streaming using DASH and WebM.</dd> +</dl> + +<h2 id="Advanced_tutorials">Advanced tutorials</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt> + <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the <track> element. The primary purpose of WebVTT files is to add subtitles to a <video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd> + <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt> + <dd>A guide to writing cross browser Web Audio API code.</dd> + <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt> + <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd> + <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt> + <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd> +</dl> + +<div class="note"> +<p><strong>Note</strong>: Firefox OS versions 1.3 and above support the <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> protocol for streaming video delivery. A fallback solution for older versions would be to use <code><video></code> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.</p> +</div> + +<h2 id="References">References</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li> + <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li> + <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li> + <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li> + <li><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a></li> +</ul> diff --git a/files/ko/web/guide/css/block_formatting_context/index.html b/files/ko/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..3a46d31f0a --- /dev/null +++ b/files/ko/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,198 @@ +--- +title: 블록 서식 맥락 +slug: Web/Guide/CSS/Block_formatting_context +tags: + - CSS + - Guide + - NeedsBeginnerUpdate + - NeedsExample + - Web +translation_of: Web/Guide/CSS/Block_formatting_context +--- +<div>{{ CSSRef }}</div> + +<p><strong>블록 서식 맥락</strong>(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.</p> + +<p>블록 서식 맥락은 다음과 같은 경우에 생성됩니다.</p> + +<ul> + <li>문서의 루트 요소({{htmlelement("html")}}).</li> + <li>플로팅 요소({{cssxref("float")}}이 <code>none</code>이 아님).</li> + <li>절대 위치를 지정한 요소({{cssxref("position")}}이 <code>absolute</code> 또는 <code>fixed</code>).</li> + <li>인라인 블록({{cssxref("display")}}가 <code>inline-block</code>).</li> + <li>표 칸({{cssxref("display")}}가 <code>table-cell</code>, HTML 표 칸의 기본값).</li> + <li>표 주석({{cssxref("display")}}가 <code>table-caption</code>, HTML 표 주석의 기본값).</li> + <li>{{cssxref("display")}}가 <code>table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 <code>inline-table</code>인 요소가 암시적으로 생성한 무명 칸.</li> + <li>{{cssxref("overflow")}}가 <code>visible</code>이 아닌 블록 요소.</li> + <li>{{cssxref("display")}}가 <code>flow-root</code>.</li> + <li>{{cssxref("contain")}}이 <code>layout</code>, <code>content</code>, <code>paint</code>.</li> + <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목({{cssxref("display")}}가 <code>flex</code> 또는 <code>inline-flex</code>인 요소의 바로 아래 자식)</li> + <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목({{cssxref("display")}}가 <code>grid</code> 또는 <code>inline-grid</code>인 요소의 바로 아래 자식)</li> + <li>다열 컨테이너({{cssxref("column-count")}} 또는 ({{cssxref("column-width")}}가 <code>auto</code>가 아닌 경우. <code>column-count: 1</code> 포함).</li> + <li>{{cssxref("column-span")}}이 <code>all</code>인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다. (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">명세 변경</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">Chrome 버그</a>)</li> +</ul> + +<p>블록 서식 맥락은 레이아웃에 영향을 주지만, 보통 맥락을 생성하는 요소는 아래와 같은 작용을 하기 때문에 위치 설정과 플로팅 해제를 위해 더 많이 사용합니다.</p> + +<ul> + <li>내부 플로팅 가두기</li> + <li>외부 플로팅 제외하기</li> + <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a> 제거</li> +</ul> + +<h2 id="예제">예제</h2> + +<h3 id="내부_플로팅_가두기">내부 플로팅 가두기</h3> + +<div id="example1"> +<p>Make float content and alongside content the same height.</p> + +<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p> + +<p>In the following example, we have a floated element inside a <code><div></code> with a <code>border</code> applied. The content of that <code><div></code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <code><div></code> now runs through the float. As explained in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>, the float has been taken out of flow so the <code>background</code> and <code>border</code> of the <code><div></code> only contain the content and not the float.</p> + +<p><strong>using <code>overflow: auto</code></strong></p> + +<p>Setting <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code><div></code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p> + +<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you want to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a <abbr title="Block Formatting Context">BFC</abbr>. In addition, it is potentially not readable for a future developer, as it might not be obvious why you used <code>overflow</code> for this purpose. If you use <code>overflow</code>, it is a good idea to comment the code to explain.</p> + +<p><strong>using <code>display: flow-root</code></strong></p> + +<p>A newer value of <code>display</code> lets us create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects. Using <code>display: flow-root</code> on the containing block creates a new <abbr title="Block Formatting Context">BFC</abbr> .</p> + +<p>With <code>display: flow-root;</code> on the <code><div></code>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p> + +<p>The value name of <code>flow-root</code> makes sense when you understand you are creating something that acts like the <code>root</code> element (<code><html></code> element in browser) in terms of how it creates a new context for the flow layout inside it.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><section> + <div class="box"> + <div class="float">I am a floated box!</div> + <p>I am content inside the container.</p> + </div> +</section> +<section> + <div class="box" style="overflow:auto"> + <div class="float">I am a floated box!</div> + <p>I am content inside the <code>overflow:auto</code> container.</p> + </div> +</section> +<section> + <div class="box" style="display:flow-root"> + <div class="float">I am a floated box!</div> + <p>I am content inside the <code>display:flow-root</code> container.</p> + </div> +</section></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">section { + height:150px; +} +.box { + background-color: rgb(224, 206, 247); + border: 5px solid rebeccapurple; +} +.box[style] { + background-color: aliceblue; + border: 5px solid steelblue; +} +.float { + float: left; + width: 200px; + height: 100px; + background-color: rgba(255, 255, 255, .5); + border:1px solid black; + padding: 10px; +}</pre> + +<p>{{EmbedLiveSample("example1", 200, 450)}}</p> + +<h3 id="Exclude_external_floats">Exclude external floats</h3> + +<div id="example2"> +<p>In the following example, we are using <code>display:flow-root</code> and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new <abbr title="Block Formatting Context">BFC</abbr> must not overlap the margin box of any floats in the same block formatting context as the element itself.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><section> + <div class="float">Try to resize this outer float</div> + <div class="box"><p>Normal</p></div> +</section> +<section> + <div class="float">Try to resize this outer float</div> + <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> +</section></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">section { + height:150px; +} +.box { + background-color: rgb(224, 206, 247); + border: 5px solid rebeccapurple; +} +.box[style] { + background-color: aliceblue; + border: 5px solid steelblue; +} +.float { + float: left; + overflow: hidden; /* required by resize:both */ + resize: both; + margin-right:25px; + width: 200px; + height: 100px; + background-color: rgba(255, 255, 255, .75); + border: 1px solid black; + padding: 10px; +} +</pre> + +<p>{{EmbedLiveSample("example2", 200, 300)}}</p> + +<p>Rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.</p> + +<p>Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.</p> +</div> + +<h3 id="여백_상쇄">여백 상쇄</h3> + +<p>Creating a new BFC to avoid the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a> between two neighbor div:</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><div class="blue"></div> +<div class="red-outer"> + <div class="red-inner">red inner</div> +</div> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css notranslate">.blue, .red-inner { + height: 50px; + margin: 10px 0; +} + +.blue { + background: blue; +} + +.red-outer { + overflow: hidden; + background: red; +} +</pre> + +<p>{{EmbedLiveSample("여백_상쇄", 120, 120)}}</p> +</div> + +<h2 id="See_Also" name="See_Also">같이 보기</h2> + +<ul> + <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li> +</ul> diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/guide/css/media_queries/index.html new file mode 100644 index 0000000000..559b5805c6 --- /dev/null +++ b/files/ko/web/guide/css/media_queries/index.html @@ -0,0 +1,386 @@ +--- +title: 미디어 쿼리 사용하기 +slug: Web/Guide/CSS/Media_queries +tags: + - Advanced + - CSS + - Guide + - Media + - Media Queries + - Responsive Design + - Web +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +<div>{{cssref}}</div> + +<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p> + +<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p> + +<ul> + <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li> + <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li> + <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li> +</ul> + +<div class="note"> +<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p> + +<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p> +</div> + +<h3 id="미디어_유형">미디어 유형</h3> + +<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p> + +<dl> + <dt><code><strong>all</strong></code></dt> + <dd>모든 장치에 적합합니다.</dd> + <dt><code>print</code></dt> + <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br> + (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd> + <dt><code>screen</code></dt> + <dd>주로 화면이 대상입니다.</dd> + <dt><code>speech</code></dt> + <dd>음성 합성장치 대상입니다.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p> +</div> + +<h3 id="미디어_특성">미디어 특성</h3> + +<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p> + +<table> + <thead> + <tr> + <th>이름</th> + <th>요약</th> + <th>참고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{cssxref("@media/any-hover", "any-hover")}}</td> + <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td> + <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td> + <td>뷰포트의 가로세로비</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color", "color")}}</td> + <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td> + <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/color-index", "color-index")}}</td> + <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td> + <td>출력 장치의 가로세로비</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td> + <td>출력 장치 렌더링 표면의 높이</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td> + <td>출력 장치 렌더링 표면의 너비</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/display-mode", "display-mode")}}</td> + <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td> + <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td> + </tr> + <tr> + <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td> + <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/grid", "grid")}}</td> + <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/height", "height")}}</td> + <td>뷰포트의 높이</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/hover", "hover")}}</td> + <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td> + <td>Media Queries Level 4에서 제거</td> + </tr> + <tr> + <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td> + <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/light-level", "light-level")}}</td> + <td>주변 환경의 광도</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/monochrome", "monochrome")}}</td> + <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/orientation", "orientation")}}</td> + <td>뷰포트의 방향</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td> + <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td> + <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/pointer", "pointer")}}</td> + <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td> + <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td> + <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td> + <td>사용자가 줄어든 움직임을 선호함</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td> + <td>사용자가 줄어든 투명도를 선호함.</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/resolution", "resolution")}}</td> + <td>출력 장치의 픽셀 밀도</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scan", "scan")}}</td> + <td>출력 장치의 스캔 절차</td> + <td></td> + </tr> + <tr> + <td>{{cssxref("@media/scripting", "scripting")}}</td> + <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td> + <td>Media Queries Level 5에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/update-frequency", "update")}}</td> + <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td> + <td>Media Queries Level 4에서 추가</td> + </tr> + <tr> + <td>{{cssxref("@media/width", "width")}}</td> + <td>스크롤바를 포함한 뷰포트 너비</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="논리_연산자">논리 연산자</h3> + +<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p> + +<h4 id="and"><code>and</code></h4> + +<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p> + +<h4 id="not"><code>not</code></h4> + +<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p> +</div> + +<h4 id="only"><code>only</code></h4> + +<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p> + +<h4 id="쉼표"><code>,</code> (쉼표)</h4> + +<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p> + +<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2> + +<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p> + +<pre class="brush: css notranslate">@media print { ... }</pre> + +<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p> + +<pre class="brush: css notranslate">@media screen, print { ... }</pre> + +<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p> + +<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2> + +<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p> + +<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre> + +<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p> + +<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre> + +<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p> + +<pre class="brush: css notranslate">@media (color) { ... }</pre> + +<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p> + +<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre> + +<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p> + +<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2> + +<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다. 더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p> + +<p>앞서 예와 같이, <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p> + +<div class="note"> +<p><strong>Note:</strong> 대부분의 경우, <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p> +</div> + +<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3> + +<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p> + +<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p> + +<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre> + +<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3> + +<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p> + +<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre> + +<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p> + +<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3> + +<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다. 이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다. <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p> + +<pre class="brush: css notranslate">@media not all and (monochrome) { ... } +</pre> + +<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p> + +<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... } +</pre> + +<p>... 다음과 같이 되는 것이 아닙니다:</p> + +<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre> + +<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p> + +<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... } +</pre> + +<p>... 이렇게 평가됩니다:</p> + +<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre> + +<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3> + +<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p> + +<pre class="brush: css notranslate">@media only screen and (color) { ... } +</pre> + +<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2> + +<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p> + +<div class="note"> +<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p> +</div> + +<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre> + +<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p> + +<pre class="brush: css notranslate">@media (width <= 30em) { ... }</pre> + +<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p> + +<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre> + +<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p> + +<pre class="brush: css notranslate">@media (30em <= width <= 50em ) { ... } +</pre> + +<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p> + +<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3> + +<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p> + +<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre> + +<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3> + +<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p> + +<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... } +</pre> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></li> + <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 기능 확장</a></li> + <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 기능 확장</a></li> +</ul> diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/guide/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..4b32d08a30 --- /dev/null +++ b/files/ko/web/guide/css/visual_formatting_model/index.html @@ -0,0 +1,223 @@ +--- +title: 시각적 서식 모델 +slug: Web/Guide/CSS/Visual_formatting_model +tags: + - 씨에스에스 + - 씨에스에스 상자 모델 + - 참조 +translation_of: Web/CSS/Visual_formatting_model +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">씨에스에스 <ruby><em>시각적 서식 모델</em><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다. </span></p> + +<p>시각적 서식 모델은 문서의 각 요소를 변환하여, <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">씨에스에스 상자 모델</a>에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:</p> + +<ul> + <li>상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.</li> + <li>상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.</li> + <li><a href="/ko/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">위치잡기 기법</a>: 일반 대열 소속, 부동체, 또는 절대 위치잡기.</li> + <li>트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.</li> + <li>{{glossary("viewport")}} 크기와 위치.</li> + <li>컨테이너에 속한 이미지의 고유한 면적.</li> + <li>다른 외부 정보</li> +</ul> + +<p>동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 <ruby><em>대열이탈</em><rp> (</rp><rt>overflow</rt><rp>) </rp></ruby>했다고 말합니다..</p> + +<h2 id="상자_생성">상자 생성</h2> + +<p>상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.</p> + +<h3 id="블록수준_요소와_블록_상자">블록수준 요소와 블록 상자</h3> + +<p>어떤 요소를 <em>블록수준</em>이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 <code>block</code>, <code>list-item</code>, 또는 <code>table</code>일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.</p> + +<p>각각의 블록수준 상자는 <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">블록 서식 상황</a>에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 <ruby><em>수석 블록수준 상자</em><rp> (</rp><rt>principal block-level box</rt><rp>) </rp></ruby>라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.</p> + +<p>수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">위치잡기 기법</a>에도 관여하고 있습니다.</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. <em>블록 컨테이너 상자</em>는 다른 블록수준 상자만을 포함하고 <a href="/ko/docs/Web/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>을 생성하므로 인라인 상자 무리만을 포함합니다.</p> + +<p>중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 <ruby><em>비객원</em><rp> (</rp><rt>non-replaced</rt><rp>) </rp></ruby> 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.</p> + +<p>또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 <ruby><em>블록 상자</em><rp> (</rp><rt>block boxes</rt><rp>) </rp></ruby>라고 부릅니다.</p> + +<h4 id="무명_블록_상자">무명 블록 상자</h4> + +<p>경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다</p> + +<p>씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어<em>무명 상자</em>라고 합니다.</p> + +<p>선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 <code>inherit</code> 값을 갖고 상속할 수 없는 씨에스에스 속성은 <code>initial</code> 값을 가집니다.</p> + +<p>상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.</p> + +<h3 id="예제">예제</h3> + +<p>아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 <code>display: block</code> 속성을 갖고 있다면:</p> + +<pre class="syntaxbox"><code><div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div></code></pre> + +<p>두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(<code>약간의 인라인 텍스트</code>) 나머지 하나는 단락 이후 텍스트(<code>그 뒤를 잇는 인라인 텍스트</code>). 이는 다음과 같은 블록 구조를 구축합니다:</p> + +<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + +<p>결과는:</p> + +<pre>약간의 인라인 텍스트 +뒤를 잇는 단락 하나 +그 뒤를 잇는 인라인 텍스트. +</pre> + +<p>{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(<code>initial</code>)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(<code>initial</code>)값을 가지며 투명합니다. 따라서 <code><div></code>의 배경이 보여집니다. 특정 배경색은 <code><p></code> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.</p> + +<p>무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 <em>무명 블록 상자</em>로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.</p> + +<p>중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.</p> + +<h3 id="예제_2">예제</h3> + +<p>아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 <code>display: inline</code> 속성을 갖고 있고 {{ HTMLElement("span") }}는 <code>display:block</code> 속성을 갖고 있습니다:</p> + +<pre class="syntaxbox"><code><p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p></code></pre> + +<p>두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(<code>일부 <em>인라인</em> 텍스트</code>) 하나와 그 뒤의 텍스트(<code>그 뒤를 잇는 추가 인라인 텍스트</code>) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>이 것의 결과는:</p> + +<pre>약간의 인라인 텍스트 +뒤를 잇는 단락 하나 +그 뒤를 잇는 인라인 텍스트. +</pre> + +<h3 id="인라인수준_요소와_인라인_상자">인라인수준 요소와 인라인 상자</h3> + +<p>어떤 요소가 <em>인라인수준</em>이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 <code>inline</code>, <code>inline-block</code> 또는 <code>inline-table</code>일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.</p> + +<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> + +<div class="warning"> +<p>이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조</p> +</div> + +<p>인라인 수준 요소는 <a href="/ko/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>에 참여하는 상자로 정의되는 <em>인라인수준 상자</em>를 생성합니다. <em>인라인 상자</em>는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, <code>display: inline</code> 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 <ruby><em>원자 인라인수준 상자</em><rp> (</rp><rt>atomic inline-level boxes</rt><rp>) </rp></ruby>라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 <code>inline-block</code>인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.</p> + +<div class="note"><strong>참고:</strong> 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 <strong>아니기</strong> 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.</div> + +<div class="note">원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다. +<div style="-moz-column-width: 30em;"> +<pre><style> + span { + display:inline; /* default value*/ + } +</style> +<div style="width:20em;"> + 스팬 요소에 포함된 택스트는 <span> 몇 개의 라인으로 분할 될 수 + 있습니다. 왜냐면 </span> 그것이 인라인 상자이기 때문입니다. +</div> +</pre> + +<p>이 것의 결과는:</p> + +<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> + +<pre><style> + span { + display:inline-block; + } +</style> +<div style="width:20em;"> + 스팬 요소에 포함된 텍스트는 <span>몇 라인으로 분할 될 수 + 없 습니다. 왜냐면 </span> 그것이 인라인 블록이기 때문입니다. +</div> +</pre> + +<p>이 것의 결과는:</p> + +<div style="width: 20em;">스팬 요소에 포함된 텍스트는 <span style="display: inline-block;">분할될 수 없습니다. 왜냐면</span> 인라인 블록 상자이기 때문입니다.</div> +</div> +</div> + +<h4 id="무명_인라인_상자">무명 인라인 상자</h4> + +<p>블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 <code>initial</code> 값을 가집니다.</p> + +<p>무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.</p> + +<div class="note">예제 TBD</div> + +<h3 id="다른_유형의_상자">다른 유형의 상자</h3> + +<h4 id="라인_상자">라인 상자</h4> + +<p><em>라인 상자</em>는 텍스트 라인을 표현하기 위해 <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">인라인 서식 상황</a>에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. <a href="/en-US/docs/CSS/float" title="float">부동체</a>가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.</p> + +<p>이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.</p> + +<h4 id="내부진행_상자">내부진행 상자</h4> + +<p><code>display: run-in</code>을 사용하도록 정의되는 <ruby><em>내부진행 상자</em><rp> (</rp><rt>Run-in boxes</rt><rp>) </rp></ruby>는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.</p> + +<div class="note"><strong>참고:</strong> 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 <ruby><em>씨에스에스 3</em><rp> (</rp><rt>CSS 3</rt><rp>) </rp></ruby>에선 다시 등장할 수도 있지만, 현재로선 <em>실험 상태</em>로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.</div> + +<h4 id="모델유인_상자">모델유인 상자</h4> + +<p>인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 <em>콘텐츠 모델</em>을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.</p> + +<ul> + <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">테이블 콘텐츠 모델</a>은 <em>테이블 래퍼 상자</em>와 <em>테이블 상자</em>를 생성할 수 있을뿐만 아니라 <em>캡션 상자</em>같은 특정 상자도 생성할 수 있습니다.</li> + <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">다단 콘텐츠 모델</a> 은 컨테이너 상자와 컨텐츠 사이에 <ruby><em>열 상자</em><rp> (</rp><rt>column boxes</rt><rp>) </rp></ruby>를 생성할 수 있습니다.</li> + <li>실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.</li> +</ul> + +<h4 id="위치잡기_기법">위치잡기 기법</h4> + +<p>상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.</p> + +<ul> + <li><ruby><em>일반 대열</em><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby> - 하나씩 차례대로 상자를 위치시킵니다.</li> + <li><ruby><em>부동체</em><rp> (</rp><rt>floats</rt><rp>) </rp></ruby> 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.</li> + <li><em>절대 위치잡기</em> 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.</li> +</ul> + +<h3 id="일반_대열">일반 대열</h3> + +<p><em>일반 대열</em> 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 <code>static</code> 또는 <code>relative</code> 값으로 설정될 경우와 {{ cssxref("float") }}가 <code>none</code>으로 설정되면 발동됩니다.</p> + +<h3 id="예제_3">예제</h3> + +<div class="note">일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.<br> +<br> +일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.</div> + +<div class="note"> +<p>일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:</p> + +<ul> + <li><em>정적 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>static</code> 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.</li> + <li><em>상대 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>relative</code> 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.</li> +</ul> +</div> + +<h3 id="부동체">부동체</h3> + +<p><ruby><em>부동 위치잡기 기법</em><rp> (</rp><rt>float positioning scheme</rt><rp>) </rp></ruby>에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.</p> + +<p>상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 <code>none</code> 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 <code>static</code>이나 <code>relative</code>가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 <code>left</code>로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 <code>right</code>으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.</p> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p><ruby><em>절대 위치잡기 기법</em><rp> (</rp><rt>absolute positioning scheme</rt><rp>) </rp></ruby>에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">상위 컨테이너 블록</a> 기준으로 비례해서 위치잡기합니다.</p> + +<p>하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 <code>absolute</code> 또는 <code>fixed</code>로 설정하면 됩니다.</p> + +<p><em>고정 위치잡기한 요소</em>의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>{{css_key_concepts}}</li> +</ul> diff --git a/files/ko/web/guide/dom/index.html b/files/ko/web/guide/dom/index.html new file mode 100644 index 0000000000..997730a412 --- /dev/null +++ b/files/ko/web/guide/dom/index.html @@ -0,0 +1,21 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<p>{{draft}}</p> +<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p> +<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p> +<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> +<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p> +<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> +<h2 id="More_about_the_DOM">More about the DOM</h2> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/web/guide/dom/using_full_screen_mode/index.html b/files/ko/web/guide/dom/using_full_screen_mode/index.html new file mode 100644 index 0000000000..d7f561a95c --- /dev/null +++ b/files/ko/web/guide/dom/using_full_screen_mode/index.html @@ -0,0 +1,198 @@ +--- +title: Using fullscreen mode +slug: Web/Guide/DOM/Using_full_screen_mode +translation_of: Web/API/Fullscreen_API +--- +<div>{{DefaultAPISidebar("Fullscreen API")}}</div> + +<p><strong>Fullscreen API</strong> 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.</p> + +<p>API 사용 방법에 대한 자세한 내용은 <a href="/ko/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> 문서를 참조하세요.</p> + +<div class="blockIndicator note"> +<p><strong>주의:</strong> 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, <a href="https://github.com/rafrex/fscreen">Fscreen</a> 과 같은 라이브러리를 사용할 수 있습니다.</p> +</div> + +<h2 id="Interfaces">Interfaces</h2> + +<p><em>Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다. </em></p> + +<h2 id="Methods">Methods</h2> + +<p>Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.</p> + +<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3> + +<dl> + <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt> + <dd>{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.</dd> +</dl> + +<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3> + +<dl> + <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt> + <dd>유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt> + <dd><code>fullscreenElement</code> 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 <code>null</code>인 경우, document는 full-screen mode가 아닙니다.</dd> + <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt> + <dd><code>fullscreenEnabled</code> 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, <code>"fullscreen"</code> 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 <code>false</code> 입니다.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.</em></p> + +<div class="blockIndicator note"> +<p><strong>주의:</strong> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.</p> +</div> + +<h4 id="Event_handlers_on_documents">Event handlers on documents</h4> + +<dl> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd> +</dl> + +<h4 id="Event_handlers_on_elements">Event handlers on elements</h4> + +<dl> + <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt> + <dd>{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.</dd> + <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt> + <dd>full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt> + <dd>문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 <code>true</code>, 그렇지 않으면 <code>false</code>의 Boolean 값입니다. + <div class="note"><strong>주의:</strong> 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 <code>null</code>이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.</div> + </dd> +</dl> + +<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Events</h2> + +<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.</em></p> + +<dl> + <dt>{{Event("fullscreenchange")}}</dt> + <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.</dd> + <dt>{{Event("fullscreenerror")}}</dt> + <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 <code>Document</code> 또는 <code>Element</code> 로 보냅니다.</dd> +</dl> + +<h2 id="Dictionaries">Dictionaries</h2> + +<dl> + <dt>{{DOMxRef("FullscreenOptions")}}</dt> + <dd>{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.</dd> +</dl> + +<h2 id="Controlling_access">Controlling access</h2> + +<p><a href="/ko/docs/Web/HTTP/Feature_Policy">Feature Policy</a>을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 <code>"fullscreen"</code>으로 식별되고, 기본 허용 목록 값은 <code>"self"</code> 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.</p> + +<p>기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 <a href="/ko/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>을 참조하세요.</p> + +<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Usage notes</h2> + +<p>사용자는 <kbd>ESC</kbd> (혹은 <kbd>F11</kbd>) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.</p> + +<div class="note"> +<p><strong>주의:</strong> 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 <kbd>Alt</kbd>-<kbd>Tab</kbd>)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.</p> +</div> + +<h2 id="Example">Example</h2> + +<p>이 예제에서는 비디오가 웹 페이지에 표시됩니다. <kbd>Return</kbd> 또는 <kbd>Enter</kbd> 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.</p> + +<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p> + +<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3> + +<p>페이지가 로드되면, 이 코드가 실행되어 <kbd>Enter</kbd> 키 를 주시하는 이벤트 리스너를 설정합니다.</p> + +<pre class="brush: js">document.addEventListener("keypress", function(e) { + if (e.keyCode === 13) { + toggleFullScreen(); + } +}, false); +</pre> + +<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3> + +<p>이 코드는 사용자가 <kbd>Enter</kbd> 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.</p> + +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +}</pre> + +<p>먼저 {{DOMxRef("Document", "document")}}의 <code>fullscreenElement</code> 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, <code>mozFullscreenElement</code>, <code>msFullscreenElement</code>, <code>webkitFullscreenElement</code>)을 확인해야 합니다. 값이 <code>null</code>인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.</p> + +<p>full-screen mode가 이미 활성화 된 경우(<code>fullscreenElement</code> 가 <code>null</code>이 아닌 경우), <code>document</code>에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3> + +<div> + + +<p>{{Compat("api.Document.fullscreen")}}</p> + +<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3> + +<div> +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("api.Document.fullscreenEnabled")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li> + <li>{{DOMxRef("Element.requestFullscreen()")}}</li> + <li>{{DOMxRef("Document.exitFullscreen()")}}</li> + <li>{{DOMxRef("Document.fullscreen")}}</li> + <li>{{DOMxRef("Document.fullscreenElement")}}</li> + <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li> + <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li> +</ul> diff --git a/files/ko/web/guide/events/creating_and_triggering_events/index.html b/files/ko/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..2c19b74b88 --- /dev/null +++ b/files/ko/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,140 @@ +--- +title: 이벤트 생성 및 트리거 +slug: Web/Guide/Events/Creating_and_triggering_events +tags: + - DOM + - NeedsContent + - 가이드 + - 고급 + - 이벤트 + - 자바스크립트 +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +<p>이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 <strong>인공 이벤트(synthetic events)</strong>라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.</p> + +<h2 id="커스텀_이벤트_생성하기">커스텀 이벤트 생성하기</h2> + +<p>다음과 같이 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 생성자를 사용해 Events 를 생성할 수 있습니다.</p> + +<pre class="brush: js">var event = new Event('build'); + +// 이벤트 리슨. +elem.addEventListener('build', function (e) { /* ... */ }, false); + +// 이벤트 디스패치. +elem.dispatchEvent(event);</pre> + +<p>위 코드 예제는 <a href="/ko/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 메소드를 사용합니다.</p> + +<p>이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">옛날 방식</a> 부분을 참고하세요.</p> + +<h3 id="커스텀_데이터_추가_–_CustomEvent()">커스텀 데이터 추가 – CustomEvent()</h3> + +<p>이벤트 객체에 더 많은 데이터를 추가하려면, <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a> 인터페이스가 존재하고 <u><strong>detail</strong></u> 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다<br> + <span style="line-height: 1.5;">예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.</span></p> + +<pre class="brush: js">var event = new CustomEvent('build', { detail: elem.dataset.time });</pre> + +<p>그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.</p> + +<pre class="brush: js">function eventHandler(e) { + console.log('The time is: ' + e.detail); +} +</pre> + +<h3 id="옛날_방식">옛날 방식</h3> + +<p>생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.</p> + +<pre class="brush: js">// 이벤트 생성. +var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event'); + +// 이벤트 이름을 'build' 라 정의. +event.initEvent('build', true, true); + +// 이벤트 리슨. +elem.addEventListener('build', function (e) { + // e.target 은 elem 과 일치 +}, false); + +// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음. +elem.dispatchEvent(event); + +</pre> + +<h3 id="이벤트_버블링">이벤트 버블링</h3> + +<p>자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다 +const eventAwesome = new CustomEvent('awesome', { + bubbles: true, + detail: { text: () => textarea.value } +}); + +// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다 +form.addEventListener('awesome', e => console.log(e.detail.text())); + +// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다 +textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); +</pre> + +<h3 id="이벤트를_동적으로_생성하고_디스패칭하기">이벤트를 동적으로 생성하고 디스패칭하기</h3> + +<p>엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.</p> + +<pre class="brush: html"><form> + <textarea></textarea> +</form> +</pre> + +<pre class="brush: js">const form = document.querySelector('form'); +const textarea = document.querySelector('textarea'); + +form.addEventListener('awesome', e => console.log(e.detail.text())); + +textarea.addEventListener('input', function() { + // 이벤트 즉시 생성 및 디스패치/트리거 + // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다 + this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) +}); +</pre> + +<h2 id="내장_이벤트_트리거">내장 이벤트 트리거</h2> + +<p>이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">동작하는 예제를 확인하세요.</a></p> + +<pre class="brush: js">function simulateClick() { + var event = new MouseEvent('click', { + view: window, + bubbles: true, + cancelable: true + }); + var cb = document.getElementById('checkbox'); + var cancelled = !cb.dispatchEvent(event); + if (cancelled) { + // 핸들러가 preventDefault 를 호출했음. + alert("cancelled"); + } else { + // 어떤 핸들러도 preventDefault 를 호출하지 않음. + alert("not cancelled"); + } +}</pre> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> + <li>{{domxref("document.createEvent()")}}</li> + <li>{{domxref("Event.initEvent()")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li>{{domxref("EventTarget.addEventListener()")}}</li> +</ul> diff --git a/files/ko/web/guide/events/index.html b/files/ko/web/guide/events/index.html new file mode 100644 index 0000000000..e952840d8e --- /dev/null +++ b/files/ko/web/guide/events/index.html @@ -0,0 +1,51 @@ +--- +title: Event developer guide +slug: Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsUpdate + - events +translation_of: Web/Guide/Events +--- +<p>{{draft()}}</p> + +<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> + +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> + +<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> + +<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> + +<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> + +<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> + +<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> + +<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p> + +<ul> + <li>the original 'click' event,</li> + <li>mouse events,</li> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> + <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> +</ul> + +<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> + +<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> + +<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> + +<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> + +<div class="note"> +<p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> +</div> + +<h2 id="Docs">Docs</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/web/guide/events/overview_of_events_and_handlers/index.html new file mode 100644 index 0000000000..c3f1a9205a --- /dev/null +++ b/files/ko/web/guide/events/overview_of_events_and_handlers/index.html @@ -0,0 +1,142 @@ +--- +title: Overview of Events and Handlers +slug: Web/Guide/Events/Overview_of_Events_and_Handlers +translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers +--- +<div class="summary"> +<p> 이 글은 이벤트 및 이벤트 핸들링(event handling)에 대한 개요로서, 웹 페이지가 열려있는 동안 일어나는 사건(incident)에 대해 반응할 수 있도록 하는 코드 설계 패턴에 대해 설명하고, 현 세대의 웹 브라우저에서 핸들링할 수 있는 사건의 종류에 대해 요약한다.</p> +</div> + +<p> 이벤트와 이벤트 핸들링은 웹 페이지가 사용자에 의해 열린 상태를 유지하는 동안 일어나는 사건에 대한 반응을 구현하기 위한 자바스크립트의 핵심적인 기술이다. 이러한 사건에는 페이지가 전시(display)되기 위한 준비과정 중 일어나는 사건, 웹 페이지상의 컨텐츠와 사용자의 상호작용에 의한 사건, 브라우저가 실행되는 기반 장치와 관련된 사건, 매체 스트림(media stream) 재생이나 애니메이션 시간 간격 등 기타 요인에 의한 사건 등이 있다.</p> + +<p> 이벤트와 이벤트 핸들링은 자바스크립트가 처음 도입된 시점부터 중심적인 역할을 했으며, 이와 함께 브라우저의 렌더링 아키텍처 역시 단일 처리경로(single pass) 페이지 렌더링으로부터 리플로우(reflow) 기반, 이벤트 구동식(driven) 페이지 렌더링 개념으로 바뀌었다.</p> + +<p> 최초에는 브라우저는 페이지의 모든 부분에 대한 문법분석(parse), 처리(process), 그리기(draw) 및 사용자에게 표현(present)까지의 모든 과정이 끝날 때까지 대기하고, 페이지 작업이 끝나면 그 상태로 바뀌지 않고 새 페이지 요청이 있어서 가져오기(fetch)작업이 일어나기 전까지는 그대로의 모습을 유지했다. </p> + +<p> 리플로우 기반 이벤트 구동식 페이지 렌더링 개념으로 바뀐 뒤에는 브라우저는 처리, 그리기, 컨텐츠 표현(present), 반복순환작업을 다시 개시하도록 하는 이벤트 트리거에 대한 대기 등의 작업을 반복순환(loop)하여 수행한다. 이 이벤트 트리거라는 것은 이벤트를 발생하게 하는 사건을 이르는 것으로서, 네트워크상의 자원 로드 완료( 예 : 이미지가 다운로드되어 화면상에 그릴 수 있게 됨), 브라우저에 의한 자원의 문법분석 완료( 예 : HTML페이지 처리가 끝남) 페이지의 컨텐츠와 사용자와의 상호작용(예 : 버튼을 클릭한다) 등이 이러한 사건이 될 수 있다.</p> + +<p> 더글라스 크록포드는 <em>An inconvenient API : The theory of the DOM(불편한 API : DOM의 이론)</em>이라는 제목의 강연에서 이러한 변화를 여러 단원에 걸쳐 설명하였는데, 본래의 작업 흐름에서 이벤트 구동식 브라우저의 작업 흐름으로 바뀌는 것을 다음과 같이 보여주었다.</p> + +<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> + +<p> 두 번째 그림에 보이는 처리방식은 마지막 단계의 작업흐름을 변화시킴으로써 첫 번째 그림의 단일 경로 처리흐름에서 반복순환 흐름으로 바뀐 것을 보여준다. 두 번째 그림은 Paint작업이 끝나면 새로운 이벤트 발생에 대한 처리(이벤트 핸들링)를 하기 위해 이벤트를 기다리게 된다. 이 혁신적인 개념을 이용하면 자원을 다 획득하지 않았더라도 페이지를 부분적으로 렌더링하는 것이 가능하며, 최초에는 자바스크립트에 의해 발전된 이벤트 구동에 의한 동작 효과적으로 구현할 수 있다. (이 강의는 <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">여기</a>를 포함한 다양한 경로로 볼 수 있다) 현재 모든 자바스크립트 코드 실행 환경에서는 이벤트와 이벤트 핸들링을 사용한다.</p> + +<h2 id="이벤트_설계_패턴">이벤트 설계 패턴</h2> + +<p>이벤트 시스템은 근본적으로는 단순한 프로그래밍 설계 패턴이다. 이 패턴는 기본적으로 이벤트의 종류와 다음 사항에 대해 합의된 약속을 기반으로 한다.</p> + +<ul> + <li>각 이벤트를 가리키는 이벤트명 문자열</li> + <li>각 이벤트의 핵심 프로퍼티를 나타내기 위한 자료구조의 형식</li> + <li>각 이벤트를 발동할 자바스크립트 객체</li> +</ul> + +<p>패턴을 구현하기 위해서는 다음이 필요하다.</p> + +<ul> + <li>위에서 약속된 자료구조를 인수로 받는 자바스크립트 함수를 정의한다.</li> + <li>이벤트를 발동할 객체에 약속된 해당 이벤트의 이벤트명을 사용하여 위의 함수를 등록한다.</li> +</ul> + +<p>이 함수는 리스너(listener) 또는 핸들러(handler)라는 혼용된 명칭으로 불린다. 이 패턴은 <a href="/ko/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">커스텀 이벤트에 관한 글</a>에서 설명한 대로의 완전한 커스텀 이벤트를 사용하여 쉽게 구현할 수 있다. 이 패턴은 사용자 입력, 브라우저 활동 등에 의해 발동되는 다양한 이벤트를 정의하는 최신 웹 브라우저에서도 많이 사용한다.</p> + +<p> 최신 웹 브라우저는 이 이벤트 패턴을 표준화된 방식으로 구현한다. 브라우저는 어떤 이벤트의 프로퍼티를 나타내는 자료 구조로서 <code>EventPrototype</code> 객체를 원천으로 하는 어떤 객체를 사용한다. 또한 이러한 자료구조를 핸들링할 함수에 대한 등록 메소드로서 <code>addEventListener </code>메소드를 사용하는데 이것은 인수로서 이벤트명과 핸들러 함수를 받는다<code>.</code> 마지막으로 브라우저는 이벤트 발동자(emitter)로 수많은 객체를 정의하며 또한 이 객체들에 의해 생성되는 여러 이벤트형(event type)을 정의한다.</p> + +<h2 id="Button_Event_Handler" name="Button_Event_Handler">버튼 이벤트 핸들러 데모</h2> + +<p>하나의 예시로서 브라우저 <code>button 요소(element)는 'click'이라는 이름의 이벤트를 마우스 클릭 또는 터치스크린의 경우 손가락 터치에 반응하여 발동시킨다.</code> 버튼은 HTML 페이지에서 다음과 같이 정의할 수 있다.</p> + +<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> + +<p>그리고 자바스크립트 코드에서 'click' 이벤트에 대한 리스너로서의 함수, 즉 핸들러로 사용할 함수를 정의한다.</p> + +<pre class="brush: js">var example_click_handler = function (ev){ + var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; + alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); +};</pre> + +<p>그 다음 해당 <code>Button</code> 객체와 함께 위의 함수를 등록하는데, 첫 번째 방법은 HTML 페이지의 DOM(문서 객체 모델) 표현법을 이용하여 다음과 같이 스크립트상에서 나타내는 방법이다. </p> + +<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); +buttonDOMElement.addEventListener('click', example_click_handler);</pre> + +<p>또 다른 방법은 HTML 페이지 상에서 'onclick' 애트리뷰트의 값으로 핸들러로 쓸 함수를 대입시키는 것인데, 보통 이 방식은 매우 단순한 웹 페이지에서나 쓰인다.</p> + +<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> + +<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> Javascript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p> + +<p>As a second example, much modern Javascript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p> + +<pre class="brush: js">var funcInit = function(){ + // user code goes here and can safetly address all the HTML elements from the page + // since the document has successfully been 'loaded' +} +document.addEventListener('DOMContentLoaded', funcInit); +</pre> + +<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p> + +<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p> + +<h2 id="Notable_events">Notable events</h2> + +<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p> + +<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p> + +<ul> + <li>the <code>window</code> object, such as due to resizing the browser,</li> + <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li> + <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li> + <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li> + <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li> + <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li> +</ul> + +<p>although this list is currently incomplete.</p> + +<p>Some notable events are:</p> + +<div class="note"> +<p><strong>Note:</strong> This list of will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> +</div> + +<ul> + <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li> + <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li> + <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li> + <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li> +</ul> + +<p> </p> + +<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2> + +<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p> + +<p>A partial diagram of the class hierarchy of event objects is:</p> + +<div class="note"> +<p><strong>Note:</strong> This diagram is incomplete.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> + +<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p> + +<h2 id="Documents">Documents</h2> + +<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p> + +<ul> + <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> + <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> + <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li> +</ul> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/ko/web/guide/html/content_categories/index.html b/files/ko/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..cd6261c446 --- /dev/null +++ b/files/ko/web/guide/html/content_categories/index.html @@ -0,0 +1,180 @@ +--- +title: 콘텐츠 카테고리 +slug: Web/Guide/HTML/Content_categories +tags: + - Advanced + - Guide + - HTML + - HTML5 + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary">모든 <a href="/ko/docs/Web/HTML">HTML</a> 요소는 특성을 공유하는 요소끼리 묶는 <strong>콘텐츠 카테고리</strong> 한 가지 이상에 속합니다.</span> 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다. 요소가 아무런 카테고리에도 속하지 않는 것 역시 가능합니다.</p> + +<p>콘텐츠 카테고리의 유형은 다음의 세 가지가 있습니다.</p> + +<ul> + <li>메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명합니다.</li> + <li>폼 관련 콘텐츠 카테고리는 입력 폼 관련 요소가 공통으로 가지는 규칙을 설명합니다.</li> + <li>특정 콘텐츠 카테고리는 소수의 요소만 공유하는 카테고리를 설명하며, 특정 문맥에서만 유효하기도 합니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 콘텐츠 카테고리의 상세 내용과 서로간의 비교는 이 글의 범위를 벗어납니다. 궁금하시다면 <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">HTML 명세의 관련 항목</a>을 읽어보세요.</p> +</div> + +<div style="width: 50%;"><a href="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png"><img alt="A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text." src="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png?size=webview"></a></div> + +<h2 id="메인_콘텐츠_카테고리">메인 콘텐츠 카테고리</h2> + +<h3 id="메타데이터_콘텐츠">메타데이터 콘텐츠</h3> + +<p>메타데이터 콘텐츠 카테고리에 속한 요소는 문서의 표현이나 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정하거나, 기타 "대역 외 정보"를 전달합니다.</p> + +<p>{{HTMLElement("base")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}</p> + +<h3 id="플로우_콘텐츠"><a name="flow_content">플로우 콘텐츠</a></h3> + +<p>플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함합니다.</p> + +<p>{{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 텍스트</p> + +<p>특정 조건을 만족하는 경우 플로우 콘텐츠에 속하는 요소도 있습니다.</p> + +<ul> + <li>{{HTMLElement("area")}}는 {{HTMLElement("map")}} 요소의 자손인 경우.</li> + <li>{{HTMLElement("link")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우..</li> + <li>{{HTMLElement("meta")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우.</li> + <li>{{HTMLElement("style")}}이 {{htmlattrxref("scoped","style")}} 특성을 가지고 있는 경우.</li> +</ul> + +<h3 id="구획_콘텐츠">구획 콘텐츠</h3> + +<p>구획 콘텐츠 모델에 속한 요소는 현재 개요에서 {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{anch("제목 콘텐츠")}}의 범위를 정의하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document">구역을 생성</a>합니다<a href="https://developer.mozilla.org/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD" title="Sections and Outlines of an HTML5 document">.</a></p> + +<p>{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}</p> + +<div class="note"> +<p>자신의 내용을 일반 개요와 구별하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#sectioning root">구획 루트</a> 카테고리와 혼동하지 마세요.</p> +</div> + +<h3 id="제목_콘텐츠">제목 콘텐츠</h3> + +<p>제목 콘텐츠는 구획의 제목을 정의합니다. 구획은 {{anch("구획 콘텐츠")}}로 명시할 수도 있고, 제목 자신이 암시적으로 생성할 수도 있습니다.</p> + +<p>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}.</p> + +<div class="note"> +<p>{{HTMLElement("header")}} 요소는 보통 제목을 포함하지만 제목 콘텐츠는 아닙니다.</p> +</div> + +<div class="note"> +<p><strong>참고:</strong> {{HTMLElement("hgroup")}} 요소는 HTML5의 완성 전에 W3C HTML에서 제거됐으나, 여전히 WHATWG 명세의 일부이며 대부분의 브라우저에서 부분적으로나마 지원하고 있습니다.</p> +</div> + +<h3 id="구문_콘텐츠">구문 콘텐츠</h3> + +<p>구문 콘텐츠는 텍스트와, 텍스트가 포함한 마크업을 정의합니다. 구문 콘텐츠가 모여 문단을 형성합니다.</p> + +<p>{{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 공백으로 이루어지지 않은 일반 텍스트.</p> + +<p>특정 조건을 만족하는 경우 구문 콘텐츠에 속하는 요소도 있습니다.</p> + +<ul> + <li>{{HTMLElement("a")}}, 구문 콘텐츠만 포함하는 경우.</li> + <li>{{HTMLElement("area")}}, {{HTMLElement("map")}}의 자손인 경우.</li> + <li>{{HTMLElement("del")}}, 구문 콘텐츠만 포함하는 경우.</li> + <li>{{HTMLElement("ins")}}, 구문 콘텐츠만 포함하는 경우.</li> + <li>{{HTMLElement("link")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li> + <li>{{HTMLElement("map")}}, 구문 콘텐츠만 포함하는 경우.</li> + <li>{{HTMLElement("meta")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li> +</ul> + +<h3 id="내장_콘텐츠">내장 콘텐츠</h3> + +<p>내장 콘텐츠는 다른 리소스를 가져오거나, 콘텐츠를 다른 마크업 언어나 네임스페이스로부터 문서에 삽입합니다.</p> + +<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p> + +<h3 id="대화형_콘텐츠"><a name="interactive_content">대화형 콘텐츠</a></h3> + +<p>대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함합니다</p> + +<p>{{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p> + +<p>특정 조건을 만족하는 경우 대화형 콘텐츠에 속하는 요소도 있습니다.</p> + +<ul> + <li>{{HTMLElement("audio")}}, {{htmlattrxref("controls", "audio")}} 속성을 가진 경우.</li> + <li>{{HTMLElement("img")}}, {{htmlattrxref("usemap", "img")}} 속성을 가진 경우.</li> + <li>{{HTMLElement("input")}}, {{htmlattrxref("type", "input")}} 속성이 <code>hidden</code>이 아닌경우.</li> + <li>{{HTMLElement("menu")}}, {{htmlattrxref("type", "menu")}} 속성이 <code>toolbar</code>인 경우.</li> + <li>{{HTMLElement("object")}}, {{htmlattrxref("usemap", "object")}} 속성을 가진 경우.</li> + <li>{{HTMLElement("video")}}, {{htmlattrxref("controls", "video")}} 속성을 가진 경우.</li> +</ul> + +<h3 id="뚜렷한_콘텐츠">뚜렷한 콘텐츠</h3> + +<p dir="ltr" id="tw-target-text">내용이 비어있거나 숨겨지지 않은 경우 뚜렷한 콘텐츠입니다. 즉, 렌더링 되며 실질적인 콘텐츠면 뚜렷한 콘텐츠입니다. 플로우 콘텐츠 또는 구문 콘텐츠가 모델인 요소는 적어도 하나의 뚜렷한 노드가 있어야 합니다.</p> + +<h3 id="양식_관련_콘텐츠">양식 관련 콘텐츠</h3> + +<p>양식 관련 콘텐츠는 양식 소유자가 존재하는 요소로, <code>form</code> 특성이 소유자를 노출합니다. 양식 소유자는 요소의 조상 {{htmlelement("form")}} 요소, 또는 <code>form</code> 특성의 값으로 지정한 요소 ID의 주인입니다.</p> + +<ul> + <li>{{HTMLElement("button")}}</li> + <li>{{HTMLElement("fieldset")}}</li> + <li>{{HTMLElement("input")}}</li> + <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li> + <li>{{HTMLElement("label")}}</li> + <li>{{HTMLElement("meter")}}</li> + <li>{{HTMLElement("object")}}</li> + <li>{{HTMLElement("output")}}</li> + <li>{{HTMLElement("progress")}}</li> + <li>{{HTMLElement("select")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> + +<p>양식 관련 콘텐츠는 여러 개의 하위 카테고리를 가집니다.</p> + +<dl> + <dt><a id="나열됨" name="나열됨">나열됨</a></dt> + <dd>{{domxref("HTMLFormElement.elements", "form.elements")}} 및 {{domxref("HTMLFieldSetElement.elements", "fieldset.elements")}} IDL 콜렉션에 나열된 요소. {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd> + <dt><a id="레이블_가능" name="레이블_가능">레이블 가능</a></dt> + <dd>{{HTMLElement("label")}} 요소와 연결할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd> + <dt><a id="제출_가능" name="제출_가능">제출 가능</a></dt> + <dd>양식을 제출할 때, 양식 데이터셋을 구성할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd> + <dt><a id="초기화_가능" name="초기화_가능">초기화 가능</a></dt> + <dd>양식을 초기화할 때 영향을 받는 요소. {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd> +</dl> + +<h2 id="보조_카테고리">보조 카테고리</h2> + +<p>알아두면 유용한 보조 카테고리도 있습니다.</p> + +<h3 id="스크립트_지원_요소">스크립트 지원 요소</h3> + +<p><strong>스크립트 지원 요소</strong>는 문서의 렌더링 결과에 바로 기여하지 않는 요소로, 대신 스크립트 코드를 직접 포함 또는 명시하거나, 스크립트가 사용할 데이터를 지정하는 방식으로 지원하는 요소입니다.</p> + +<p>스크립트 지원 요소는 다음과 같습니다.</p> + +<ul> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("template")}}</li> +</ul> + +<h2 id="투명_콘텐츠_모델">투명 콘텐츠 모델</h2> + +<p dir="ltr" id="tw-target-text">어느 요소가 투명 콘텐츠 모델을 가지면 해당 요소의 콘텐츠 구조를 생성할 때, 해당하는 요소를 제거한 후 자식 요소로 대체했음에도 유효한 HTML5가 되도록 해야 합니다.</p> + +<p>예를 들어, {{HTMLElement("del")}} 과 {{HTMLELement("ins")}} 요소는 투명합니다:</p> + +<pre class="brush: html notranslate"><p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p> +</pre> + +<p>올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다.</p> + +<pre class="brush: html notranslate"><p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p> +</pre> diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/content_editable/index.html new file mode 100644 index 0000000000..2e039ea976 --- /dev/null +++ b/files/ko/web/guide/html/content_editable/index.html @@ -0,0 +1,65 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - HTML + - HTML5 + - 가이드 + - 고급 + - 예제 + - 웹 + - 필요컨텐트 +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.</span></p> + +<h2 id="호환성">호환성</h2> + +<p>Content editable 은 현재 브라우저들과 완전히 호환된다.</p> + +<ul> + <li>Firefox 3.5+</li> + <li>Firefox for Android 19+</li> + <li>Chrome 4.0+</li> + <li>Internet Explorer 5.5+ *</li> + <li>Safari 3.1+</li> + <li>Opera 9+</li> + <li>iOS Safari 5.0+</li> + <li>Android Browser 3.0+</li> + <li>Opera Mobile 12.1+</li> + <li>Chrome for Android 25+</li> +</ul> + +<p>Opera Mini 는 아직 지원되지 않는다.</p> + +<div class="note"> +<p>*대부분의 html elements 를 지원 하지 않는다.</p> +</div> + +<h2 id="어떻게_작동_하는가">어떻게 작동 하는가?</h2> + +<p>{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 <code>true</code> 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.</p> + +<h2 id="예제들">예제들</h2> + +<p>간단한 예제:</p> + +<pre><!DOCTYPE html> +<html> + <body> + <div contentEditable="true"> + This text can be edited by the user. + </div> + </body> +</html> </pre> + +<p>LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">여기</a>에서 볼 수 있다. 소스는 <a href="http://html5demos.com/contenteditable#view-source">이곳</a>에 있다.</p> + +<h2 id="더_보기">더 보기</h2> + +<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<p><a href="/en/Midas" title="en/Midas">컨텐트와 상호 작용하는 방법 </a> (오래된 IE 스타일 API) 그리고 <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">이곳</a></p> diff --git a/files/ko/web/guide/index.html b/files/ko/web/guide/index.html new file mode 100644 index 0000000000..8e5ce518de --- /dev/null +++ b/files/ko/web/guide/index.html @@ -0,0 +1,31 @@ +--- +title: 웹 개발자 안내서 +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><strong>이 문서는 어떻게 상세기술들과 API들을 이용할수 있는지에 대한 정보를 제공합니다.</strong></p> + +<div class="note"> +<p><strong>노트:</strong> 이 페이지는 컨텐츠를 정리하는 것을 마무리 할 때 까지 조금은 복잡한 상태로 유지됩니다. 이점 사과드립니다!</p> +</div> + +<div> +<p>{{LandingPageListSubpages}}</p> + +<dl> + <dt><a href="/ko/docs/JavaScript" title="/ko/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript는 웹에서 응용 프로그램을 만드는 데 사용되는 강력한 스크립팅 언어입니다.</dd> +</dl> +</div> + +<h2 id="참조">참조</h2> + +<ul> + <li><a href="/ko/docs/Web/Reference" title="/ko/docs/Web/Reference">웹 개발자 레퍼런스</a></li> +</ul> diff --git a/files/ko/web/guide/index/index.html b/files/ko/web/guide/index/index.html new file mode 100644 index 0000000000..1d121dfb94 --- /dev/null +++ b/files/ko/web/guide/index/index.html @@ -0,0 +1,11 @@ +--- +title: Index +slug: Web/Guide/Index +tags: + - Guide + - Index +translation_of: Web/Guide/Index +--- +<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div> + +<p>{{Index("/ko/docs/Web/Guide")}}</p> diff --git a/files/ko/web/guide/mobile/index.html b/files/ko/web/guide/mobile/index.html new file mode 100644 index 0000000000..8437bf49b5 --- /dev/null +++ b/files/ko/web/guide/mobile/index.html @@ -0,0 +1,77 @@ +--- +title: Mobile Web Development +slug: Web/Guide/Mobile +tags: + - Intermediate + - NeedsExample + - NeedsTranslation + - TopicStub +translation_of: Web/Guide/Mobile +--- +<p>이 페이지에는 모바일 기기에서도 잘 작동하는 웹 사이트를 디자인하기 위한 몇 가지의 방법과 노하우가 담겨 있습니다. Mozilla Firefox OS 프로젝트에 대한 정보를 찾고 계신다면, <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> 페이지를 참고하세요. 아니면 <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>에 대한 자세한 정보를 찾아보실 수도 있습니다.</p> + +<p>We've organized it into two sections, <a href="#Designing_for_mobile_devices">designing for mobile devices</a> and <a href="#Cross-browser_development">cross-browser compatibility</a>. Also see Jason Grlicky's guide to <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> for web developers.</p> + +<h2 id="모바일_기기를_위한_디자인">모바일 기기를 위한 디자인</h2> + +<p>Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.</p> + +<h3 id="작은_화면에_대응하기">작은 화면에 대응하기</h3> + +<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Responsive Web Design</a> is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:</p> + +<ul> + <li>fluid CSS layouts, to make the page adapt smoothly as the browser window size changes</li> + <li>the use of <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> to conditionally include CSS rules appropriate for the device screen <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> and <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a></li> +</ul> + +<p>The <a href="/en/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">viewport meta tag</a> instructs the browser to display your site at the appropriate scale for the user's device.</p> + +<h3 id="터치_스크린에_대응하기">터치 스크린에 대응하기</h3> + +<p>터치 스크린을 사용하려면 당신은 <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM 터치 이벤트</a>에 대해서 배워야 합니다. You won't be able to use the <a href="/En/CSS/:hover" title="En/CSS/:hover">CSS :hover</a> pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p> + +<p><a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> 미디어 쿼리를 이용해 터치를 사용할 수 있는 기기에서 다른 CSS 파일을 불러들일 수도 있습니다.</p> + +<h3 id="이미지_최적화하기">이미지 최적화하기</h3> + +<p>네트워크 속도가 느리거나 비용이 비싼 기기를 사용하는 사용자들을 위해, 디바이스 화면 크기와 해상도에 맞게 최적화된 이미지를 불러들이게 할 수 있습니다. You do this in CSS by querying for screen <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, and <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p> + +<p>You can also make use of CSS properties to implement visual effects like <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> and <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> without images.</p> + +<h3 id="모바일_API">모바일 API</h3> + +<p>Finally, you can take advantage of the new possibilities offered by mobile devices, such as <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> and <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p> + +<h2 id="크로스_브라우저_개발">크로스 브라우저 개발</h2> + +<h3 id="크로스_브라우저_코드_작성하기">크로스 브라우저 코드 작성하기</h3> + +<p>다양한 모바일 브라우저에서 잘 작동하는 웹 사이트를 만들기 위해서는 다음 내용을 알아두셔야 합니다. :</p> + +<ul> + <li>벤더별 접두어(vendor-prefix)가 사용된 CSS 프로퍼티 등 특정 브라우저에서만 작동하는 기능 사용을 배제할 것.</li> + <li>그러한 특정 기능을 사용해야 하는 경우, 다른 브라우저에서도 그러한 기능이 구현되어 있는지 확인할 것. 그러한 기능이 있다면, 그 브라우저에 대한 지원도 목표로 할 것.</li> + <li>다른 브라우저에서 그러한 특정 기능이 지원되지 않는다면, 그런 브라우저들을 위해 납득 가능한 대체재(fallback)를 만들어 둘 것.</li> +</ul> + +<p>For example, if you set a gradient as a background for some text using a vendor-prefixed property like <code>-webkit-linear-gradient</code>, it's best to include the other vendor-prefixed versions of the <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your <code>linear-gradient</code> rule.</p> + +<p>See this <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a>, and this list of <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a>, and Peter Beverloo's <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p> + +<p>Using tools like <a class="external" href="http://csslint.net/">CSS Lint</a> can help find problems like this in code, and preprocessors like <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://lesscss.org/">LESS</a> can help you to produce cross-browser code.</p> + +<h3 id="Take_care_with_user_agent_sniffing">Take care with user agent sniffing</h3> + +<p>It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.</p> + +<p>If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. See this <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a>.</p> + +<h3 id="다양한_브라우저에서_테스트하기">다양한 브라우저에서 테스트하기</h3> + +<p>Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.</p> + +<ul> + <li>test mobile Safari on the iPhone using the <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li> + <li>test Opera and Firefox using the <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. See these additional instructions for <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">running Firefox for Android using the Android emulator</a>.</li> +</ul> diff --git a/files/ko/web/guide/mobile/separate_sites/index.html b/files/ko/web/guide/mobile/separate_sites/index.html new file mode 100644 index 0000000000..ba86ec0e9b --- /dev/null +++ b/files/ko/web/guide/mobile/separate_sites/index.html @@ -0,0 +1,53 @@ +--- +title: 모바일과 데스크톱용 개별 사이트 +slug: Web/Guide/Mobile/Separate_sites +tags: + - 모바일 + - 모바일웹 + - 웹개발 + - 접근방식 +translation_of: Web/Guide/Mobile/Separate_sites +--- +<p>모바일 웹 개발에 관한 "개별 사이트" 접근 방식은 모바일과 데스크톱 웹 사용자를 위해 서로 다른 사이트를 제작한다는 의미입니다. 이러한 접근 방식에는 긍정적인 측면과 부정적인 측면이 있습니다. </p> + +<h2 id="장점">장점</h2> + +<p>첫 번째 선택 사항은 가장 대중적입니다. 전화기에서 사용자들이 전형적인 m.example.com 식의 개별 모바일 사이트로 가도록 <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">사용자 에이전트 탐지(user-agent detection)</a>를 이용합니다. 간단히 말하면, 이 기술은 <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">바일 웹 개발에서의 3가지 목표</a>를 한 번에 해결하고자 서버 측(server-side) 로직을 사용합니다. 사용자의 브라우저가 전화기에 있는 것 같으면, 전화기에 맞춰 형식화되고 속도에 최적화된 모바일 콘텐츠를 제공합니다.</p> + +<p>개념적으로 단순한 이 방식은 기존에 있는 사이트에 추가하면 되는 가장 쉬운 선택 사항입니다. 특히 템플릿을 제공하는 CMS나 웹 애플리케이션을 이용하고 있다면 말이죠. 모바일에 특화된 콘텐츠와 스타일, 스크립트만 모바일 사용자에게 보내지기 때문에 이 방식은 여기에서 보여진 다른 선택 사항들 중에 가장 높은 성능을 제공하기도 합니다. 마지막으로 데스크톱과 모바일에서 완전히 차별화된 사용자 경험을 줄 수 있습니다. 결국에는 두 개의 다른 사이트니까요!</p> + +<h2 id="단점">단점</h2> + +<p>아쉽게도, 이 접근 방식에 문제점이 없지는 않습니다. 우선 첫째로, 모바일 사용자에게 보여주고 싶은 여러분의 사이트에서 모든 페이지에 대해 2가지 서로 다른 페이지를 유지 보수하게 됩니다. 만약 CMS를 사용 중이라면 이런 중복 작업을 최소화할 방법으로 사이트 템플릿을 정리할 수 있겠지요. 그렇더라도 모바일과 데스크톱 템플릿 간에 차이가 있는 때에는 코드에 복잡한 소스가 생길 가능성이 있습니다. 마찬가지로 프론트엔드 로직의 2세트에 대해 코드를 작성해야 하므로 새로운 사이트 피처(features)를 제공하는 시간이 길어집니다. </p> + +<p>그보다 더 중요한 것은 사용자 에이전트 탐지에 본질적인 오류가 있고 결코 미래를 대비하지 못한다는 사실입니다. 새로운 브라우저가 나올 때마다 그에 부응하는 알고리즘을 수정해야 합니다. 그리고 긍정 오류(false positives)는 특히나 두렵습니다. 우연히 데스크톱 사용자들에게 모바일 사이트를 제공하는 황당함을 범할 수 있기 때문입니다.</p> + +<h2 id="이_선택이_옳은_경우">이 선택이 옳은 경우</h2> + +<p><img alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png" style="float: right;">우선 목표 대상(target audience)에 오래되거나 저가(low-end) <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">피처폰</a>을 사용하는 사용자들을 포함한다면, 필히 이 전략을 <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">어느 정도</a> 이용해야 한다는 데 주목할 가치가 있습니다. 이는 일부 피처폰에 장착된 기본 브라우저에서 데스크톱용 대상인 웹사이트를 코딩하는데 쓰인 동일한 마크업을 지원하지 않기 때문입니다. 그대신<a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a>이나 더 오래된 <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a> 형식을 알고 있습니다.</p> + +<p>이 요인 외에 이 전략이 다른 방식보다 더 빛을 발하는 경우가 하나 있습니다. 모바일 기기에서 사용자에게 제공하고 싶은 기능이 데스크톱에서의 기능과 완전히 다르다면, 개별 사이트를 이용하는 것이 <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">가장 실용적인 선택</a>이 될 수 있습니다. 전혀 서로 다른 HTML과 자바스크립트, CSS를 전화기와 PC로 전송하는 선택 사항이기 때문이지요.</p> + +<p>이 접근 방식을 강제로 써야 할 수 있는 또 다른 경우는, 이유가 무엇이든지, 기존에 있는 데스크톱 사이트를 수정하지 못해서 100% 개별 모바일 사이트가 필요할 때입니다. 이상적이진 않지만, 최소한 이런 선택 사항은 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p><a class="external" href="http://m.facebook.com/">Facebook</a>과 <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>를 포함해 여러분이 세상에서 보는 주요 웹 애플리케이션 중 대다수가 이 경로를 택했습니다. 실은 모질라는 <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO)와 <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO)의 모바일 버전에도 이 전략을 선택했지요. 만약 여러분이 실제로 적용된 이 접근 방식의 예제 배후에 있는 소스 코드를 보고 싶다면, 맘 편히 <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>를 확인해 보세요.</p> + +<h2 id="모바일_웹_개발에_관한_접근_방식">모바일 웹 개발에 관한 접근 방식</h2> + +<p>모바일 플랫폼 개발에 관한 배경과 다른 접근 방식을 다룬 아래 글들을 참조해 보세요. </p> + +<ul> + <li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">모바일 친화적(mobile-friendliness)이란 무엇인가?</a></li> + <li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">반응형 디자인</a></li> + <li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">하이브리드 방식</a></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="원문에_관한_정보">원문에 관한 정보</h3> + +<p>이 글은 본래 제이슨 그를리키(Jason Grlicky)가 작성한 "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">모바일 웹 개발로의 접근 방식 2부 – 개별 사이트</a>"로 모질라 웹데브(Mozilla Webdev) 블로그에 2011년 5월 13일자로 게재되었습니다.</p> +</div> + +<p> </p> diff --git a/files/ko/web/guide/xml_파싱_및_직렬화/index.html b/files/ko/web/guide/xml_파싱_및_직렬화/index.html new file mode 100644 index 0000000000..872dfffaa3 --- /dev/null +++ b/files/ko/web/guide/xml_파싱_및_직렬화/index.html @@ -0,0 +1,141 @@ +--- +title: XML 파싱 및 직렬화 +slug: Web/Guide/XML_파싱_및_직렬화 +tags: + - AJAX + - Add-ons + - DOM + - Extensions + - JSON + - JXON + - XML + - XMLHttpRequest + - 가이드 +translation_of: Web/Guide/Parsing_and_serializing_XML +--- +<p>웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.</p> + +<ul> + <li><strong>DOM 트리를 문자열로 직렬화</strong>하는<strong> </strong><a href="/en/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a></li> + <li><strong>XML 문서 상의 각기 다른 부분들을 (비 XML 문법을 사용하여) 문자열로 직렬화</strong>하는 <a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li>XML을 파싱하여 <strong>문자열을 DOM 트리로 변환</strong>하는 <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a></li> + <li><strong>URL을 사용하여 주소화 가능한(URL-addressable) 리소스를 DOM 트리로</strong> 파싱하는 <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> + +<h2 id="Part_1_XML_문서_생성법">Part 1: XML 문서 생성법</h2> + +<p>XML 문서 생성법은 다음과 같습니다. (XML 문서는 <code>Document</code>의 인스턴스 입니다.)</p> + +<h3 id="문자열을_DOM_트리로_파싱">문자열을 DOM 트리로 파싱</h3> + +<div style="overflow: hidden;"> +<pre class="brush: js">var sMyString = '<a id="a"><b id="b">hey!</b></a>'; +var oParser = new DOMParser(); +var oDOM = oParser.parseFromString(sMyString, "text/xml"); +// 루트 요소의 이름, 또는 에러 메시지를 출력합니다. +dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName); +</pre> +</div> + +<h3 id="자바스크립트_객체_트리를_시작점으로_하여_XML_문서를_생성(JXON)">자바스크립트 객체 트리를 시작점으로 하여 XML 문서를 생성(JXON)</h3> + +<p><a class="internal" href="/en/JXON#Reverse_Algorithms" title="en/JXON – Reverse Algorithms">JXON 역(reverse) 알고리즘</a>을 참고하세요.</p> + +<h3 id="URL_주소화_가능한(URL-addressable)_리소스를_DOM_트리로_파싱">URL 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱</h3> + +<h4 id="XMLHttpRequest를_사용합니다">XMLHttpRequest를 사용합니다</h4> + +<p>다음은 URL 주소화 가능한 XML 파일을 DOM 트리로 읽어들인 후 파싱하는 예시 코드입니다.</p> + +<pre class="brush: js">var xhr = new XMLHttpRequest(); +xhr.onload = function() { + dump(xhr.responseXML.documentElement.nodeName); +} +xhr.onerror = function() { + dump("Error while getting XML."); +} +xhr.open("GET", "example.xml"); +xhr.responseType = "document"; +xhr.send(); +</pre> + +<p><code>xhr.responseXML는</code> {{domxref("Document")}}의 인스턴스입니다.</p> + +<h2 id="Part_2_특정_XML_문서의_콘텐츠를_직렬화하는_방법">Part 2: 특정 XML 문서의 콘텐츠를 직렬화하는 방법</h2> + +<p>Part 1에서 생성한 XML 문서의 콘텐츠를 직렬화할 수 있는 방법은 다음과 같습니다.</p> + +<h3 id="DOM_트리를_문자열로_직렬화">DOM 트리를 문자열로 직렬화</h3> + +<p>제일 먼저 <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a>에 나와 있는 대로 DOM 트리를 생성합니다. 다른 방법으로는 {{ domxref("XMLHttpRequest") }}에서 얻어낸 DOM 트리를 사용하는 방법이 있습니다.</p> + +<p>이제 <code>doc</code>(DOM 트리)를 문자열로 직렬화 해 봅시다.</p> + +<pre class="brush: js">var oSerializer = new XMLSerializer(); +var sXML = oSerializer.serializeToString(doc);</pre> + +<p><code>new XMLSerializer()</code> 생성자는 JS XPCOM 컴포넌트(혹은 <a class="internal" href="/en/JavaScript_code_modules" title="En/JavaScript modules">JS module</a>) 내에서는 사용이 불가능합니다. 대신, 다음과 같은 코드를 작성하세요.</p> + +<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"] + .createInstance(Components.interfaces.nsIDOMSerializer); +var sXML = oSerializer.serializeToString(doc); +</pre> + +<h4 id="DOM_트리를_문자열로_예쁘게(pretty)_직렬화">DOM 트리를 문자열로 "예쁘게(pretty)" 직렬화</h4> + +<p><code><a href="/en/XMLSerializer" title="XMLSerializer">XMLSerializer</a>와</code> <a href="/en/E4X" title="en/E4X">E4X</a>를 사용하면 DOM 트리를 <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">예쁘게 출력(pretty print</a>) 할 수 있습니다. 우선, <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a> 글을 참고하여 DOM 트리를 생성합니다. 혹은 {{ domxref("XMLHttpRequest") }}를 통해 DOM 트리를 뽑아내는 방법도 있습니다. 아래 코드에서 변수 <code>doc</code>는 DOM 트리를 가지고 있습니다.</p> + +<pre class="brush: js">var oSerializer = new XMLSerializer(); +var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre> + +<p>들여쓰기는 두 번 스페이스가 들어간 것과 같게 되어 있습니다. 좀 더 효율적인 코드를 작성하거나 들여쓰기 문자열을 임의로 설정하고 싶다면 {{ domxref("treeWalker") }}를 사용하십시오.</p> + +<div class="note"><strong>Note:</strong> E4X <code>toXMLString</code> 메소드를 쓴다면, <strong>CDATA 요소가 없어지거나</strong>, 요소 안에 담긴 텍스트만 남을 수 있습니다. 그러므로 만약 XML 내에 CDATA 요소가 들어 있다면, <span style="background-color: #f5f6f5;">위에 나온 메소드는 그다지 유용하지 않을 수도 있습니다.</span></div> + +<pre class="brush: xml"><content><![CDATA[This is the content]]></content> +</pre> + +<p>위의 코드는 다음과 같이 변환됩니다.</p> + +<pre class="brush: xml"><content>This is the content</content></pre> + +<h3 id="DOM_트리를_자바스크립트_객체_트리로_직렬화_(JXON)">DOM 트리를 자바스크립트 객체 트리로 직렬화 (JXON)</h3> + +<p><a href="/en/JXON" title="en/JXON">JXON</a> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, 무손실 자바스크립트 XML 객체 표기법)은 XML을 사용하여 자바스크립트 객체를 표현하는 방법입니다. XML 문서의 일부분만 나오게 하고 싶다면, 문서 전체를 JSON으로 변환하지 말고 <a class="internal" href="/en/XPath" title="en/XPath">XPath</a>를 사용하세요! 이 외의 상황이라면 <a class="internal" href="/en/JXON" title="en/JXON">JSON에 관한 글</a>을 참조하세요.</p> + +<h3 id="DOM_트리를_파일로_직렬화">DOM 트리를 파일로 직렬화</h3> + +<p>먼저, <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a> 글에 나와 있는 대로 DOM 트리를 생성하세요. 만약 {{ domxref("XMLHttpRequest") }}를 사용하여 이미 DOM 트리가 존재한다면 이 절의 마지막 부분으로 건너 뛰십시오.</p> + +<p>이제 DOM 트리인 <code>doc</code>를 파일로 직렬화 해봅시다. 파일에 대해 더 알아보고 싶다면, <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">모질라에서 파일 사용과 관련하여</a>를 참조하세요.</p> + +<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream); +var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder +oFile.append("extensions"); // extensions sub-directory +oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension +oFile.append("myXMLFile.xml"); // filename +oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate +(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree +oFOStream.close(); +</pre> + +<h3 id="XMLHttpRequest_객체를_파일로_직렬화">XMLHttpRequest 객체를 파일로 직렬화</h3> + +<p>이미 {{ domxref("XMLHttpRequest") }}를 사용하여 DOM 트리를 보유한 상태라면, 위의 코드를 사용하되 <code>serializer.serializeToStream(doc, oFOStream, "")</code> <code>부분을</code> <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code>로 대체하십시오. <code>xmlHttpRequest은</code> <code>XMLHttpRequest</code>의 인스턴스입니다.</p> + +<p>위 코드는 서버에서 XML을 찾아낸 후 문자열 스트림으로 재직렬화(re-serialize)한다는 것을 알아두세요. 필요에 따라 <code>xmlHttpRequest.responseText</code>를 곧장 건너뛸 수 있습니다.</p> + +<h3 id="HTML_문서를_직렬화">HTML 문서를 직렬화</h3> + +<p>만약 보유한 DOM이 HTML 문서라면 다음과 같이 간단하게 직렬화할 수 있습니다.</p> + +<pre class="brush: js">var serialized = document.documentElement.innerHTML; +</pre> + +<h2 id="참고_자료">참고 자료</h2> + +<ul> + <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> + <li><a href="/en/JXON" title="en/JXON">JXO</a></li> +</ul> diff --git a/files/ko/web/guide/그래픽/index.html b/files/ko/web/guide/그래픽/index.html new file mode 100644 index 0000000000..cb7cd6f873 --- /dev/null +++ b/files/ko/web/guide/그래픽/index.html @@ -0,0 +1,48 @@ +--- +title: 웹 상 그래픽 +slug: Web/Guide/그래픽 +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다.</span> 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. <span class="seoSummary">여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="2D_그래픽">2D 그래픽</h2> + +<dl> + <dt><a href="/ko/docs/Web/HTML/Canvas">Canvas</a></dt> + <dd>{{HTMLElement("canvas")}} 요소는 JavaScript를 사용하여 2D 그래픽을 그리는 API를 제공합니다.</dd> + <dt><a href="/ko/docs/Web/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics (SVG)는 그래픽을 묘사하기 위해 선, 곡선 및 그 밖의 기하학 도형을 사용할 수 있습니다. 벡터로, 어떤 크기로든 깔끔하게 크기 조정하는 이미지를 만들 수 있습니다.</dd> +</dl> + +<p><span class="alllinks"><a href="/ko/docs/tag/Graphics">모두 보기...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="3D_그래픽">3D 그래픽</h2> + +<dl> + <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>웹을 위한 3D 그래픽인 WebGL 시작 안내서. 이 기술로 웹 콘텐츠에 표준 OpenGL ES를 사용할 수 있습니다.</dd> +</dl> + +<h2 id="비디오">비디오</h2> + +<dl> + <dt><a href="/ko/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 audio 및 video 사용</a></dt> + <dd>웹 페이지 내 비디오 및/또는 오디오 삽입 및 그 재생 제어.</dd> + <dt><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>WebRTC에서 RTC는 실시간 통신(Real-Time Communications)을 뜻하며, 오디오/비디오 스트리밍 및 브라우저 클라이언트(peer) 간 데이터 공유를 가능하게 하는 기술입니다.</dd> +</dl> +</div> +</div> |