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/mozilla | |
| 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/mozilla')
158 files changed, 19166 insertions, 0 deletions
diff --git a/files/ko/mozilla/add-ons/amo/index.html b/files/ko/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..e1684b2100 --- /dev/null +++ b/files/ko/mozilla/add-ons/amo/index.html @@ -0,0 +1,15 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +<p>Pages documenting <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>:</p> + +<p>{{Listsubpages("/en-US/Add-ons/AMO", 10)}}</p> + +<p> </p> + +<p> </p> diff --git a/files/ko/mozilla/add-ons/amo/policy/index.html b/files/ko/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..58fb599b47 --- /dev/null +++ b/files/ko/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,29 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - AMO + - Add-ons + - Firefox + - NeedsTranslation + - Policies + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +<p>{{AddonSidebar}}</p> + +<p>Mozilla is committed to ensuring an excellent experience for both our users and developers of add-ons. Please review the policies below before submitting your add-on.</p> + +<dl> + <dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt> + <dd>This agreement is effective as of June 10, 2019.</dd> + <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Add-on policies</a></dt> + <dd>Add-ons extend the core capabilities of Firefox, enabling users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own.</dd> + <dd>For these reasons, Mozilla requires all add-ons to comply with the add-on policies on acceptable practices. The policies are not intended to serve as legal advice, nor are they intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> + <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt> + <dd>How up-and-coming add-ons become featured and what's involved in the process.</dd> + <dt><a href="/en-US/Add-ons#Contact_us">Contact Us</a></dt> + <dd>How to get in touch with us regarding these policies or your add-on. + <p> </p> + </dd> +</dl> diff --git a/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html b/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html new file mode 100644 index 0000000000..19bb9e4af8 --- /dev/null +++ b/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html @@ -0,0 +1,349 @@ +--- +title: Bootstrapped extensions +slug: Mozilla/Add-ons/Bootstrapped_extensions +translation_of: Archive/Add-ons/Bootstrapped_extensions +--- +<p>{{ gecko_minversion_header("2.0") }}</p> + +<div class="note"> +<p><strong>노트:</strong><a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/"> 부가기능 SDK</a> 를 사용한 모든 확장기능은 부트스트랩입니다! 모든 부트스트랩 코드는 생성되었으므로 따로 고민할 필요 없습니다. 부가기능 SDK를 사용하지 않으셨나요? 계속 읽어주세요...</p> +</div> + +<p>전통적인 확장기능은 오버레이를 포함하고 있습니다. 오버레이는 확장기능 패키지에서 XUL 파일을 꺼내 자동으로 UI 위에 덧씌웁니다. 이 방식을 쓰면 UI에 무언가 더하는 확장기능을 만들기 쉬워지지만 업데이트, 설치, 사용불가를 할 때마다 파이어폭스를 다시 시작해야 합니다.</p> + +<p>Gecko 2.0{{ geckoRelease("2.0") }}은 부트스트랩 확장기능을 소개합니다. 이것은 오버레이 대신 직접 파이어폭스로 삽입되게 프로그램밍된 확장기능입니다. 확장기능 안에 포함된 어떤 스크립트 파일이 브라우저가 이 확장기능을 설치, 제거, 실행, 종료할 수 있게 해 줍니다.</p> + +<p>파이어폭스가 하는 일은 스크립트 파일에 따라 호출하는 것 뿐입니다. UI의 추가, 제거, 설치, 종료 등은 모두 확장기능이 알아서 합니다.</p> + +<p>이 문서는 어떻게 부트스트랩 확장기능이 작동하는지 알려줍니다. 오버레이 확장기능을 부트스트랩으로 바꾸려면 <a href="/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">converting from an overlay extension to restartless</a> 이 문서를 확인하세요.</p> + +<h2 id="시작과_종료_프로세스">시작과 종료 프로세스</h2> + +<p>부트스트랩 확장기능의 가장 중요한 점은 필요에 따라 파이어폭스가 마음대로 켜고 끌 수 있어야 한다는 점입니다. 확장기능의 <code>startup() </code>함수가 호출되면 UI와 다른 기능들이 수동으로 실행되어야 합니다. 마찬가지로 <code>shutdown()</code> 함수가 호출되면 파이어폭스에 추가한 것과 그것의 오브젝트의 모든 리퍼런스를 제거해야 합니다.</p> + +<p><code>startup()</code> 함수가 호출될 때의 예:</p> + +<ul> + <li>파이어폭스와의 호환과 활성화가 되어 있을 경우 확장기능이 설치 되었을 때</li> + <li>부가 기능 관리자 창으로 확장기능이 활성화 되었을 때</li> + <li>확장기능이 활성화 되어있고 호환 가능할 경우 파이어폭스가 실행되었을 때</li> +</ul> + +<p><code>shutdown()</code> 함수가 호출될 때의 예:</p> + +<ul> + <li>확장기능이 활성화된 상태로 제거되었을 때</li> + <li>확장기능이 비활성화 되었을 때</li> + <li>확장기능이 활성화 되어있을 경우 사용자가 파이어폭스를 껐을 때</li> +</ul> + +<h2 id="파이어폭스_UI를_변경할_때">파이어폭스 UI를 변경할 때</h2> + +<h3 id="부트스트랩_부가기능의_chrome.manifest">부트스트랩 부가기능의 chrome.manifest</h3> + +<p>다으의 경우에서 부트스트랩 부가기능의 <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> 을 사용할 수 있습니다:</p> + +<ol> + <li>부가기능을 <code>chrome://</code> URL로 켤 때 (<code>매니페스트에서 content</code>, <code>locale</code>, 그리고 <code>skin</code> 인스트럭션을 사용하세요);</li> + <li>이미 있는 <code>chrome://</code> URI 를 교체할 때 (<code>override</code> 인스트럭션을 사용하세요).</li> +</ol> + +<p>부트스트랩 부가기능에서 모든 <code>chrome.manifest</code> 인스트럭션이 지원되는 것은 아닙니다. 예를 들어 <a href="/en-US/docs/XUL_Overlays">XUL Overlays</a> 는 부트스트랩 부가기능에서 사용할 수 없습니다. 더 자세한 내용은 <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> 문서를 참고하세요.</p> + +<p>파이어폭스 10 이후 버전에서 부가기능의 xpi 파일의 최상단(<code>install.rdf</code> 등과 같은 위치)에 위치해 있는 <code>chrome.manifest </code>파일은 자동으로 열립니다. 파이어폭스 8과 9에서 당신은 직접<code> {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }}</code> 과 <code>{{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}</code>를 통해 매니페스트 파일을 열고 닫아야 합니다. 이 기능은 파이어폭스 8 이전 버전에서는 지원되지 않습니다.</p> + +<h3 id="UI를_수동으로_추가하기">UI를 수동으로 추가하기</h3> + +<p>만약 파이어폭스의 UI를 바꾸는 부트스트랩 확장기능을 개발하기로 했다면 여기 몇가지 제안사항이 있습니다.</p> + +<p>우선 {{ domxref("document.getElementById()") }}를 호출해서 바꾸고자 하는 UI 엘리먼츠를 ID로 찾아야 합니다. 그 다음 UI를 추가하기 위한 조작을 합니다. 예를 들어 파이어폭스의 메뉴바에 접근하기 위해서 이렇게 합니다. <code>document.getElementById("main-menubar")</code>.</p> + +<p>종료할 대마다 추가한 모든 UI를 제거해야 합니다.</p> + +<h2 id="부트스트랩_확장기능_만들기">부트스트랩 확장기능 만들기</h2> + +<p>확장기능이 부트스트랩이라는 것을 표시하기 위해 <a href="/en-US/docs/Install_Manifests">install manifest</a> 에 다음 줄을 추가하세요:</p> + +<pre><code><em:bootstrap>true</em:bootstrap></code></pre> + +<p>그 다음 필요한 기능들이 담긴 <a href="/en-US/docs/Extensions/bootstrap.js"><code><strong>bootstrap.js</strong></code></a> 파일을 추가합니다; 이것은 확장기능 패키지에서 <a href="/en-US/docs/Install_Manifests"><code>install.rdf</code></a> 파일과 같이 있어야 합니다.</p> + +<h3 id="Backward_compatibility이전버전과의_호환">Backward compatibility이전버전과의 호환</h3> + +<p>오래된 버전의 파이어폭스는 <code>bootstrap</code> 속성이나 <code>bootstrap.js</code> 파일을 인식하지 못하기 때문에 부트스트랩 확장기능과 전통적인 확장기능이 모두 담긴 XPI 파일을 만드는 것은 어려운 일이 아닙니다. 확장기능을 부트스트랩으로 만든 다음 오버레이를 추가하세요. 새 버전의 파이어폭스는 <code>bootstrap.js</code> 스크립트를 사용하면서 컴포넌트와 오버레이를 무시할 것이고 오래된 버전은 오버레이를 사용할 것입니다.</p> + +<h2 id="부트스트랩_진입점">부트스트랩 진입점</h2> + +<p><code>bootstrap.js</code> 스크립트는 브라우저가 확장기능을 관리할 때 호출하는 특정 함수들을 포함하고 있어야 합니다. 스크립트는 특정 샌드박스에서 실행되며 샌드박스는 확장기능이 종료되기 전까지 캐시로 남아있습니다.</p> + +<h3 id="startup">startup</h3> + +<p>확장기능을 시작할 때 호출됩니다. 파이어폭스가 켜질 때, 비활성화된 확장기능이 활성화될 때 또는 업데이트를 설치하기 위해 종료되었을 때 같은 상황에서 호출됩니다. 이처럼 파이어폭스의 생명주기동안 여러번 호출될 수 있습니다.</p> + +<p>이 함수가 호출되었을 때 부가기능은 UI를 추가하고 동작에 필요한 작업을 시작해야 합니다.</p> + +<pre>void startup( + data, + reason +); +</pre> + +<h6 id="변수">변수</h6> + +<dl> + <dt><code>data</code></dt> + <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd> + <dt><code>reason</code></dt> + <dd> <a href="#Reason_constants">reason constants</a> 중의 하나로 왜 확장기능이 시작되었는지를 표시합니다. <code>APP_STARTUP</code>, <code>ADDON_ENABLE</code>, <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd> +</dl> + +<h3 id="shutdown">shutdown</h3> + +<p>파이어폭스가 꺼질때, 확장기능이 업그레이드되거나 비활성화 될 때 처럼 확장기능이 종료할 때 호출됩니다. 추가된 UI를 제거하고 태스크는 종료하고 오브젝트는 처리해야 합니다.</p> + +<pre>void shutdown( + data, + reason +); +</pre> + +<h6 id="변수_2">변수</h6> + +<dl> + <dt><code>data</code></dt> + <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd> + <dt><code>reason</code></dt> + <dd><a href="#Reason_constants">reason constants</a> 중의 하나로 왜 확장기능이 종료되었는지를 표시합니다. <code>APP_SHUTDOWN</code>, <code>ADDON_DISABLE</code>, <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd> +</dl> + +<h3 id="install">install</h3> + +<p>부트스트랩 스크립트는 확장기능이 설치, 업그레이드, 다운그레이드 되고 나서 첫번째로 <code>startup() </code>함수를 호출하기 전에 호출할 <code>install()</code> 함수를 포함해야 합니다.</p> + +<div class="note"><strong>노트:</strong> 이 메소드는 확장기능이 실행되지 않으면 호출되지 않습니다; 예를 들어 확장기능이 설치되었지만 파이어폭스의 현재 버전과 호환되지 않으면 <code>install()</code> 함수는 확장기능이 제거되기 전까지 호환성 문제를 해결하지 않는 이상 호출되지 않습니다. 그러나 만약 확장기능이 파이어폭스에 호환되도록 업그레이드된다면 <code>install()</code> 함수는 그때 <code>startup()</code> 함수가 호출되기 전에 호출될 것입니다.</div> + +<pre>void install( + data, + reason +); +</pre> + +<h6 id="변수_3">변수</h6> + +<dl> + <dt><code>data</code></dt> + <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd> + <dt><code>reason</code></dt> + <dd><a href="#Reason_constants">reason constants</a>의 하나로 왜 확장기능이 설치되었는지 표시힙니다. <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>중 하나가 됩니다.</dd> +</dl> + +<h3 id="uninstall">uninstall</h3> + +<p>이 함수는 마지막으로 <code>shutdown()</code> 함수가 호출되었을 때 이후 특정 버전의 확장기능이 제거되었을 때 호출됩니다. <code>install()</code> 이 호출되지 않았다면 이 함수는 호출되지 않습니다.</p> + +<div class="note"><strong>노트:</strong> <code>uninstall()</code> 함수는 확장기능이 비활성화 되어있거나 현재 파이어폭스와 버전이 맞지 않더라도 호출될 수 있다는 것을 기억해야 합니다. 그렇기 때문에 현재 파이어폭스에서 지원되지 않는 API들을 우아하게 다루는 것이 중요합니다. 또한 이 함수는 파이어폭스가 실행되지 않을 때 써드파티 애플리케이션이 확장기능을 제거했을 때는 호출되지 않습니다. uninstall 코드가 있는데 실행이 안될 때<code>install() {} </code>만 있는것은 충분하지 않습니다.<code> install </code>함수에서 몇몇 코드를 실행하던지, 최소한 <code>install </code>function에 이런 식으로 선언해야 합니다: <code>function install(aData, aReason) {}</code> 그러면 uninstall 코드가 실행될 것입니다.</div> + +<div class="note"><strong>노트:</strong> 부가 기능 관리자에서 부가기능의 "제거"를 클릭할 경우는 바로 uninstall 함수를 호출하진 않습니다. 왜냐하면 "취소"버튼이 있기 때문입니다. 부가기능 관리자를 닫거나 해서 "취소" 버튼이 사라지면 그때 호출됩니다.</div> + +<div class="note"><strong>노트:</strong> uninstall 함수는 업그레이드와 다운그레이드 시에도 호출되기 때문에 다음과 같이 표시해주어야 합니다:<br> +<code>function uninstall(aData, aReason) {</code><br> +<code> if (aReason == ADDON_UNINSTALL) {</code><br> +<code> console.log('really uninstalling');</code><br> +<code> } else {</code><br> +<code> console.log('not a permanent uninstall, likely an upgrade or downgrade');</code><br> +<code> }</code><br> +<code>}</code></div> + +<pre>void uninstall( + data, + reason +); +</pre> + +<h6 id="변수_4">변수</h6> + +<dl> + <dt><code>data</code></dt> + <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd> + <dt><code>reason</code></dt> + <dd><a href="#Reason_constants">reason constants</a>의 하나로 왜 확장기능이 제거되었는지 표시해줍니다. <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd> +</dl> + +<h2 id="Reason_상수">Reason 상수</h2> + +<p>부트스트랩의 함수는 <code>reason</code> 변수를 허용합니다. 이는 확장기능에게 왜 호출되었는지를 설명합니다. reason 상수는 다음과 같습니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">상수</td> + <td class="header">값</td> + <td class="header">설명</td> + </tr> + <tr> + <td><code>APP_STARTUP</code></td> + <td>1</td> + <td>파이어폭스가 실행</td> + </tr> + <tr> + <td><code>APP_SHUTDOWN</code></td> + <td>2</td> + <td>파이어폭스가 종료</td> + </tr> + <tr> + <td><code>ADDON_ENABLE</code></td> + <td>3</td> + <td>부가기능이 활성화</td> + </tr> + <tr> + <td><code>ADDON_DISABLE</code></td> + <td>4</td> + <td>부가기능이 비활성화 (혹은 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620541">제거중 호출됨</a>)</td> + </tr> + <tr> + <td><code>ADDON_INSTALL</code></td> + <td>5</td> + <td>부가기능이 설치됨</td> + </tr> + <tr> + <td><code>ADDON_UNINSTALL</code></td> + <td>6</td> + <td>부가기능이 제거됨</td> + </tr> + <tr> + <td><code>ADDON_UPGRADE</code></td> + <td>7</td> + <td>부가기능이 업그레이드됨</td> + </tr> + <tr> + <td><code>ADDON_DOWNGRADE</code></td> + <td>8</td> + <td>부가기능이 다운그레이드됨</td> + </tr> + </tbody> +</table> + +<h2 id="Bootstrap_data">Bootstrap data</h2> + +<p>각각의 진입점들은 부가기능의 유용한 정보를 담고 있는 간단한 데이터 구조를 갖고 있습니다. 부가기능에 대한 더 많은 정보는 <code><a href="/en-US/docs/Addons/Add-on_Manager/AddonManager#getAddonByID()">AddonManager.getAddonByID()</a></code>를 호출하는 것으로 알 수 있습니다. 그 데이터는 다음과 같은 속성을 갖고있는 간단한 자바스크립트 오브젝트입니다:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">속성</td> + <td class="header">자료형</td> + <td class="header">설명</td> + </tr> + <tr> + <td><code>id</code></td> + <td><code>string</code></td> + <td>부가기능의 ID</td> + </tr> + <tr> + <td><code>version</code></td> + <td><code>string</code></td> + <td>부가기능의 버전</td> + </tr> + <tr> + <td><code>installPath</code></td> + <td><code>nsIFile</code></td> + <td>부가기능이 설치된 장소. 부가기능이 언팩되어있는지 여부에 따라 디렉터리가 될 수도 있고 XPI 파일이 될 수도 있습니다.</td> + </tr> + <tr> + <td><code>resourceURI</code></td> + <td><code>nsIURI</code></td> + <td>부가기능의 루트를 가리키는 URI. 부가기능이 언팩되어있는지 여부에 따라 <code>jar:</code> 이 될 수도 있고 <code>file:</code> URI 이 될 수도 있습니다. {{ gecko_minversion_inline("7.0") }}</td> + </tr> + <tr> + <td><code>oldVersion</code></td> + <td><code>string</code></td> + <td>과거 설치된 버전, reason이 <code>ADDON_UPGRADE</code> 이거나 <code>ADDON_DOWNGRADE이고 함수가</code> <code>install</code> 이나 <code>startup일 경우</code>. {{ gecko_minversion_inline("22.0") }}</td> + </tr> + <tr> + <td><code>newVersion</code></td> + <td><code>string</code></td> + <td>설치될 버전. reason이 <code>ADDON_UPGRADE</code> 이나 <code>ADDON_DOWNGRADE이고 함수가</code> is <code>shutdown</code> 이나 <code>uninstall일 경우</code>. {{ gecko_minversion_inline("22.0") }}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>노트:</strong> <code>startup</code> 함수의 reason이 <code>APP_STARTUP이고</code> <code>oldVersion</code> 속성이 설정되어있지 않으면 부가기능은 파이어폭스가 시작될 때 업그레이드/다운그레이드 될 수 있습니다. 또한 어떤 상황에서는 uninstall 함수가 호출되지 않고도 업그레이드/다운그레이드가 일어난다는 것을 주의하세요.</p> +</div> + +<h2 id="부가_기능_디버거">부가 기능 디버거</h2> + +<p>파이어폭스 31부터 부트스트랩 부가 기능을 디버깅하기 위해서 <a href="/en-US/Add-ons/Add-on_Debugger">부가 기능 디버거</a>를 사용할 수 있습니다.</p> + +<h2 id="현지화_L10n">현지화 (L10n)</h2> + +<p>부트스트랩 부가기능을 현지화하는 것은 chrome.manifest 호환성이 정착된 파이어폭스 7 이후로 거의 같습니다.</p> + +<h3 id="JS와_JSM_파일_-_속성_파일_사용하기">JS와 JSM 파일 - 속성 파일 사용하기</h3> + +<p>.js와 .jsm 파일을 현지화하기 위해서 <a href="/en-US/docs/XUL/Tutorial/Property_Files">속성 파일</a>을 사용해야 합니다.</p> + +<p>필요한 최소한의 것들은:</p> + +<ol> + <li>파일: install.rdf</li> + <li>파일: chrome.manifest</li> + <li>파일: bootstrap.js</li> + <li>폴더: locale + <ol> + <li>폴더: VALID_LOCALE_HERE + <ol> + <li>파일: ANYTHING.properties</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>locale 폴더 안에 지원할 각각의 언어를 위한 폴더들이 있어야 합니다; 각각의 폭더는 유효한 로케일의 이름이어야 합니다(예: en-US). 폴더 안에는 속성파일이 들어있어야 합니다. chrome.manifest 파일 안에는 이런 로케일들이 정의되어야 합니다. 예를 들어 locale 폴더 안에 en-US 폴더가 들어있을 경우 chrome.manifest 파일에는 다음 줄이 추가되어야 합니다: <code>locale NAME_OF_YOUR_ADDON en-US locale/en-US/</code></p> + +<p>여기 예가 있습니다: <a href="https://github.com/Noitidart/l10n/tree/properties">GitHub :: l10n-properties</a> - 이 부가기능을 실행하면 프롬프트에 USA나 Great Britain중 당신의 로케일에 가까운 쪽이 뜰 것입니다. about:config에서 general.useragent.locale을 en-US로 바군 뒤 en-GB로 설정하고 부가기능을 비활성화 한 뒤에 활성화하면서 다른 로케일을 시험해볼 수 있습니다.</p> + +<h3 id="XUL과_HTML_파일_-_Using_Entities_from_DTD_Files">XUL과 HTML 파일 - Using Entities from DTD Files</h3> + +<p>HTML파일은 흔히 사용되지만 DTD을 사용해 번역할 수 없습니다. 변경해야 하는 것이 세가지가 있습니다:</p> + +<ol> + <li> HTML 파일의 확장자를 <code>.xhtml로 변경합니다</code></li> + <li>doctype에서 locale 폴더 속의 DTD 파일의 위치가 이런 식으로 정의되어야 합니다: <code><!DOCTYPE html SYSTEM <span class="pl-s1">"chrome://l10n/locale/mozilla.dtd"</span>></code></li> + <li>html 태그에 xmlns 속성을 붙여야 합니다: <code><<span class="pl-ent">html</span> <span class="pl-e">xmlns</span>=<span class="pl-s1"><span class="pl-pds">"</span>http://www.w3.org/1999/xhtml<span class="pl-pds">"</span></span>></code></li> +</ol> + +<p>최소한으로 필요한 것:</p> + +<ol> + <li>파일: install.rdf</li> + <li>파일: chrome.manifest</li> + <li>파일: bootstrap.js</li> + <li>폴더: locale + <ol> + <li>폴더: VALID_LOCALE_HERE + <ol> + <li>파일: ANYTHING.dtd</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>chrome.manifest 파일은 이와 같이 내용에 대한 정의를 포함해야 합니다: <code>content NAME_OF_YOUR_ADDON ./</code></p> + +<p>chrome.manifest 파일은 또한 위의 속성 섹션처럼 locale을 가리키는 라인이 포함되어야 합니다. locale의 폴더 이름이 en-US라면chrome.manifest 파일은 다음 줄을 포함해야 합니다: <code>locale NAME_OF_YOUR_ADDON en-US locale/en-US/</code></p> + +<p>이것은 설치되면 HTML과 XUL 페이지를 열어주는 예시 부가기능입니다: <a href="https://github.com/Noitidart/l10n/tree/c456cc82a8a66b6d552cd8c2299cd2babc383af0">GitHub :: l10n-xhtml-xul</a>. 이것은 어떻게 현지화된 HTML파일을 옵션으로 쓸 수 있는지의 예입니다: <a href="https://github.com/Noitidart/l10n/tree/html-options">GitHub :: l10n-html-options</a>. about:config에서 <code>general.useragent.locale을</code> <code>en-US</code>로 바꾼 뒤 <code>en-GB</code>로 바꾸고 열린 페이지를 새로고침 하면 현지화의 변화를 알 수 있습니다.</p> + +<h2 id="더_읽어보기">더 읽어보기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a> a step by step guide. Some code samples are provided. The page is based on and expanded from Dave Garrett's step-by-step guide to <a class="external" href="https://flagfox.wordpress.com/2014/01/19/writing-restartless-addons/">convert an old overlay based extension into a restartless addon</a>.</li> + <li>Dave Townsend provides a basic code base to <a class="external" href="http://www.oxymoronical.com/blog/2011/01/Playing-with-windows-in-restartless-bootstrapped-extensions">load UI for each opened window</a> in a bootstrapped extension.</li> + <li>Mark Finkle provides some simple example code for <a class="external" href="http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/">restartless add-ons in mobile Firefox</a>, <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/">adding resources (like the options window)</a> to bootstrapped extensions and <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-%e2%80%93-default-preferences/">using default preferences</a> without a <code>default/preferences/prefs.js</code> file.</li> + <li>Kris Maglione writes about <a class="external" href="http://maglione-k.users.sourceforge.net/bootstrapped.xhtml">the requirements for the cleanup procedures</a> in bootstrapped extensions.</li> + <li>Edward Lee shows off some <a class="external" href="http://ed.agadak.net/2011/01/restartless-add-on-example-code">helpful coding patterns and examples</a> you can use in your bootstrapped add-on.</li> + <li>Documentation for <a href="/en-US/docs/Extensions/Inline_Options">Inline Options</a> in Firefox 7 and later.</li> +</ul> diff --git a/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html b/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html new file mode 100644 index 0000000000..508750dfad --- /dev/null +++ b/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html @@ -0,0 +1,59 @@ +--- +title: Extension Frequently Asked Questions +slug: Mozilla/Add-ons/Extension_Frequently_Asked_Questions +tags: + - Add-ons + - Extensions +translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions +--- +<h3 id=".EB.94.94.EB.B2.84.EA.B9.85" name=".EB.94.94.EB.B2.84.EA.B9.85"><b>디버깅</b></h3> +<p>확장기능을 디버깅하기 전에<a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">development preferences</a> 를 올바르게 설정하시기를 권장합니다.</p> +<p>자바스크립트 디버거인 <a href="ko/Venkman">Venkman</a>은 복잡한 디버깅 상황에서 유용한 디버거가 되어 줄 것입니다. 디버깅 하실 때, "Debug -> Exclude Browser Files" 옵션이 활성화 되어 있지 않아야 합니다.</p> +<p> </p> +<h4 id=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F" name=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F"><b>어떻게하면 코드내 에러를 볼 수 있을까?</b></h4> +<p><a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">preference 의 <b>javascript.options.showInConsole</b>옵션이 <b>true</b> 값이 되도록 설정</a>하시면, 모든 종류의 에러 메시지는 자바스크립트 콘솔을 통해서 보고될 것입니다.</p> +<h4 id=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F" name=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F"><b>어떻게하면 확장기능이 제대로 동작 하는지 확인할 수 있을까?</b></h4> +<p><a href="ko/DOM/window.alert">alert()</a> 이나 <a href="ko/DOM/window.dump">dump()</a> 함수, 또는 <a href="ko/NsIConsoleService">nsIConsoleService</a>를 사용하실 수 있습니다.</p> +<h4 id=".EC.99.9C_.EB.82.B4.EA.B0.80_.EB.A7.8C.EB.93.A0_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EB.8A.94_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EC.9D.84.EA.B9.8C.3F" name=".EC.99.9C_.EB.82.B4.EA.B0.80_.EB.A7.8C.EB.93.A0_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EB.8A.94_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EC.9D.84.EA.B9.8C.3F"><b>왜 내가 만든 스크립트는 제대로 동작하지 않을까?</b></h4> +<p>만약 스크립트가 예상대로 동작하지 않는다면, 자바스크립트 콘솔의 에러 메시지를 확인해 보시기를 권합니다. (어떻게하면 코드내 에러를 볼 수 있을까? <a href="#.EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F">위에 있음</a>)</p> +<p>한가지 흔한 실수는 윈도우가 완전히 로드되기 전에, 윈도우에 있는 DOM에 접근하려고 하는 것입니다. 이러한 실수는 초기화 코드가 스크립트내의 상위 레벨에서(다른 말로하면, 함수 밖에서) 실행될때 발생합니다. 이를 찾아내기 위해서는 윈도우가 완전히 로드될때까지 특정 부분의 코드가 실행되지 않도록 해주는 <code>load</code> event listener를 사용하시기 바랍니다.</p> +<pre class="eval">function exampleBrowserStartup(event) +{ + // place your startup code here +} +window.addEventListener("load", exampleBrowserStartup, false); +</pre> +<h4 id=".EC.9B.B9.ED.8E.98.EC.9D.B4.EC.A7.80.EC.97.90_.EC.9E.88.EB.8A.94_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EC.9D.BD.EC.96.B4.EB.93.A4.EC.9D.BC_.EC.88.98_.EC.97.86.EC.9D.84_.EB.95.8C" name=".EC.9B.B9.ED.8E.98.EC.9D.B4.EC.A7.80.EC.97.90_.EC.9E.88.EB.8A.94_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EC.9D.BD.EC.96.B4.EB.93.A4.EC.9D.BC_.EC.88.98_.EC.97.86.EC.9D.84_.EB.95.8C"><b>웹페이지에 있는 문서를 읽어들일 수 없을 때</b></h4> +<p>browser.xul 오버레이로 부터 현재 웹페이지의 문서를 가져올 때, 브라우저의 윈도우 문서를 읽어오도록 하는 <code>document</code> 를 사용하는 대신에 브라우저의 윈도우 내에 포함되어 있는 문서를 읽어오도록 하는 <code>content.document</code> 를 사용하시기 바랍니다. 보다 자세한 내용은 <a href="ko/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> 에서 확인하실 수 있습니다.</p> +<p>또한, <a href="ko/XPCNativeWrapper">XPCNativeWrapper</a>는 기본적으로 웹페이지에 있는 script-defined 객체에 접근하는 것과 그 외 다른 것들을 하지 못 하도록 방지해 줍니다.</p> +<p> </p> +<h4 id="XML_.ED.8C.8C.EC.8B.B1.EC.97.90.EB.9F.AC.EA.B0.80_.EB.82.AC.EC.A7.80.EB.A7.8C.2C_.ED.8C.8C.EC.9D.BC.EC.97.90_.EB.AC.B8.EC.A0.9C.EA.B0.80_.EC.97.86.EC.96.B4_.EB.B3.B4.EC.9D.BC_.EB.95.8C" name="XML_.ED.8C.8C.EC.8B.B1.EC.97.90.EB.9F.AC.EA.B0.80_.EB.82.AC.EC.A7.80.EB.A7.8C.2C_.ED.8C.8C.EC.9D.BC.EC.97.90_.EB.AC.B8.EC.A0.9C.EA.B0.80_.EC.97.86.EC.96.B4_.EB.B3.B4.EC.9D.BC_.EB.95.8C"><b>XML 파싱에러가 났지만, 파일에 문제가 없어 보일 때</b></h4> +<p>일반적으로 파싱에러(<font color="red">붉은색 문구</font>와 붉은색 밑줄<font color="red">-------------^</font>로 표시됨)는 XML에서 의미있게 사용되는 특정한 문자나 속성 값이 소스코드내에서 잘 못 사용됐을 때 발생합니다. 예를들면,</p> +<pre class="eval"><button oncommand="window.open('<span class="nowiki">http://example.com/</span>q?param1=value<b>&param2</b>=val2')"/> +</pre> +<p>또는,</p> +<pre class="eval"><script>function lesser(a,b) { return <b>a < b</b> ? a : b; }</script> +</pre> +<p>이러한 문제는 다음과 같은 방법으로 해결될 수 있습니다.</p> +<ol> + <li>에러가 발생한 문자를 XML에서 특정한 의미로 사용되지 않는 표현으로 바꾸십시오. (예: "&" -> "&amp;", "<" -> "&lt;")</li> + <li>(만일 텍스트 노드라면, 이를테면 스크립트) CDATA 태그로 텍스트 노드를 에워싸십시오: + <pre><script><![CDATA[ + function lesser(a,b) { + return a < b ? a : b; + } + ]]></script></pre> + </li> + <li>스크립트를 다른 파일로 저장한 후, 이를 포함시키도록 하는 코드를 삽입하십시오: + <pre><script type="application/x-javascript" src="our.js"/></pre> + </li> +</ol> +<p> </p> +<h3 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C"><b>예제 코드</b></h3> +<p>무엇인가 유용한 동작을 구현하기 위해서 필요한 코드가 있다면, 가장 쉬운 방법은 이미 그러한 동작을 구현한 확장기능 (또는 Mozilla의 일부분)을 찾아내어 살펴보는 것입니다. (XPI와 JAR 파일은 ZIP 포멧을 사용합니다.)</p> +<p>이와 관련된 문서는 <a>the list of extension-related articles on MDC</a> 와 <a class="external" href="http://kb.mozillazine.org/Category:Example_code">Example code page on MozillaZine</a>에서 찾아 보실수 있습니다.</p> +<p> </p> +<h3 id=".EB.8F.84.EC.9B.80.EC.9D.84_.EC.96.BB.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name=".EB.8F.84.EC.9B.80.EC.9D.84_.EC.96.BB.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"><b>도움을 얻을 수 있는 곳</b></h3> +<p><a href="ko/Extensions/Other_Resources">Extensions:Other Resources</a> 와 <a href="ko/Extensions/Community">Extensions:Community</a>를 꼭 읽어 주십시오.</p> +<p>도움을 청하시기 전에, <a href="#.EB.94.94.EB.B2.84.EA.B9.85">디버깅</a>과 <a href="#.EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F">자바스크립트 콘솔</a>의 내용을 읽어주십시오. 또한, 질문을 하시기 전에, 질문에 대한 간단한 검색을 해주실 것과 자주묻는질문(FAQ)을 읽어주시길 부탁드립니다.</p> +<p>{{ languages( { "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ko": "ko/\ud655\uc7a5\uae30\ub2a5\uc5d0_\uad00\ud55c_\uc790\uc8fc\ud558\ub294_\uc9c8\ubb38" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/extension_packaging/index.html b/files/ko/mozilla/add-ons/extension_packaging/index.html new file mode 100644 index 0000000000..2dd7ff02eb --- /dev/null +++ b/files/ko/mozilla/add-ons/extension_packaging/index.html @@ -0,0 +1,34 @@ +--- +title: Extension Packaging +slug: Mozilla/Add-ons/Extension_Packaging +tags: + - Add-ons + - Extensions + - Toolkit API +translation_of: Archive/Add-ons/Extension_Packaging +--- +<p>확장기능은 <a href="ko/Bundles">설치 가능한 번들</a>의 한 형태입니다. 확장기능은 사용자가 직접 내려받아 설치할 수 있으며 응용프로그램에 미리 포함되어 있거나 외부 프로그램에 의해서 제공되기도 합니다. 확장기능은 chrome, components 등의 <a href="ko/Bundles">디렉토리 구조</a>로 되어 있는데 개별 구조는 XUL 프로그램으로 확장됩니다.</p> +<p>모든 확장기능은 자신의 메타정보를 담은 <a href="ko/Install.rdf">install.rdf</a> 파일을 제공해야 하는데 파일은 유일한 ID, 버전, 저자, 호환성 정보를 담고 있습니다.</p> +<p>확장기능 파일과 install.rdf가 준비된 다음 확장 기능의 설치를 위한 몇가지 준비 단계가 있습니다. 사용자 설치가능한 확장기능 디렉토리의 ZIP 포맷인 <a href="ko/XPI">XPI</a>(xpinstall) 파일, 사용자 응용프로그램이나 프로필 디렉토리에 확장기능을 직접 압축 풀기, 윈도우즈 레즈스트리에 확장기능을 등록의 단계입니다.</p> +<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI_.EB.A7.8C.EB.93.A4.EA.B8.B0">확장기능 XPI 만들기</h3> +<p><a href="ko/XPI">XPI</a>(XPInstall) 파일은 단순히 <a href="ko/Install.rdf">install.rdf</a> 파일이 ZIP 파일의 최상단에 위치하는 확장기능 파일을 담은 ZIP 파일입니다. 사용자는 XPI 파일을 웹사이트나 로컬 파일에서 파일을 열거나 확장기능 관리창에 끌어 옮김으로서 내려 받거나 설치할 수 있습니다.</p> +<p>파이어폭스 XPI 파일에 대한 MIME 형은 <i>application/x-xpinstall</i>로 인식이 됩니다. 대부분의 HTTP 서버가 .xpi 확장기능에 대한 MIME 타입을 반환하는 설정을 기본으로 하지 않기 때문에 어쩌면 HTTP 서버를 재설정해야 할 수도 있습니다. 아파치 HTTP 서버에서는 아래의 문장을 설정 파일이나 .htaccess 파일에 삽입해야 합니다.</p> +<pre class="eval">AddType application/x-xpinstall .xpi +</pre> +<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.ED.8C.8C.EC.9D.BC_.EC.A7.81.EC.A0.91_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.ED.8C.8C.EC.9D.BC_.EC.A7.81.EC.A0.91_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">확장기능 파일 직접 설치하기</h3> +<p>만약 응용 프로그램의 위치를 알고 있다면 (예를 들어 응용 프로그램의 설치과정에 확장기능을 설치하게 할려면) 직접 <appdir>/extensions/<extensionID>에 확장 기능 파일을 직접 설치할 수 있습니다. 확장기능은 다음번 응용 프로그램이 실행될 때 확장기능 관리자에 의해 자동으로 인식됩니다.</p> +<p>이 방법을 사용할 때 디렉토리와 확장기능 파일에 대한 파일 시스템의 권한이 적절하게 설정되어 있는지 확인해야 합니다. 확장기능 관리자는 확장기능의 권한이 적합한지 아닌지 판단하는 기능이 없습니다.</p> +<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.9C.84.EC.B9.98.EB.A5.BC_.EC.9C.88.EB.8F.84.EC.9A.B0_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.9C.84.EC.B9.98.EB.A5.BC_.EC.9C.88.EB.8F.84.EC.9A.B0_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">확장기능 위치를 윈도우 레지스트리에 등록하기</h3> +<p>(자바 런타임 따위의) 외부 설치자가 응용프로그램은 아직 설치되지 않은 상황에 통합적인 위치에 확장기능을 설치하고자 할 수 있습니다. 윈도우즈 <a href="ko/Adding_Extensions_using_the_Windows_Registry">레지스트리 사용</a>을 통해 처리할 수 있습니다.</p> +<h3 id=".EC.97.AC.EB.9F.AC_.ED.95.AD.EB.AA.A9.EC.9D.84_.ED.8F.AC.ED.95.A8.ED.95.9C_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI" name=".EC.97.AC.EB.9F.AC_.ED.95.AD.EB.AA.A9.EC.9D.84_.ED.8F.AC.ED.95.A8.ED.95.9C_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI">여러 항목을 포함한 확장기능 XPI</h3> +<p>하나의 XPI 파일로 여러개의 확장과 테마를 설치하길 원할 때도 있습니다. 특별한 종류의 <a href="ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>라고 불리우는 특별한 형태의 XPI는 이런 패키지를 만들 수 있습니다. (Firefox 1.5/XULRunner 1.8 이상이 필요합니다.)</p> +<h3 id="Official_References_for_Toolkit_API" name="Official_References_for_Toolkit_API">Official References for <a href="ko/Toolkit_API">Toolkit API</a></h3> +<p> + </p><ul> + <li><a href="/ko/Bundles" title="ko/Bundles">설치 가능한 번들</a>: 설치 가능한 번들(확장 기능, 테마, XULRunner 어플리케이션 등)에 대하여 기술하고 있습니다.</li> + <li><a href="/ko/Extension_Packaging" title="ko/Extension_Packaging">확장기능 포장</a>: 확장 기능을 포장하는 방법에 대한 정보를 제공합니다.</li> + <li><a href="/ko/Theme_Packaging" title="ko/Theme_Packaging">테마 포장</a>: 테마 기능을 포장하는 방법에 대한 정보를 제공합니다.</li> + <li><a href="/Ko/Multiple_Item_Packaging" title="Ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>: 여러 항목들이 포함되는 XPI 를 포장하는 방법에 대한 정보를 제공합니다.</li> + <li><a href="/ko/XUL_Application_Packaging" title="ko/XUL_Application_Packaging">XUL 응용프로그램 포장</a>: XULRunner 응용프로그램을 포장하는 방법에 대한 정보를 제공합니다.</li> + <li><a href="/ko/Chrome_Registration" title="ko/Chrome_Registration">Chrome 등록</a>: Chrome의 등록하는 방법에 대한 정보를 제공합니다.</li> + </ul> diff --git a/files/ko/mozilla/add-ons/index.html b/files/ko/mozilla/add-ons/index.html new file mode 100644 index 0000000000..134b1f7e1a --- /dev/null +++ b/files/ko/mozilla/add-ons/index.html @@ -0,0 +1,116 @@ +--- +title: 부가 기능들 +slug: Mozilla/Add-ons +tags: + - 모질라 + - 부가기능 + - 애드온 + - 확장 + - 확장기능 +translation_of: Mozilla/Add-ons +--- +<div>{{AddonSidebar}}</div> + +<p><span class="seoSummary">애드온들은 개발자들에게 Firefox의 기능을 변형하거나 확장하게 해 줍니다.</span> 그것들은 표준 웹 기술인 JavaScript, HTML, CSS 또는 몇가지 전용 JavaScript API들을 사용하여 만들어집니다. 이러한 것들 사이에서, 애드온은 다음과 같은 일들을 할 수 있습니다 :</p> + +<ul> + <li>특정 웹사이트의 내용 또는 모양새를 바꿉니다.</li> + <li>Firefox의 사용자 인터페이스를 변형합니다.</li> + <li>Firefox에 새로운 기능을 추가합니다.</li> +</ul> + +<h2 id="애드온_개발하기">애드온 개발하기</h2> + +<p>Firefox 애드온을 개발하는데 있어서는 현재 몇가지 툴셋들이 있습니다, 그러나 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">웹확장기능(WebExtensions)</a> 이 2017년 말에 표준으로 선정될 것입니다. 나머지 툴들은 같은기간안에 <a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">지원이 중단(deprecated) </a>될 것으로 예상 됩니다.</p> + +<p>이곳에서 당신은 애드온을 개발하는데 이용 가능한 옵션에 대한 정보를 찾을 수 있을 것입니다, 이로써 당신은 지금 당장과 미래에 무엇이 당신에게 가장 좋을지 결정 할 수 있을 것입니다.</p> + +<h3 id="새_애드온_만들기">새 애드온 만들기</h3> + +<p>만일 당신이 새로운 애드온을 설계한다면, 우리는 아래의 두가지 방법들 중 하나를 고를 것을 추천드립니다. 웹확장기능들의 번역이 완전해질 때까지 각각의 방법들에 대한 찬반 여론들이 있을 것입니다. 아래의 선택사항들을 읽고 당신에게 알맞는 도구를 결정하세요.</p> + +<ul class="card-grid"> + <li style="position: relative; max-width: 400px;"> + <div style="margin-bottom: 70px;"> + <h4 id="웹확장기능(WebExtensions)"><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">웹확장기능(WebExtensions)</a></h4> + + <p>웹확장기능(WebExtensions)은 Firefox 애드온의 미래 입니다.</p> + + <p>이것은 크로스브라우져(cross-browser)간에 사용될 수 있도록 디자인 되었습니다.<br> + FireFox에서 이용할 수 있도록 만들어진 웹확장기능(WebExtensions)은 대부분 약간의 수정을 거치면 Chrome, Edge, 그리고 Opera에서 동작합니다. 이것은 또한 멀티프로세스 Firefox에서도 완전하게 작동합니다.</p> + + <p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">현재 API가 지원하는 Firefox 와 다른 브라우져를 확인하세요.</a> 우리는 개발자가 원하는 API들을 지속적으로 디자인하고 구현할 것입니다.</p> + + <p>대부분의 웹확장기능(WebExtensions) API는 안드로이드용 Firefox에서도 사용 가능합니다.</p> + </div> + <a class="card-grid-button" href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">더알아보기</a></li> + <li style="position: relative; max-width: 400px;"> + <div style="margin-bottom: 70px;"> + <h4 id="애드온_SDK"><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">애드온 SDK</a></h4> + + <p>애드온 SDK는 Firefox 애드온 개발을 위한 API를 제공하며, 이것은 개발, 테스트, 패키징을 위한 도구입니다.</p> + + <p>당신은 <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Mobile_development">안드로이드용 Firefox를 위한 애드온 SDK 확장기능</a>도 사용할 수 있습니다.</p> + + <p>우리는 당신이 <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">high-level API</a>들만을 사용할 것을 권장합니다. 이것은 당신이 웹확장기능(WebExtensions)으로 마이그레이션 하는 여행 길을 더 쉽게 해 줄 것입니다.</p> + </div> + <a class="card-grid-button" href="https://developer.mozilla.org/en-US/Add-ons/SDK">더알아보기</a></li> +</ul> + +<h3 id="기존_애드온(Add-on)을_이전하기">기존 애드온(Add-on)을 이전하기</h3> + +<p>Firefox 내년에 몇가지 변화를 겪게 됩니다. 유저들에게는 높은 브라우징 신뢰성을, 개발자들에게는 편리한 애드온 개발경험을 제공합니다. 당신이 개발한 애드온은 호환성을 유지하기위해 몇 가지 수정이 필요할 수 있습니다. 하지만 수정이 끝난 이후에는 당신의 애드온이 좀 더 높은 호환성, 안전성을 가지게 될 것입니다.</p> + +<p>우리는 당신이 애드온을 이전할 때 필요한 도움을 제공하기 위해서 <a href="https://wiki.mozilla.org/Add-ons/developer/communication">개발에 필요한 자료, 권고 사항, 운영 시간, 그리고 기타</a> 등의 정보를 제공합니다.</p> + +<p>애드온 이전을 시작하려면 <a href="https://compatibility-lookup.services.mozilla.com/">애드온 호환성 검사</a>를 이용해서 어떤 문제가 있는지 알아보세요.</p> + +<h2 id="애드온_출시하기">애드온 출시하기</h2> + +<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, 그러니까 일반적으로 "AMO"라 불리는 곳은, 개발자로 하여금 부가기능을 업로드하고, 사용자들이 이 부가기능을 찾아 설치할 수 있도록 만들어진 모질라재단의 공식 웹사이트입니다. AMO에 여러분이 제작한 부가기능을 업로드하여, 사용자와 제작자의 모임에 참가할 수 있게 되며, 여러분의 부가기능을 사용하는 사용자를 찾을 수 있습니다.</p> + +<p>AMO에 여러분의 부가기능을 반드시 업로드해야 하는 것은 아니지만, Firefox 40 버전부터 여러분의 코드를 반드시 모질라 재단이나 사용자에 의해 인증받지 않으면 부가기능을 설치할 수 없게 됩니다.</p> + +<p>여러분의 부가기능을 업로드하는 과정에 대해 자세히 알아보고 싶으시다면, <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution">부가기능을 인증받고 배포하기</a> 문서를 참고하세요.</p> + +<h2 id="애드온의_다양한_형태">애드온의 다양한 형태</h2> + +<p>Generally, when people speak of add-ons they're referring to extensions, but there are a few other add-on types that allow users to customize Firefox. Those add-ons include:</p> + +<ul> + <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Lightweight themes</a> are a simple way to provide limited customization for Firefox.</li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/Firefox_for_Android">Mobile add-ons</a> are add-ons for Firefox for Android. Note, though, that we intend to deprecate some of the technology underlying these APIs. In the future, WebExtensions will be fully supported on Firefox for Android.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> add new search engines to the browser's search bar.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">User dictionaries</a> are add-ons that let you spell-check in different languages.</li> + <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Language packs</a> are add-ons that let you have more languages available for the user interface of Firefox.</li> +</ul> + +<hr> +<h2 id="연락하세요!">연락하세요!</h2> + +<p>아래에 소개된 링크를 통해서 자문을 구하거나, 피드백을 보내고, 애드온에 관련된 최신 소식을 접할 수 있습니다. </p> + +<h3 id="Add-ons_포럼">Add-ons 포럼</h3> + +<p>Use the <a href="https://discourse.mozilla-community.org/c/add-ons">Add-ons Discourse forum</a> to discuss all aspects of add-on development and to get help.</p> + +<h3 id="메일링_목록">메일링 목록</h3> + +<p>Use the <strong>dev-addons</strong> list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:</p> + +<ul> + <li><a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons list info</a></li> + <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">dev-addons archives</a></li> +</ul> + +<h3 id="IRC">IRC</h3> + +<p>만약 당신이 IRC 애용자라면, 다음 방법들로 연락할 수도 있습니다.</p> + +<ul> + <li><a href="irc://irc.mozilla.org/addons">#addons</a> (애드온 생태계에 대한 대화가 주를 이룸)</li> + <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (애드온 개발에 대한 대화가 주를 이룸)</li> + <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (웹 확장프로그램에 대한 대화가 주를 이룸)</li> +</ul> + +<p> </p> diff --git a/files/ko/mozilla/add-ons/plugins/index.html b/files/ko/mozilla/add-ons/plugins/index.html new file mode 100644 index 0000000000..77ab95c032 --- /dev/null +++ b/files/ko/mozilla/add-ons/plugins/index.html @@ -0,0 +1,43 @@ +--- +title: Plugins +slug: Mozilla/Add-ons/Plugins +tags: + - Plugins +translation_of: Archive/Plugins +--- +<div> +<p><b>플러그인(Plugins or plug-ins)</b> 은 어떤 특정한 기능을 제공하기 위해 웹브라우저와 상호작용하는 작은 소프트웨어입니다. 일반적인 예로는 특정한 그래픽 형식을 보여주기 위한 플러그인이나 멀티미디어 파일을 재생하기 위한 플러그인을 들 수 있습니다. 플러그인은 현재있는 기능을 수정하거나 덧붙이는 <a href="ko/Extensions">확장기능</a>과는 조금 다릅니다. +</p> +</div> +<table class="topicpage-table"> +<tbody><tr><td> +<h4 id=".EB.AC.B8.EC.84.9C" name=".EB.AC.B8.EC.84.9C"> <a>문서</a> </h4> +<dl><dt> <a href="ko/Gecko_Plugin_API_Reference">Gecko 플러그인 API 레퍼런스</a> +</dt><dd> <small>이 레퍼런스는 Gecko 플러그인을 만들기 위한 응용프로그램 프로그래밍 인터페이스에 대해 기술하고 있으며, 이러한 인터페이스를 사용하는 방법에 대한 정보를 제공합니다.</small> +</dd></dl> +<dl><dt> <a href="ko/Using_XPInstall_to_Install_Plugins">XPInstall을 이용한 플러그인 설치</a> +</dt><dd> <small><a href="ko/XPInstall">XPInstall</a>은 별도의 설치프로그램을 실행하기 위해 사용자가 브라우저를 종료하지 않아도 플러그인을 설치할 수 있도록 사용자에게 한결 나은 방법을 제공합니다.</small> +</dd></dl> +<dl><dt> <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">플러그인 검사</a> +</dt><dd> <small>"Since there are clearly times when it makes sense to use a plug-in, the question arises of how to deal with those who don’t have the required plug-in installed."</small> +</dd></dl> +<dl><dt> <a href="ko/Scripting_Plugins/Macromedia_Flash">플러그인을 스크립트로 제어하기: Macromedia Flash</a> +</dt><dd> <small>이 문서에서는 JavaScript가 Flash 플러그인 내부에 있는 메소드에 접근하기 위해 어떻게 사용되었는지에 대해 설명하고, 마찬가지로 Flash 애니메이션에서 JavaScript를 호출하기 위한 FSCommands 라는 기능에 대해서도 설명합니다.</small> +</dd></dl> +<p><span class="alllinks"><a>모두 보기...</a></span> +</p> +</td> +<td> +<h4 id=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0" name=".EC.BB.A4.EB.AE.A4.EB.8B.88.ED.8B.B0"> 커뮤니티 </h4> +<ul><li> Mozilla 포럼 보기... +</li></ul> +<p>{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }} +</p> +<h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C" name=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C"> 관련 주제 </h4> +<dl><dd> <a href="ko/Gecko">Gecko</a> +</dd></dl> +</td></tr></tbody></table> +<p><span class="comment">Categories</span> +</p><p><span class="comment">Interwiki Language Links</span> +</p><p><br> +</p>{{ languages( { "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins" } ) }} diff --git a/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html b/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html new file mode 100644 index 0000000000..2784594e4c --- /dev/null +++ b/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html @@ -0,0 +1,150 @@ +--- +title: Macromedia Flash +slug: Mozilla/Add-ons/Plugins/Macromedia_Flash +tags: + - Plugins +translation_of: Archive/Plugins/Scripting_Plugins_Adobe_Flash +--- +<p>스크립트로 제어할 수 말은 <a href="ko/JavaScript">JavaScript</a>와 플러그인이 상호 작용할 수 있다는 말입니다. 특히 Macromedia® Flash™ 플러그인은 JavaScript에서 플러그인에 접근할 수 있는 기능을 제공하고 있으며, 플러그인 안에서 JavaScript 메소드에 접근할 수도 있습니다. 이 문서는 Flash 플러그인이 노출하고 있는 메소드에 JavaScript로 접근하는 방법에 대해서, 그리고 Flash 애니메이션에서 JavaScript 함수에 접근하기 위해 FSCommand라는 기능을 사용하는 방법에 대해서 설명하고 있습니다. 이 문서는 <a href="ko/Gecko">Gecko</a>™ 기반 웹브라우저에서 Flash 플러그인을 사용할 때의 팁에 초점을 두고 있습니다.</p> + +<h3 id=".EC.98.AC.EB.B0.94.EB.A5.B8_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8.28.EA.B3.BC_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.29.EB.A5.BC_.EC.95.8C.EC.95.84.EB.82.B4.EA.B8.B0" name=".EC.98.AC.EB.B0.94.EB.A5.B8_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8.28.EA.B3.BC_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.29.EB.A5.BC_.EC.95.8C.EC.95.84.EB.82.B4.EA.B8.B0">올바른 Flash 플러그인(과 브라우저)를 알아내기</h3> + +<p>Macromedia Flash는 Flash 6r49 버전부터 Netscape Gecko 브라우저에서 스크립트로 제어할 수 있는 기능을 제공합니다. Flash 5 같이 6r49 이전 버전은 Netscape Gecko 브라우저에서 스크립트로 제어할 수 없습니다. 그러므로 클라이언트에 설치된 Flash 버전을 알아내는 일은 Flash를 스크립트로 제어함에 있어서 아주 중요한 일입니다. Mac OS X에서는 피해야 할 문제점이 하나 더 있습니다. Mach-O 바이너리 형식을 사용하는 <a class="external" href="http://mozilla.org/projects/camino/">Camino</a> (이전에는 Chimera였음) 브라우저, <a class="external" href="http://www.mozilla.org/">Mozilla</a> 브라우저 최신 버전, 앞으로 나올 Netscape 브라우저들은 Flash 플러그인을 스크립트로 제어하는 기능을 사용할 수 없습니다. Macromedia가 Flash 플러그인을 수정하기 전까지는 Mac OS X에서 Gecko 기반 브라우저들은 스크립트로 Flash를 제어할 수 없습니다. 다음에 나오는 예제는 실제로 Flash 버전을 알아내는 휴리스틱(heuristic)한 방법을 보여줍니다.</p> + +<h4 id=".EC.98.88.EC.A0.9C_1_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8_.EB.B2.84.EC.A0.84.EC.9D.84_.EA.B2.80.EC.82.AC.ED.95.98.EA.B8.B0" name=".EC.98.88.EC.A0.9C_1:_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8_.EB.B2.84.EC.A0.84.EC.9D.84_.EA.B2.80.EC.82.AC.ED.95.98.EA.B8.B0">예제 1: Flash 플러그인 버전을 검사하기</h4> + +<p>아래의 JavaScript는 Flash 버전을 알아내고, Netscape Gecko에서 스크립트로 제어 가능한지 알아내는 기능을 합니다.</p> + +<pre>can we have javascript in a wiki page? +<script type="text/javascript">identifyFlash();</script> +</pre> + +<p>일반적으로, 어느 버전 플러그인이 설치돼있는지 알아내는 JavaScript 코드는 navigator 개체(object)안의 mimeTypes 배열을 찾아봅니다. 모든 플러그인은 보통 플러그인 이름과 버전을 포함하고 있는 description 문자열을 제공합니다. Flash 플러그인의 descripton 문자열은 의미있는 정보를 뽑아낼 수 있는 표준적인 버전 번호 명명법으로 기록되어 있습니다. 예를 들어 현재 Flash 플러그인 버전은 Flash 6 r79입니다. description 문자열은 이 버전을 담고 있습니다. 이외에도 OS X에서 Mach-O 바이너리를 사용하는 브라우저에서 스크립트로 제어할 수 없는 Flash 버전은 골라낼 수 있는 방법이 필요합니다. 다행히 Netscape Gecko 기반 Mach-O 브라우저는 user-agent 문자열에 그 정보를 보여줍니다. Flash 플러그인 버전을 알아내는 알고리즘적 접근 방법은 다음과 같을 것입니다.</p> + +<pre>var plugin = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin; +var description = plugin.description; +// 1.description 문자열을 구성요소 별로 나눈다 + +var versionArray = description.match(/[\d.]+/g); + +// 2. Flash 버전이 6r.49보다 큰지 결정한다 +// 3. 그렇다면 Windows와 Linux에서 스크립트로 제어 가능한 버전이다 +// 4. 브라우저가 Mach-O 바이너리를 사용하는지 검사한다 +// 5. 그렇다면 플러그인 버전이 12보다 큰지 검사한다 +// 버전 12는 Mach-O 브라우저에서도 Flash 플러그인을 스크립트로 제어할 수 있게 +// 수정될 것이라 예상되는 Flash 버전이다 + +var flashVersionOSXScriptable = 12; +if(navigator.userAgent.indexOf("Mach-O")!=-1) +{ + if(flashversion < flashVersionOSXScriptable) + // Flash 버전이 12보다 작으므로 OS X에서 스크립트로 제어할 수 없다 +} +// 6. 에러 처리(Flash가 설치되지 않은 경우 등) +</pre> + +<p><strong>예제 1</strong>에서는 JavaScript 문자열의 <a class="external" href="http://developer.netscape.com/docs/manuals/js/client/jsref/regexp.htm#1193136">RegExp</a> (정규 표현식) 개체를 사용합니다. description 문자열은 <a class="external" href="http://developer.netscape.com/docs/manuals/js/client/jsref/string.htm#1205239">match</a> 메소드 호출로 인해 구성요소별로 나누어져 배열에 들어갑니다. 여기 사용된 정규 표현식은 문자열이 Flash Major rMinor 같은 식으로 구성되어 있을 것이라고 가정합니다. Major는 "5"나 "6" 같은 메이저 버전 번호이고, Minor는 마이너 버전 번호입니다. 또 <strong>예제 1</strong>에서는 flashVersionOSXScriptable 상수를 만들어서 12를 할당하는데, 이것은 OS X용 Mach-O 브라우저에서 Flash를 스크립트로 제어할 수 있도록 수정된 Flash 버전이 12일 것이라고 임의로 정한 것입니다. 12 정도면 충분히 큰 버전 번호라고 생각됩니다(현재 버전은 6r.79입니다). Mac OS X에 있는 문제점이 언제 수정될 지 정보를 얻게 된다면 flashVersionOSXScriptable 상수를 좀 더 정확한 값으로 바꿀 수 있을 것입니다. 이 예제를 실제로 구현한 코드는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/flashversion.js.txt">flashversion.js</a> 파일을 보시면 됩니다.</p> + +<h3 id="HTML.EC.9D.84_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name="HTML.EC.9D.84_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">HTML을 제대로 사용하기</h3> + +<p>Netscape Gecko 브라우저에서 object 요소나 embed 요소를 사용하면 플러그인을 불러낼 수 있습니다. object 요소는 W3C HTML 4 표준에 포함된 반면 embed 요소는 사용하지 않기를 권장하는 요소입니다. 플러그인을 불러올 때 올바른 마크업 사용하기(Using the Right Markup to Invoke Plugins)에서 관련된 논의를 볼 수 있습니다. 그러나 FSCommand를 이용해서 HTML 페이지에 포함된 JavaScript 함수를 실행하려면 embed 요소를 써야 합니다.</p> + +<h3 id="JavaScript.EC.97.90.EC.84.9C_Flash.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name="JavaScript.EC.97.90.EC.84.9C_Flash.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">JavaScript에서 Flash에 접근하기</h3> + +<p>아래에 있는 간단한 예제는 HTML 텍스트 상자에 입력한 내용을 Flash 애니메이션(아래의 회색 텍스트 상자)으로 전달하는 방법을 보여줍니다.</p> + +<h4 id=".EC.98.88.EC.A0.9C_2_JavaScript_to_Flash_Communication" name=".EC.98.88.EC.A0.9C_2:_JavaScript_to_Flash_Communication">예제 2: JavaScript to Flash Communication</h4> + +<p><strong>참고:</strong> 사용자가 컴퓨터 한 대에 Mozilla 기반 브라우저를 여러 개 설치했다면, JavaScript에서 Flash로의 통신 방법은 버전 8보다 이전에 나온 Flash Player에서는 동작하지 않을 수도 있습니다. (see {{ Bug(284057) }} and {{ Bug(233533) }})</p> + +<p>아래에 있는 HTML 텍스트 상자에 아무 텍스트나 넣은 다음 텍스트 상자 밖을 마우스로 클릭하거나 엔터키를 누르면 입력한 텍스트가 Flash로 전달됩니다.</p> + +<pre>The example is missing. +</pre> + +<p><strong>예제 2</strong>에서는 Macromedia Flash에 미리 정의된 <a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html">SetVariable</a> 메소드를 사용했습니다. 일반적으로 Netscape Gecko 브라우저에서 Macromedia에서 Flash에 미리 정의해 놓은 메소드를 호출하려면,</p> + +<ul> + <li>DOM 메소드를 사용해서, Flash 플러그인을 생성하는 HTML 요소의 핸들을 얻으십시오. 여기서 핸들이란 embed 요소의 name 속성이나 object 요소의 ID 속성을 의미합니다.</li> + <li>HTML 요소의 핸들을 실제 Flash 플러그인에 대한 핸들이라고 생각하여 공개된 메소드를 호출하십시오. 즉 다음의 코드에서 처럼 사용하면 됩니다.</li> +</ul> + +<pre><object id="myFlash" ..... > +<param name="movie" value="somefile.swf" /> + +.... + +var myFlash = document.getElementById("myFlash").SetVariable("myVar", sendText); +</pre> + +<p><br> + <strong>예제 2</strong>가 어떻게 만들어졌는지 보여주는 더 확장된 코드는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/document-write.html.txt">이 파일</a>에서 볼 수 있습니다.</p> + +<h3 id="FSCommand_Flash.EC.97.90.EC.84.9C_JavaScript.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name="FSCommand:_Flash.EC.97.90.EC.84.9C_JavaScript.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">FSCommand: Flash에서 JavaScript에 접근하기</h3> + +<p><strong>참고:</strong> 사용자가 컴퓨터 한 대에 Mozilla 기반 브라우저를 여러 개 설치했다면, 버전 8보다 이전에 나온 Flash Player에서는 FSCommand가 동작하지 않을 수도 있습니다. (see {{ Bug(284057) }} and {{ Bug(233533) }})</p> + +<p><strong>예제 2</strong>에서, 플러그인을 생성한 HTML(object 요소 또는 embed 요소)의 핸들을 JavaScript 함수에서 일단 얻었습니다. 그 후에 핸들을 이용해서 <a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/">Flash 플러그인에서 공개된 메소드</a>를 호출했습니다. FSCommand를 이용하면 Macrodedia ActionScript 언어에서 Flash 애니메이션을 포함하는 환경(HTML 페이지 등)에 콜백을 보낼 수 있습니다. 다음의 예제에서 두 가지 통신 방법이 실제로 동작하는 모습을 볼 수 있습니다.</p> + +<h4 id=".EC.98.88.EC.A0.9C_3_JavaScript.EC.97.90.EC.84.9C_Flash.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95.EA.B3.BC_FSCommand_--_Flash.EC.97.90.EC.84.9C_JavaScript.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95" name=".EC.98.88.EC.A0.9C_3:_JavaScript.EC.97.90.EC.84.9C_Flash.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95.EA.B3.BC_FSCommand_--_Flash.EC.97.90.EC.84.9C_JavaScript.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95">예제 3: JavaScript에서 Flash로 통신 방법과 FSCommand -- Flash에서 JavaScript로 통신 방법</h4> + +<pre>The example is missing. +</pre> + +<p><strong>예제 3</strong>에서는 HTML 버튼을 클릭하면 Flash 애니메이션에 있는 공이 움직입니다. 이것은 JavaScript에서 Flash로의 통신을 보여주는 것입니다. HTML 버튼을 클릭하면 JavaScript 이벤트가 발생하고 그 이벤트가 Flash 애니메이션을 움직이게 합니다. 더 아래쪽에서, 색이 칠해진 탭을 클릭하면 HTML 페이지의 전체 색깔이 바뀝니다. 이것은 반대 방향으로의 통신 즉, Flash 애니메이션이 자신을 포함하고 있는 HTML 페이지에 뭔가 영향을 준다는 것을 보여줍니다.</p> + +<p><strong>예제 3</strong>에서 FSCommand의 사용법을 볼 수 있습니다. Netscape Gecko 브라우저에서 Flash 애니메이션을 HTML 페이지에 포함시키고 FSCommand를 사용하려고 한다면, 반드시 embed 요소를 사용해야만 합니다. IE도 지원하려면 object 요소 안에 embed 요소를 포함시킬 수 있습니다. 앞으로 나올 Flash 플러그인은 Netscape Gecko 브라우저에서도 object 요소와 함께 FSCommand를 사용할 수 있게 될 수도 있습니다. 이 문제는 Mozilla 프로젝트의 {{bug(184722) }}에 관리중입니다.</p> + +<p>Flash 애니메이션 안에서 색깔을 클릭하면 전체 페이지의 배경색이 토글됩니다. 클릭을 하면 Flash를 포함하는 외부 환경(즉 HTML 페이지)에 콜백을 보내게 되고, 콜백을 처리할 JavaScript 메소드를 찾게 됩니다. Flash 애니메이션의 ActionScript 함수를 호출함으로써 콜백을 보내는 것입니다. 이 콜백을 처리할 JavaScript 함수 이름은 Flash 플러그인이 찾을 수 있는 특별한 이름을 가져야 합니다. embed요소의 이름에 밑줄("_")과 "DoFSCommand"라는 문자열을 붙인 함수 이름이 바로 그것입니다. <strong>예제 3</strong>에서 사용된 기법을 보여주는 간단한 코드가 아래에 있습니다.</p> + +<pre><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" +codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" +id="myFlash" width="250" height="150" VIEWASTEXT> + + <param name="movie" value="js2flash.swf" /> + <param name="quality" value="high"></param> + + <embed src="js2flash.swf" width="250" height="150" swLiveConnect="true" + quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" + type="application/x-shockwave-flash" name="myFlash"> + </embed> + +</object> + ..... + +function myFlash_DoFSCommand(command, args) +{ + // Flash 애니메이션에 여러분이 만들어놓은 모든 콜백을 처리합니다 + // Flash 플러그인이 command와 args에 값을 전달해 줄 것입니다. + // Flash 애니메이션이 보내는 모든 정보를 처리하는 함수가 바로 이 함수입니다 + // FSCommand만 있으면 ActionScript가 JavaScript와 통신할 수 있습니다! +} +</pre> + +<p>위의 코드에서, Flash에서 보낸 것을 처리하는 JavaScript 함수는 embed 요소의 name 속성에 "_DoFSCommand" 문자열을 덧붙여서 만든 이름을 가지고 있습니다. 이 예제의 전체 소스는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/flash-to-js.html.txt">flash-to-js.html</a>에서 볼 수 있습니다. <a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/">Macromedia ActionScript 사전</a>을 보면 Flash 애니메이션 코드에서 FSCommand를 사용할 때 참고할 만한 내용이 있습니다.</p> + +<h3 id="Additional_References" name="Additional_References">Additional References</h3> + +<h4 id="Macromedia_Flash_Developer_Documentation" name="Macromedia_Flash_Developer_Documentation">Macromedia Flash Developer Documentation</h4> + +<ul> + <li><a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/">Scripting The Flash Player Plugin</a></li> + <li><a class="external" href="http://www.macromedia.com/support/flash/ts/documents/java_script_comm.htm">Communication Between JavaScript and Macromedia Flash</a></li> + <li><a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actions/fscommand.html">FSCommands (Definition from the ActionScript Dictonary)</a></li> + <li><a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/">ActionScript Dictionary</a></li> +</ul> + +<h4 id="MDC_Resources" name="MDC_Resources">MDC Resources</h4> + +<ul> + <li><a href="ko/Using_the_Right_Markup_to_Invoke_Plugins">플러그인을 불러올 때 올바른 마크업 사용하기</a></li> + <li><a href="ko/Plugins">Plugin Central</a></li> +</ul> + +<h4 id="Notable_Bugs" name="Notable_Bugs">Notable Bugs</h4> + +<ul> + <li>{{bug(184722) }}</li> + <li>{{bug(180378) }}</li> + <li>{{bug(203861)}}</li> +</ul> diff --git a/files/ko/mozilla/add-ons/plugins/reference/index.html b/files/ko/mozilla/add-ons/plugins/reference/index.html new file mode 100644 index 0000000000..fcb2ba7232 --- /dev/null +++ b/files/ko/mozilla/add-ons/plugins/reference/index.html @@ -0,0 +1,16 @@ +--- +title: NPAPI plugin reference +slug: Mozilla/Add-ons/Plugins/Reference +tags: + - Deprecated + - Landing + - NPAPI + - NeedsTranslation + - Plugins + - Reference + - TopicStub +translation_of: Archive/Plugins/Reference +--- +<p>{{deprecated_header}}</p> +<p>The articles below describe each of the APIs related to NPAPI plugins.</p> +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html b/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html new file mode 100644 index 0000000000..ca0c233725 --- /dev/null +++ b/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html @@ -0,0 +1,38 @@ +--- +title: NP GetMIMEDescription +slug: Mozilla/Add-ons/Plugins/Reference/NP_GetMIMEDescription +translation_of: Archive/Plugins/Reference/NP_GetMIMEDescription +--- +<p>NP_GetMIMEDescription 플러그인이 지원하는 MIME Type 목록을 리턴합니다. Unix (Linux) 와 MacOS 에서 동작합니다. Windows에서는 지원하는 mimetype을 dll 리소스 파일에 정의하여야합니다.</p> +<p>각각의 MIME type에 대한 서술은 세미콜론(;)으로 구분되어야 합니다.<br> + 각각의 Mime type에 대한 서술은 Mime type, 확장목록 그리고 간략한 설명을 포함합니다.</p> +<h3 id="하나의_MIME_type_를_사용한_경우">하나의 MIME type 를 사용한 경우</h3> +<pre>// example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp +#define MIME_TYPE_DESCRIPTION "application/basic-plugin:bsp:Basic Example Plug-in for Mozilla" +const char* NP_GetMIMEDescription(void) +{ + return(MIME_TYPES_DESCRIPTION); +}</pre> +<h3 id="둘의_MIME_type_를_사용한_경우">둘의 MIME type 를 사용한 경우</h3> +<pre>const char* NP_GetMIMEDescription(void) +{ + return "application/basic-example-plugin:xmp1:Example 1;application/basic-example2-plugin:xmp2, xm2p:Example 2"; +}</pre> +<h3 id="Gnome_Integration">Gnome Integration</h3> +<p>GNOME VFS (gnome-vfs-2.0)를 사용하는 경우라면, 아래 함수를 이용하여 MIME type description 을 얻을수 있습니다.</p> +<pre>#include <libgnomevfs/gnome-vfs-mime-handlers.h> +#include <libgnomevfs/gnome-vfs-mime-info.h> +#include <libgnomevfs/gnome-vfs-utils.h> + +// const char* gnome_vfs_mime_get_description (const char *mime_type); +const char* desc = gnome_vfs_mime_get_description ("audio/ogg");</pre> +<p>If you use GNOME GIO (gio-2.0), you can get the MIME type description too.</p> +<pre>#include <gio/gio.h> +const char* desc = g_content_type_get_description("audio/ogg");</pre> +<h3 id="JavaScript">JavaScript</h3> +<p>아래 코드를 이용하여 웹 페이지 내에서, MIME Type에 대한 정보를 얻을 수 있습니다.</p> +<pre>var mimetype = navigator.mimeTypes['application/basic-example-plugin']; +if (mimetype) { + alert(mimetype.type + ':' + mimetype.suffixes + ':' + mimetype.description); +} +</pre> diff --git a/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html b/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html new file mode 100644 index 0000000000..c60a613113 --- /dev/null +++ b/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html @@ -0,0 +1,76 @@ +--- +title: NPN_PostURLNotify +slug: Mozilla/Add-ons/Plugins/Reference/NPN_PostURLNotify +translation_of: Archive/Plugins/Reference/NPN_PostURLNotify +--- +<p> « <a href="https://developer.mozilla.org/ko/docs/Gecko_Plugin_API_Reference">Gecko Plugin API Reference</a> « <a href="https://developer.mozilla.org/ko/docs/Gecko_Plugin_API_Reference/Plug-in_Side_Plug-in_API">Plug-in Side Plug-in API</a> + + +</p><h2 id="Summary" name="Summary">개요</h2> + +<p>지정한 URL로 POST 호출하고, 결과 알림을 받는다.</p> + +<h2 id="Syntax" name="Syntax">문법</h2> + +<pre class="syntaxbox">#include <npapi.h> + +NPError NPN_PostURLNotify(NPP instance, + const char* url, + const char* target, + uint32 len, + const char* buf, + NPBool file, + void* notifyData); +</pre> + +<h3 id="Parameters" name="Parameters">파라메터</h3> + +<p>함수는 다음과 같은 파라메터를 입력받는다:</p> + +<dl> + <dt>instance</dt> + <dd>현재 플러그인 인스턴스, specified by the plug-in.</dd> + <dt>url</dt> + <dd>POST 호출할 URL, 플러그인.</dd> + <dt>target</dt> + <dd>대상 윈도우, specified by the plug-in. 자세한 설명은 NPN_GetURL을 보라.</dd> + <dt>len</dt> + <dd>buf의 길이.</dd> + <dt>buf</dt> + <dd>로컬 임시 파일 경로, 또는 POST로 전송할 데이터 버퍼.</dd> + <dt>file</dt> + <dd>파일을 POST로 전송할지 여부: + <ul> + <li>true: buf에 지정된 로컬 파일을 전송하고, 완료되면 파일은 삭제한다.</li> + <li>false: buf에 있는 데이터를 직접 전송한다.</li> + </ul> + </dd> + <dt>notifydata</dt> + <dd>POST 요청을 식별하기 위한 값. <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>의 호출에 의해 이 값이 전달된다. (<a href="#Description">아래 설명을 보라</a>).</dd> +</dl> + +<h3 id="Returns" name="Returns">반환값</h3> + +<ul> + <li>성공하면 NPERR_NO_ERROR을 리턴한다.</li> + <li>실패하면 플러그인은 로드되지 않고, 에러 코드를 리턴한다. 에러값은 <a href="/en-US/docs/NPAPI/Constants#Error_Codes">Error Codes</a> 를 보라.</li> +</ul> + +<h2 id="Description" name="Description">설명</h2> + +<p><code>NPN_PostURLNotify</code> 함수는 <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a>와 거의 같지만, 다음과 같은 차이가 있다:</p> + +<ul> + <li><code>NPN_PostURLNotify</code> 는 메모리 버퍼를 사용할 때 헤더를 지정할 수 있다.</li> + <li><code>NPN_PostURLNotify</code> 는 성공하든 실패하든 요청이 완료되면 <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>를 호출한다. 더 자세한 설명을 보려면 <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a>을 보도록 한다.</li> +</ul> + +<p><code>NPN_PostURLNotify</code>는 비동기로 동작한다: 함수는 바로 리턴되고, 요청이 처리되면 <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>를 호출한다.</p> + +<p>If this function is called with a target parameter value of _self or a parent to _self, this function should return an INVALID_PARAM NPError. This is the only way to notify the plug-in once it is deleted. See <a href="/en-US/docs/NPN_GetURL">NPN_GetURL</a> for information about this parameter.</p> + +<h2 id="See_also" name="See_also">참고</h2> + +<ul> + <li><a href="/en-US/docs/NPN_GetURL">NPN_GetURL</a>, <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>, <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a></li> +</ul> diff --git a/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html b/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html new file mode 100644 index 0000000000..4d42077d04 --- /dev/null +++ b/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html @@ -0,0 +1,89 @@ +--- +title: 확장기능 개발 환경 구축 +slug: Mozilla/Add-ons/Setting_up_extension_development_environment +translation_of: Archive/Add-ons/Setting_up_extension_development_environment +--- +<p>이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.</p> +<h3 id="개요">개요</h3> +<ul> + <li>Firefox의 개발세션을 실행하기 위한 개발용 <strong>사용자 프로필</strong>을 생성합니다. 그리고 <code>about:config</code> 에서 특정한 개발용 환경설정을 합니다.</li> + <li>개발용 프로필에 몇가지 Firefox <strong>개발용 확장기능</strong>을 설치합니다.</li> + <li>당신의 프로필의 extensions 폴더안의 파일들을 수정하고 개발용 프로필과 응용프로그램을 재시작합니다.</li> +</ul> +<h3 id="Development_profile" name="Development_profile">개발용 프로필</h3> +<p>개발 단계에서 성능저하를 방지하려면 환경 설정 및 확장과 관련된 개인 데이터의 손실을 피하기 위해 개발 작업을 위한 별도의 프로필을 사용 할 수 있습니다.</p> +<p>별도의 프로필과 <code>-no-remote</code> 매개 변수와 함께 응용 프로그램을 구동하여 같은 시간에 Thunderbird 또는 Firefox 의 두 개의 인스턴스를 실행 할 수 있습니다.</p> +<p>우분투:</p> +<pre>/usr/bin/firefox -no-remote -P dev</pre> +<p>다른 리눅스 배포판:</p> +<pre>/usr/local/bin/firefox -no-remote -P dev +</pre> +<p>맥킨토시:</p> +<pre class="eval">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev & +</pre> +<p>윈도우즈:</p> +<pre class="eval">시작 -> 실행 "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev +</pre> +<p>Firefox 대신에 Thunderbird 또는 SeaMonkey를 시작 하려면 , 위의 예제에서 "firefox" 대신 "thunderbird" 또는 "seamonkey" 으로 대체합니다.</p> +<p>프로필 지정이 존재 하지 않는 경우 (또는 프로필을 지정 안하는 경우), Thunderbird 또는 Firefox 프로필 관리자가 표시됩니다. 기본 프로필로 실행 하기위해 프로필을 "default"로 지정합니다. (또는 "-P 를 생략합니다.).</p> +<p>(There is a thread in the <a class="external" href="http://forums.mozillazine.org/" title="http://forums.mozillazine.org/">Mozillazine forums</a> that explains how to use both stable and development versions of Firefox to check extension compatibility. See <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=613873">Installing Firefox 3 or Minefield while keeping Firefox 2</a>.)</p> +<h3 id="Development_preferences" name="Development_preferences">개발용 설정</h3> +<p>There is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. However, these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences. For more information about Mozilla preferences, refer to the mozillaZine article on "<a class="external" href="http://kb.mozillazine.org/About:config" title="http://kb.mozillazine.org/About:config">about:config</a>".</p> +<p>Not all preferences are defined by default, and are therefore not listed in <code>about:config</code> by default. You will have to create new (boolean) entries for them.</p> +<ul> + <li><strong>javascript.options.showInConsole</strong> = <strong>true</strong>. Logs errors in chrome files to the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a>.</li> + <li><strong>nglayout.debug.disable_xul_cache</strong> = <strong>true</strong>. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're <a href="#Using_directories_rather_than_JARs">using directories rather than JARs</a>. Changes to XUL overlays will still require reloading of the document overlaid.</li> + <li><strong>browser.dom.window.dump.enabled</strong> = <strong>true</strong>. Enables the use of the <span style="font-family: Courier New;">dump()</span> statement to print to the standard console. See <span style="font-family: Courier New;">{{ Domxref("window.dump") }}</span> for more info. You can also use <span style="font-family: Courier New;">{{ Interface("nsIConsoleService") }}</span> from a privileged script.</li> + <li><strong>javascript.options.strict</strong> = <strong>true</strong>. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console<sup>2</sup></a>.</li> + <li><strong>extensions.logging.enabled</strong> = <strong>true</strong>. This will send more detailed information about installation and update problems to the <a href="/en/Error_Console" title="en/Error Console">Error Console</a>. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)</li> + <li>You might also want to set <strong>dom.report_all_js_exceptions = true</strong>. See <a class="internal" href="/en/Exception_logging_in_JavaScript" title="en/Exception logging in JavaScript">Exception logging in JavaScript</a> for details.</li> +</ul> +<h4 id="Accessing_Firefox_development_preferences">Accessing Firefox development preferences</h4> +<p>To change preference settings in Firefox or SeaMonkey, type <code>about:config </code>in the Location Bar. Alternatively, use the <a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/7434/" title="http://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a>, which provides a menu interface for Firefox settings.</p> +<h4 id="Accessing_Thunderbird_development_preferences">Accessing Thunderbird development preferences</h4> +<p>To change preference settings in Thunderbird, open the "Preferences" (Unix) or "Options" (Windows) interface. On the "Advanced" page, select the "General" tab then click the "Config Editor" button.</p> +<h3 id="Development_extensions" name="Development_extensions">개발에 도움되는 확장 기능</h3> +<p>이 확장 기능들이 당신이 개발을 할때 도움을 줄 수 있습니다.</p> +<ul> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>, 웹 문서 또는 XUL 응용 프로그램의 live DOM을 점검하고 편집하는 곳에 사용 (Firefox 와 Thunderbird)</li> + <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, JavaScript 디버거 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird 버전</a>)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> 확장 기능 개발을 위한 툴 제품군 (Firefox)</li> + <li><a class="external" href="http://console2.mozdev.org/" title="http://console2.mozdev.org/">Console<sup>2</sup></a> 향상된 JavaScript 콘솔 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/1815" title="http://addons.mozilla.org/en-US/firefox/addon/1815">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/1815" title="http://addons.mozilla.org/en-US/thunderbird/addon/1815">Thunderbird 버전</a>)</li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058" title="https://addons.mozilla.org/firefox/addon/5058">Javascript Command</a> Firefox windows 에서 javascript를 작성 및 테스트 하는 곳에 사용</li> + <li><a class="external" href="http://www.gijsk.com/" title="http://www.gijsk.com/">Chrome List</a> chrome:// 안에서 파일을 탐색하고 보는 곳에 사용 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird 버전</a>)</li> + <li><a class="external" href="http://webdesigns.ms11.net/chromeditp.html" title="http://webdesigns.ms11.net/chromeditp.html">Chrome Edit Plus </a> 사용자 파일 에디터 (Firefox 와 Thunderbird)</li> + <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/" title="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> 확장 기능의 골격을 생성하는 <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="a web-based application that generates an + extension skeleton">웹 기반 응용 프로그램 </span></span>(Firefox 와 Thunderbird)</li> + <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a> 다양한 개발 도구 (Firefox)</li> + <li><a class="external" href="http://getfirebug.com/releases" title="http://getfirebug.com/releases">Chromebug</a> JavaScript 디버거와 DOM의 결합 요소 (Firefox, "kinda works for Thunderbird")</li> + <li><a class="external" href="http://hyperstruct.net/projects/mozrepl" title="http://hyperstruct.net/projects/mozrepl">MozRepl </a>Firefox 와 다른 Mozilla 응용 프로그램이 실행 되는 동안 탐색 과 편집 (Firefox 와 Thunderbird)</li> + <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/" title="http://www.mouseless.de/index.php?/content/view/18/31/">ExecuteJS</a> 향상된 JavaScript 콘솔 (<a class="link-https" href="https://addons.mozilla.org/firefox/addon/1729" title="https://addons.mozilla.org/firefox/addon/1729">Firefox 버전</a>, <a class="external" href="http://xsidebar.mozdev.org/modifiedmisc.html#executejs" title="http://xsidebar.mozdev.org/modifiedmisc.html#executejs">Thunderbird 버전</a>)</li> + <li><a class="external" href="http://xpcomviewer.mozdev.org">XPCOMViewer</a> XPCOM 검사기 (Firefox 와 Thunderbird)</li> + <li><a class="internal" href="/en/JavaScript_shells" title="En/JavaScript + shells">JavaScript shells</a> JavaScript 의 미리보기 테스트 (Firefox 와 Thunderbird)</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817" title="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager</a> SQLite 데이터베이스를 관리 (Firefox 와 Thunderbird)</li> + <li><a class="external" href="http://www.rumblingedge.com/viewabout/" title="http://www.rumblingedge.com/viewabout/">ViewAbout</a> enables access to various about: dialogs from the View menu (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9695" title="https://addons.mozilla.org/en-US/firefox/addon/9695">Firefox 버전</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/9695" title="https://addons.mozilla.org/en-US/thunderbird/addon/9695">Thunderbird 버전</a>)</li> + <li><span class="content"><span class="title"><a class="external" href="http://code.google.com/p/crashme/" title="http://code.google.com/p/crashme/">Crash Me Now!</a> </span></span><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="useful for testing + debug symbols and the + crash reporting system">디버그 기호 및 충돌 보고 시스템</span></span> (Firefox 와 Thunderbird)</li> +</ul> +<p> </p> +<h3 id="Custom_code_location" name="Custom_code_location">Firefox extension proxy file</h3> +<p>Extension files are normally installed in the user profile. However, it is usually easier to place extension files in a temporary location, which also protects source files from accidental deletion. This section explains how to create a proxy file that points to an extension that is installed in a location other than the user profile.</p> +<ol> + <li>Get the extension ID from the extension's install.rdf file.</li> + <li>Create a file in the "extensions" directory under your profile directory with the extension's ID as the file name (for example "your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}"). (<a class="external" href="http://kb.mozillazine.org/Profile_folder">How to find your profile directory</a>) Alternatively, rather than using a GUID, create a unique ID using the format "name@youremail" (for example <span style="font-family: Courier New;"><a class="link-mailto" href="mailto:chromebug@mydomain.com" rel="freelink">chromebug@mydomain.com</a>).</span></li> + <li>The contents of this file should be the path to the directory that contains your install.rdf file. (eg. "<span style="font-family: Courier New;">/full/path/to/yourExtension/</span>". Windows users should use the drive name (CAPS) and backslashes instead of frontslashes (for example "<span style="font-family: Courier New;">C:\full\path\to\yourExtension\</span>" or "<span style="font-family: Courier New;">C:\sam\workspace\toolbar\helloWorldtoolbar\</span>").Remember to include the closing slash and remove any trailing whitespace. + <ul> + <li>In Firefox 3, if you already installed the extension via XPI, you might need to install one or all of the extensions.* files in the profile folder. Backup first, but these files will be regenerated. (I don't know what the original author had in mind here, but the files <span style="font-family: Courier New;">extensions.cache, extensions.ini, extensions.rdf, compreg.dat, <span style="font-family: Verdana;">and</span> xpti.dat</span> are all regenerated by Firefox if deleted. You need to delete them if you mess with 'components', no harm done. Firefox will disconnect from its parent process when it regens these files, so you may have to exit once and restart if you use the OS console.)</li> + </ul> + </li> + <li>Place the file in the extensions folder of your profile and restart the application.</li> +</ol> +<h3 id="Using_directories_rather_than_JARs" name="Using_directories_rather_than_JARs">Using directories rather than JARs</h3> +<p>Regardless of whether you choose to eventually package your extension's chrome in a JAR or in directories, developing in directories is simpler. If you choose a JARed structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. For example, rather than having</p> +<pre class="eval">content myExtension jar:chrome/myExtension.jar!/content/ +</pre> +<p>use</p> +<pre class="eval">content myExtension chrome/content/ +</pre> diff --git a/files/ko/mozilla/add-ons/themes/index.html b/files/ko/mozilla/add-ons/themes/index.html new file mode 100644 index 0000000000..58c574d51f --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/index.html @@ -0,0 +1,64 @@ +--- +title: Themes +slug: Mozilla/Add-ons/Themes +tags: + - Add-ons + - Look & Feel + - NeedsTranslation + - Themes + - TopicStub +translation_of: Mozilla/Add-ons/Themes +--- +<p>Themes are skins for different Mozilla applications. They allow you to change the look and feel of the user interface and personalize it to your tastes. A theme can simply change the colors of the UI or it can change every piece of its appearance. The Theme documentation here is out of date, but we're hoping to get some help to update it soon.</p> +<div class="column-container"> + <div class="column-half"> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Building_a_Theme" title="Building a Theme">Building a Theme</a></dt> + <dd> + A tutorial for building a simple theme in Firefox.</dd> + <dt> + <a href="/en-US/docs/Themes/Common_Firefox_Theme_Issues_and_Solutions" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">Common Theme Issues and Their Solutions</a></dt> + <dd> + Common issues seen when AMO editors review themes and how to fix them.</dd> + <dt> + <a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt> + <dd> + Building lightweight themes for Firefox</dd> + <dt> + <a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x" title="Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2</a></dt> + <dd> + An introduction to creating new themes for SeaMonkey 2.</dd> + <dt> + <a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" title="Making_Sure_Your_Theme_Works_with_RTL_Locales">Making Sure Your Theme Works with RTL Locales</a></dt> + <dd> + How to make sure your theme will look right with Hebrew, Arabic, Persian and Urdu locales.</dd> + <dt> + <a href="/en-US/docs/Theme_Packaging" title="Theme_Packaging">Theme Packaging</a></dt> + <dd> + How to package themes for Firefox and Thunderbird.</dd> + <dt> + <a href="http://www.tudobom.de/articles/yatt/" title="http://www.tudobom.de/articles/yatt/">Yet Another Theme Tutorial</a></dt> + <dd> + Another tutorial in Mozilla theme construction.</dd> + <dt> + <a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Obsolete docs</a></dt> + <dd> + These docs are very old and will never be updated, but we've kept them in case the are useful source material for people updating the Theme documentation.</dd> + </dl> + </div> + <div class="column-half"> + <h2 id="Getting_help">Getting help</h2> + <ul> + <li><a href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li> + </ul> + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + <ul> + <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/inspectorwidget/">InspectorWidget</a></li> + <li><a class="link-https" href="https://addons.mozilla.org/en-us/firefox/addon/force-rtl/">Force RTL</a>: Test for RTL compatibility</li> + </ul> + </div> +</div> +<p> </p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html new file mode 100644 index 0000000000..a5cb662916 --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html @@ -0,0 +1,44 @@ +--- +title: contents.rdf +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/contents.rdf +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf +--- +<p>다음 내용을 복사하여 빈 텍스트 파일에 붙여넣고, "<code>contents.rdf</code>" 라는 이름으로 저장하세요:</p> +<pre><?xml version="1.0"?> + +<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> + + <!-- List all the skins being supplied by this theme --> + <RDF:Seq about="urn:mozilla:skin:root"> + <RDF:li resource="urn:mozilla:skin:My_Theme"/> + </RDF:Seq> + + <RDF:Description about="urn:mozilla:skin:My_Theme" + chrome:displayName="My Theme" + chrome:accessKey="N" + chrome:author="" + chrome:authorURL="" + chrome:description="" + chrome:name="My_Theme" + chrome:image="preview.png" > + <chrome:packages> + <RDF:Seq about="urn:mozilla:skin:My_Theme:packages"> + <RDF:li resource="urn:mozilla:skin:My_Theme:browser"/> + <RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/> + <RDF:li resource="urn:mozilla:skin:My_Theme:global"/> + <RDF:li resource="urn:mozilla:skin:My_Theme:mozapps"/> + <RDF:li resource="urn:mozilla:skin:My_Theme:help"/> + </RDF:Seq> + </chrome:packages> + </RDF:Description> + + <!-- Version Information. State that we work only with major version 1 of this package. --> + <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:browser"/> + <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:communicator"/> + <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:global"/> + <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:mozapps"/> + <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:help"/> +</RDF:RDF> +</pre> +<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/contents.rdf" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html new file mode 100644 index 0000000000..364b93fcf2 --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html @@ -0,0 +1,108 @@ +--- +title: Getting Started +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/Getting_Started +translation_of: Archive/Mozilla/Creating_a_skin_for_Mozilla/Getting_Started +--- +<h3 id=".EC.84.A4.EC.A0.95" name=".EC.84.A4.EC.A0.95">설정</h3> +<p>최신 버전의 파이어폭스를 다운로드하여 설치하세요. DOM Inspector도 함께 설치합니다.</p> +<h4 id=".ED.85.8C.EB.A7.88_.EC.95.95.EC.B6.95_.ED.92.80.EA.B8.B0" name=".ED.85.8C.EB.A7.88_.EC.95.95.EC.B6.95_.ED.92.80.EA.B8.B0">테마 압축 풀기</h4> +<p>이미 기존에 파이어폭스에서 사용할 수 있도록 만들어진 어떤 테마를 살펴보더라도, 파이어폭스의 기본 테마인 Winstripe와의 일관성을 발견할 수 있다. 이 테마는 파이어폭스의 설치 디렉토리에 존재하는 <tt>classic.jar</tt> 파일 안에 들어 있다. .jar 파일은 zip과 확장자만 다르지 그 압축 구조는 같기 때문에 일반적인 zip 압축 프로그램을 사용하여 풀어볼 수 있다. 만약에 압축 프로그램에서 .jar를 지원하지 않는다면 <tt>classic.zip</tt>과 같이 파일 이름을 바꾸고 압축을 해제할 수 있다.</p> +<h5 id="Classic.jar_.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.B0.BE.EA.B8.B0" name="Classic.jar_.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.B0.BE.EA.B8.B0">Classic.jar 의 위치 찾기</h5> +<p><b>Linux:</b> /usr/lib/MozillaFirefox/chrome/classic.jar</p> +<p><b>Windows:</b> \Program Files\Mozilla Firefox\chrome\classic.jar</p> +<p><b>Mac OS X:</b></p> +<ul> + <li>applications 폴더를 엽니다.</li> + <li>Control 버튼과 함께 파이어폭스 아이콘을 클릭합니다. 그리고 패키지 보기(Show Package)를 선택합니다.</li> + <li>contents/MacOS/Chrome/classic.jar 로 들어갑니다.</li> +</ul> +<p><tt>classic.jar</tt>를 다른 쉽게 접근할 수 있는 폴더로 이동합니다. <tt>Classic</tt>를 추천합니다. 그리고 그 폴더에서 압축을 풀어 놓습니다.</p> +<h4 id="classic.jar.EC.9D.98_.EB.82.B4.EB.B6.80.EB.A5.BC_.EB.93.A4.EC.97.AC.EB.8B.A4.EB.B4.85.EC.8B.9C.EB.8B.A4" name="classic.jar.EC.9D.98_.EB.82.B4.EB.B6.80.EB.A5.BC_.EB.93.A4.EC.97.AC.EB.8B.A4.EB.B4.85.EC.8B.9C.EB.8B.A4">classic.jar의 내부를 들여다봅시다</h4> +<p><tt>classic.jar</tt>의 압축을 풀어보면 <tt>skin</tt> 디렉토리와, <tt>preview.png</tt>, 그리고 <tt>icon.png</tt> 파일이 들어 있습니다.</p> +<dl> + <dt> + <tt>skin</tt></dt> + <dd> + 이 디렉토리 안에는 스킨을 이용하는 모든 훌륭한 재료들을 포함하는 <tt>classic</tt> 디렉토리가 있습니다.</dd> + <dt> + <tt>classic</tt></dt> + <dd> + <tt>classic</tt> 디렉토리는 다음과 같은 디렉토리들을 포함합니다.</dd> + <dt> + <tt>browser</tt></dt> + <dd> + <tt>browser</tt> 디렉토리에는 툴바 아이콘들이 들어 있습니다. 북마크 관리자나 설정창에 사용되는 아이콘도 여기에 들어 있습니다.</dd> + <dt> + <tt>global</tt></dt> + <dd> + <tt>global</tt> 디렉토리는 테마에서 특별히 중요한 부분으로, 브라우저의 외관을 설정하는 중요한 CSS 파일을 담고 있습니다.</dd> + <dt> + <tt>mozapps</tt></dt> + <dd> + <tt>mozapps</tt> 디렉토리에는 브라우저와 확장 관리자, 업데이트 마법사를 위한 스타일 및 아이콘이 들어 있습니다.</dd> + <dt> + <tt>help</tt></dt> + <dd> + 이 디렉토리에는 헬프 윈도우에 필요한 테마 파일들이 들어 있습니다.</dd> + <dt> + <tt>communicator</tt></dt> + <dd> + 이 디렉토리의 내용은 사용되지 않으며 추후 삭제될 것입니다.</dd> +</dl> +<h4 id=".EC.83.88.EB.A1.9C.EC.9A.B4_.ED.85.8C.EB.A7.88_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EC.83.88.EB.A1.9C.EC.9A.B4_.ED.85.8C.EB.A7.88_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">새로운 테마 설치하기</h4> +<p>아무래도 라이브 에디트를 설정하는 것에 부분부분 어려운 점이 있다보니, 일단은 직접 파이어폭스 테마를 만들며 변화하는 모습을 지켜보기 전에 기존의 테마를 설치할 수 있는 상태로 리패키징하는 법을 먼저 배우는 것이 좋겠습니다. 이 부분에서 우리는 작업에 필요한 테마를 "My_Theme"라고 부를 것이지만, 다른 이름으로 불러도 자유입니다.</p> +<h5 id=".ED.95.84.EC.9A.94.ED.95.9C_.ED.8C.8C.EC.9D.BC_.EB.B3.B5.EC.82.AC.ED.95.98.EA.B8.B0" name=".ED.95.84.EC.9A.94.ED.95.9C_.ED.8C.8C.EC.9D.BC_.EB.B3.B5.EC.82.AC.ED.95.98.EA.B8.B0">필요한 파일 복사하기</h5> +<p>먼저 첫번째 과정은 필요한 모든 파일을 올바른 디렉토리 구조로 옮겨넣는 것입니다. <tt>My_Theme</tt>라는 이름의 디렉토리를 하나 만드세요. 이 디렉토리로 들어가 <tt>browser</tt>, <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt>, 그리고 <tt>mozapps</tt>와 같은 이름의 디렉토리들을 만듭니다. <tt>classic.jar</tt> 파일을 열어 보았을 때와 같은 구조이지요, 여기에다가 <tt>icon.png</tt> 파일과 <tt>preview.png</tt> 파일을 만들어 넣습니다.</p> +<h5 id=".EC.84.A4.EC.B9.98_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.84.A4.EC.B9.98_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0">설치 파일 만들기</h5> +<h6 id="Contents.rdf" name="Contents.rdf">Contents.rdf</h6> +<p><a href="ko/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a> 파일을 <tt>\My_Theme</tt> 디렉토리에 집어넣고 텍스트 에디터를 사용하여 열어보겠습니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스로 이루어져 있습니다.</p> +<p>이 파일에는 "My_Theme"의 구성 요소들을 찾아볼 수 있고, 이 내용을 새로 만드는 테마에 맞추어 이름을 바꿀 수도 있습니다.</p> +<p>패키지 섹션은 당신이 변경하는 브라우저의 컴포넌트를 목록으로 나타냅니다. 챗질라에서도 이 스킨을 사용한다면 우리는 챗질라에 맞추기 위해 몇 줄을 추가하거나 바꾸어야 할 것입니다. 그러나 지금의 목록은 우리가 변경한 모든 것을 반영하고 있으므로, 이 섹션에서 이전 것을 사용하였던 부분에 대해서면 여기서 파란 색으로 표시된 부분에 이름과 버전에 맞게 변경해주면 됩니다.</p> +<pre class="eval"><RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:communicator"/> +<RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:editor"/> +<RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:global"/> +<RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:messenger"/> +<RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:navigator"/> +</pre> +<p>파일을 저장하고 에디터를 종료합니다.</p> +<h6 id="install.rdf" name="install.rdf">install.rdf</h6> +<p><a href="ko/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a>를 복사하여 <code>My_Theme</code> 디렉토리 안에 집어넣습니다. 그리고 이 파일을 텍스트 에디터로 열어봅니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스 파일입니다.</p> +<pre> <Description about="urn:mozilla:install-manifest"> + <em:id>{Themes_UUID}</em:id> + <em:version>Themes_Version</em:version> +</pre> +<p>첫 섹션은 당신의 테마를 위하여 <a href="ko/Creating_a_Skin_for_Firefox/UUID">UUID</a>를 확립하고 버전을 부여하는 부분을 포함합니다. 이런 내용을 입력하고 스크롤을 내려봅니다. 또한 당신은 타겟 어플리케이션, 여기서는 파이어폭스가 되겠지요. 이 스킨을 사용할 수 있는 파이어폭스의 버전 범위를 명기해야 합니다. 다음과 같이 말이지요.</p> +<pre> <em:targetApplication> + <Description> + <!-- Firefox's UUID --> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>Min_FF_Version</em:minVersion> + <em:maxVersion>Max_FF_Version</em:maxVersion> + </Description> + </em:targetApplication> +</pre> +<p>위와 같은 문제들을 해결하였다면 버전으로 인하여 테마가 깨지거나 엉망이 되는 문제는 피할 수 있을 것입니다.</p> +<h4 id="CSS_.ED.8C.8C.EC.9D.BC" name="CSS_.ED.8C.8C.EC.9D.BC">CSS 파일</h4> +<p>이들 디렉토리에 들어있는 CSS 파일은 브라우저의 어느 부분에 그림을 넣고, 버튼이나 컨트롤의 테두리나 두께 등을 정의하여 어떻게 보일지를 지정하는 데 사용됩니다. 그러면 예를 들어서 표준 버튼을 한번 바꾸어 봅시다.</p> +<p><tt>global</tt> 디렉토리로 들어가 <tt>button.css</tt> 파일을 텍스트 에디터로 열어봅시다. 스크롤바를 내려 <code>button {</code> 으로 시작되는 섹션을 찾아봅시다. 이 섹션은 기본 상태, 그러니까 마우스를 위로 올리거나 선택하지 않았고, 그렇다고 사용중지 상태도 아닌 일반적인 버튼의 모양을 정의하는 섹션입니다.</p> +<p><code>background-color:</code> 부분에 <code>DarkBlue</code>를 입력하고, <code>color:</code> 부분에 <code>White</code> 라고 입력한 뒤 파일을 저장합시다. 다른 몇 가지 테스트를 더 해볼 수도 있을 것입니다.</p> +<h4 id="JAR_.ED.8C.8C.EC.9D.BC.EB.A1.9C_.EB.A6.AC.ED.8C.A8.ED.82.A4.EC.A7.95.ED.95.98.EA.B8.B0" name="JAR_.ED.8C.8C.EC.9D.BC.EB.A1.9C_.EB.A6.AC.ED.8C.A8.ED.82.A4.EC.A7.95.ED.95.98.EA.B8.B0">JAR 파일로 리패키징하기</h4> +<p>이제 다음과 같은 디렉토리 구조를 JAR 파일로 리패키징하는 일만 남았습니다. 좋아하는 압축 프로그램을 사용하여 다음 구조를 zip으로 압축합시다:</p> +<pre>/browser/* +/communicator/* +/global/* +/help/* +/mozapps/* +/contents.rdf +/install.rdf +/icon.png +/preview.png + </pre> +<p>이 상태로 그냥 묶는 것이 아니라, 이 구조가 들어있는 부모 디렉토리인 <tt>My_Theme</tt>째 묶어야 설치할 때 에러 메시지를 보지 않을 수 있을 것입니다.</p> +<h4 id=".EC.9B.B9.EC.97.90.EC.84.9C_.EB.B0.94.EB.A1.9C_.EC.84.A4.EC.B9.98.ED.95.A0_.EC.88.98_.EC.9E.88.EB.8F.84.EB.A1.9D_.EB.A7.8C.EB.93.A4.EB.A0.A4.EB.A9.B4" name=".EC.9B.B9.EC.97.90.EC.84.9C_.EB.B0.94.EB.A1.9C_.EC.84.A4.EC.B9.98.ED.95.A0_.EC.88.98_.EC.9E.88.EB.8F.84.EB.A1.9D_.EB.A7.8C.EB.93.A4.EB.A0.A4.EB.A9.B4">웹에서 바로 설치할 수 있도록 만들려면</h4> +<p>일단 JAR 파일을 웹에 올리고, 클릭하면 바로 설치할 수 있도록 만들기 위해 자바스크립트 하나를 살펴보겠습니다.</p> +<pre class="eval"><a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, + "<span style="color: #00D; font-weight: bold;">myskin.jar</span>", "<span style="color: #00D; font-weight: bold;">My Skin Theme</span>")'>누르면 스킨이 설치됩니다</a> +</pre> +<p>하드 디스크에 JAR 형태로 존재하는 스킨 파일을 설치하려면 <a class="external" href="http://www.eightlines.com/neil/mozskin/installjar.html">웹 인스톨러</a> 를 사용하여 해당 파일을 업로드하고 바로 실치할 수 있습니다. 혹은 모질라에서 테마 윈도우를 띄우고 .jar 파일을 끌어당겨 놓을 수도 있습니다.</p> +<p>{{ languages( { "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html new file mode 100644 index 0000000000..469fd9043b --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html @@ -0,0 +1,27 @@ +--- +title: Creating a Skin for Firefox +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox +tags: + - Add-ons + - Themes +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox +--- +<h3 id=".EB.93.A4.EC.96.B4.EA.B0.80.EB.A9.B0" name=".EB.93.A4.EC.96.B4.EA.B0.80.EB.A9.B0">들어가며</h3> +<p>파이어폭스에서 사용할 스킨을 만들 때는 이미지 편집과 압축 해제, 그리고 CSS 수정에 대해 알고 있어야 합니다. 파이어폭스는 표준 GIF와 PNG, 그리고 JPEG 이미지 포맷을 버튼에 사용하며, 인터페이스의 스타일을 만들기 위해 CSS를 사용합니다.</p> +<p><b>그러면 스킨이 뭔데?</b></p> +<p>스킨이란 전체적인 인터페이스를 바꾸는 것은 아닙니다. 대신 스킨은 인터페이스가 어떻게 보여질지를 정의해주지요. 이미지를 마우스 오른쪽 버튼으로 클릭했을 때 일어나는 일을 바꿀 수는 없지만, 마우스 오른쪽 버튼을 눌렀을 때 보이는 메뉴의 모습은 바꿀 수 있습니다. 예를 들어 파란 바탕에 분홍색 땡땡이 무늬로 바꿀 수도 있겠지요. 파이어폭스의 기능 자체를 바꾸고 싶다면 Chrome을 직접 수정하실 수 있지만, 그에 대한 설명은 이 문서의 범위를 넘어가는 것입니다.</p> +<h3 id=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0" name=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0">시작하기</h3> +<ul> + <li><a href="ko/Creating_a_Skin_for_Firefox/Getting_Started">그러면 시작해볼까요?</a></li> +</ul> +<hr> +<div class="originaldocinfo"> + <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + <ul> + <li>Author: Neil Marshall</li> + <li>Other Contributors (Suggestions/Corrections): Brent Marshall, CDN (<a class="external" href="http://themes.mozdev.org" rel="freelink">http://themes.mozdev.org</a>), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (<a class="external" href="http://www.igraphics.nn.cx" rel="freelink">http://www.igraphics.nn.cx</a>)</li> + <li>Copyright Information: Copyright 2002-2003 Neil Marshall, permission given to MDC to migrate into the wiki April 2005 via email.</li> + <li>Original Location: <a class="external" href="http://www.eightlines.com/neil/mozskin" rel="freelink">http://www.eightlines.com/neil/mozskin</a></li> + </ul> +</div> +<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html new file mode 100644 index 0000000000..f5add06153 --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html @@ -0,0 +1,44 @@ +--- +title: install.rdf +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/install.rdf +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf +--- +<p>다음 내용을 복사하여 빈 텍스트파일에 붙여넣고 "<code>install.rdf</code>"라는 이름으로 저장하세요:</p> +<pre><?xml version="1.0"?> + +<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:em="http://www.mozilla.org/2004/em-rdf#"> + + <Description about="urn:mozilla:install-manifest"> + <em:id>{Themes_UUID}</em:id> + <em:version>Themes_Version</em:version> + +<!-- Target Application this extension can install into, + with minimum and maximum supported versions. --> + +<em:targetApplication> + <Description> + <!-- Firefox's UUID --> + <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> + <em:minVersion>Min_FF_Version</em:minVersion> + <em:maxVersion>Max_FF_Version</em:maxVersion> + </Description> + </em:targetApplication> + + <!-- Front End MetaData --> + <!-- My_Theme --> + <em:name>My_Theme</em:name> + <em:description>My_Theme</em:description> + <em:creator>Your_Name</em:creator> + <em:contributor>Contributors_Names</em:contributor> + <em:homepageURL>Themes_HomePage</em:homepageURL> + <em:updateURL> Url_of_Update_Location </em:updateURL> + <em:aboutURL> Url_of_About_Page </em:aboutURL> + + <!-- Front End Integration Hooks (used by Theme Manager)--> + <em:internalName>My_Theme</em:internalName> + </Description> + +</RDF> +</pre> +<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/install.rdf" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html new file mode 100644 index 0000000000..db90531d45 --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html @@ -0,0 +1,10 @@ +--- +title: UUID +slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/UUID +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID +--- +<h3 id="UUID_Universal_Unique_Identifier" name="UUID:_Universal_Unique_Identifier">UUID: Universal Unique Identifier</h3> +<p>A UUID can be obtained by visiting <a class="external" href="http://www.famkruithof.net/uuid/uuidgen" rel="freelink">http://www.famkruithof.net/uuid/uuidgen</a> or by typing "firebot: uuid?" on irc.mozilla.org.</p> +<h3 id="See_Also" name="See_Also">See Also</h3> +<p><a href="ko/Generating_GUIDs">Generating_GUIDs</a></p> +<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID" } ) }}</p> diff --git a/files/ko/mozilla/add-ons/themes/obsolete/index.html b/files/ko/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/ko/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p> +<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p> diff --git a/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html new file mode 100644 index 0000000000..1b2d52b0cd --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,131 @@ +--- +title: Anatomy of an extension +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p>확장앱은 배포 및 설치를 위해 패키징 된 파일 모음으로 구성됩니다. 이 아티클은 확장앱에 있을 수 있는 파일들을 빠르게 살펴봅니다.</p> + +<h2 id="manifest.json">manifest.json</h2> + +<p>manifest.json 파일은 모든 확장앱이 가져야하는 유일한 파일입니다. 이 파일에는 이름, 버전 및 필요한 권한과 같은 메타정보가 들어 있습니다. </p> + +<p>또한 확장앱에 포함될 다른 파일들(하단 목록)을 가리킵니다.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: (브라우저 창의 수명과 독립적으로) 오랜 시간 실행되는 로직 구현.</li> + <li>확장앱의 아이콘 및 기타 버튼들.</li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">사이드바, 팝업, 옵션 페이지</a>: UI 컴포넌트를 제공하는 HTML 파일들</li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">컨텐츠 스크립트</a>: 웹페이지에 주입할 자바스크립트 파일</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>세부 내용: <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> 참조.</p> + +<p>manifest에 참조 된 항목 외에도, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">Extension pages</a>와 해당 페이지의 리소스가 확장앱 번들에 포함될 수 있습니다.</p> + +<h2 id="Background_scripts">Background scripts</h2> + +<p><span class="translation">확장앱은 종종 특정 웹 페이지나 브라우저 창의 수명과 독립적으로 장기간 상태를 유지하거나 작업을 수행해야 합니다. 그때 필요한 것이 </span>백그라운드 스크립트입니다.</p> + +<p>백그라운드 스크립트는 <span class="translation">확장앱이 로드 되자마자 로드되며 확장앱이 다시 비활성화 또는 </span>제거될 때까지<span class="translation"> 로드된 상태를 유지합니다</span>. 적절한 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 요청했다면 이 스크립트에서 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a>를 사용할 수 있습니다.</p> + +<h3 id="백그라운드_스크립트_정의">백그라운드 스크립트 정의</h3> + +<p>"manifest.json"에 <code>background</code> 키로 백그라운드 스크립트를 포함할 수 있습니다:</p> + +<pre class="brush: json">// manifest.json + +"background": { + "scripts": ["background-script.js"] +}</pre> + +<p>여러 개의 백그라운드 스크립트를 지정할 수 있습니다: 그 경우 한 웹페이지에서 여러 스크립트들이 실행되듯이 백그라운드 스크립트들이 동일한 context에서 실행됩니다.</p> + +<h3 id="백그라운드_스크립트_환경">백그라운드 스크립트 환경</h3> + +<h4 id="DOM_APIs">DOM APIs</h4> + +<p>백그라운드 스크립트는 background pages라는 특별한 페이지의 context에서 실행됩니다. 이것은 백그라운드 스크립트에 모든 표준 DOM API들을 제공하는 전역 <code><a href="/en-US/docs/Web/API/Window">window</a></code> 객체를 제공합니다.</p> + +<p>background page를 제공할 필요는 없습니다. 백그라운드 스크립트를 추가했다면 빈 background page가 생성됩니다.</p> + +<p>그러나 background page를 별도의 HTML 파일로 제공하도록 선택할 수 있습니다.</p> + +<pre class="brush: json">// manifest.json + +"background": { + "page": "background-page.html" +}</pre> + +<h4 id="WebExtension_APIs">WebExtension APIs</h4> + +<p>백그라운드 스크립트는 선언된 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a> 내의 모든 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a>를 사용할 수 있습니다.</p> + +<h4 id="Cross-origin_access">Cross-origin access</h4> + +<p>백그라운드 스크립트는 선언된 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host 권한</a> 내의 모든 서버(host)에 XHR 요청을 할 수 있습니다.</p> + +<h4 id="Web_content">Web content</h4> + +<p>백그라운드 스크립트는 웹 페이지에 직접 엑세스하지 못합니다. 그러나 웹페이지에 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">컨텐츠 스크립트</a>를 삽입할 수 있으며 <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">메시지 전달 API를 통해 컨텐츠 스크립트와 통신할 수 있습니다</a>.</p> + +<h4 id="Content_security_policy">Content security policy</h4> + +<p>백그라운드 스크립트<span class="translation">는 </span><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code><span class="translation"> 사용과 같이</span><span class="translation"> 잠재적으로 위험할 수 있는 특정 작업을 제한합니다.</span> 자세한 내용은 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">컨텐츠 보안 정책</a>을 참조하십시오.</p> + +<h2 id="Sidebars_popups_options_pages">Sidebars, popups, options pages</h2> + +<p>확장앱은 HTML를 이용하여 다양한 UI를 포함할 수 있습니다.</p> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">사이드바</a>는 <span class="translation">브라우저 창의 왼쪽, 웹 페이지 옆에 표시되는 창입니다.</span></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>은 사용자가 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">툴바 버튼</a> 이나 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">주소창 버튼</a>를 클릭 할 때 표시되는 다이얼로그입니다</li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">옵션 페이지</a>는 브라우저의 애드온 매니저에서 확장앱의 환경 설정에 접근할 때 표시 되는 페이지입니다.</li> +</ul> + +<p>이러한 각 구성 요소에 대해 HTML 파일을 만들고 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>의 특정 속성에 지정합니다. 이 HTML 파일은 일반 웹 페이지와 마찬가지로 CSS 및 JavaScript 파일이 포함될 수 있습니다. </p> + +<p><span class="translation">이 페이지들은 모두 </span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a><span class="translation"> 유형이며, 일반 웹 페이지와 달리 </span>이 페이지에서 실행되는<span class="translation"> javaScript는 </span><span class="translation">권한이 부여된 WebExtension API를 모두 사용할 수 있습니다(</span>백그라운드 스크립트<span class="translation">와 동일).</span><br> + {{WebExtAPIRef("runtime.getBackgroundPage()")}}<br> + 심지어 위와 같이 background page에서 사용하는 변수에 직접 접근할 수도 있습니다.</p> + +<h2 id="Extension_pages">Extension pages</h2> + +<p><span class="translation">또한 미리 정의된 UI에 연결되지 않은 HTML 문서를 확장앱에 포함할 수 있습니다. </span>사이드바<span class="translation">, </span>팝업<span class="translation"> 또는 옵션 페이지에 제공할 문서와 달리 manifest.json에 이 페이지를 정의하는 항목은 없습니다. 그러나 이 페이지 또한 </span>백그라운드 스크립트<span class="translation">와 동일하게 권한이 부여된 WebExtension API에 대한 접근 권한을 가집니다.</span></p> + +<p>일반적으로 {{WebExtAPIRef("windows.create()")}} 또는 {{WebExtAPIRef("tabs.create()")}}를 사용하여 Extension page를 로드할 수 있습니다.</p> + +<p>세부 내용 : <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> 참조.</p> + +<h2 id="Content_scripts">Content scripts</h2> + +<p>컨텐츠 스크립트를 사용하여 웹 페이지에 접근하고 수정하십시오. 컨텐츠 스크립트는 <span class="translation">웹 페이지에 로드되고 해당 페이지의 context에서 실행됩니다.</span></p> + +<p>컨텐츠 스크립트<span class="translation">는 웹 페이지의 context에서 실행되는, 확장앱용 스크립트입니다. 이는 페이지 내의 {{HTMLElement ( "script")}} 요소 등 페이지 자체가 로드하는 스크립트와 다릅니다.</span></p> + +<p>컨텐츠 스크립트는 <span class="translation">웹페이지가 로드하는 일반 스크립트처럼 DOM에 접근 및 조작을 할 수 있습니다.</span></p> + +<p><span class="translation">일반 페이지 스크립트와 달리 다음 작업을 수행 할 수 있습니다.</span></p> + +<ul> + <li>크로스 도메인의 XHR 요청</li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a> 일부 사용</li> + <li>백그라운드 스크립트와<span class="translation"> 메시지를 교환함으로 모든 WebExtension API에 간접적으로 접근</span></li> +</ul> + +<p>컨텐츠 스크립트<span class="translation">는 일반 페이지 스크립트에 직접 접근할 수는 없지만 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a> API를 사용하여 메시지를 교환할 수 있습니다.</span></p> + +<p><span class="translation">일반적으로 </span>컨텐츠 스크립트는<span class="translation"> 자바 스크립트를 지칭하지만, 동일한 매커니즘으로 웹 페이지에 CSS를 삽입할 수 있습니다.</span></p> + +<p>세부내용: <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> 참조.</p> + +<h2 id="Web_accessible_resources">Web accessible resources</h2> + +<p>Web accessible resources<span class="translation">는</span> 확장앱에 포함되어 있고 컨텐츠 스크립트 및 페이지 스크립트에 엑세스할 수 있게 하려는 이미지, HTML, CSS 및 JavaScript와 같은 리소스입니다. 이 리소스는 특수한 URI를 사용하여 페이지 스크립트 및 컨텐츠 스크립트에서 참조할 수 있습니다.</p> + +<p>예를 들어 컨텐츠 스크립트가 일부 이미지를 웹 페이지에 삽입하려는 경우, 확장앱에 포함시키고 web accessible하게 할 수 있습니다. 그러면 컨텐츠 스크립트에서 src 속성을 통해 이미지를 참조하는 img 태그를 만들고 추가할 수 있습니다.</p> + +<p>자세한 내용은 manifest.json의 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> key의 스펙을 확인하세요.</p> diff --git a/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html new file mode 100644 index 0000000000..349b6882f3 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html @@ -0,0 +1,115 @@ +--- +title: browsingData +slug: Mozilla/Add-ons/WebExtensions/API/browsingData +translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData +--- +<div>{{AddonSidebar}}</div> + +<p>WebExtensions 을 통해 사용자가 브라우저를 사용하는 동안 축적된 데이터를 삭제할 수 있는 기능을 제공합니다.</p> + +<p><code>browsingData</code> API는 브라우징 데이터를 다음과 같은 타입으로 구분합니다:</p> + +<ul> + <li>브라우저 캐시</li> + <li>쿠키</li> + <li>다운로드</li> + <li>히스토리</li> + <li>플러그인 데이터</li> + <li>저장된 폼 데이터</li> + <li>저장된 비밀번호saved passwords</li> +</ul> + +<p>You can use the {{WebExtAPIRef("browsingData.remove()")}} function to remove any combination of these types. There are also dedicated functions to remove each particular type of data, such as {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} and so on.</p> + +<p>All the <code>browsingData.remove[X]()</code> functions take a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, which you can use to control two further aspects of data removal:</p> + +<ul> + <li>how far back in time to remove data</li> + <li>whether to remove data only from normal web pages, or also from hosted web apps and add-ons. Note that this option is not yet supported in Firefox.</li> +</ul> + +<p>Finally, this API gives you a {{WebExtAPIRef("browsingData.settings()")}} function that gives you the current value of the settings for the browser's built-in "Clear History" feature.</p> + +<p>To use this API you must have the "browsingData" <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a>.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.DataTypeSet")}}</dt> + <dd>Object used to specify the type of data to remove: for example, history, downloads, passwords, and so on.</dd> + <dt>{{WebExtAPIRef("browsingData.RemovalOptions")}}</dt> + <dd>Object used to specify how far back in time to remove data, and whether to remove data added through normal web browsing, by hosted apps, or by add-ons.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{WebExtAPIRef("browsingData.remove()")}}</dt> + <dd>Removes browsing data for the data types specified.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCache()")}}</dt> + <dd>Clears the browser's cache.</dd> + <dt>{{WebExtAPIRef("browsingData.removeCookies()")}}</dt> + <dd>Removes cookies.</dd> + <dt>{{WebExtAPIRef("browsingData.removeDownloads()")}}</dt> + <dd>Removes the list of downloaded files.</dd> + <dt>{{WebExtAPIRef("browsingData.removeFormData()")}}</dt> + <dd>Clears saved form data.</dd> + <dt>{{WebExtAPIRef("browsingData.removeHistory()")}}</dt> + <dd>Clears the browser's history.</dd> + <dt>{{WebExtAPIRef("browsingData.removePasswords()")}}</dt> + <dd>Clears saved passwords.</dd> + <dt>{{WebExtAPIRef("browsingData.removePluginData()")}}</dt> + <dd>Clears data associated with plugins.</dd> + <dt>{{WebExtAPIRef("browsingData.settings()")}}</dt> + <dd>Gets the current value of settings in the browser's "Clear History" feature.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.browsingData", 2)}}</p> + +<div class="hidden note"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browsingData"><code>chrome.browsingData</code></a> API.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html new file mode 100644 index 0000000000..94061c69dc --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html @@ -0,0 +1,38 @@ +--- +title: contentScripts +slug: Mozilla/Add-ons/WebExtensions/API/contentScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts +--- +<div>{{AddonSidebar}}</div> + +<p>이 API는 콘텐츠 스크립트를 등록한다. 등록된 콘텐츠 스크립트는 브라우저가 URL 패턴이 일치하는 페이지에 넣는다.</p> + +<p>이 API는 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">"content_scripts"</a></code> manifest.json 키와 아주 비슷하다. 단지, <code>"content_scripts"</code>로는 설치할 때 정해진 스크립트와 패턴을 바꿀 수 없지만, <code>contentScripts</code> API로는 스크립트의 등록이나 해제가 실행 중에도 가능하다.</p> + +<p>등록할 스크립트, URL 패턴, 그리고 기타 옵션을 정의하는 객체를 인수로 {{WebExtAPIRef("contentScripts.register()")}}을 호출하면, 반환된 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} 객체가 인수인 완료를 수행한다.</p> + +<p><code>RegisteredContentScript</code>는 <code>register()</code>를 호출해 등록할 스크립트를 담는 객체다. 해제는 객체에 정의된 <code>unregister()</code> 메소드로 할 수 있다. 또한, 스크립트를 등록한 페이지를 없애면 스크립트는 자동으로 해제된다. 예를 들어, background 페이지에서 등록했으면 그것들은 background 페이지가 파괴될 때 자동으로 해제된다. 마찬가지로 사이드바나 팝업에서 등록했으면, 사이드바나 팝업이 닫힐 때 자동으로 해제된다.</p> + +<p><code>contentScripts</code> API 자체는 권한 없이 사용할 수 있지만, <code>register()</code>에 전달할 패턴에 대해서는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 권한</a>을 가져야 한다.</p> + +<h2 id="자료형">자료형</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}</dt> + <dd> + <p>{{WebExtAPIRef("contentScripts.register()")}} 함수가 반환하는 객체의 자료형으로 등록된 콘텐츠 스크립트를 표현한다. <code>unregister()</code> 메소드로 스스로를 해제할 수 있다.</p> + </dd> +</dl> + +<h2 id="함수">함수</h2> + +<dl> + <dt>{{WebExtAPIRef("contentScripts.register()")}}</dt> + <dd>주어진 콘텐츠 스크립트를 등록한다</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("webextensions.api.contentScripts", 10, 1)}}</p> + +<p>{{WebExtExamples("h2")}}</p> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html new file mode 100644 index 0000000000..d6d933b22e --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html @@ -0,0 +1,95 @@ +--- +title: menus.ContextType +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/ContextType +--- +<div>{{AddonSidebar()}}</div> + +<p>메뉴 항목이 나타나게 하는 콘텍스트들.</p> + +<h2 id="자료형">자료형</h2> + +<p>이 자료형의 값은 문자열이다. 항목은 주어진 콘텍스트일 때 표시된다. 가능한 값은:</p> + +<dl> + <dt>all</dt> + <dd>'all'은 'bookmark', 'tab' 그리고 'tools_menu'를 뺀 나머지 모든 콘텍스트를 다 나열한 것과 같다.</dd> + <dt>audio</dt> + <dd><a href="/en-US/docs/Web/HTML/Element/audio">audio</a> 요소를 콘텍스트-클릭할 때 적용된다. (역주: 콘텍스트-클릭은 보통 마우스 오른쪽 버튼을 클릭하는 것이다)</dd> + <dt>bookmark</dt> + <dd>툴바나 메뉴에서 북마크 항목을 콘텍스트-클릭할 때 적용된다. 현재 북마크 사이드바나 라이브러리 윈도우 항목에서는 동작하지 않는다. manifest에 "bookmarks" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API 권한</a>이 있어야 한다.</dd> + <dt>browser_action</dt> + <dd>브라우저 액션에서 콘텍스트-클릭을 할 때 적용된다. 최대로 추가할 수 있는 최상위 브라우저 액션 콘텍스트 매뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.</dd> + <dt>editable</dt> + <dd>편집 가능한 요소, 가령은 <a href="/en-US/docs/Web/HTML/Element/textarea">textarea</a>를 콘텍스트-클릭할 때 적용된다.</dd> + <dt>frame</dt> + <dd>내포된 <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>을 콘텍스트-클릭할 때 적용된다.</dd> + <dt>image</dt> + <dd>이미지를 콘텍스트-클릭할 때 적용된다.</dd> + <dt>link</dt> + <dd>링크를 콘텍스트-클릭할 때 적용된다.</dd> + <dt>page</dt> + <dd>페이지를 콘텍스트-클릭할 때 적용된다. 단, 페이지의 다른 콘텍스트가 적용되지 않을 때만이다(예를 들면, 클릭이 이미지나 내포된 iframe 또는 링크가 아니여야 한다).</dd> + <dt>page_action</dt> + <dd>페이지 액션을 콘텍스트-클릭할 때 적용된다. 최대로 추가할 수 있는 최상위 페이지 액션 콘텍스트 메뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.</dd> + <dt>password</dt> + <dd><a href="/en-US/docs/Web/HTML/Element/input/password">password 입력 요소</a>를 콘텍스트-클릭할 때 적용된다.</dd> + <dt>selection</dt> + <dd>페이지 일부가 선택되었을 때 적용된다.</dd> + <dt>tab</dt> + <dd> + <p>탭을 콘텍스트-클릭할 때 적용된다(specifically, this refers to the tab-strip or other user interface element enabling the user to switch from one browser tab to another, not to the page itself).</p> + + <p>파이어폭스 63부터, 탭에서 메뉴 항목을 클릭하면 그것이 설사 현재탭이 아니더라도 클릭한 탭에 대해 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab</a> 권한이 승인된다.</p> + </dd> + <dt>tools_menu</dt> + <dd>항목은 브라우저 툴바의 메뉴로 추가된다. 주의해야 할 것은 <code>menus</code> 이름공간을 통해 <code>ContextType</code>에 접근해야지 <code>contextMenus</code> 이름공간으로 하면 안된다.</dd> + <dt>video</dt> + <dd><a href="/en-US/docs/Web/HTML/Element/video">video</a> 요소에 콘텍스트-클릭을 할 때 적용된다.</dd> +</dl> + +<p>"launcher"는 지원되지 않는다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.menus.ContextType", 10)}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus#type-ContextType"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html new file mode 100644 index 0000000000..9a053e6639 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html @@ -0,0 +1,212 @@ +--- +title: menus.create() +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/create +--- +<div>{{AddonSidebar()}}</div> + +<p>주어진 객체대로 새 메뉴 항목을 만든다.</p> + +<p>이 함수는 다른 비공기 함수들과 달리 promise가 아니라 새 항목의 ID를 반환한다. 성공과 실패에 대한 처리는 필요하면 콜백으로 한다.</p> + +<p>다른 브라우저와의 호환성을 위해, <code>menus</code> 이름공간 뿐 아니라 <code>contextMenus</code> 이름공간으로도 이 메소드를 사용할 수 있다. 하지만 <code>contextMenus</code>로는 툴 메뉴 항목(<code>contexts: ["tools_menu"]</code>)은 만들 수 없다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">browser.menus.create( + createProperties, // object + function() {...} // optional function +) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>createProperties</code></dt> + <dd><code>object</code>. 새 메뉴 항목의 속성들</dd> + <dd> + <dl class="reference-values"> + <dt><code>checked</code> {{optional_inline}}</dt> + <dd><code>boolean</code>. checkbox나 radio 항목의 초기값: 선택은 <code>true</code>, 선택이 아니면 <code>false</code>. radio 항목이라면 그룹 중에서 하나만 선택된 것으로 할 수 있다.</dd> + <dt><code>command</code> {{optional_inline}}</dt> + <dd> + <p><code>string</code>. 클릭 했을 때 수행할 동작을 기술한다. 가능한 값은:</p> + + <ul> + <li><code>"_execute_browser_action"</code>: 확장의 브라우저 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.</li> + <li><code>"_execute_page_action"</code>: 확장의 페이지 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.</li> + <li><code>"_execute_sidebar_action"</code>: 확장의 사이드바를 연다.</li> + </ul> + + <p>항목을 클릭하면 여전히 {{WebExtAPIRef("menus.onClicked")}} 이벤트도 발생한다. 어느게 먼저 인지는 보장되지 않지만 <code>onClicked</code>이 발생하기 전에 명령이 실행될 것이다.</p> + </dd> + <dt><code>contexts</code> {{optional_inline}}</dt> + <dd> + <p><code>{{WebExtAPIRef('menus.ContextType')}}</code>의 <code>배열</code>. 메뉴 항목이 표시할 콘텍스트의 배열. 생략되면:</p> + + <ul> + <li>상위 항목에 콘텍스트가 설정되었으면 그걸 물려받는다.</li> + <li>아니면, 항목은 ["page"]로 설정된다.</li> + </ul> + </dd> + <dt><code>documentUrlPatterns</code> {{optional_inline}}</dt> + <dd><code><code>string</code></code>의 <code>배열</code>. 메뉴 항목의 표시를 URL이 주어진 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>과 일치하는 문서로 제한한다. 프레임에도 적용된다.</dd> + <dt><code>enabled</code> {{optional_inline}}</dt> + <dd><code>boolean</code>. 메뉴 항목이 사용 가능한지 아닌지를 지정한다. 기본값은 <code>true</code>.</dd> + <dt><code>icons</code> {{optional_inline}}</dt> + <dd> + <p><code>object</code>. One or more custom icons to display next to the item. Custom icons can only be set for items appearing in submenus. This property is an object with one property for each supplied icon: the property's name should include the icon's size in pixels, and path is relative to the icon from the extension's root directory. The browser tries to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display. To avoid any scaling, you can specify icons like this:</p> + + <pre class="brush: json no-line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"16":</span> <span class="string token">"path/to/geo-16.png"</span><span class="punctuation token">,</span> + <span class="key token">"32":</span> <span class="string token">"path/to/geo-32.png"</span> + <span class="punctuation token">}</span></code></pre> + + <p>Alternatively, you can specify a single SVG icon, and it will be scaled appropriately:</p> + + <pre class="brush: json no-line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"16":</span> <span class="string token">"path/to/geo.svg"</span> + <span class="punctuation token">}</span></code></pre> + + <div class="blockIndicator note"> + <p><strong>Note</strong>: The top-level menu item uses the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a> specified in the manifest rather than what is specified with this key.</p> + </div> + </dd> + <dt><code>id</code> {{optional_inline}}</dt> + <dd><code>string</code>. The unique ID to assign to this item. Mandatory for event pages. Cannot be the same as another ID for this extension.</dd> + <dt><code>onclick</code> {{optional_inline}}</dt> + <dd><code>function</code>. A function that will be called when the menu item is clicked. Event pages cannot use this: instead, they should register a listener for {{WebExtAPIRef('menus.onClicked')}}.</dd> + <dt><code>parentId</code> {{optional_inline}}</dt> + <dd><code><code>integer</code></code> or <code><code>string</code></code>. The ID of a parent menu item; this makes the item a child of a previously added item. Note: If you have created more than one menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension.</dd> + <dt><code>targetUrlPatterns</code> {{optional_inline}}</dt> + <dd><code><code>string</code></code>의 <code>배열</code>. <code>documentUrlPatterns</code> 비슷한데, anchor 태그의 <code>href</code> 속성과 img/audio/video 태그의 <code>src</code> 속성에 기초해 걸러지는 것이다. 여기서 URL scheme는 뭐라도 상관없다. 설사 match pattern으로 보통은 허용되지 않는 것이라도 된다.</dd> + <dt><code>title</code> {{optional_inline}}</dt> + <dd> + <p><code>string</code>. The text to be displayed in the item. Mandatory unless <code>type</code> is "separator".</p> + + <p>You can use "%s" in the string. If you do this in a menu item, and some text is selected in the page when the menu is shown, then the selected text will be interpolated into the title. For example, if <code>title</code> is "Translate '%s' to Pig Latin" and the user selects the word "cool", then activates the menu, then the menu item's title will be: "Translate 'cool' to Pig Latin".</p> + + <p>If the title contains an ampersand "&" then the next character will be used as an access key for the item, and the ampersand will not be displayed. Exceptions to this are:</p> + + <ul> + <li>If the next character is also an ampersand: then a single ampersand will be displayed and no access key will be set. In effect, "&&" is used to display a single ampersand.</li> + <li>If the next characters are the interpolation directive "%s": then the ampersand will not be displayed and no access key will be set.</li> + <li>If the ampersand is the last character in the title: then the ampersand will not be displayed and no access key will be set.</li> + </ul> + + <p>Only the first ampersand will be used to set an access key: subsequent ampersands will not be displayed but will not set keys. So "&A and &B" will be shown as "A and B" and set "A" as the access key.</p> + </dd> + <dt><code>type</code> {{optional_inline}}</dt> + <dd>{{WebExtAPIRef('menus.ItemType')}}. The type of menu item: "normal", "checkbox", "radio", "separator". Defaults to "normal".</dd> + <dt><code>visible</code> {{optional_inline}}</dt> + <dd><code>boolean</code>. Whether the item is shown in the menu. Defaults to <code>true</code>.</dd> + </dl> + </dd> + <dt><code>callback</code> {{optional_inline}}</dt> + <dd><code>function</code>. Called when the item has been created. If there were any problems creating the item, details will be available in {{WebExtAPIRef('runtime.lastError')}}.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p><code><code>integer</code></code> or <code><code>string</code></code>. The ID of the newly created item.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.menus.create", 10)}}</p> + +<h2 id="예제">예제</h2> + +<p>이 예제는 페이지에 선택된 텍스트가 있을 때 표시되는 콘텍스트 메뉴 항목을 만든다. 동작은 선택된 텍스트를 콘솔에 로그로 남기는 것이다:</p> + +<pre class="brush: js">browser.menus.create({ + id: "log-selection", + title: "Log '%s' to the console", + contexts: ["selection"] +}); + +browser.menus.onClicked.addListener(function(info, tab) { + if (info.menuItemId == "log-selection") { + console.log(info.selectionText); + } +});</pre> + +<p>이 예제는 두 개의 radio 항목을 추가한다. 선택해서 테두리의 색을 녹색이나 청색으로 할 수 있다. 이 예제는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab 권한</a>이 필요하다.</p> + +<pre class="brush: js">function onCreated() { + if (browser.runtime.lastError) { + console.log("error creating item:" + browser.runtime.lastError); + } else { + console.log("item created successfully"); + } +} + +browser.menus.create({ + id: "radio-green", + type: "radio", + title: "Make it green", + contexts: ["all"], + checked: false +}, onCreated); + +browser.menus.create({ + id: "radio-blue", + type: "radio", + title: "Make it blue", + contexts: ["all"], + checked: false +}, onCreated); + +var makeItBlue = 'document.body.style.border = "5px solid blue"'; +var makeItGreen = 'document.body.style.border = "5px solid green"'; + +browser.menus.onClicked.addListener(function(info, tab) { + if (info.menuItemId == "radio-blue") { + browser.tabs.executeScript(tab.id, { + code: makeItBlue + }); + } else if (info.menuItemId == "radio-green") { + browser.tabs.executeScript(tab.id, { + code: makeItGreen + }); + } +});</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus#method-create"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html new file mode 100644 index 0000000000..7cb70b5fa7 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html @@ -0,0 +1,58 @@ +--- +title: menus.getTargetElement() +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement +--- +<div>{{AddonSidebar}}{{Draft}}</div> + +<p class="summary">주어진 <code>targetElementId</code>에 해당하는 요소를 돌려준다.</p> + +<p>이 함수는 오직 클릭된 요소가 있는 문서에서만 동작한다. so everywhere but in the background page.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">let elem = browser.menus.getTargetElement(targetElementId); +</pre> + +<h3 id="파라메터">파라메터</h3> + +<dl> + <dt><code>targetElementId</code></dt> + <dd><code>{{WebExtAPIRef("menus.onClicked")}}</code> 핸들러 또는 <code>{{WebExtAPIRef("menus.onShown")}}</code> 이벤트에 전달된 <code>{{WebExtAPIRef("menus.OnClickData")}}</code> 객체의 속성</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p><code>targetElementId</code>로 참조되는 요소를 반환한다. <code>targetElementId</code>가 유효하지 않으면 <code>null</code>를 반환한다.</p> + +<h2 id="예제">예제</h2> + +<p>아래 예제는 인수로 전달된 <code>info.targetElementId</code> 값으로 요소를 구하고, 그것을 지운다. 하지만 <code>getTargetElement</code>는 요소가 있는 문서에서만 동작하므로 문서가 있는 탭에 스크립트를 주입하는 형태로 처리하고 있다. </p> + +<pre class="brush: js">browser.menus.create({ + title: "Remove element", + documentUrlPatterns: ["*://*/*"], + contexts: ["audio", "editable", "frame", "image", "link", "page", "password", "video"], + onclick(info, tab) { + browser.tabs.executeScript(tab.id, { + frameId: info.frameId, + code: `browser.menus.getTargetElement(${info.targetElementId}).remove();`, + }); + }, +}); +</pre> + +<p>{{WebExtExamples}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("webextensions.api.menus.getTargetElement")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{WebExtAPIRef("menus.create")}}</li> + <li>{{WebExtAPIRef("menus.OnClickData")}}</li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html new file mode 100644 index 0000000000..58f5af938b --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html @@ -0,0 +1,183 @@ +--- +title: contextMenus +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus +--- +<div>{{AddonSidebar}}</div> + +<p>브라우저의 메뉴 시스템에 항목을 추가한다.</p> + +<p>이 API는 크롬의 <a href="https://developer.chrome.com/extensions/contextMenus">"contextMenus"</a> API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, 파이어폭스의 <code>browser.menus</code> API는 여기에 몇 가지 특징을 더했다.</p> + +<p>파이어폭스 55 이전에 이 API의 원래 이름은 <code>contextMenus</code>였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 <code>contextMenus</code>를 사용할 수 있다.</p> + +<p>이 API를 사용하려면 '<code>menus</code>' <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 필요하다. <code>menus</code> 대신에 <code>contextMenus</code>를 사용해도 된다. <code>contextMenus</code>를 사용했으면 API도 <code>browser.contextMenus</code>를 써야 한다.</p> + +<p>콘텐트 스크립트에서는 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>만 사용할 수 있다.</p> + +<h2 id="메뉴_항목_만들기">메뉴 항목 만들기</h2> + +<p>메뉴 항목을 만들려면 {{WebExtAPIRef("contextMenus.create()")}} 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.</p> + +<p>항목의 클릭을 처리하려면 {{WebExtAPIRef("contextMenus.onClicked")}} 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는{{WebExtAPIRef("contextMenus.OnClickData")}} 객체를 받는다.</p> + +<p>콘텍스트 메뉴는 네 종류다. <code>create()</code>에 주어지는 <code>type</code> 속성으로 지정한다:</p> + +<ul> + <li>"normal": 그냥 라벨만 표시된다.</li> + <li>"checkbox": 라벨 옆에 추가로 체크표시가 있어 두가지 상태를 표현하는 메뉴 항목이다. 클릭할 때마다 라벨표시가 토글된다. 리스너는 두가지 속성을 추가로 받게 된다: "checked"는 현재 체크 상태를 가리키고, "wasChecked"는 클릭 이벤트 전의 체크 상태를 가리킨다.</li> + <li>"radio": 여러 선택지 중의 하나라는 것을 표현하는 메뉴 항목이다. 라벨 옆에 체크표시가 있고, "checked"와 "wasChecked" 속성이 있다는 것은 checkbox와 같다. 다른 점은 radio 항목을 하나 이상 만들어 그룹이 되면, 오직 클릭하는 하나만 선택이 된다는 것이다.</li> + <li>"separator": 항목을 그룹짓는 구분선이다.</li> +</ul> + +<p>메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15431/menus-1.png" style="display: block; height: 406px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<h2 id="아이콘">아이콘</h2> + +<p><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">"icons" manifest 키</a>로 확장이 아이콘을 가졌으면, 콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15433/menus-2.png" style="display: block; height: 409px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>서버메뉴에 대해서만 {{WebExtAPIRef("menus.create()")}}에 <code>icons</code> 옵션을 전달해서 아이콘을 지정할 수 있다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15435/menus-3.png" style="display: block; height: 396px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<h2 id="예제">예제</h2> + +<p>아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15437/menus-4.png" style="display: block; height: 790px; margin-left: auto; margin-right: auto; width: 500px;">이 서버메뉴는 아래 코드로 만들 수 있다:</p> + +<pre class="brush: js">browser.menus.create({ + id: "remove-me", + title: browser.i18n.getMessage("menuItemRemoveMe"), + contexts: ["all"] +}, onCreated); + +browser.menus.create({ + id: "separator-1", + type: "separator", + contexts: ["all"] +}, onCreated); + +browser.menus.create({ + id: "greenify", + type: "radio", + title: browser.i18n.getMessage("menuItemGreenify"), + contexts: ["all"], + checked: true, + icons: { + "16": "icons/paint-green-16.png", + "32": "icons/paint-green-32.png" + } +}, onCreated); + +browser.menus.create({ + id: "bluify", + type: "radio", + title: browser.i18n.getMessage("menuItemBluify"), + contexts: ["all"], + checked: false, + icons: { + "16": "icons/paint-blue-16.png", + "32": "icons/paint-blue-32.png" + } +}, onCreated); + +browser.menus.create({ + id: "separator-2", + type: "separator", + contexts: ["all"] +}, onCreated); + +var checkedState = true; + +browser.menus.create({ + id: "check-uncheck", + type: "checkbox", + title: browser.i18n.getMessage("menuItemUncheckMe"), + contexts: ["all"], + checked: checkedState +}, onCreated);</pre> + +<h2 id="타입">타입</h2> + +<dl> + <dt>{{WebExtAPIRef("contextMenus.ContextType")}}</dt> + <dd>메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser_action", "editable", "frame", "image", "link", "page", "page_action", "password", "selection", "tab", "video".</dd> + <dt>{{WebExtAPIRef("contextMenus.ItemType")}}</dt> + <dd>메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".</dd> + <dt>{{WebExtAPIRef("contextMenus.OnClickData")}}</dt> + <dd>메뉴 항목이 클릭됐을 때 보내지는 정보.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<dl> + <dt>{{WebExtAPIRef("contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT")}}</dt> + <dd>최상위에 추가할 수 있는 ContextType이 "browser_action"이나 "page_action"인 메뉴 항목의 최대 수량.</dd> +</dl> + +<h2 id="함수">함수</h2> + +<dl> + <dt>{{WebExtAPIRef("contextMenus.create()")}}</dt> + <dd>새 콘텍스트 메뉴 항목을 만든다.</dd> + <dt>{{WebExtAPIRef("contextMenus.update()")}}</dt> + <dd>전에 만든 콘텍스트 메뉴 항목을 갱신한다.</dd> + <dt>{{WebExtAPIRef("contextMenus.remove()")}}</dt> + <dd>콘텍스트 메뉴 항목을 지운다.</dd> + <dt>{{WebExtAPIRef("contextMenus.removeAll()")}}</dt> + <dd>확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<dl> + <dt>{{WebExtAPIRef("contextMenus.onClicked")}}</dt> + <dd>콘텍스트 메뉴 항목이 클릭하면 발생한다.</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{ Compat("webextensions.api.menus", 1, "true") }}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html new file mode 100644 index 0000000000..1fd716e3bb --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html @@ -0,0 +1,144 @@ +--- +title: menus.onShown +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown +--- +<div>{{AddonSidebar()}}</div> + +<p>Fired when the browser has shown a menu.</p> + +<p>An extension can use this event to update its menu items using information that's only available once the menu is shown. Typically an extension will figure out the update in its <code>onShown</code> handler and then call {{WebExtAPIRef("menus.refresh()")}} to update the menu itself.</p> + +<p>The handler can add, remove, or update menu items.</p> + +<p>For example, the <a href="https://github.com/mdn/webextensions-examples/tree/master/menu-labelled-open">menu-labelled-open</a> example extension adds a menu item that's shown when the user clicks a link, and that, when clicked, just opens the link. It uses <code>onShown</code> and <code>refresh()</code> to annotate the menu item with the hostname for the link, so the user can easily see where they will go before they click.</p> + +<p>Note that an extension should not take too much time before calling <code>refresh()</code>, or the update will be noticeable to the user.</p> + +<p>The handler is passed some information about the menu and its contents, and some information from the page (such as the link and/or selection text). To get access to the information from the page, your extension must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for it.</p> + +<p>If the <code>onShown</code> handler calls any asynchronous APIs, then it's possible that the menu has been closed again before the handler resumes execution. Because of this, if a handler calls any asynchronous APIs, it should check that the menu is still being displayed before it updates the menu. For example:</p> + +<pre class="brush: js">var lastMenuInstanceId = 0; +var nextMenuInstanceId = 1; + +browser.menus.onShown.addListener(async function(info, tab) { + var menuInstanceId = nextMenuInstanceId++; + lastMenuInstanceId = menuInstanceId; + + // Call an async function + await .... ; + + // After completing the async operation, check whether the menu is still shown. + if (menuInstanceId !== lastMenuInstanceId) { + return; // Menu was closed and shown again. + } + // Now use menus.create/update + menus.refresh. +}); + +browser.menus.onHidden.addListener(function() { + lastMenuInstanceId = 0; +});</pre> + +<p>Note that it is possible to call menus API functions synchronously, and in this case you don't have to perform this check:</p> + +<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) { + browser.menus.update(menuId, ...); + // Note: Not waiting for returned promise. + browser.menus.refresh(); +});</pre> + +<p>However, if you call these APIs asynchronously, then you do have to perform the check:</p> + +<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) { + var menuInstanceId = nextMenuInstanceId++; + lastMenuInstanceId = menuInstanceId; + + await browser.menus.update(menuId, ...); + // must now perform the check + if (menuInstanceId !== lastMenuInstanceId) { + return; + } + browser.menus.refresh(); +});</pre> + +<p>Firefox makes this event available via the <code>contextMenus</code> namespace as well as the <code>menus</code> namespace.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">browser.menus.onShown.addListener(listener) +browser.menus.onShown.removeListener(listener) +browser.menus.onShown.hasListener(listener) +</pre> + +<p>Events have three functions:</p> + +<dl> + <dt><code>addListener(listener)</code></dt> + <dd>Adds a listener to this event.</dd> + <dt><code>removeListener(listener)</code></dt> + <dd>Stop listening to this event. The <code>listener</code> argument is the listener to remove.</dd> + <dt><code>hasListener(listener)</code></dt> + <dd>Check whether <code>listener</code> is registered for this event. Returns <code>true</code> if it is listening, <code>false</code> otherwise.</dd> +</dl> + +<h2 id="addListener_syntax">addListener syntax</h2> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>callback</code></dt> + <dd> + <p>Function that will be called when this event occurs. The function will be passed the following arguments:</p> + + <dl class="reference-values"> + <dt><code>info</code></dt> + <dd> + <p><code>Object</code>. This is just like the {{WebExtAPIRef('menus.OnClickData')}} object, except it contains two extra properties:</p> + + <ul> + <li><code>contexts</code>: an array of all the {{WebExtAPIRef("menus.ContextType", "contexts")}} that are applicable to this menu.</li> + <li><code>menuIds</code>: an array of IDs of all menu items belonging to this extension that are being shown in this menu.</li> + </ul> + + <p>Compared with <code>menus.OnClickData</code>, the <code>info</code> object also omits the <code>menuItemId</code> and <code>modifiers</code> properties, because of course these are not available until a menu item has been selected.</p> + + <p>The <code>contexts</code>, <code>menuIds</code>, <code>frameId</code>, and <code>editable</code> properties are always provided. All the other properties in <code>info</code> are only provided if the extension has the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the page.</p> + </dd> + </dl> + + <dl class="reference-values"> + <dt><code>tab</code></dt> + <dd>{{WebExtAPIRef('tabs.Tab')}}. The details of the tab where the click took place. If the click did not take place in or on a tab, this parameter will be missing.</dd> + </dl> + </dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.menus.onShown", 10)}}</p> + +<h2 id="예제">예제</h2> + +<p>This example listens for the context menu to be shown over a link, then updates the <code>openLabelledId</code> menu item with the link's hostname:</p> + +<pre class="brush: js">function updateMenuItem(linkHostname) { + browser.menus.update(openLabelledId, { + title: `Open (${linkHostname})` + }); + browser.menus.refresh(); +} + +browser.menus.onShown.addListener(info => { + if (!info.linkUrl) { + return; + } + let linkElement = document.createElement("a"); + linkElement.href = info.linkUrl; + updateMenuItem(linkElement.hostname); +}); +</pre> + +<p>{{WebExtExamples}}</p> diff --git a/files/ko/mozilla/add-ons/webextensions/api/index.html b/files/ko/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..a55642e38a --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,51 @@ +--- +title: JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - NeedsTranslation + - TopicStub + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +<div>{{AddonSidebar}}</div> + +<div> +<p>The WebExtension JavaScript APIs can be used inside the add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the add-on, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p> + +<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your add-on's manifest.json.</p> + +<p>You can access the APIs using the <code>browser</code> namespace:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span> + <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span> +setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +</div> + +<div> +<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p> + +<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p> + +<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p> +</div> + +<div>{{SubpagesWithSummaries}}</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html new file mode 100644 index 0000000000..7d5ad34823 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html @@ -0,0 +1,99 @@ +--- +title: pageAction +slug: Mozilla/Add-ons/WebExtensions/API/pageAction +translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction +--- +<div>{{AddonSidebar}}</div> + +<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">페이지 액션</a>은 브라우저의 주소창에 있는 아이콘이다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p> + +<p>아이콘 클릭에 대한 대응은 리스너를 등록하고 클릭 이벤트를 기다리는 것이나, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Popups">팝업창</a>이 열리게 하는 것일 수 있다.</p> + +<p>팝업창은 보통의 웹페이지처럼 HTML, CSS, 그리고 자바스크립트로 내용과 동작을 작성할 수 있다. 팝업창에서 실행되는 자바스크립트는 백그라운드 스크립트와 마찬가지로 모든 확장앱 API를 사용할 수 있다.</p> + +<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>의 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action 키</a>에 페이지 액션의 대부분의 속성들을 정의할 수 있지만, 이것들은 확정되는 것이라 이후에 바꿀 수 없다. 하지만 이 API는 그것들을 프로그램적으로 재정의하는 것도 가능하다. 그러나 API는 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>에 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> 키가 있어야만 사용할 수 있게 되므로 설사 모든 것을 프로그램적으로 할 계획이더라도 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action 키</a>는 있어야 한다.</p> + +<p>페이지 액션은 특정 페이지에만 적절한 동작들을 위한 것이다(이럴테면 "현재 탭을 북마크하기" 같은). 그렇지 않고, 브라우저가 전반적으로 관련되는 동작이라면(가령은 "모든 북마크 보기" 라면) 브라우저 액션을 대신 사용하라.</p> + +<h2 id="자료형">자료형</h2> + +<dl> + <dt>{{WebExtAPIRef("pageAction.ImageDataType")}}</dt> + <dd>이미지에 대한 픽셀 자료.</dd> +</dl> + +<h2 id="함수">함수</h2> + +<dl> + <dt>{{WebExtAPIRef("pageAction.show()")}}</dt> + <dd>지정한 탭에 페이지 액션을 보인다.</dd> + <dt>{{WebExtAPIRef("pageAction.hide()")}}</dt> + <dd>지정한 탭의 페이지 액션을 숨긴다.</dd> + <dt>{{WebExtAPIRef("pageAction.isShown()")}}</dt> + <dd>페이지 액션이 보이는지 아닌지 검사한다.</dd> + <dt>{{WebExtAPIRef("pageAction.setTitle()")}}</dt> + <dd>페이지 액션의 제목을 설정한다. 이것은 페이지 액션위에 툴팁으로 표시된다.</dd> + <dt>{{WebExtAPIRef("pageAction.getTitle()")}}</dt> + <dd>페이지 액션의 제목을 얻는다.</dd> + <dt>{{WebExtAPIRef("pageAction.setIcon()")}}</dt> + <dd>페이지 액션의 아이콘을 설정한다.</dd> + <dt>{{WebExtAPIRef("pageAction.setPopup()")}}</dt> + <dd>페이지 액션의 팝업 URL을 설정한다.</dd> + <dt>{{WebExtAPIRef("pageAction.getPopup()")}}</dt> + <dd>페이지 액션의 팝업 URL을 얻는다.</dd> + <dt>{{WebExtAPIRef("pageAction.openPopup()")}}</dt> + <dd>페이지 액션의 팝업을 연다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<dl> + <dt>{{WebExtAPIRef("pageAction.onClicked")}}</dt> + <dd>페이지 액션의 아이콘이 클릭되면 발생한다. 페이지 액션이 팝업이 설정되어 있으면 발생하지 않는다.</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("webextensions.api.pageAction")}}</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/pageAction"><code>chrome.pageAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json"><code>page_action.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html new file mode 100644 index 0000000000..523887dd72 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html @@ -0,0 +1,93 @@ +--- +title: pageAction.show() +slug: Mozilla/Add-ons/WebExtensions/API/pageAction/show +translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction/show +--- +<div>{{AddonSidebar()}}</div> + +<p>지정한 탭의 페이지 액션을 보인다. 페이지 액션은 해당 탭이 활성일 때 표시된다.</p> + +<p><code>show()</code>는 설정된 URL 패턴과 상관없이 동작한다. 따라서 <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/page_action"><code>show_matches</code></a>와 일치하지 않아도 <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/page_action"><code>hide_matches</code></a>여도 표시된다.</p> + +<p><code>show()</code>는 아무런 내용도 없는 탭에는 효과가 없다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">browser.pageAction.show( + tabId // integer +) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>tabId</code></dt> + <dd><code>integer</code>. 페이지 액션을 표시할 탭의 ID</dd> + <dt> + <h3 id="반환값">반환값</h3> + + <p>값 없이 해결을 수행하는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p> + </dt> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.pageAction.show")}}</p> + +<h2 id="예제">예제</h2> + +<p>콘텍스트 메뉴가 선택되면 페이지 액션을 보이는 예제다. 메뉴를 만들려면 <code>contextMenus</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest</a>에 필요하다.</p> + +<pre class="brush: js">browser.contextMenus.create({ + id: "show", + title: "Show page action" +}); + +browser.contextMenus.onClicked.addListener(function(info, tab) { + if (info.menuItemId == "show") { + browser.pageAction.show(tab.id); + } +}); +</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/pageAction#method-show"><code>chrome.pageAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json"><code>page_action.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/index.html new file mode 100644 index 0000000000..254cd7bdcf --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/index.html @@ -0,0 +1,111 @@ +--- +title: storage +slug: Mozilla/Add-ons/WebExtensions/API/storage +tags: + - 비표준 + - 웹확장 + - 인터페이스 + - 저장소 + - 참조 + - 확장 +translation_of: Mozilla/Add-ons/WebExtensions/API/storage +--- +<div>{{AddonSidebar}}</div> + +<p>웹확장이 데이터를 저장하고, 확인하고, 저장된 항목의 변화를 감시할 수 있도록 해 준다.</p> + +<p>저장소 시스템은 <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>에 기반하는데 약간의 차이가 있다:</p> + +<ul> + <li>비동기로 동작한다.</li> + <li>값은 도메인이 아니라 확장에 딸린 것이다 (예. 같은 키/값 쌍일 경우 확장의 모든 스크립트에서 사용할 수 있다).</li> + <li>저장된 값은 그저 문자열이 아니라 JSON-화가능 값이다. 배열과 객체도 된다. 단 포함된 값도 JSON으로 나타낼 수 있어야 하므로 DOM의 노드는 안된다. 값을 저장하기 전에 JSON 문자열로 바꿀 필요는 없지만, 내부적으로 JSON으로 다뤄지므로 JSON화가능임은 요구된다.</li> + <li>같은 API 호출로 다수의 키/값 쌍을 다룰 수 있다.</li> +</ul> + +<p>이 API를 사용하려면 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> 파일에 "storage" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 포함돼야 한다.</p> + +<p>각 웹확장은 자신만의 저장소를 따로 가진다. which can be split into different types of storage.</p> + +<p>이 API는 {{domxref("Window.localStorage")}}와 비슷하지만, 확장 코드가 확장 관련 데이터를 저장하는데 <code>Window.localStorage</code>를 사용하지 말 것을 권장한다. 사적이 이유로 사용자가 방문 기록이나 데이터를 지우는 다양한 상황에서 확장이 localStorage API로 저장된 데이터는 지워지지만, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> API로 저장한 데이터는 정확하게 유지된다.</p> + +<h2 id="자료형">자료형</h2> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea")}}</dt> + <dd>저장소 영역을 표현하는 객체.</dd> + <dt>{{WebExtAPIRef("storage.StorageChange")}}</dt> + <dd>저장소 영역의 변화를 표현하는 객체.</dd> +</dl> + +<h2 id="속성">속성</h2> + +<p><code>storage</code>에는 저장소 영역의 가능한 형식을 나타내는 세가지 속성이 있다.</p> + +<dl> + <dt>{{WebExtAPIRef("storage.sync")}}</dt> + <dd><code>sync</code> 저장소 영역을 표현한다. <code>sync</code> 저장소의 항목은 브라우저에 동기되므로 사용자가 로그인한 모든 브라우저에서 사용할 수 있다. 기기가 달라도 된다.</dd> + <dt>{{WebExtAPIRef("storage.local")}}</dt> + <dd><code>local</code> 저장소 영역을 표현한다. <code>local</code> 저장소의 항목은 확장이 설치된 기기에 한정된다.</dd> + <dt>{{WebExtAPIRef("storage.managed")}}</dt> + <dd><code>managed</code> 저장소 영역을 표현한다. <code>managed</code> 저장소의 항목은 도메인 관리자가 설정하고 확장은 읽을 수만 있으므로 변경을 시도하면 에러가 발생한다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<dl> + <dt>{{WebExtAPIRef("storage.onChanged")}}</dt> + <dd>저장소 영역의 항목에 변화가 있으면 발생한다.</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("webextensions.api.storage")}}</p> + +<div class="hidden note"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<h3 id="Edge_incompatibilities">Edge incompatibilities</h3> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html new file mode 100644 index 0000000000..2d8e31c579 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -0,0 +1,88 @@ +--- +title: storage.local +slug: Mozilla/Add-ons/WebExtensions/API/storage/local +tags: + - 로칼 + - 비표준 + - 저장소 +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local +--- +<div>{{AddonSidebar()}}</div> + +<p><code>local</code> 저장소 영역을 표현한다. <code>local</code> 저장소의 항목은 확장이 설치된 기기에 제한된다.</p> + +<p>브라우저는 local 저장소에 저장할 수 있는 데이터의 양을 제한한다:</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage" 권한</a>이 없으면 크롬은 데이터의 양을 5M로 제한한다.</li> + <li>파이어폭스는 버전 56부터 "unlimitedStorage" 권한을 요청할 수 있다. 아직은 저장 용량을 제한하지는 않지만, 앞으로 그렇게 할 것이므로 큰 용량의 저장할 의도라면 지금 "unlimitedStorage" 권한을 요청하는 것이 좋다.</li> +</ul> + +<p>확장이 제거되면, 그것과 연결된 local 저장소는 지워진다.</p> + +<p>파이어폭스에서는 확장을 제거해도 local 저장소를 브라우저가 지우지 않도록 막을 수 있다. "about:config"에서 "keepUuidOnUninstall"와 "keepStorageOnUninstall" 두 브라우저 기본 설정을 <code>true</code>로 고치면 된다. 이 특징은 개발자가 확장을 테스트하는데 도움을 주려는 것이다. 확장 스스로 이 값들을 바꿀 수는 없다.</p> + +<p>이 API는 {{domxref("Window.localStorage")}}와 비슷하지만, 확장 코드가 확장 관련 데이터를 저장하는데 <code>Window.localStorage</code>를 사용하지 말 것을 권장한다. 사적이 이유로 사용자가 방문 기록이나 데이터를 지우는 다양한 상황에서 확장이 localStorage API로 저장된 데이터는 지워지지만, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> API로 저장한 데이터는 정확하게 유지된다.</p> + +<h2 id="메소드">메소드</h2> + +<p><code>local</code> 객체는 {{WebExtAPIRef("storage.StorageArea")}} 자료형에 정의된 메소드로 구현되었다:</p> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt> + <dd>저장소 영역에서 하나 이상의 항목을 가져온다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt> + <dd>저장소의 사용된 크기를 바이트단위로 얻는다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt> + <dd>저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다. 값을 설정하면 {{WebExtAPIRef("storage.onChanged")}} 이벤트가 발생한다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt> + <dd>저장소에서 하나 이상의 값을 지운다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt> + <dd>저장소의 모든 항목을 지워서 비운다.</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("webextensions.api.storage.local")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#property-local"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html new file mode 100644 index 0000000000..182a655ad6 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html @@ -0,0 +1,125 @@ +--- +title: StorageArea.get() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get +--- +<div>{{AddonSidebar()}}</div> + +<p>저장소에서 하나 이상의 항목을 가져온다.</p> + +<p>비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox">let gettingItem = browser.storage.<storageType>.get( + keys // null, string, object or array of strings +) +</pre> + +<p><code><storageType></code>는 읽기 가능한 저장소 중의 하나다 — {{WebExtAPIRef("storage.sync", "sync")}}, {{WebExtAPIRef("storage.local", "local")}}, 또는 {{WebExtAPIRef("storage.managed", "managed")}}.</p> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>keys</code></dt> + <dd>저장소에서 가져올 항목을 지정하는 키 (문자열) 또는 키들 (문자열의 배열 또는 기본값이 주어진 객체). 빈 문자열, 객체, 또는 배열이 주어지면 빈 객체가 반환된다. null이나 undefined가 주어지면 전체 항목이 반환된다.</dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>반환된 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 저장소에서 찾은 모든 항목을 담은 객체를 인수로 완료를 수행한다. 실패하면 에러 문장으로 거부가 수행된다. managed 저장소가 설정되어 있지 않으면 <code>undefined</code>가 반환된다.</p> + +<div class="warning"> +<p>When used within a content script in Firefox versions prior to 52, the Promise returned by <code>browser.storage.local.get()</code> is fulfilled with an Array containing one Object. The Object in the Array contains the <code>keys</code> found in the storage area, as described above. The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as <code>chrome.storage.local.get()</code>, it correctly passes an Object to the callback function.</p> +</div> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("webextensions.api.storage.StorageArea.get")}}</p> + +<h2 id="예제">예제</h2> + +<p>두 항목을 담고 있는 저장소를 가정한다:</p> + +<pre class="brush: js">// storage contains two items, +// "kitten" and "monster" +browser.storage.local.set({ + kitten: {name:"Mog", eats:"mice"}, + monster: {name:"Kraken", eats:"people"} +});</pre> + +<p>promise에 대한 성공과 실패 핸들러를 정의한다:</p> + +<pre class="brush: js">function onGot(item) { + console.log(item); +} + +function onError(error) { + console.log(`Error: ${error}`); +}</pre> + +<p><code>keys</code> 인수없이 전체를 구한다:</p> + +<pre class="brush: js">let gettingItem = browser.storage.local.get(); +gettingItem.then(onGot, onError); + +// -> Object { kitten: Object, monster: Object }</pre> + +<p>빈 인수는 빈 객체를 반환한다:</p> + +<pre class="brush: js">// with an empty array, retrieve nothing +let gettingItem = browser.storage.local.get([]); +gettingItem.then(onGot, onError); + +// -> Object { }</pre> + +<p>이름을 인수로 하면 일치하는 항목을 담은 객체를 반환한다:</p> + +<pre class="brush: js">let gettingItem = browser.storage.local.get("kitten"); +gettingItem.then(onGot, onError); + +// -> Object { kitten: Object }</pre> + +<p>이름들을 인수로 하면 전체 일치 항목을 모두 담은 객체를 반환한다:</p> + +<pre class="brush: js">let gettingItem = browser.storage.local.get(["kitten", "monster", "grapefruit"]); +gettingItem.then(onGot, onError); + +// -> Object { kitten: Object, monster: Object } </pre> + +<p>객체를 인수로 하면 주어진 객체의 키들을 이름으로 항목을 찾아서 돌려준다:</p> + +<pre class="brush: js">let gettingItem = browser.storage.local.get({ + kitten: "no kitten", + monster: "no monster", + grapefruit: { + name: "Grape Fruit", + eats: "Water" + } +}); + +// -> Object { kitten: Object, monster: Object, grapefruit: Object } +</pre> + +<p>{{WebExtExamples}}</p> + +<h3 id="크롬_예제">크롬 예제</h3> + +<p>크롬에서는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>가 아니라 콜백 형태로 해야 한다.</p> + +<pre class="brush: js">chrome.storage.local.get("kitten", function(items){ + console.log(items.kitten); // -> {name:"Mog", eats:"mice"} +});</pre> + +<p class="brush: js">또는 화살표 함수로 할 수 있다.</p> + +<pre class="brush: js">chrome.storage.local.get("kitten", items=>{ + console.log(items.kitten); // -> {name:"Mog", eats:"mice"} +});</pre> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html new file mode 100644 index 0000000000..00d46ba6ec --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html @@ -0,0 +1,85 @@ +--- +title: storage.StorageArea +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea +tags: + - API + - Add-ons + - Extensions + - NeedsTranslation + - Non-standard + - Reference + - Storage + - StorageArea + - TopicStub + - Type + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea +--- +<div>{{AddonSidebar()}}</div> + +<p>StorageArea is an object representing a storage area.</p> + +<h2 id="Type">Type</h2> + +<p>Values of this type are objects.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt> + <dd>Retrieves one or more items from the storage area.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt> + <dd>Gets the amount of storage space (in bytes) used one or more items being stored in the storage area.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt> + <dd>Stores one or more items in the storage area. If an item already exists, its value will be updated.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt> + <dd>Removes one or more items from the storage area.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt> + <dd>Removes all items from the storage area.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("webextensions.api.storage.StorageArea")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#type-StorageArea"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html new file mode 100644 index 0000000000..5201fd64c3 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html @@ -0,0 +1,90 @@ +--- +title: StorageArea.set() +slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set +--- +<div>{{AddonSidebar()}}</div> + +<p>저장소 영역에 하나 이상의 항목을 저장하거나, 있는 항목을 고친다.</p> + +<p>이 API로 값을 저장하거나 고치면, {{WebExtAPIRef("storage.onChanged")}} 이벤트가 발생한다.</p> + +<p>비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">let settingItem = browser.storage.<storageType>.set( + keys // object +) +</pre> + +<p><code><storageType></code>은 쓰기 가능한 저장소 중의 하나다 — {{WebExtAPIRef("storage.sync")}} 또는 {{WebExtAPIRef("storage.local")}}.</p> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>keys</code></dt> + <dd> + <p>저장소에 저장할 하나 이상의 키/값 쌍을 가진 객체다. 이미 있는 항목이라면 그 값은 고쳐진다.</p> + + <p>값은 <a href="/en-US/docs/Glossary/Primitive">기초 자료형</a> (숫자, 논리값, 그리고 문자열 같은) 또는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">배열</a></code>이다.</p> + + <p><code>Function</code>, <code>Date</code>, <code>RegExp</code>, <code>Set</code>, <code>Map</code>, <code>ArrayBuffer</code> 기타등등 다른 자료형의 저장은 일반적으로 안된다. 지원되지 않는 이런 자료형들은 빈 객체로 저장되거나 에러를 발생시킨다. 정확한 것은 브라우저에 달렸다.</p> + </dd> +</dl> + +<h3 id="반환값">반환값</h3> + +<p>반환된 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 동작이 성공하면 아무런 인수없이 완료를 수행하고, 실패하면 에러 문장과 함께 거부를 수행한다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("webextensions.api.storage.StorageArea.set")}}</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: js">function setItem() { + console.log("OK"); +} + +function gotKitten(item) { + console.log(`${item.kitten.name} has ${item.kitten.eyeCount} eyes`); +} + +function gotMonster(item) { + console.log(`${item.monster.name} has ${item.monster.eyeCount} eyes`); +} + +function onError(error) { + console.log(error) +} + +// define 2 objects +var monster = { + name: "Kraken", + tentacles: true, + eyeCount: 10 +} + +var kitten = { + name: "Moggy", + tentacles: false, + eyeCount: 2 +} + +// store the objects +browser.storage.local.set({kitten, monster}) + .then(setItem, onError); + +browser.storage.local.get("kitten") + .then(gotKitten, onError); +browser.storage.local.get("monster") + .then(gotMonster, onError); +</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html new file mode 100644 index 0000000000..37915371f5 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -0,0 +1,77 @@ +--- +title: storage.sync +slug: Mozilla/Add-ons/WebExtensions/API/storage/sync +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync +--- +<div>{{AddonSidebar()}}</div> + +<div> </div> + +<p><code>sync</code> 저장 공간을 의미합니다. <code>sync</code> 저장 공간에 있는 데이터는 브라우저 사이에서 동기화되며 서로 다른 기기 간에 사용자가 브라우저에 로그인 한 경우 언제든지 접근 가능합니다.</p> + +<p>Firefox에서 <code>sync.storage</code> 는 고유한 부가기능 ID에 의존성을 갖고 동작합니다. <code>sync.storage</code>, 를 사용하신다면 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">어플리케이션</a></code> manifest.json 파일에 있는 키를 통해 여러분의 부가기능에 고유한 ID를 부여해야 합니다.</p> + +<p>이 API는 주로 여러분의 부가기능에 사용자 설정 정보를 저장하고 서로 다른 프로필 간에 설정을 동기화 할 수 있도록 사용됩니다. 이 API는 100KB까지 저장할 수 있습니다. 이보다 더 큰 데이터를 저장하려고 하는 경우, API 요청은 특정한 에러 메시지를 반환할 것입니다. 이 API는 아쉽게도 현재까지 특정한 성능을 보장하진 않습니다.</p> + +<h2 id="메소드">메소드</h2> + +<p><code>sync</code> 객체는 {{WebExtAPIRef("storage.StorageArea")}} 타입에 정의 된 메소드를 제공합니다:</p> + +<dl> + <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt> + <dd>저장소 영역에서 하나 이상의 항목을 가져온다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt> + <dd>저장소의 사용된 크기를 바이트단위로 얻는다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt> + <dd>저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt> + <dd>저장소에서 하나 이상의 값을 지운다.</dd> + <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt> + <dd>저장소의 모든 항목을 지워서 비운다.</dd> +</dl> + +<h2 id="Browser_호환성">Browser 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.storage.sync")}}</p> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#property-sync"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html new file mode 100644 index 0000000000..1c36ddff1d --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html @@ -0,0 +1,131 @@ +--- +title: tabs.create() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/create +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create +--- +<div>{{AddonSidebar()}}</div> + +<p>새 탭을 만든다.</p> + +<p>이것은 비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">var creating = browser.tabs.create( + createProperties // object +) +</pre> + +<h3 id="매개변수">매개변수</h3> + +<dl> + <dt><code>createProperties</code></dt> + <dd><code>object</code>. 새 탭에 대한 속성들. 속성들에 대해 더 배우려면 {{WebExtAPIRef("tabs.Tab")}} 문서를 보라.</dd> + <dd> + <dl class="reference-values"> + <dt><code>active</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. 활성탭이 되는지를 정한다. 윈도우의 포커스에는 영향이 없다({{WebExtAPIRef('windows.update')}} 참조). 기본값은 <code>true</code>.</dd> + <dt><code>cookieStoreId</code> {{optional_inline}}</dt> + <dd><code>string</code>. 탭의 쿠키 저장 ID를 <code>cookieStoreId</code>로 지정한다. 이 옵션은 확장이 <code>"cookies"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 쓸 수 있다.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd><code>integer</code>. 윈도우에서 탭의 위치를 지정한다. 쓸 수 있는 값은 0에서 윈도에 있는 탭의 수까지다.</dd> + <dt><code>openerTabId</code>{{optional_inline}}</dt> + <dd><code>integer</code>. The ID of the tab that opened this tab. If specified, the opener tab must be in the same window as the newly created tab.</dd> + <dt><code>openInReaderMode</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. If <code>true</code>, open this tab in <a href="/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode">Reader Mode</a>. Defaults to <code>false</code>.</dd> + <dt><code>pinned</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. Whether the tab should be pinned. Defaults to <code>false</code>.</dd> + <dt><code>selected</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. 윈도우에서 탭이 선택되는지를 지정한다. 기본값은 <code>true</code>. + <div class="warning">이 속성은 사용이 중단되었다. 파이어폭스에서는 지원하지 않는다. <code>active</code>가 대신한다.</div> + </dd> + <dt><code>url</code>{{optional_inline}}</dt> + <dd><code>string</code>. 최초 표시될 URL. 기본값은 새 탭 페이지다.</dd> + <dd>URL은 반드시 scheme를 포함해야 한다 (가령은 'http://www.google.com'은 되지만, 'www.google.com'은 안된다).</dd> + <dd>보안상 파이어폭스에서 특권이 있는 URL은 안된다. 그래서 아래와 같은 URL을 주면 실패할 것이다:</dd> + <dd> + <ul> + <li>chrome: URL</li> + <li>javascript: URL</li> + <li>data: URL</li> + <li>file: URL (예, 파일시스템의 파일들. 단, 확장 안에 포함된 파일의 사용은 아래를 보라)</li> + <li>특권이 있는 about: URL (예, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span style="display: none;"> </span>. 특권이 없는 URL은 된다 (예, <code>about:blank</code>).</li> + <li>새 탭 페이지 (<code>about:newtab</code>)는 URL 값이 주어지지 않으면 열린다.</li> + </ul> + + <p>확장에 포함된 페이지의 로딩은 확장의 manifest.json 파일이 있는데서 시작하는 절대 경로를 써라. 예를 들면: '/path/to/my-page.html'. 만약 첫 '/'를 빼면 URL은 상대 경로로 취급되고, 다른 브라우저들은 다른 절대 경로를 생성해낼 것이다.</p> + </dd> + <dt><code>windowId</code>{{optional_inline}}</dt> + <dd><code>integer</code>. 새 탭이 만들어질 윈도우. 기본값은 현재 윈도우.</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the created tab. If the tab could not be created (for example, because <code>url</code> used a privileged scheme) the promise will be rejected with an error message.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.tabs.create", 10)}}</p> + +<h2 id="예제">예제</h2> + +<p>Open "https://example.org" in a new tab:</p> + +<pre class="brush: js">function onCreated(tab) { + console.log(`Created new tab: ${tab.id}`) +} + +function onError(error) { + console.log(`Error: ${error}`); +} + +browser.browserAction.onClicked.addListener(function() { + var creating = browser.tabs.create({ + url:"https://example.org" + }); + creating.then(onCreated, onError); +});</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs#method-create"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html new file mode 100644 index 0000000000..f3a923d31d --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html @@ -0,0 +1,213 @@ +--- +title: tabs +slug: Mozilla/Add-ons/WebExtensions/API/tabs +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - TopicStub + - WebExtensions + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs +--- +<div>{{AddonSidebar}}</div> + +<p>Interact with the browser's tab system.</p> + +<p>브라우저의 탭 시스템과의 상호작용.</p> + +<p>You can use this API to get a list of opened tabs, filtered by various criteria, and to open, update, move, reload, and remove tabs. You can't directly access the content hosted by tabs using this API, but you can insert JavaScript and CSS into tabs using the {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}} APIs.</p> + +<p>이 API는 열려있는 탭의 목록을 얻는데, 다양한 기준으로 걸러내는데, 그리고 탭을 열고, 고치고, 옮기고, 다시 싣고, 없애는데 사용할 수 있다. 이 API로 탭에 열린 콘텐트를 직접 다룰 수는 없지만, {{WebExtAPIRef("tabs.executeScript()")}}나 {{WebExtAPIRef("tabs.insertCSS()")}} API로 탭에 자바스크립트와 CSS를 끼워 넣을 수는 있다.</p> + +<p>You can use most of this API without any special permission. However:</p> + +<p>특별한 권한없이 이 API의 대부분을 사용할 수 있지만:</p> + +<ul> + <li>to access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the "tabs" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. In Firefox this also means you need "tabs" to {{WebExtAPIRef("tabs.query", "query")}} by URL.</li> + <li>to use {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}} you must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the tab</li> +</ul> + +<p> </p> + +<ul> + <li><code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>에 접근하려면 "tabs" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 한다. 파이어폭스에서 이 말은 URL로 {{WebExtAPIRef("tabs.query", "query")}} 하는데도 "tabs"가 필요하다는 뜻이다.</li> + <li>{{WebExtAPIRef("tabs.executeScript()")}}나 {{WebExtAPIRef("tabs.insertCSS()")}}를 사용하려면 탭에 대한 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host 권한</a>을 가져야 한다.</li> +</ul> + +<p> </p> + +<p>또는 이런 권한을 일시적으로 얻는 방법도 있다. 현재 활성 탭이거나 명시적인 사용자 동작의 응답이라면 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab" 권한</a>을 요청하면 된다.</p> + +<p>많은 탭 작업은 탭 ID를 사용한다. 탭 ID는 브라우저 세션 내에서 탭마다 고유하도록 보장된다. 브라우저가 다시 시작되면, 탭 ID를 재사용할 수 있고 그럴 것이다. 다시 시작하는 브라우저에 걸쳐서 탭에 정보를 연관시키려면 {{WebExtAPIRef("sessions.setTabValue()")}}를 사용해라.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.MutedInfoReason")}}</dt> + <dd>Specifies the reason a tab was muted or unmuted.</dd> + <dt>{{WebExtAPIRef("tabs.MutedInfo")}}</dt> + <dd>This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.</dd> + <dt>{{WebExtAPIRef("tabs.Tab")}}</dt> + <dd>This type contains information about a tab.</dd> + <dt>{{WebExtAPIRef("tabs.TabStatus")}}</dt> + <dd>Indicates whether the tab has finished loading.</dd> + <dt>{{WebExtAPIRef("tabs.WindowType")}}</dt> + <dd>The type of window that hosts this tab.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettingsMode")}}</dt> + <dd>Defines whether zoom changes are handled by the browser, by the add-on, or are disabled.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettingsScope")}}</dt> + <dd>Defines whether zoom changes will persist for the page's origin, or only take effect in this tab.</dd> + <dt>{{WebExtAPIRef("tabs.ZoomSettings")}}</dt> + <dd>Defines zoom settings {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, and default zoom factor.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.TAB_ID_NONE")}}</dt> + <dd>A special ID value given to tabs that are not browser tabs (for example, tabs in devtools windows).</dd> +</dl> + +<h2 id="Functions">Functions</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.connect()")}}</dt> + <dd>Sets up a messaging connection between the add-on's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.create()")}}</dt> + <dd>Creates a new tab.</dd> + <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt> + <dd>Creates a data URI encoding an image of the visible area of the currently active tab in the specified window.</dd> + <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt> + <dd>Detects the primary language of the content in a tab.</dd> + <dt>{{WebExtAPIRef("tabs.duplicate()")}}</dt> + <dd>Duplicates a tab.</dd> + <dt>{{WebExtAPIRef("tabs.executeScript()")}}</dt> + <dd>Injects JavaScript code into a page.</dd> + <dt>{{WebExtAPIRef("tabs.get()")}}</dt> + <dd>Retrieves details about the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt> + <dd>Gets details about all tabs in the specified window.</dd> + <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt> + <dd>Gets information about the tab that this script is running in, as a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd> + <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt> + <dd>Gets the tab that is selected in the specified window.</dd> + <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt> + <dd>Gets the current zoom factor of the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt> + <dd>Gets the current zoom settings for the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.highlight()")}}</dt> + <dd>Highlights one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.insertCSS()")}}</dt> + <dd>Injects CSS into a page.</dd> + <dt>{{WebExtAPIRef("tabs.removeCSS()")}}</dt> + <dd>Removes from a page CSS which was previously injected by calling {{WebExtAPIRef("tabs.insertCSS()")}}.</dd> + <dt>{{WebExtAPIRef("tabs.move()")}}</dt> + <dd>Moves one or more tabs to a new position in the same window or to a different window.</dd> + <dt>{{WebExtAPIRef("tabs.query()")}}</dt> + <dd>Gets all tabs that have the specified properties, or all tabs if no properties are specified.</dd> + <dt>{{WebExtAPIRef("tabs.reload()")}}</dt> + <dd>Reload a tab, optionally bypassing the local web cache.</dd> + <dt>{{WebExtAPIRef("tabs.remove()")}}</dt> + <dd>Closes one or more tabs.</dd> + <dt>{{WebExtAPIRef("tabs.sendMessage()")}}</dt> + <dd>Sends a single message to the content script(s) in the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}</dt> + <dd>Sends a single request to the content script(s) in the specified tab. <strong>Deprecated</strong>: use {{WebExtAPIRef("tabs.sendMessage()")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.setZoom()")}}</dt> + <dd>Zooms the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.setZoomSettings()")}}</dt> + <dd>Sets the zoom settings for the specified tab.</dd> + <dt>{{WebExtAPIRef("tabs.update()")}}</dt> + <dd>Navigate the tab to a new URL, or modify other properties of the tab.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("tabs.onActivated")}}</dt> + <dd>Fires when the active tab in a window changes. Note that the tab's URL may not be set at the time this event fired.</dd> + <dt>{{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}</dt> + <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onAttached")}}</dt> + <dd>Fired when a tab is attached to a window, for example because it was moved between windows.</dd> + <dt>{{WebExtAPIRef("tabs.onCreated")}}</dt> + <dd>Fired when a tab is created. Note that the tab's URL may not be set at the time this event fired.</dd> + <dt>{{WebExtAPIRef("tabs.onDetached")}}</dt> + <dd>Fired when a tab is detached from a window, for example because it is being moved between windows.</dd> + <dt>{{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}</dt> + <dd>Fired when the highlighted or selected tabs in a window change. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onHighlighted")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onHighlighted")}}</dt> + <dd>Fired when the highlighted or selected tabs in a window change.</dd> + <dt>{{WebExtAPIRef("tabs.onMoved")}}</dt> + <dd>Fired when a tab is moved within a window.</dd> + <dt>{{WebExtAPIRef("tabs.onRemoved")}}</dt> + <dd>Fired when a tab is closed.</dd> + <dt>{{WebExtAPIRef("tabs.onReplaced")}}</dt> + <dd>Fired when a tab is replaced with another tab due to prerendering.</dd> + <dt>{{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}</dt> + <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd> + <dt>{{WebExtAPIRef("tabs.onUpdated")}}</dt> + <dd>Fired when a tab is updated.</dd> + <dt>{{WebExtAPIRef("tabs.onZoomChange")}}</dt> + <dd>Fired when a tab is zoomed.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("webextensions.api.tabs")}}</p> + +<div class="hidden note"> +<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p> + +<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p> +</div> + +<h3 id="Edge_incompatibilities">Edge incompatibilities</h3> + +<p>Promises are not supported in Edge. Use callbacks instead.</p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html new file mode 100644 index 0000000000..9fbf180263 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html @@ -0,0 +1,129 @@ +--- +title: tabs.insertCSS() +slug: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS +translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS +--- +<div>{{AddonSidebar()}}</div> + +<p>페이지에 CSS 삽입하기</p> + +<p>이 API를 사용하기 위해 여러분은 해당 페이지 URL에 대한 허가가 필요합니다. 이 허가에 대한 요청은 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 허가</a>를 통하거나 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">활성화 된 탭 허가</a>을 사용할 수도 있습니다.</p> + +<p>You can only inject CSS into pages whose URL can be expressed using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.</p> + +<p>The inserted CSS may be removed again by calling {{WebExtAPIRef("tabs.removeCSS()")}}.</p> + +<p>This is an asynchronous function that returns a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox brush:js">var inserting = browser.tabs.insertCSS( + tabId, // optional integer + details // extensionTypes.InjectDetails +) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>tabId</code> {{optional_inline}}</dt> + <dd><code>integer</code>. The ID of the tab in which to insert the CSS. Defaults to the active tab of the current window.</dd> + <dt><code>details</code></dt> + <dd>{{WebExtAPIRef('extensionTypes.InjectDetails')}}. Describes the CSS to insert. This contains the following properties:</dd> + <dd> + <dl class="reference-values"> + <dt><code>allFrames</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. If <code>true</code>, the CSS will be injected into all frames of the current page. If it is <code>false</code>, CSS is only injected into the top frame. Defaults to <code>false</code>.</dd> + <dt><code>code</code>{{optional_inline}}</dt> + <dd><code>string</code>. Code to inject, as a text string.</dd> + <dt><code>cssOrigin</code>{{optional_inline}}</dt> + <dd><code>string</code>. This can take one of two values: "user", to add the CSS as a user stylesheet, or "author" to add it as an author stylesheet. Specifying "user" enables you to prevent websites from overriding the CSS you insert: see <a href="/en-US/docs/Web/CSS/Cascade#Cascading_order">Cascading order</a>. If this option is omitted, the CSS is added as an author stylesheet.</dd> + <dt><code>file</code>{{optional_inline}}</dt> + <dd><code>string</code>. Path to a file containing the code to inject. In Firefox, relative URLs are resolved relative to the current page URL. In Chrome, these URLs are resolved relative to the add-on's base URL. To work cross-browser, you can specify the path as an absolute URL, starting at the add-on's root, like this: <code>"/path/to/stylesheet.css"</code>.</dd> + <dt><code>frameId</code>{{optional_inline}}</dt> + <dd><code>integer</code>. The frame where the CSS should be injected. Defaults to <code>0</code> (the top-level frame).</dd> + <dt><code>matchAboutBlank</code>{{optional_inline}}</dt> + <dd><code>boolean</code>. If <code>true</code>, the code will be injected into embedded "about:blank" and "about:srcdoc" frames if your add-on has access to their parent document. The code cannot be inserted in top-level about: frames. Defaults to <code>false</code>.</dd> + <dt><code>runAt</code>{{optional_inline}}</dt> + <dd>{{WebExtAPIRef('extensionTypes.RunAt')}}. The soonest that the code will be injected into the tab. Defaults to "document_idle".</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with no arguments when all the CSS has been inserted. If any error occurs, the promise will be rejected with an error message.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.tabs.insertCSS")}}</p> + +<h2 id="Examples">Examples</h2> + +<p>This example inserts into the currently active tab CSS which is taken from a string.</p> + +<pre class="brush: js">var css = "body { border: 20px dotted pink; }"; + +browser.browserAction.onClicked.addListener(() => { + + function onError(error) { + console.log(`Error: ${error}`); + } + + var insertingCSS = browser.tabs.insertCSS({code: css}); + insertingCSS.then(null, onError); +});</pre> + +<p>This example inserts CSS which is loaded from a file packaged with the extension. The CSS is inserted into the tab whose ID is 2:</p> + +<pre class="brush: js">browser.browserAction.onClicked.addListener(() => { + + function onError(error) { + console.log(`Error: ${error}`); + } + + var insertingCSS = browser.tabs.insertCSS(2, {file: "content-style.css"}); + insertingCSS.then(null, onError); +});</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs#method-insertCSS"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html new file mode 100644 index 0000000000..3aa39a9590 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html @@ -0,0 +1,204 @@ +--- +title: webRequest +slug: Mozilla/Add-ons/WebExtensions/API/webRequest +tags: + - API + - Add-ons + - Extensions + - Interface + - Non-standard + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest +--- +<div>{{AddonSidebar}}</div> + +<p>Add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request and can modify or cancel the request.</p> + +<p>Each event is fired at a particular stage of the request. The typical sequence of events is like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13376/webRequest-flow.png" style="display: block; height: 680px; margin-left: auto; margin-right: auto; width: 624px;"></p> + +<p>{{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} can be fired at any time during the request. Also, note that sometimes the sequence of events may differ from this: for example, in Firefox, on an <a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security">HSTS</a> upgrade, the <code>onBeforeRedirect</code> event will be triggered immediately after <code>onBeforeRequest</code>.</p> + +<p>All the events, except <code>onErrorOccurred</code>, can take three arguments to <code>addListener()</code>:</p> + +<ul> + <li>the listener itself</li> + <li>a {{WebExtAPIRef("webRequest.RequestFilter", "filter")}} object, so you can only be notified for requests made to particular URLs or for particular types of resource</li> + <li>an optional <code>extraInfoSpec</code> object. You can use this to pass additional event-specific instructions.</li> +</ul> + +<p>리스너는 요청 정보가 담긴 <code>details</code> 객체를 받는다. This includes a request ID, which is provided to enable an add-on to correlate events associated with a single request. It is unique within a browser session and the add-on's context. It stays the same throughout a request, even across redirections and authentication exchanges.</p> + +<p>webRequest API를 사용하려면 확장 프로그램은 "webRequest" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API 권한</a>을 가져야 하고, 대상 호스트에 대해서도 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 권한</a>을 가져야 한다. "blocking" 기능을 사용하려면 추가로 "webRequestBlocking" API 권한도 가져야 한다.</p> + +<p>To intercept resources loaded by a page (such as images, scripts, or stylesheets), the extension must have the host permission for the resource as well as for the main page requesting the resource. For example, if a page at "https://developer.mozilla.org" loads an image from "https://mdn.mozillademos.org", then an extension must have both host permissions if it is to intercept the image request.</p> + +<h2 id="Modifying_requests">Modifying requests</h2> + +<p>On some of these events, you can modify the request. Specifically, you can:</p> + +<ul> + <li>cancel the request in: + <ul> + <li>{{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}</li> + <li>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}</li> + <li>{{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}</li> + </ul> + </li> + <li>redirect the request in: + <ul> + <li>{{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}</li> + <li>{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}</li> + </ul> + </li> + <li>modify request headers in: + <ul> + <li>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} + <ul> + </ul> + </li> + </ul> + </li> + <li>modify response headers in: + <ul> + <li>{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}</li> + </ul> + </li> + <li>supply authentication credentials in: + <ul> + <li>{{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}</li> + </ul> + </li> +</ul> + +<p>To do this, you need to pass an option with the value "blocking" in the <code>extraInfoSpec</code> argument to the event's <code>addListener()</code>. This makes the listener synchronous. In the listener, you can then return a {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} object, which indicates the modification you need to make: for example, the modified request header you want to send.</p> + +<h2 id="Accessing_security_information">Accessing security information</h2> + +<p>In the {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}} listener you can access the <a href="/en-US/docs/Glossary/TLS">TLS</a> properties of a request by calling {{WebExtAPIRef("webRequest.getSecurityInfo()", "getSecurityInfo()")}}. To do this you must also pass "blocking" in the <code>extraInfoSpec</code> argument to the event's <code>addListener()</code>.</p> + +<p>You can read details of the TLS handshake, but can't modify them or override the browser's trust decisions.</p> + +<h2 id="Modifying_responses">Modifying responses</h2> + +<p>To modify the HTTP response bodies for a request, call {{WebExtAPIRef("webRequest.filterResponseData")}}, passing it the ID of the request. This returns a {{WebExtAPIRef("webRequest.StreamFilter")}} object that you can use to examine and modify the data as it is received by the browser.</p> + +<p>To do this, you must have the "webRequestBlocking" API permission as well as the "webRequest" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> and the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission </a>for the relevant host.</p> + +<h2 id="Types">Types</h2> + +<dl> + <dt>{{WebExtAPIRef("webRequest.BlockingResponse")}}</dt> + <dd> + <p>An object of this type is returned by event listeners that have set <code>"blocking"</code> in their <code>extraInfoSpec</code> argument. By setting particular properties in <code>BlockingResponse</code>, the listener can modify network requests.</p> + </dd> + <dt>{{WebExtAPIRef("webRequest.CertificateInfo")}}</dt> + <dd>An object describing a single X.509 certificate.</dd> + <dt>{{WebExtAPIRef("webRequest.HttpHeaders")}}</dt> + <dd>An array of HTTP headers. Each header is represented as an object with two properties: <code>name</code> and either <code>value</code> or <code>binaryValue</code>.</dd> + <dt>{{WebExtAPIRef("webRequest.RequestFilter")}}</dt> + <dd>An object describing filters to apply to webRequest events.</dd> + <dt>{{WebExtAPIRef("webRequest.ResourceType")}}</dt> + <dd>Represents a particular kind of resource fetched in a web request.</dd> + <dt>{{WebExtAPIRef("webRequest.SecurityInfo")}}</dt> + <dd>An object describing the security properties of a particular web request.</dd> + <dt>{{WebExtAPIRef("webRequest.StreamFilter")}}</dt> + <dd>An object that can be used to monitor and modify HTTP responses while they are being received.</dd> + <dt>{{WebExtAPIRef("webRequest.UploadData")}}</dt> + <dd>Contains data uploaded in a URL request.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}}</dt> + <dd>The maximum number of times that <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on's job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> can be called in a 10 minute period.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{WebExtAPIRef("webRequest.handlerBehaviorChanged()")}}</dt> + <dd>This method can be used to ensure that event listeners are applied correctly when pages are in the browser's in-memory cache.</dd> + <dt>{{WebExtAPIRef("webRequest.filterResponseData()")}}</dt> + <dd>Returns a {{WebExtAPIRef("webRequest.StreamFilter")}} object for a given request.</dd> + <dt>{{WebExtAPIRef("webRequest.getSecurityInfo()")}}</dt> + <dd>Gets detailed information about the <a href="/en-US/docs/Glossary/TLS">TLS</a> connection associated with a given request.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<dl> + <dt>{{WebExtAPIRef("webRequest.onBeforeRequest")}}</dt> + <dd>Fired when a request is about to be made, and before headers are available. This is a good place to listen if you want to cancel or redirect the request.</dd> + <dt>{{WebExtAPIRef("webRequest.onBeforeSendHeaders")}}</dt> + <dd>Fired before sending any HTTP data, but after HTTP headers are available. This is a good place to listen if you want to modify HTTP request headers.</dd> + <dt>{{WebExtAPIRef("webRequest.onSendHeaders")}}</dt> + <dd>Fired just before sending headers. If your add-on or some other add-on modified headers in <code>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}</code>, you'll see the modified version here.</dd> + <dt>{{WebExtAPIRef("webRequest.onHeadersReceived")}}</dt> + <dd>Fired when the HTTP response headers associated with a request have been received. You can use this event to modify HTTP response headers.</dd> + <dt>{{WebExtAPIRef("webRequest.onAuthRequired")}}</dt> + <dd>Fired when the server asks the client to provide authentication credentials. The listener can do nothing, cancel the request, or supply authentication credentials.</dd> + <dt>{{WebExtAPIRef("webRequest.onResponseStarted")}}</dt> + <dd>Fired when the first byte of the response body is received. For HTTP requests, this means that the status line and response headers are available.</dd> + <dt>{{WebExtAPIRef("webRequest.onBeforeRedirect")}}</dt> + <dd>Fired when a server-initiated redirect is about to occur.</dd> + <dt>{{WebExtAPIRef("webRequest.onCompleted")}}</dt> + <dd>Fired when a request is completed.</dd> + <dt>{{WebExtAPIRef("webRequest.onErrorOccurred")}}</dt> + <dd>Fired when an error occurs.</dd> +</dl> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("webextensions.api.webRequest")}}</p> + +<p> </p> + +<p><a href="/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#webRequest_incompatibilities">Extra notes on Chrome incompatibilities</a>.</p> + +<p> </p> + +<p>{{WebExtExamples("h2")}}</p> + +<div class="note"><strong>Acknowledgments</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webRequest"><code>chrome.webRequest</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json"><code>web_request.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html new file mode 100644 index 0000000000..ecc9e9be39 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html @@ -0,0 +1,239 @@ +--- +title: webRequest.onBeforeRequest +slug: Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest +translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest +--- +<div>{{AddonSidebar()}}</div> + +<p>This event is triggered when a request is about to be made, and before headers are available. This is a good place to listen if you want to cancel or redirect the request.</p> + +<p>To cancel or redirect the request, first include <code>"blocking"</code> in the <code>extraInfoSpec</code> array argument to <code>addListener()</code>. Then, in the listener function, return a {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} object, setting the appropriate property:</p> + +<ul> + <li>to cancel the request, include a property <code>cancel</code> with the value <code>true</code>.</li> + <li>to redirect the request, include a property <code>redirectUrl</code> with the value set to the URL to which you want to redirect.</li> +</ul> + +<p>From Firefox 52 onwards, instead of returning <code>BlockingResponse</code>, the listener can return a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which is resolved with a <code>BlockingResponse</code>. This enables the listener to process the request asynchronously.</p> + +<p>If you use <code>"blocking"</code>, you must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">"webRequestBlocking" API permission</a> in your manifest.json.</p> + +<h2 id="문법">문법</h2> + +<pre class="syntaxbox brush:js">browser.webRequest.onBeforeRequest.addListener( + listener, // function + filter, // object + extraInfoSpec // optional array of strings +) +browser.webRequest.onBeforeRequest.removeListener(listener) +browser.webRequest.onBeforeRequest.hasListener(listener) +</pre> + +<p>Events have three functions:</p> + +<dl> + <dt><code>addListener(callback, filter, extraInfoSpec)</code></dt> + <dd>Adds a listener to this event.</dd> + <dt><code>removeListener(listener)</code></dt> + <dd>Stop listening to this event. The <code>listener</code> argument is the listener to remove.</dd> + <dt><code>hasListener(listener)</code></dt> + <dd>Check whether <code>listener</code> is registered for this event. Returns <code>true</code> if it is listening, <code>false</code> otherwise.</dd> +</dl> + +<h2 id="리스너_등록_문법">리스너 등록 문법</h2> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd> + <p>Function that will be called when this event occurs. The function will be passed the following arguments:</p> + + <dl class="reference-values"> + <dt><code>details</code></dt> + <dd><a href="#details"><code>object</code></a>. Details about the request. See <code><a href="#details">details</a></code> below.</dd> + </dl> + + <p>Returns: {{WebExtAPIRef('webRequest.BlockingResponse')}}. If <code>"blocking"</code> is specified in the <code>extraInfoSpec</code> parameter, the event listener should return a <code>BlockingResponse</code> object, and can set either its <code>cancel</code> or its <code>redirectUrl</code> properties. From Firefox 52 onwards, instead of returning <code>BlockingResponse</code>, the listener can return a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which is resolved with a <code>BlockingResponse</code>. This enables the listener to process the request asynchronously.</p> + </dd> + <dt><code>filter</code></dt> + <dd>{{WebExtAPIRef('webRequest.RequestFilter')}}. A filter that restricts the events that will be sent to this listener.</dd> + <dt><code>extraInfoSpec</code>{{optional_inline}}</dt> + <dd><code>array</code> of <code>string</code>. <span class="im">Extra options for the event. You can pass any of the following values:</span></dd> + <dd> + <ul> + <li><code>"blocking"</code>: make the request synchronous, so you can cancel or redirect the request</li> + <li><span class="im"><code>"requestBody"</code>: include <code>requestBody</code> in the <code>details</code> object passed to the listener</span></li> + </ul> + </dd> +</dl> + +<h2 id="추가적인_객체">추가적인 객체</h2> + +<h3 id="details">details</h3> + +<dl class="reference-values"> + <dt><code>requestId</code></dt> + <dd><code>string</code>. The ID of the request. Request IDs are unique within a browser session, so you can use them to relate different events associated with the same request.</dd> + <dt><code>url</code></dt> + <dd><code>string</code>. Target of the request.</dd> + <dt><code>method</code></dt> + <dd><code>string</code>. Standard HTTP method: for example, "GET" or "POST".</dd> + <dt><code>frameId</code></dt> + <dd><code>integer</code>. Zero if the request happens in the main frame; a positive value is the ID of a subframe in which the request happens. If the document of a (sub-)frame is loaded (<code>type</code> is <code>main_frame</code> or <code>sub_frame</code>), <code>frameId</code> indicates the ID of this frame, not the ID of the outer frame. Frame IDs are unique within a tab.</dd> + <dt><code>parentFrameId</code></dt> + <dd><code>integer</code>. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists.</dd> + <dt><code>requestBody</code>{{optional_inline}}</dt> + <dd><code>object</code>. Contains the HTTP request body data. Only provided if <code>extraInfoSpec</code> contains <code>"requestBody"</code>.</dd> + <dd> + <dl class="reference-values"> + <dt><code>error</code>{{optional_inline}}</dt> + <dd><code>string</code>. This is set if any errors were encountered when obtaining request body data.</dd> + <dt><code>formData</code>{{optional_inline}}</dt> + <dd><code>object</code>. This object is present if the request method is POST and the body is a sequence of key-value pairs encoded in UTF-8 as either "multipart/form-data" or "application/x-www-form-urlencoded".</dd> + <dd>It is a dictionary in which each key contains the list of all values for that key. For example: <code>{'key': ['value1', 'value2']}</code>. If the data is of another media type, or if it is malformed, the object is not present.</dd> + <dt><code>raw</code>{{optional_inline}}</dt> + <dd><code>array</code> of <code>{{WebExtAPIRef('webRequest.UploadData')}}</code>. If the request method is PUT or POST, and the body is not already parsed in <code>formData</code>, then this array contains the unparsed request body elements.</dd> + </dl> + </dd> + <dt><code>tabId</code></dt> + <dd><code>integer</code>. ID of the tab in which the request takes place. Set to -1 if the request isn't related to a tab.</dd> + <dt><code>type</code></dt> + <dd>{{WebExtAPIRef('webRequest.ResourceType')}}. The type of resource being requested: for example, "image", "script", "stylesheet".</dd> + <dt><code>timeStamp</code></dt> + <dd><code>number</code>. The time when this event fired, in <a href="https://en.wikipedia.org/wiki/Unix_time">milliseconds since the epoch</a>.</dd> + <dt><code>originUrl</code></dt> + <dd><code>string</code>. URL of the resource that triggered this request. Note that this may not be the same as the URL of the page into which the requested resource will be loaded. For example, if a document triggers a load in a different window through the <a href="/en-US/docs/Web/HTML/Element/a#attr-target">target attribute of a link</a>, or a CSS document includes an image using the <a href="/en-US/docs/Web/CSS/url#The_url()_functional_notation"><code>url()</code> functional notation</a>, then this will be the URL of the original document or of the CSS document, respectively.</dd> +</dl> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.api.webRequest.onBeforeRequest", 10)}}</p> + +<h2 id="예제">예제</h2> + +<p>This code logs the URL for every resource requested which matches the <a href="/en-US/Add-ons/WebExtensions/Match_patterns#<all_urls>"><all_urls></a> pattern:</p> + +<pre class="brush: js">function logURL(requestDetails) { + console.log("Loading: " + requestDetails.url); +} + +browser.webRequest.onBeforeRequest.addListener( + logURL, + {urls: ["<all_urls>"]} +);</pre> + +<p>This code cancels requests for images that are made to URLs under "https://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + +<pre class="brush: js">// match pattern for the URLs to redirect +var pattern = "https://mdn.mozillademos.org/*"; + +// cancel function returns an object +// which contains a property `cancel` set to `true` +function cancel(requestDetails) { + console.log("Canceling: " + requestDetails.url); + return {cancel: true}; +} + +// add the listener, +// passing the filter argument and "blocking" +browser.webRequest.onBeforeRequest.addListener( + cancel, + {urls: [pattern], types: ["image"]}, + ["blocking"] +); +</pre> + +<p>This code replaces, by redirection, all network requests for images that are made to URLs under "https://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + +<pre class="brush: js">// match pattern for the URLs to redirect +var pattern = "https://mdn.mozillademos.org/*"; + +// redirect function +// returns an object with a property `redirectURL` +// set to the new URL +function redirect(requestDetails) { + console.log("Redirecting: " + requestDetails.url); + return { + redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif" + }; +} + +// add the listener, +// passing the filter argument and "blocking" +browser.webRequest.onBeforeRequest.addListener( + redirect, + {urls:[pattern], types:["image"]}, + ["blocking"] +);</pre> + +<p>This code is exactly like the previous example, except that the listener handles the request asynchronously. It returns a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that sets a timer, and resolves with the redirect URL when the timer expires:</p> + +<pre class="brush: js">// match pattern for the URLs to redirect +var pattern = "https://mdn.mozillademos.org/*"; + +// URL we will redirect to +var redirectUrl = "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"; + +// redirect function returns a Promise +// which is resolved with the redirect URL when a timer expires +function redirectAsync(requestDetails) { + console.log("Redirecting async: " + requestDetails.url); + var asyncCancel = new Promise((resolve, reject) => { + window.setTimeout(() => { + resolve({redirectUrl}); + }, 2000); + }); + + return asyncCancel; +} + +// add the listener, +// passing the filter argument and "blocking" +browser.webRequest.onBeforeRequest.addListener( + redirectAsync, + {urls: [pattern], types: ["image"]}, + ["blocking"] +);</pre> + +<p>{{WebExtExamples}}</p> + +<div class="note"><strong>Acknowledgements</strong> + +<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webRequest#event-onBeforeRequest"><code>chrome.webRequest</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json"><code>web_request.json</code></a> in the Chromium code.</p> + +<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> +</div> + +<div class="hidden"> +<pre>// Copyright 2015 The Chromium Authors. All rights reserved. +// +// Redistribution and use in source and binary forms, with or without +// modification, are permitted provided that the following conditions are +// met: +// +// * Redistributions of source code must retain the above copyright +// notice, this list of conditions and the following disclaimer. +// * Redistributions in binary form must reproduce the above +// copyright notice, this list of conditions and the following disclaimer +// in the documentation and/or other materials provided with the +// distribution. +// * Neither the name of Google Inc. nor the names of its +// contributors may be used to endorse or promote products derived from +// this software without specific prior written permission. +// +// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +</pre> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html new file mode 100644 index 0000000000..7d1c49e05a --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html @@ -0,0 +1,479 @@ +--- +title: Content scripts +slug: Mozilla/Add-ons/WebExtensions/Content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts +--- +<div>{{AddonSidebar}}</div> + +<p>A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the {{HTMLElement("script")}} element).</p> + +<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">Background scripts</a> can access all the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension JavaScript APIs</a>, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.</p> + +<p>Just like the scripts loaded by normal web pages, content scripts can read and modify the content of their pages using the standard DOM APIs.</p> + +<p>Content scripts can only access <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">a small subset of the WebExtension APIs</a>, but they can <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">communicate with background scripts</a> using a messaging system, and thereby indirectly access the WebExtension APIs.</p> + +<div class="note"> +<p>Note that content scripts are blocked on the following domains: accounts-static.cdn.mozilla.net, accounts.firefox.com, addons.cdn.mozilla.net, addons.mozilla.org, api.accounts.firefox.com, content.cdn.mozilla.net, content.cdn.mozilla.net, discovery.addons.mozilla.org, input.mozilla.org, install.mozilla.org, oauth.accounts.firefox.com, profile.accounts.firefox.com, support.mozilla.org, sync.services.mozilla.com, and testpilot.firefox.com. If you try to inject a content script into a page in these domains, it will fail and the page will log a <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> error.</p> + +<p>As these restrictions include addons.mozilla.org, users may attempt to use your extension immediately after installation and find it doesn't work. You may want to add an appropriate warning or an <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">onboarding page</a> that moves users away from addons.mozilla.org.</p> +</div> + +<div class="note"> +<p>Values added to the global scope of a content script with <code>var foo</code> or <code>window.foo = "bar"</code> may disappear due to bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p> +</div> + +<h2 id="Loading_content_scripts">Loading content scripts</h2> + +<p>You can load a content script into a web page in one of three ways:</p> + +<ol> + <li><strong>at install time, into pages that match URL patterns:</strong> using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in your manifest.json, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>.</li> + <li><strong>at runtime, into pages that match URL patterns:</strong> using the {{WebExtAPIRef("contentScripts")}} API, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>. This is just like method (1), except you can add and remove content scripts at runtime.</li> + <li><strong>at runtime, into specific tabs:</strong> using the <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> API, you can load a content script into a specific tab whenever you want: for example, in response to the user clicking on a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>.</li> +</ol> + +<p>There is only one global scope per frame per extension, so variables from one content script can directly be accessed by another content script, regardless of how the content script was loaded.</p> + +<p>Using methods (1) and (2) you can only load scripts into pages whose URLs can be represented using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>. Using method (3), you can also load scripts into pages packaged with your extension, but you can't load scripts into privileged browser pages like "about:debugging" or "about:addons".</p> + +<h2 id="Content_script_environment">Content script environment</h2> + +<h3 id="DOM_access">DOM access</h3> + +<p>Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts.</p> + +<p>However, content scripts get a "clean view of the DOM". This means:</p> + +<ul> + <li>content scripts cannot see JavaScript variables defined by page scripts</li> + <li>if a page script redefines a built-in DOM property, the content script will see the original version of the property, not the redefined version.</li> +</ul> + +<p>In Gecko, this behavior is called <a href="/en-US/docs/Xray_vision">Xray vision</a>.</p> + +<p>For example, consider a web page like this:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + </head> + + <body> + <script src="page-scripts/page-script.js"></script> + </body> +</html></pre> + +<p>The script "page-script.js" does this:</p> + +<pre class="brush: js">// page-script.js + +// add a new element to the DOM +var p = document.createElement("p"); +p.textContent = "This paragraph was added by a page script."; +p.setAttribute("id", "page-script-para"); +document.body.appendChild(p); + +// define a new property on the window +window.foo = "This global variable was added by a page script"; + +// redefine the built-in window.confirm() function +window.confirm = function() { + alert("The page script has also redefined 'confirm'"); +}</pre> + +<p>Now an extension injects a content script into the page:</p> + +<pre class="brush: js">// content-script.js + +// can access and modify the DOM +var pageScriptPara = document.getElementById("page-script-para"); +pageScriptPara.style.backgroundColor = "blue"; + +// can't see page-script-added properties +console.log(window.foo); // undefined + +// sees the original form of redefined properties +window.confirm("Are you sure?"); // calls the original window.confirm()</pre> + +<p>The same is true in reverse: page scripts can't see JavaScript properties added by content scripts.</p> + +<p>All this means that the content script can rely on DOM properties behaving predictably, and doesn't have to worry about variables it defines clashing with variables defined in the page script.</p> + +<p>One practical consequence of this behavior is that a content script won't have access to any JavaScript libraries loaded by the page. So for example, if the page includes jQuery, the content script won't be able to see it.</p> + +<p>If a content script does want to use a JavaScript library, then the library itself should be injected as a content script alongside the content script that wants to use it:</p> + +<pre class="brush: json">"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["jquery.js", "content-script.js"] + } +]</pre> + +<p>Note that Firefox provides some APIs that enable content scripts to access JavaScript objects created by page scripts and to expose their own JavaScript objects to page scripts. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Sharing objects with page scripts</a> for more details.</p> + +<h3 id="WebExtension_APIs">WebExtension APIs</h3> + +<p>In addition to the standard DOM APIs, content scripts can use the following WebExtension APIs:</p> + +<p>From <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</p> + +<ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li> +</ul> + +<p>From <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</p> + +<ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li> +</ul> + +<p>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</p> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li> +</ul> + +<p>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</p> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li> +</ul> + +<p>Everything from <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p> + +<h3 id="XHR_and_Fetch">XHR and Fetch</h3> + +<p>Content scripts can make requests using the normal <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> and <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code> APIs.</p> + +<p>Content scripts get the same cross-domain privileges as the rest of the extension: so if the extension has requested cross-domain access for a domain using the <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> key in manifest.json, then its content scripts get access that domain as well.</p> + +<p>This is accomplished by exposing more privileged XHR and fetch instances in the content script, which has the side-effect of not setting the <code><a href="/en-US/docs/Web/HTTP/Headers/Origin">Origin</a></code> and <code><a href="/en-US/docs/Web/HTTP/Headers/Referer">Referer</a></code> headers like a request from the page itself would, this is often preferable to prevent the request from revealing its cross-orign nature. From version 58 onwards extensions that need to perform requests that behave as if they were sent by the content itself can use <code>content.XMLHttpRequest</code> and <code>content.fetch()</code> instead. For cross-browser extensions their presence must be feature-detected.</p> + +<h2 id="Communicating_with_background_scripts">Communicating with background scripts</h2> + +<p>Although content scripts can't directly use most of the WebExtension APIs, they can communicate with the extension's background scripts using the messaging APIs, and can therefore indirectly access all the same APIs that the background scripts can.</p> + +<p>There are two basic patterns for communicating between the background scripts and content scripts: you can send one-off messages, with an optional response, or you can set up a longer-lived connection between the two sides, and use that connection to exchange messages.</p> + +<h3 id="One-off_messages">One-off messages</h3> + +<p>To send one-off messages, with an optional response, you can use the following APIs:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">In content script</th> + <th scope="col">In background script</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Send a message</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td> + </tr> + <tr> + <th scope="row">Receive a message</th> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td> + <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td> + </tr> + </tbody> +</table> + +<p>For example, here's a content script which listens for click events in the web page. If the click was on a link, it messages the background page with the target URL:</p> + +<pre class="brush: js">// content-script.js + +window.addEventListener("click", notifyExtension); + +function notifyExtension(e) { + if (e.target.tagName != "A") { + return; + } + browser.runtime.sendMessage({"url": e.target.href}); +}</pre> + +<p>The background script listens for these messages and displays a notification using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</p> + +<pre class="brush: js">// background-script.js + +browser.runtime.onMessage.addListener(notify); + +function notify(message) { + browser.notifications.create({ + "type": "basic", + "iconUrl": browser.extension.getURL("link.png"), + "title": "You clicked a link!", + "message": message.url + }); +} +</pre> + +<p>This example code is lightly adapted from the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example on GitHub.</p> + +<h3 id="Connection-based_messaging">Connection-based messaging</h3> + +<p>Sending one-off messages can get cumbersome if you are exchanging a lot of messages between a background script and a content script. So an alternative pattern is to establish a longer-lived connection between the two contexts, and use this connection to exchange messages.</p> + +<p>Each side has a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object, which they can use to exchange messages.</p> + +<p>To create the connection:</p> + +<ul> + <li>one side listens for connections using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li> + <li>the other side calls either <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (if connecting to a content script) or <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (if connecting to a background script). This returns a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</li> + <li>the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> listener gets passed its own <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</li> +</ul> + +<p>Once each side has a port, the two sides can exchange messages using <code>runtime.Port.postMessage()</code> to send a message, and <code>runtime.Port.onMessage</code> to receive messages.</p> + +<p>For example, as soon as it loads, this content script:</p> + +<ul> + <li>connects to the background script, and stores the <code>Port</code> in a variable <code>myPort</code></li> + <li>listens for messages on <code>myPort</code>, and logs them</li> + <li>sends messages to the background script, using <code>myPort</code>, when the user clicks the document</li> +</ul> + +<pre class="brush: js">// content-script.js + +var myPort = browser.runtime.connect({name:"port-from-cs"}); +myPort.postMessage({greeting: "hello from content script"}); + +myPort.onMessage.addListener(function(m) { + console.log("In content script, received message from background script: "); + console.log(m.greeting); +}); + +document.body.addEventListener("click", function() { + myPort.postMessage({greeting: "they clicked the page!"}); +});</pre> + +<p>The corresponding background script:</p> + +<ul> + <li>listens for connection attempts from the content script</li> + <li>when it receives a connection attempt: + <ul> + <li>stores the port in a variable named <code>portFromCS</code></li> + <li>sends the content script a message using the port</li> + <li>starts listening to messages received on the port, and logs them</li> + </ul> + </li> + <li>sends messages to the content script, using <code>portFromCS</code>, when the user clicks the extension's browser action</li> +</ul> + +<pre class="brush: js">// background-script.js + +var portFromCS; + +function connected(p) { + portFromCS = p; + portFromCS.postMessage({greeting: "hi there content script!"}); + portFromCS.onMessage.addListener(function(m) { + console.log("In background script, received message from content script") + console.log(m.greeting); + }); +} + +browser.runtime.onConnect.addListener(connected); + +browser.browserAction.onClicked.addListener(function() { + portFromCS.postMessage({greeting: "they clicked the button!"}); +}); +</pre> + +<h4 id="Multiple_content_scripts">Multiple content scripts</h4> + +<p>If you have multiple content scripts communicating at the same time, you might want to store each connection in an array.</p> + +<p> </p> + +<ul> +</ul> + +<pre class="brush: js">// background-script.js + +var ports = [] + +function connected(p) { + ports[p.sender.tab.id] = p + //... +} + +browser.runtime.onConnect.addListener(connected) + +browser.browserAction.onClicked.addListener(function() { + ports.forEach(p => { + p.postMessage({greeting: "they clicked the button!"}) + }) +});</pre> + +<p> </p> + +<ul> +</ul> + +<h2 id="Communicating_with_the_web_page">Communicating with the web page</h2> + +<p>Although content scripts don't by default get access to objects created by page scripts, they can communicate with page scripts using the DOM <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> APIs.</p> + +<p>콘텐트 스크립트는 기본적으로 페이지 스크립트가 만든 객체에 접근할 수 없지만, DOM의 <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code>와 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> API로 페이지 스크립트와 소통할 수 있다.</p> + +<p>For example:</p> + +<p>예를 들어:</p> + +<pre class="brush: js">// page-script.js + +var messenger = document.getElementById("from-page-script"); + +messenger.addEventListener("click", messageContentScript); + +function messageContentScript() { + window.postMessage({ + direction: "from-page-script", + message: "Message from the page" + }, "*");</pre> + +<pre class="brush: js">// content-script.js + +window.addEventListener("message", function(event) { + if (event.source == window && + event.data && + event.data.direction == "from-page-script") { + alert("Content script received message: \"" + event.data.message + "\""); + } +});</pre> + +<p>For a complete working example of this, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">visit the demo page on GitHub</a> and follow the instructions.</p> + +<p>이에 대한 완전한 예제를 보려면 <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">GitHub의 데모페이지</a>를 방문하여 지침을 따르십시오.</p> + +<div class="warning"> +<p>Note that any time you interact with untrusted web content on this way, you need to be very careful. Extensions are privileged code which can have powerful capabilities, and hostile web pages can easily trick them into accessing those capabilities.</p> + +<p>이런 방식으로 신뢰할 수 없는 웹 콘텐트와 상호 작용할 때마다 매우 조심해야한다. 확장 기능은 강력한 기능을 제공 할 수 있는 권한있는 코드이며 적대적인 웹 페이지는 이러한 기능에 접근하는 부분을 쉽게 속일 수 있다.</p> + +<p>To make a trivial example, suppose the content script code that receives the message does something like this:</p> + +<p>간단한 예제로, 콘텐트 스크립트가 아래처럼 동작하는 메시지를 받는다고 한다면:</p> + +<pre class="brush: js">// content-script.js + +window.addEventListener("message", function(event) { + if (event.source == window && + event.data.direction && + event.data.direction == "from-page-script") { + eval(event.data.message); + } +});</pre> + +<p>Now the page script can run any code with all the privileges of the content script.</p> + +<p>이제 페이지 스크립트는 콘텐트 스크립트의 권한으로 어떤 코드라도 실행할 수 있게 된다.</p> +</div> + +<h2 id="Using_eval_in_content_scripts">Using eval() in content scripts</h2> + +<p>In Chrome, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> always runs code in the context of the content script, not in the context of the page.</p> + +<p>크롬에서, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>은 항상 콘텐트 스크립트의 컨텍스트에서 코드를 실행한다. 페이지의 컨텍스트에서 하지 않는다.</p> + +<p>In Firefox:</p> + +<ul> + <li>if you call <code>eval()</code>, it runs code in the context of the content script</li> + <li>if you call <code>window.eval()</code>, it runs code in the context of the page.</li> +</ul> + +<p><span>파이어폭스</span>에서:</p> + +<ul> + <li><code>eval()</code>을 호출하면, 콘텐트 스크립트의 컨텍스트에서 코드를 실행한다.</li> + <li><code>window.eval()</code>을 호출하면, 페이지의 컨텍스트에서 코드를 실행한다.</li> +</ul> + +<p>For example, consider a content script like this:</p> + +<p>예를 들어, 콘텐트 스크립트가 아래 같다고 한다면:</p> + +<pre class="brush: js">// content-script.js + +window.eval('window.x = 1;'); +eval('window.y = 2'); + +console.log(`In content script, window.x: ${window.x}`); +console.log(`In content script, window.y: ${window.y}`); + +window.postMessage({ + message: "check" +}, "*");</pre> + +<p>This code just creates some variables x and y using <code>window.eval()</code> and <code>eval()</code>, then logs their values, then messages the page.</p> + +<p>이 코드는 <code>window.eval()</code> 및 <code>eval()</code>을 사용하여 변수 x 및 y를 만든 다음 값의 로그를 남기고, 페이지에 메시지를 보낸다.</p> + +<p>On receiving the message, the page script logs the same variables:</p> + +<p>그 메세지를 받으면, 페이지 스크립트는 같은 변수들을 로그에 남긴다:</p> + +<pre class="brush: js">window.addEventListener("message", function(event) { + if (event.source === window && event.data && event.data.message === "check") { + console.log(`In page script, window.x: ${window.x}`); + console.log(`In page script, window.y: ${window.y}`); + } +});</pre> + +<p>In Chrome, this will produce output like this:</p> + +<p>크롬에서, 이것은 아래처럼 출력될 것이다:</p> + +<pre>In content script, window.x: 1 +In content script, window.y: 2 +In page script, window.x: undefined +In page script, window.y: undefined</pre> + +<p>In Firefox the following output is produced:</p> + +<p>파이어폭스에서는 아래의 출력이 만들어진다:</p> + +<pre>In content script, window.x: undefined +In content script, window.y: 2 +In page script, window.x: 1 +In page script, window.y: undefined</pre> + +<p>The same applies to <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p> + +<p>같은 것이 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>에 적용된다.</p> + +<p>When running code in the context of the page, be very careful. The page's environment is controlled by potentially malicious web pages, which can redefine objects you interact with to behave in unexpected ways:</p> + +<p>페이지 컨텍스트에서 코드를 실행할 때는 매우 주의해야 한다. 페이지의 환경은 잠재적으로 악의적인 웹 페이지에 의해 제어되며, 상호 작용하는 객체가 예기치 않은 방식으로 재정의될 수 있다.</p> + +<pre class="brush: js">// page.js redefines console.log + +var original = console.log; + +console.log = function() { + original(true); +} +</pre> + +<pre class="brush: js">// content-script.js calls the redefined version + +window.eval('console.log(false)'); +</pre> diff --git a/files/ko/mozilla/add-ons/webextensions/examples/index.html b/files/ko/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..1f613232bb --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,22 @@ +--- +title: Example extensions +slug: Mozilla/Add-ons/WebExtensions/Examples +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +<div>{{AddonSidebar}}</div> + +<p><span class="translation">확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다</span> <a href="https://github.com/mdn/webextensions-examples">https://github.com/mdn/webextensions-examples</a>. <span class="translation">이번장에서는 해당 저장소에서 사용되는 WebExtension API에 대해 설명한다.</span></p> + +<p>여기에 나오는 예제는 Firefox Nightly에서 동작한다. 대부분은 이전 버전에서도 동작하지만 <span class="translation">확장앱의 manifest.json에서 </span><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a><span class="translation"> 키를 확인한다.</span></p> + +<p><span class="translation">이 예제를 실행해보려면 세가지 방법이 있다</span>.</p> + +<ol> + <li>레파지토리를 클론한뒤 소스 디렉토리를 <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Load Temporary Add-on"</a>기능으로 로드한다. 확장앱은 Firefox를 재시작하기 전까지 로드되어있다.</li> + <li>레파지토리를 클론한뒤 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 커멘드 라인 툴을 이용해서 확장앱을 Firefox에 설치한다.</li> + <li>레파지토리를 클론한뒤 <a href="https://github.com/mdn/webextensions-examples/tree/master/build">빌드</a> 디렉토리로 이동한다. <span class="translation">여기에는 빌드된 예제들이 있으므로 Firefox에서 (파일 / 파일 열기를 사용해) 파일을 열고 </span><a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a><span class="translation">에서 설치하는것 처럼 영구적으로 설치할 수 있습니다.</span></li> +</ol> + +<p>레파지토리에 공헌하려한다면 <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">pull request를 보내면 된다</a></p> + +<p>{{WebExtAllExamples}}</p> diff --git a/files/ko/mozilla/add-ons/webextensions/index.html b/files/ko/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..2d5d0117d8 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,143 @@ +--- +title: WebExtensions +slug: Mozilla/Add-ons/WebExtensions +tags: + - 확장기능 +translation_of: Mozilla/Add-ons/WebExtensions +--- +<div> +<div>{{AddonSidebar}}</div> + +<p>Extension(이하 확장기능)은 브라우저의 기능을 확장하고 수정할 수 있습니다. Firefox 를 위한 확장기능은 확장 기능 개발을 위한 크로스 브라우저 시스템인 WebExtension API를 이용하여 만들어졌습니다. 이 시스템은 Google Chrome, Opera 및 <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a>에서 지원하는 <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> 와 대부분 호환됩니다. 그러므로 Google Chrome과 Opera를 대상으로 만들어진 확장기능은 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">조금만 수정</a>하면 대부분 Firefox나 <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a>에서도 동작합니다. 또한 extension API는 <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">멀티프로세스 Firefox</a>와도 완벽하게 호환됩니다.</p> + +<p> </p> + +<p>질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면 <a href="https://mail.mozilla.org/listinfo/dev-addons" rel="noopener">dev-addons 메일링 리스트</a>나 <a href="https://wiki.mozilla.org/IRC" rel="noopener">IRC</a>의 <a href="irc://irc.mozilla.org/webextensions">#webextensions</a>를 통해 알려주세요. </p> +</div> + +<p> </p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="시작하기">시작하기</h2> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">확장기능이란 무엇인가?</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">첫번째 확장기능</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">두번째 확장기능</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">확장기능의 구조</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">파이어폭스 개발 로드맵</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Examples">확장기능의 예시</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">그 다음은?</a></li> +</ul> + +<h2 id="개념">개념</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API 일람</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">주소패턴</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">파일과 상호작용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">여러 언어로 제공하기 </a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">보안 유의사항들</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">보안 정책</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">다른 프로그램과 상호작용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">개발자 도구 API 사용하기</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Native_manifests">상호작용 명세 만들기</a></li> + <li><a href="/ko-KR/Add-ons/WebExtensions/User_actions">사용자와 상호작용하기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">확장기능의 생애주기</a></li> +</ul> + +<h2 id="사용자_인터페이스">사용자 인터페이스</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">개괄</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">도구모음 버튼</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">도구모음 버튼과 팝업</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">주소창 버튼</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">주소창 버튼과 팝업</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">상세 메뉴 항목</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">사이드바</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">설정 페이지</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">확장기능 페이지</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">알림</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">주소창 자동추천</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">개발자 도구 패널</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">브라우저 스타일</a></li> +</ul> + +<h2 id="기능_구현">기능 구현</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">HTTP 요청 가로채기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">웹 페이지 수정하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">도구모음에 버튼 추가하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">설정 페이지 구성하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">클립보드와 상호작용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">Tabs API 사용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Bookmarks API 사용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">Cookies API 사용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">contextual identities 사용하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">외부 요소 삽입하기</a></li> +</ul> + +<ul> +</ul> + +<h2 id="다른_브라우저에서_옮겨오기">다른 브라우저에서 옮겨오기</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_differentiators">파이어폭스의 특성</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">구글 크롬의 확장기능 가져오기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">오래된 파이어폭스 확장기능 변환하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">안드로이드용 파이어폭스로 개발하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">썬더볼트로 개발하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">섭입된 확장기능</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Add-on SDK와의 비교</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">XUL/XPCOM 확장기능과의 비교</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">크롬과의 차이점</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">안드로이드와 PC의 차이점</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">API 구현의 차이점</a></li> +</ul> + +<h2 id="파이어폭스_생애주기">파이어폭스 생애주기</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">사용자 경험</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">설치</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Debugging">디버깅</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">지속적인 테스트와 특성</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext 와 작업하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext 명령어 일람</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">확장기능과 애드온 ID</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Distribution_options">배포 옵션</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">올바른 권한 요청</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">페이지 스크립트와 개체 공유하기</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension">확장기능 폐기하기</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Tips">팁과 트릭</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Development_Tools">확장기능 개발 도구</a></li> +</ul> +</div> + +<div class="section"> +<h2 id="Reference">Reference</h2> + +<h3 id="JavaScript_APIs">JavaScript APIs</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API 일람</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">JavaScript API 브라우저 호환성</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div> + +<h3 id="Manifest_keys">Manifest keys</h3> + +<ul> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json 일람</a></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">manifest.json 브라우저 호환성</a></li> +</ul> + +<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div> +</div> +</div> diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html new file mode 100644 index 0000000000..b4d9b06443 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html @@ -0,0 +1,227 @@ +--- +title: content_scripts +slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Type</th> + <td><code>Array</code></td> + </tr> + <tr> + <th scope="row">Mandatory</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Example</th> + <td> + <pre class="brush: json no-line-numbers"> +"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } +]</pre> + </td> + </tr> + </tbody> +</table> + +<p>Instructs the browser to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into web pages whose URL matches a given pattern.</p> + +<p>This key is an array. Each item is an object which:</p> + +<ul> + <li><strong>must</strong> contain a key named <strong><code>matches</code></strong>, that specifies the URL patterns to be matched in order for the scripts to be loaded</li> + <li><strong>may</strong> contain keys named <strong><code>js</code></strong> and <strong><code>css</code></strong>, which list scripts to be loaded into matching pages</li> + <li><strong>may</strong> contain a number of other properties that control finer aspects of how and when content scripts are loaded</li> +</ul> + +<p>Details of all the keys you can include are given in the table below.</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><a id="all_frames" name="all_frames" style=""><code>all_frames</code></a></td> + <td><code>Boolean</code></td> + <td> + <p><code>true</code>: inject the scripts specified in <code><a href="#js">js</a></code> and <code><a href="#css">css</a></code> into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements. The URL requirements are checked for each frame independently.</p> + + <p><code>false</code>: inject only into frames matching the URL requirements which are the topmost frame in a tab.</p> + + <p>Defaults to <code>false</code>.</p> + </td> + </tr> + <tr> + <td><a id="css" name="css" style=""><code>css</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of paths, relative to manifest.json, referencing CSS files that will be injected into matching pages.</p> + + <p>Files are injected in the order given, and before the DOM is loaded.</p> + + <div class="blockIndicator note"> + <p>Firefox resolves URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.</p> + </div> + </td> + </tr> + <tr> + <td><a id="exclude_globs" name="exclude_globs" style=""><code>exclude_globs</code></a></td> + <td><code>Array</code></td> + <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="exclude_matches" name="exclude_matches" style=""><code>exclude_matches</code></a></td> + <td><code>Array</code></td> + <td>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="include_globs" name="include_globs" style=""><code>include_globs</code></a></td> + <td><code>Array</code></td> + <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td> + </tr> + <tr> + <td><a id="js" name="js" style=""><code>js</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of paths, relative to the manifest.json file, referencing JavaScript files that will be injected into matching pages.</p> + + <p>Files are injected in the order given. This means that, for example, if you include jQuery here followed by another content script, like this:</p> + + <pre class="brush: json no-line-numbers"> +<code>"js": ["jquery.js", "my-content-script.js"]</code></pre> + + <p>then <code>"my-content-script.js"</code> can use jQuery.</p> + + <p>Files are injected at the time specified by <code><a href="#run_at">run_at</a></code>.</p> + </td> + </tr> + <tr> + <td><code><a id="match_about_blank" name="match_about_blank" style="">match_about_blank</a></code></td> + <td><code>Boolean</code></td> + <td> + <p>Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc", if the URL of the page that opened or created this page <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p> + + <p>This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the <code>all_frames</code> key.</p> + + <p>For example, suppose you have a <code>content_scripts</code> key like this:</p> + + <pre class="brush: json no-line-numbers"> + "content_scripts": [ + { + "js": ["my-script.js"], + "matches": ["https://example.org/"], + "match_about_blank": true, + "all_frames": true + } + ]</pre> + + <p>If the user loads https://example.org/, and this page embeds an empty iframe, then "my-script.js" will be loaded into the iframe.</p> + + <p><code>match_about_blank</code> is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at <code>"document_start"</code> even if you specify that value in <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#run_at">run_at</a></code>.</p> + </td> + </tr> + <tr> + <td><a id="matches" name="matches" style=""><code>matches</code></a></td> + <td><code>Array</code></td> + <td> + <p>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</p> + + <p>This is the only mandatory key.</p> + </td> + </tr> + <tr> + <td><a id="run_at" name="run_at" style=""><code>run_at</code></a></td> + <td><code>String</code></td> + <td> + <p>This option determines when the scripts specified in <code><a href="#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p> + + <ul> + <li>"<code>document_start</code>": corresponds to <code>loading</code>. The DOM is still loading.</li> + <li>"<code>document_end</code>": corresponds to <code>interactive</code>. The DOM has finished loading, but resources such as scripts and images may still be loading.</li> + <li>"<code>document_idle</code>": corresponds to <code>complete</code>. The document and all its resources have finished loading.</li> + </ul> + + <p>The default value is <code>"document_idle"</code>.</p> + + <p>In all cases, files in <code><a href="#js">js</a></code> are injected after files in <code><a href="#css">css</a></code>.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Matching_URL_patterns">Matching URL patterns</h2> + +<p>The <code>"content_scripts"</code> key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside <code>"content_scripts"</code> that you can use for this specification:</p> + +<ul> + <li><code>matches</code>: an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li> + <li><code>exclude_matches:</code> an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li> + <li><code>include_globs</code>: an array of <a href="#globs">globs</a>.</li> + <li><code>exclude_globs:</code> an array of <a href="#globs">globs</a>.</li> +</ul> + +<p>To match one of these properties, a URL must match at least one of the items in its array. For example, given a property like:</p> + +<pre class="brush: json no-line-numbers">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre> + +<p>Both "http://example.org/" and "http://example.com/" will match.</p> + +<p>Since <code>matches</code> is the only mandatory key, the other three keys are used to limit further the URLs that match. To match the key as a whole, a URL must:</p> + +<ol> + <li>match the <code>matches</code> property</li> + <li>AND match the <code>include_globs</code> property, if present</li> + <li>AND NOT match the <code>exclude_matches</code> property, if present</li> + <li>AND NOT match the <code>exclude_globs</code> property, if present</li> +</ol> + +<h3 id="globs">globs</h3> + +<p>A glob is just a string that may contain wildcards. There are two types of wildcard, and you can combine them in the same glob:</p> + +<ul> + <li>"*" matches zero or more characters</li> + <li>"?" matches exactly one character.</li> +</ul> + +<p>For example: <code>"*na?i"</code> would match <code>"illuminati"</code> and <code>"annunaki"</code>, but not <code>"sagnarelli"</code>.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: json no-line-numbers">"content_scripts": [ + { + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } +]</pre> + +<p>This injects a single content script "borderify.js" into all pages under "mozilla.org" or any of its subdomains, whether served over HTTP or HTTPS.</p> + +<pre class="brush: json no-line-numbers"> "content_scripts": [ + { + "exclude_matches": ["*://developer.mozilla.org/*"], + "matches": ["*://*.mozilla.org/*"], + "js": ["jquery.js", "borderify.js"] + } + ]</pre> + +<p>This injects two content scripts into all pages under "mozilla.org" or any of its subdomains except "developer.mozilla.org", whether served over HTTP or HTTPS.</p> + +<p>The content scripts see the same view of the DOM and are injected in the order they appear in the array, so "borderify.js" can see global variables added by "jquery.js".</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("webextensions.manifest.content_scripts")}}</p> diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..3d4776f047 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,101 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +<p>{{AddonSidebar}}</p> + +<p>manifest.json 파일은 json 포맷 파일로서, 모든 웹 익스텐션이 포함하고 있어야 하는 파일입니다. </p> + +<p>manifest.json을 사용함으로써, 당신은 당신의 익스텐션의 이름, 버젼과 같은 기본 정보를 명시하며, 또한 당신의 익스텐션의 기능, 예를 들어 기본 스크립트, 내용 스크립트, 브라우져 활동 등과 같은 측면을 명시합니다. </p> + +<p>manifest.json에 지원되는 키들은 아래와 같습니다.</p> + +<p>{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</p> + +<div class="twocolumns"> </div> + +<p><code>"manifest_version"</code>, <code>"version"</code>, <code>"name" 키들은 반드시 있어야 합니다. </code></p> + +<p>"_locales" 경로가 있다면, <code>"default_locale"은 반드시 있어야 하며, </code>"_locales" 경로가 없다면, <code>"default_locale"은 없어야 합니다. </code></p> + +<p><code>"applications"는 구글 크롬에서는 지원되지 않고, 파이어폭스 48 이전 버젼에는 의무적으로 있어야 합니다. </code></p> + +<p>간단한 manifest.json 구문은 다음과 같습니다:</p> + +<pre class="brush: json">{ + + "applications": { + "gecko": { + "id": "addon@example.com", + "strict_min_version": "42.0", + "strict_max_version": "50.*", + "update_url": "https://example.com/updates.json" + } + }, + + "background": { + "scripts": ["jquery.js", "my-background.js"], + "page": "my-background.html" + }, + + "browser_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "commands": { + "toggle-feature": { + "suggested_key": { + "default": "Ctrl+Shift+Y", + "linux": "Ctrl+Shift+U" + }, + "description": "Send a 'toggle-feature' event" + } + }, + + "content_security_policy": "script-src 'self' https://example.com; object-src 'self'", + + "content_scripts": [ + { + "exclude_matches": ["*://developer.mozilla.org/*"], + "matches": ["*://*.mozilla.org/*"], + "js": ["borderify.js"] + } + ], + + "default_locale": "en", + + "description": "...", + + "icons": { + "48": "icon.png", + "96": "icon@2x.png" + }, + + "manifest_version": 2, + + "name": "...", + + "page_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" + }, + + "permissions": ["webNavigation"], + + "version": "0.1", + + "web_accessible_resources": ["images/my-image.png"] + +}</pre> + +<p> </p> diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html new file mode 100644 index 0000000000..9a4b85ea74 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html @@ -0,0 +1,200 @@ +--- +title: page_action +slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action +tags: + - 애드온 + - 웹확장 + - 확장 +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/page_action +--- +<div>{{AddonSidebar}}</div> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <th scope="row" style="width: 30%;">Type</th> + <td><code>Object</code></td> + </tr> + <tr> + <th scope="row">Mandatory</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Example</th> + <td> + <pre class="brush: json no-line-numbers"> +"page_action": { + "browser_style": true, + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" +}</pre> + </td> + </tr> + </tbody> +</table> + +<p>페이지 액션은 브라우저의 URL 바 안에 추가되는 아이콘이다.</p> + +<p>필요하면 HTML, CSS, 그리고 자바스크립트를 사용하는 팝업을 띄울 수 있다.</p> + +<p>팝업이 있으면, 아이콘을 클릭할 때 팝업이 열리고, 팝업 안의 자바스크립트가 사용자와의 상호작업을 처리할 수 있다. 팝업이 없으면, 아이콘을 클릭할 때 확장의 <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages">background 스크립트</a>에 click 이벤트가 전달된다.</p> + +<p><a href="/en-US/Add-ons/WebExtensions/API/pageAction">pageAction API</a>을 사용하면 프로그램적으로 페이지 액션을 만들고 관리할 수 있다.</p> + +<p>페이지 액션은 브라우저 액션과 비슷하다. 단지 브라우저 전체가 아니라 특정 웹페이지와만 연관된다는 점이 다르다. 액션의 대상 페이지가 분명하다면 그 페이지에서만 표시되는 페이지 액션을 사용해야 한다. 액션이 모든 페이지를 대상으로 하거나 브라우저 그 자체가 대상이라면 브라우저 액션을 사용하라.</p> + +<p>브라우저 액션은 기본이 표시되는 것이지만 페이지 액션은 기본적으로 숨겨진다. 탭에 <code><a href="/en-US/Add-ons/WebExtensions/API/pageAction/show">pageAction.show()</a></code>를 호출하거나, <code>show_matches</code> 속성을 줘야 표시할 수 있다.</p> + +<h2 id="문법">문법</h2> + +<p><code>page_action</code>은 세 가지 속성들 중에 몇 가지를 가지는 객체다(역주: 파이어폭스 외의 브라우저에서도 지원되는 속성은 세가지 뿐이다). 모두 선택사항이다:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">browser_style</a></code></td> + <td><code>Boolean</code></td> + <td> + <p>선택, 기본값은 <code>false</code>.</p> + + <p>사용하면, 팝업과 브라우저의 UI와 <code>browser_style</code>을 사용하는 다른 확장의 모습이 일관되게 보이게 하는 스타일시트를 포함한다. 기본값은 <code>false</code>지만 팝업이 브라우저의 다른 UI와 일관되게 하려면, 스타일시트가 포함될 수 있도록 <code>true</code>로 하는 것이 권장한다.</p> + + <p>파이어폭스에서, 이 스타일시트는 chrome://browser/content/extension.css에서 볼 수 있다. OS X에서는 chrome://browser/content/extension-mac.css다.</p> + + <p><a href="https://firefoxux.github.io/StyleGuide/#/controls">파이어폭스 스타일 가이드</a>는 팝업의 요소가 특정 스타일을 갖게하는 클래스들에 대해 설명한다.</p> + + <p><a href="https://github.com/mdn/webextensions-examples/tree/master/latest-download">최종-다운로드</a> 예제 확장 프로그램은 팝업에 <code>browser_style</code>을 사용한다.</p> + </td> + </tr> + <tr> + <td><code>default_icon</code></td> + <td><code>Object</code> or <code>String</code></td> + <td> + <p>액션이 사용하는 아이콘.</p> + + <p>권장은 19x19 픽셀과 38x38 픽셀 두 종류가 제공되는 것이다. 아래처럼 각각 "19" 와 "38"이라는 속성 이름을 사용한다:</p> + + <pre class="brush: json no-line-numbers"> + "default_icon": { + "19": "geo-19.png", + "38": "geo-38.png" + }</pre> + + <p>이렇게 하면 화면 해상도에 따라 적절한 크기를 사용하게 된다.</p> + + <p>아래처럼 하나의 문자열로 할 수도 있다:</p> + + <pre class="brush: json no-line-numbers"> +"default_icon": "geo.png"</pre> + + <p>이렇게 하면 툴바에 맞게 크기가 조정될 것이다. 흐릿해질 수 있다.</p> + </td> + </tr> + <tr> + <td><code>default_popup</code></td> + <td><code>String</code></td> + <td> + <p>팝업으로 띄울 HTML 파일의 경로.</p> + + <p>HTML 파일은 일반 웹 페이지처럼 <code><a href="/en-US/docs/Web/HTML/Element/link"><link></a></code>와 <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> 요소를 사용해서 CSS와 자바스크립트를 포함할 수 있다. 하지만 <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> 사이에 코드를 직접 포함하면 Content Violation Policy 에러가 발생하므로, <code><a href="/en-US/docs/Web/HTML/Element/script">src</a></code> 속성으로 분리된 스크립트 파일을 올려야 한다.</p> + + <p>보통의 웹페이지와 달리, 팝업에서 실행되는 자바스크립트는 모든 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension API</a>를 사용할 수 있다(당연히 필요한 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 한다).</p> + + <p>이것은 <a href="/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">지역화 가능 속성</a>이다.</p> + </td> + </tr> + <tr> + <td><code>default_title</code></td> + <td><code>String</code></td> + <td> + <p>아이콘에 마우스가 올려지면 표시되는 툴팁.</p> + + <p>이것은 <a href="/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">지역화 가능 속성</a>이다.</p> + </td> + </tr> + <tr> + <td><code>hide_matches</code></td> + <td><code>Array</code> of <code>Match Pattern</code> except <code><all_urls></code></td> + <td> + <p>주어진 <a href="/en-US/Add-ons/WebExtensions/match_patterns">선별식</a>에 맞는 URL에 대해 페이지 액션을 숨긴다.</p> + + <p>하지만 페이지 액션은 기본적으로 숨겨지고 <code>show_matches</code>와 맞아야만 보이기 때문에, <code>반드시 show_matches</code>가 있어야 의미가 있다. 이 값은 <code>show_matches</code> 일부를 제외하는 역할을 한다. 예를 들어 값이 다음과 같다면:</p> + + <pre class="brush: json"> +"page_action": { + "show_matches": ["https://*.mozilla.org/*"], + "hide_matches": ["https://developer.mozilla.org/*"] +}</pre> + + <p>기본은 "mozilla.org"인 모든 HTTPS URL에 대해 페이지 액션이 표시되는 것이지만, "developer.mozilla.org"인 경우는 제외라 표시되지 않는다.</p> + </td> + </tr> + <tr> + <td><code>show_matches</code></td> + <td><code>Array</code> of <code>Match Pattern</code></td> + <td> + <p>주어진 패턴에 일치하는 URL에 대해 페이지 액션을 보인다.</p> + + <p><code>hide_matches</code>도 보기.</p> + </td> + </tr> + <tr> + <td><code>pinned</code></td> + <td><code>Boolean</code></td> + <td> + <p>선택, 기본값은 <code>true</code>.</p> + + <p>주소창에 페이지 액션이 기본적으로 나타나는지를 결정한다.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<pre class="brush: json no-line-numbers">"page_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + } +}</pre> + +<p>그냥 아이콘만 있는 페이지 액션으로 아이콘을 누르면 확장의 background 스크립트는 아래처럼 해서 click 이벤트를 받을 수 있다:</p> + +<pre class="brush: js no-line-numbers"> browser.pageAction.onClicked.addListener(handleClick);</pre> + +<pre class="brush: json no-line-numbers">"page_action": { + "default_icon": { + "19": "button/geo-19.png", + "38": "button/geo-38.png" + }, + "default_title": "Whereami?", + "default_popup": "popup/geo.html" +}</pre> + +<p>아이콘, 제목, 팝업이 있는 페이지 액션으로 아이콘을 누르면 팝업이 보일 것이다.</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("webextensions.manifest.page_action")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code></li> + <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html b/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..ffe3aaf677 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,10 @@ +--- +title: Prerequisites +slug: Mozilla/Add-ons/WebExtensions/Prerequisites +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +<div>{{AddonSidebar}}</div> + +<div>파이어폭스 45 이후 버젼만 있으면 됩니다. </div> + +<div>시작하려면 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a> 을 보세요. </div> diff --git a/files/ko/mozilla/add-ons/webextensions/user_actions/index.html b/files/ko/mozilla/add-ons/webextensions/user_actions/index.html new file mode 100644 index 0000000000..84a7210eef --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_actions/index.html @@ -0,0 +1,43 @@ +--- +title: 사용자 행동 +slug: Mozilla/Add-ons/WebExtensions/User_actions +translation_of: Mozilla/Add-ons/WebExtensions/User_actions +--- +<div>{{AddonSidebar}}</div> + +<p>Some WebExtension APIs perform functions that are generally performed as a result of a user action. For example:</p> + +<ul> + <li>a browser action with a popup will display the popup when the user clicks it, but there's also a {{WebExtAPIRef("browserAction.openPopup")}} API enabling an extension to open the popup programmatically.</li> + <li>if an extension adds a sidebar, it is typically opened by the user via some part of the browser's built-in user interface, such as the View/Sidebar menu. But there's also a {{WebExtAPIRef("sidebarAction.open")}} API enabling an extension to open their sidebar programmatically.</li> +</ul> + +<p>To follow the principle of "no surprises", APIs like this can only be called from inside the handler for a user action. User actions include the following:</p> + +<ul> + <li>Clicking the extension's browser action or page action.</li> + <li>Selecting a context menu item defined by the extension.</li> + <li>Activating a keyboard shortcut defined by the extension (this only treated as a user action from Firefox 63 onwards).</li> + <li>Clicking a button in a page bundled with the extension.</li> +</ul> + +<p>For example:</p> + +<pre class="brush: js">function handleClick() { + browser.sidebarAction.open(); +} + +browser.browserAction.onClicked.addListener(handleClick);</pre> + +<p>Note that user actions in normal web pages are not treated as user actions for this purpose. For example, if a user clicks a button in a normal web page, and a content script has added a click handler for that button and in that handler sends a message to the extension's background page, then the background page message handler is not considered to be handling a user action.</p> + +<p>Also, if a user input handler waits on a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>, then its status as a user input handler is lost. For example:</p> + +<pre class="brush: js">async function handleClick() { + let result = await someAsyncFunction(); + + // this will fail, because the handler lost its "user action handler" status + browser.sidebarAction.open(); +} + +browser.browserAction.onClicked.addListener(handleClick);</pre> diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..e9041bc4dc --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,96 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +<div>{{AddonSidebar}}</div> + +<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p> + +<div class="note"> +<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">UI option</th> + <th scope="col">Description</th> + <th scope="col" style="width: 350px;">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td> + <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td> + <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td> + </tr> + <tr> + <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td> + <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td> + <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td> + </tr> + <tr> + <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td> + <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td> + <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td> + <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td> + <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td> + <td> + <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p> + </td> + <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td> + <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td> + <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td> + </tr> + <tr> + <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td> + <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td> + <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td> + <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td> + <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td> + </tr> + <tr> + <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td> + <td>Offer custom address bar suggestions when the user enters a keyword.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td> + </tr> + <tr> + <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td> + <td>A tab with an associated HTML document that displays in the browser's developer tools.</td> + <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td> + </tr> + </tbody> +</table> + +<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..568d5feb97 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,98 @@ +--- +title: Address bar button +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +tags: + - 사용자 인터페이스 + - 웹확장 +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +<div>{{AddonSidebar}}</div> + +<p>주소줄에 추가되는 버튼으로 사용자가 확장 프로그램과 상호작용하는 일명 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">페이지 </a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">액션</a>을 말한다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p> + +<h2 id="페이지_액션과_브라우저_액션">페이지 액션과 브라우저 액션</h2> + +<p>주소줄 버튼(또는 페이지 액션)은 툴바 버튼(또는 브라우저 액션)과 아주 비슷하다.</p> + +<p>차이점은:</p> + +<ul> + <li>위치: + <ul> + <li>페이지 액션은 브라우저의 주소줄에 표시된다.</li> + <li>브라우저 액션은 주소줄 밖 브라우저의 툴바에 표시된다.</li> + </ul> + </li> + <li>보임: + <ul> + <li>페이지 액션은 평소에는 보통 숨겨지고(show_matches와 hide_matches <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">매니페스트 항목</a>으로 바꿀 수 있다), 해당 탭에 보이거나 숨길 때는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a>와 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> 를 호출한다.</li> + <li>브라우저 액션은 항상 보인다.</li> + </ul> + </li> +</ul> + +<p>하고자 하는 동작이 현재 페이지에 대한 것이면 페이지 액션을 사용하고, 전체 또는 여러 페이지가 대상이라면 브라우저 액션을 사용한다. 예를 들어:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="row">유형</th> + <th scope="col">Bookmarks action</th> + <th scope="col">Content action</th> + <th scope="col">Tabs operation</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">페이지 액션</th> + <td>Bookmark this page</td> + <td>Reddit enhancement</td> + <td>Send tab</td> + </tr> + <tr> + <th scope="row">브라우저 액션</th> + <td>Show all bookmarks</td> + <td>Enable ad-blocking</td> + <td>Sync all open tabs</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="페이지_액션_기술하기">페이지 액션 기술하기</h2> + +<p> </p> + +<p>페이지 액션의 속성은 manifest.json의 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> 항목에서 정의한다:</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span> + <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span> + <span class="key token">"default_icon":</span> <span class="punctuation token">{</span> + <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span> + <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span> +<span class="punctuation token">}</span></code></pre> + +<p>꼭 있어야 하는 항목은 <code>default_icon</code>이다.</p> + +<p>페이지 액션을 기술하는 길은 두 가지다: <a href="/en-US/Add-ons/WebExtensions/Popups">팝업</a>이 있는가. 없는가. 팝업이 없으면, 사용자 클릭은 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>을 청취하는 확장 프로그램에 이벤트를 전달된다:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>팝업이 있으면, 클릭 이벤트는 없다: 대신, 팝업창이 열린다. 사용자는 팝업으로 일을 하고, 팝업창 바깥을 클릭하면 자동으로 닫힌다. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">팝업</a> 글에 팝업을 만들고 관리하는 보다 자세한 내용이 있다.</p> + +<p>주목! 확장 프로그램은 페이지 액션을 하나만 가질 수 있다.</p> + +<p>페이지 액션의 속성은 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API로 프로그램적으로 바꿀 수 있다.</p> + +<h2 id="아이콘">아이콘</h2> + +<p>페이지 액션에서 어떻게 아이콘을 만들고 사용하는지에 대한 자세한 내용은 <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> 문서에서 <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a>을 보라.</p> + +<h2 id="예제">예제</h2> + +<p>GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 저장소에 팝업없는 페이지 액션 예제 <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a>가 있다.</p> diff --git a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..95d5af0f04 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,28 @@ +--- +title: What are extensions? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<div>Extension(이하 확장앱)은 웹 브라우저의 기능을 수정하는 코드를 지칭합니다. 확장앱은 표준 웹 기술(JavaScript, HTML 그리고 CSS)과 일부 전용 JavaScript API를 사용하여 작성됩니다. 여러 가지 특징이 있지만 무엇보다도 확장앱은 브라우저에 새로운 기능을 추가할 수 있고 특정 웹사이트의 모양이나 내용을 변경할 수 있다는 점이 대표적입니다.</div> + +<div> </div> + +<div>Firefox 용 확장 프로그램은 확장앱 개발을 위한 크로스 브라우저 시스템인 WebExtensions API를 사용하여 만들어집니다. 대부분의 경우 API는 Google 크롬 및 Opera에서 지원하는 <a href="https://developer.chrome.com/extensions">extension API</a>와 호환됩니다. 대부분의 경우 이러한 브라우저 용으로 작성된 확장 프로그램은 Firefox 또는 Microsoft Edge에서 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">약간의 변경</a>만으로 실행됩니다. API는 <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">멀티프로세스 Firefox</a>와도 완벽하게 호환됩니다.</div> + +<div> </div> + +<div>과거에는 <a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a>, 또는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> 중 하나의 방법으로 Firefox Extension을 개발했습니다. 이제 2017년 11월을 마지막으로 WebExtensions API가 유일한 Firefox 확장앱 개발 방법으로 통합되고, 기존의 방법은 더 이상 사용되지 않을 예정입니다. </div> + +<div> </div> + +<div>질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면 <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons 메일링 리스트</a>나 <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>의 <a href="irc://irc.mozilla.org/extdev">#extdev</a>로 요청해주세요.</div> + +<h2 id="Whats_next">What's next?</h2> + +<ul> + <li>확장앱 예시를 확인하려면 <a href="/ko/Add-ons/WebExtensions/Examples">Example extensions</a> 참조.</li> + <li>확장앱<span class="translation">의 구조에 대한 내용은 </span><a href="/ko/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a> 참조.</li> + <li>간단한 확장앱을 만들어보려면 <a href="/ko/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> 참조.</li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..e7de79a4d0 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,154 @@ +--- +title: Your first extension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +tags: + - WebExtensions + - 가이드 +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +<div>{{AddonSidebar}}</div> + +<p>이 글에서 우리는 "mozilla.org"와 그 하위 도메인 페이지에서 불러온 페이지에 붉은 테두리를 추가하는 확장 기능을 만들게 됩니다. 이를 통해 어떻게 Firefox를 위한 확장 기능을 만들 수 있는지 알아보고자 합니다.</p> + +<p>이 예제의 소스코드는 GitHub에서 받을 수 있습니다.<br> + <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a></p> + +<p>우선, 파이어폭스의 버전이 45 이상이여야 합니다.</p> + +<h2 id="확장기능_만들기">확장기능 만들기</h2> + +<p>새 디렉토리를 만들고 그 디렉토리 안으로 들어갑니다.</p> + +<pre class="brush: bash">mkdir borderify +cd borderify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>이제 "borderify" 폴더 안에 "manifest.json" 파일을 만들어야 합니다. 아래 내용을 작성해 주세요.</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span> + + <span class="key token">"manifest_version":</span> <span class="number token">2</span><span class="punctuation token">,</span> + <span class="key token">"name":</span> <span class="string token">"Borderify"</span><span class="punctuation token">,</span> + <span class="key token">"version":</span> <span class="string token">"1.0"</span><span class="punctuation token">,</span> + + <span class="key token">"description":</span> <span class="string token">"Adds a red border to all webpages matching mozilla.org."</span><span class="punctuation token">,</span> + + <span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/border-48.png"</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + + <span class="key token">"content_scripts":</span> <span class="punctuation token">[</span> + <span class="punctuation token">{</span> + <span class="key token">"matches":</span> <span class="punctuation token">[</span><span class="string token">"*://*.mozilla.org/*"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="key token">"js":</span> <span class="punctuation token">[</span><span class="string token">"borderify.js"</span><span class="punctuation token">]</span> + <span class="punctuation token">}</span> + <span class="punctuation token">]</span> + +<span class="punctuation token">}</span></code></pre> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, 이 세가지 키는 반드시 필요합니다. 확장의 기본 메타 데이터를 담고 있습니다.</li> + <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code>은 없어도 괜찮지만 포함하는 게 좋습니다. 확장 관리자 화면에서 볼 수 있습니다.</li> + <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code>은 없어도 괜찮지만 역시 포함하는 편이 좋습니다<span class="translation">. 이는 확장의 아이콘을 결정하며 확장 관리자 화면에서 볼 수 있습니다.</span></li> +</ul> + +<p>가장 재밌는 키는 <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> 입니다. 이 키는 URL이 패턴과 일치하는 페이지에 스크립트를 주입하도록 Firefox에 요청하는 역할을 합니다. 이 예제의 경우, "mozilla.org"와 그 하위 도메인에서 제공되는 모든 HTTP와 HTTPS 페이지에 "borderify.js" 스크립트를 주입하도록 Firefox에 요청합니다.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">content scripts에 대해 더 알아보기</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">match patterns에 대해 더 알아보기</a></li> +</ul> + +<div class="warning"> +<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">확장에 ID를 지정해야 할 수도 있습니다</a><span class="translation">. 애드온</span> ID를 지정해야 한다면, <code>manifest.json</code> 파일에 <code>application</code> 키를 작성한 다음 gecko.id 프로퍼티를 설정하면 됩니다.</p> + +<pre class="brush: json">"applications": { + "gecko": { + "id": "borderify@example.com" + } +}</pre> +</div> + +<h3 id="iconsborder-48.png">icons/border-48.png</h3> + +<p>확장기능에는 아이콘이 필요합니다. 이 아이콘은 확장 관리자의 목록에 나타납니다. 우리의 manifest.json은 "icons/border-48.png"를 아이콘으로 사용하겠다고 정했습니다.</p> + +<p>borderify 디렉토리 안에 icons 디렉토리를 만들고, "border-48.png"라는 이름으로 아이콘을 저장합니다. <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">예제에 포함된 아이콘</a>이나, <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> 라이선스로 배포되는 Google Material Design 아이콘 세트에서 골라도 좋습니다.</p> + +<p>사용할 아이콘은 48픽셀 정사각형이여야 합니다. 원한다면 고해상도 디스플레이를 위해서 96x96 픽셀의 아이콘과 같이 제공할 수도 있습니다. 만약 그렇게 한다면 manifest.json의 icons 객체에 <code>96</code> 프로퍼티로 지정해줘야 합니다.</p> + +<pre class="brush: json">"icons": { + "48": "icons/border-48.png", + "96": "icons/border-96.png" +}</pre> + +<p>대신 SVG 파일을 사용할 수도 있습니다. 그러면 자동으로 딱 맞게 조절되어 적용됩니다. (만약 SVG에 텍스트가 포함되어 있다면 사용하는 툴에서 "패스로 변환하기" 기능을 사용해 텍스트를 패스로 변경해주세요. 그래야 원하는 위치와 크기로 확대/축소가 이뤄집니다.)</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">아이콘을 지정하는 방법에 대해 더 알아보기</a></li> +</ul> + +<h3 id="borderify.js">borderify.js</h3> + +<p>마지막으로 borderify.js 파일을 borderify 디렉토리에 만들고 아래 내용으로 저장해주세요.</p> + +<pre class="brush: js">document.body.style.border = "5px solid red";</pre> + +<p>이 스크립트는 manifest.json의 <code>content_scripts</code>키로 주어진 패턴에 매칭 될 때 페이지에 삽입됩니다. 스크립트는 원래 페이지에 포함되어 있던 스크립트처럼, 문서 자체에 직접 접근할 수 있게 됩니다.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">content scripts에 대해 더 알아보기</a></li> +</ul> + +<h2 id="사용해보기">사용해보기</h2> + +<p>우선 파일들이 원하는 위치에 있는지 다시 확인 해보세요.</p> + +<pre>borderify/ + icons/ + border-48.png + borderify.js + manifest.json</pre> + +<h3 id="설치">설치</h3> + +<p>Firefox로 "about:debugging" 페이지에 들어갑니다. "임시 확장기능 로드"를 클릭해 확장기능 디렉토리를 선택합니다.</p> + +<p>{{EmbedYouTube("cer9EUKegG4")}}</p> + +<p>이제 확장기능이 설치될 것이고, Firefox가 재시작 되더라도 유지될 것입니다.</p> + +<p>대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 툴을 사용해 커맨드라인에서 확장기능을 실행할 수도 있습니다.</p> + +<h3 id="테스트">테스트</h3> + +<p>이제 "mozilla.org" 페이지에 들어가 봅시다. 페이지 전체를 둘러싸고 있는 붉은 색의 테두리를 볼 수 있습니다.</p> + +<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p> + +<div class="note"> +<p><span class="translation">addons.mozilla.org에 들어가서 테스트 하지 마세요! </span>Content script는 현재 이 도메인에 사용할 수 없도록 차단됩니다.</p> +</div> + +<p>좀 더 파고들어 봅시다. 테두리의 색을 변경하거나, 페이지 컨텐츠에 다른 것들을 해볼 수 있겠죠. content script를 저장하고 about:debugging 페이지에서 Reload 버튼을 눌러 확장기능 파일을 새로고침 할 수 있습니다. 그리고 나서는 곧바로 변경된 기능을 확인할 수 있죠.</p> + +<p>{{EmbedYouTube("NuajE60jfGY")}}</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">확장기능을 불러오는 것에 대해 더 알아보기</a></li> +</ul> + +<h2 id="패키징과_배포">패키징과 배포</h2> + +<p>다른 사람들이 확장기능을 사용할 수 있게 하려면, 확장을 패키징하고 Mozilla에 제출해 서명을 받아야 합니다. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">확장기능 배포에 대해 더 알아보기.</a></p> + +<h2 id="다음으로">다음으로</h2> + +<p>이제 어떻게 Firefox용 WebExtension을 개발해야 하는지 알게 되었습니다. 다음 글들을 읽고 시도해 보세요.</p> + +<ul> + <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">확장기능의 구조에 대해 더 자세히 알아보기</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">좀 더 복잡한 확장기능을 만들기</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/API">확장기능에서 사용할 수 있는 JavaScript API 문서</a></li> +</ul> diff --git a/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..1d5bd49ca4 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,456 @@ +--- +title: Your second extension +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +<div>{{AddonSidebar}} +<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> 장을 읽었다면, 확장앱을 만드는 법을 알게 되었을 것이다. 이번 장에서는 몇개의 API를 사용하는 약간 더 복잡한 확장앱을 만들어볼 것이다.</p> + +<p>이 확장앱은 파이어폭스 툴바에 새로운 버튼을 추가한다. 사용자가 이 버튼을 클릭하면 동물을 선택하는 팝업을 보여준다. 동물을 선택하면 현재 웹페이지의 내용을 선택한 동물 이미지로 변경한다.</p> + +<p>구현내용:</p> + +<ul> + <li><strong>파이어폭스 툴바에 추가된 버튼의 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>을 정의한다. </strong><br> + 버튼을 위해 필요한것: + <ul> + <li>"beasts-32.png" 아이콘</li> + <li>버튼을 누를때 나오는 팝업. 이 팝업은 HTML과 CSS, 자바스크립트로 구성된다.</li> + </ul> + </li> + <li><strong>애드온 메니저에 보여질 확장앱 아이콘을 정의한다.</strong></li> + <li><strong>웹페이지에 주입될 "beastify.js"라는 content script를 작성한다. </strong><br> + 이것이 실제로 웹페이지를 변경할 코드이다.</li> + <li><strong>웹페이지를 변경할 동물 이미지를 패키징한다.</strong><br> + <span class="translation">이미지를 "웹 접근 가능 자원"으로 만들어 웹페이지에서 참조 하게 한다.</span></li> +</ul> + +<p>확장앱의 구조를 표현하면 아래와 같다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p> + +<p><span class="translation">간단한 확장앱이지만 WebExtensions API의 기본 개념을 잘 보여줍니다.</span></p> + +<ul> + <li>툴바에 버튼 추가</li> + <li>팝업에 쓰일 HTML, CSS, 자바스크립트 정의</li> + <li>웹페이지에 content scripts 주입</li> + <li>컨텐츠 스크립트와 나머지 확장앱과의 통신</li> + <li>확장앱의 웹페이지에서 사용할 리소스 패키징</li> +</ul> + +<p><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">깃헙 예제 소스코드</a>.</p> + +<p>이 확장앱을 만드려면 파이어폭스 45이상이 필요하다.</p> + +<h2 id="Writing_the_extension">Writing the extension</h2> + +<p>새 디렉토리 생성:</p> + +<pre class="brush: bash">mkdir beastify +cd beastify</pre> + +<h3 id="manifest.json">manifest.json</h3> + +<p>이제 "manifest.json" 파일을 아래와 같은 내용으로 생성:</p> + +<pre class="brush: json">{ + + "manifest_version": 2, + "name": "Beastify", + "version": "1.0", + + "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify", + "icons": { + "48": "icons/beasts-48.png" + }, + + "permissions": [ + "activeTab" + ], + + "browser_action": { + "default_icon": "icons/beasts-32.png", + "default_title": "Beastify", + "default_popup": "popup/choose_beast.html" + }, + + "web_accessible_resources": [ + "beasts/frog.jpg", + "beasts/turtle.jpg", + "beasts/snake.jpg" + ] + +} +</pre> + +<ul> + <li>위에서부터 세가지 키인 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code>는 , <span class="translation">필수항목이고 확장앱의 기본 정보이다.</span></li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> 과 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code>은 선택사항이나, 확장앱에관한 유용한 정보를 가지기에 권장한다.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> 도 선택사항이나 애드온 매니저에서 확장앱을 알리는 아이콘이니 권장한다.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> 은 확장앱이 필요로 하는 권한의 목록이다. 이 확장앱에서는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> 과 permission</a> 을 사용한다.</li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>는 툴바에 나오는 버튼을 정의하고 세가지 정보를 정의한다: + <ul> + <li><code>default_icon</code> 는 필수이고 , 버튼의 아이콘을 정의한다.</li> + <li><code>default_title</code> 는 선택사항이고 툴팁을 정의한다.</li> + <li><code>default_popup</code> 은 사용자가 버튼을 클릭할때 팝업을 보여주고 싶을때 사용한다. 우리는 이 항목을 추가해서 확장앱에 포함된 HTML파일을 지정한다.</li> + </ul> + </li> + <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code>는 웹페이지에서 접근가능한 파일들의 목록이다. 확장앱은 이미지로 웹페이지의 컨텐츠를 변경해야하기에 이 이미지들이 페이지에 접근가능하게 해야한다.</li> +</ul> + +<p>manifest.json와 연관된 모든 경로의 것들을 기술한다.</p> + +<h3 id="The_icon">The icon</h3> + +<p>확장앱은 아이콘을 가져야한다. 이 아이콘은 애드온 매니저에서 확장앱의 목록에서 보여진다.("about:addons" url을 통해 열수 있다). 이번에 만든 manifest.json는 <span class="translation">"icons / beasts-48.png" 아이콘을 정의하였다</span></p> + +<p>"icons"라는 디렉토리를 만들고 "beasts-48.png" 파일을 그 아래에 저장한다. <span class="translation">우리 예제는 </span><a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina iconset</a><span class="translation">에서 가져온 이미지를 </span><a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">라이센스</a><span class="translation"> 조건에 따라 사용했다.</span></p> + +<p>자신만의 아이콘을 사용하려면 48x48 픽셀이어야한다. 또한 고해상도를 위한 96x96 필셀도 지원한다. 만약 고해상도를 지원하게 하고싶다면 manifest.json의 아이콘 부분을 아래처럼 작성하면 된다.</p> + +<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span> + <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span> + <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="The_toolbar_button">The toolbar button</h3> + +<p>툴바 버튼도 아이콘이 필요한데, 우리 manifest.json 파일에 툴바 버튼의 아이콘을 "icons/beasts-32.png"으로 기술하였다.</p> + +<p>"icons" 디렉토리 아래 "beasts-32.png" 파일을 저장한다. 우리는 <span class="translation">우리 예제의 </span><a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">이미지</a><span class="translation">는 </span><a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a><span class="translation">에서 가져온 이미지를 </span><a href="http://www.iconbeast.com/faq/">라이센스</a><span class="translation"> 조건에 따라 사용했다.</span></p> + +<p><span class="translation">팝업을 제공하지 않으면 사용자가 버튼을 클릭 할 때 클릭 이벤트가 없어지게된다. </span>팝업을 제공한다면 이벤트는 없이지지않고 대신 팝업이 열린다. 우리는 팝업을 열어야하니 다음에서 팝업을 정의한다.</p> + +<h3 id="The_popup">The popup</h3> + +<p>이 팝업의 기능은 세 동물중 하나를 선택하는 기능이다.</p> + +<p>확장앱 로트 아래 "popup" 디렉토리를 생성한다. 여기에대가 팝업 관련 파일들을 저장할 것 이다. 이 팝업이 가지는 세가 파일:</p> + +<ul> + <li><strong><code>choose_beast.html</code></strong> 컨텐츠의 패널 정의</li> + <li><strong><code>choose_beast.css</code></strong> 스타일</li> + <li><strong><code>choose_beast.js</code></strong> 활성화된 탭에 사용자가 선택한 이미지를 content script를 통해 반영한다.</li> +</ul> + +<pre class="brush: bash">mkdir popup +cd popup +touch choose_beast.html choose_beast.css choose_beast.js +</pre> + +<h4 id="choose_beast.html">choose_beast.html</h4> + +<p>HTML파일의 내용:</p> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + <head> + <meta charset="utf-8"> + <link rel="stylesheet" href="choose_beast.css"/> + </head> + +<body> + <div id="popup-content"> + <div class="button beast">Frog</div> + <div class="button beast">Turtle</div> + <div class="button beast">Snake</div> + <div class="button reset">Reset</div> + </div> + <div id="error-content" class="hidden"> + <p>Can't beastify this web page.</p><p>Try a different page.</p> + </div> + <script src="choose_beast.js"></script> +</body> + +</html> +</pre> + +<p>각각의 동물들을 보여주는 항목을 가지는 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 요소의 ID에 <code>"popup-content"</code> 를 정의하였다. 또 다른 <code>"error-content"</code> ID를 가지는 <code><div></code>는 <code>"hidden"</code> 이라는 class를 정의하였고 팝업을 초기화 할때 문제가 생기는 경우 사용할 것이다.</p> + +<p>이 HTML파일은 일반 웹페이지처럼 CSS파일과 JS파일을 포함한다.</p> + +<h4 id="choose_beast.css">choose_beast.css</h4> + +<p>이 CSS는 팝업의 크기를 정의하고 선택항목의 공간을 정의하는등 기본적인 스타일링을 한다. 또한 <code>class="hidden"</code> 이라고 정의한 항목을 숨긴다. 이것은 <code>"error-content"</code> <code><div></code> 가 기본적으로는 숨겨진다는 것을 뜻한다.</p> + +<pre class="brush: css">html, body { + width: 100px; +} + +.hidden { + display: none; +} + +.button { + margin: 3% auto; + padding: 4px; + text-align: center; + font-size: 1.5em; + cursor: pointer; +} + +.beast:hover { + background-color: #CFF2F2; +} + +.beast { + background-color: #E5F2F2; +} + +.reset { + background-color: #FBFBC9; +} + +.reset:hover { + background-color: #EAEA9D; +} + +</pre> + +<h4 id="choose_beast.js">choose_beast.js</h4> + +<p>팝업의 자바스크립트 코드는 아래와 같다:</p> + +<pre class="brush: js">/** + * CSS to hide everything on the page, + * except for elements that have the "beastify-image" class. + */ +const hidePage = `body > :not(.beastify-image) { + display: none; + }`; + +/** + * Listen for clicks on the buttons, and send the appropriate message to + * the content script in the page. + */ +function listenForClicks() { + document.addEventListener("click", (e) => { + + /** + * Given the name of a beast, get the URL to the corresponding image. + */ + function beastNameToURL(beastName) { + switch (beastName) { + case "Frog": + return browser.extension.getURL("beasts/frog.jpg"); + case "Snake": + return browser.extension.getURL("beasts/snake.jpg"); + case "Turtle": + return browser.extension.getURL("beasts/turtle.jpg"); + } + } + + /** + * Insert the page-hiding CSS into the active tab, + * then get the beast URL and + * send a "beastify" message to the content script in the active tab. + */ + function beastify(tabs) { + browser.tabs.insertCSS({code: hidePage}).then(() => { + let url = beastNameToURL(e.target.textContent); + browser.tabs.sendMessage(tabs[0].id, { + command: "beastify", + beastURL: url + }); + }); + } + + /** + * Remove the page-hiding CSS from the active tab, + * send a "reset" message to the content script in the active tab. + */ + function reset(tabs) { + browser.tabs.removeCSS({code: hidePage}).then(() => { + browser.tabs.sendMessage(tabs[0].id, { + command: "reset", + }); + }); + } + + /** + * Just log the error to the console. + */ + function reportError(error) { + console.error(`Could not beastify: ${error}`); + } + + /** + * Get the active tab, + * then call "beastify()" or "reset()" as appropriate. + */ + if (e.target.classList.contains("beast")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(beastify) + .catch(reportError); + } + else if (e.target.classList.contains("reset")) { + browser.tabs.query({active: true, currentWindow: true}) + .then(reset) + .catch(reportError); + } + }); +} + +/** + * There was an error executing the script. + * Display the popup's error message, and hide the normal UI. + */ +function reportExecuteScriptError(error) { + document.querySelector("#popup-content").classList.add("hidden"); + document.querySelector("#error-content").classList.remove("hidden"); + console.error(`Failed to execute beastify content script: ${error.message}`); +} + +/** + * When the popup loads, inject a content script into the active tab, + * and add a click handler. + * If we couldn't inject the script, handle the error. + */ +browser.tabs.executeScript({file: "/content_scripts/beastify.js"}) +.then(listenForClicks) +.catch(reportExecuteScriptError); + +</pre> + +<p>이 코드의 시작접은 96번째 라인이다. <span class="translation">이 스크립트는 browser.tabs.executeScript () API를 사용해 팝업이 로드될때 활성화된 탭에 </span>content script<span class="translation"> (</span>beastify.js<span class="translation">)를 주입한다.</span> content script<span class="translation">를 성공적으로 주입하면 사용자가 탭을 닫거나 페이지를 이동할 때까지 </span>content script<span class="translation">가 주입 된 상태로 유지된다.</span></p> + +<p><code>browser.tabs.executeScript()</code>API호출이 실패하는 공통적인 이유는 모든 웹페이지에 content scripts를 주입할 수 없기 때문이다. 예를들어 about:debugging 같은 권한이 있는 페이지에서는 content scripts를 주입할 수 없고 <a href="https://addons.mozilla.org/">addons.mozilla.org</a> 도 마찬가지이다. 이처럼 실패할때는 <code>reportExecuteScriptError()</code>가 호출되어 <code>"popup-content"</code> <code><div></code> 를 숨기고 <code>"error-content"</code> <code><div></code>를 보여주고 <a href="/en-US/Add-ons/WebExtensions/Debugging">콘솔</a>에 에러를 로깅한다.</p> + +<p>content script 주입이 성공하면 <code>listenForClicks()</code>이 호출 된다. 이 함수는 팝업에서 클릭을 위한 리스너이다.</p> + +<ul> + <li><code>"beast"</code>클래스를 가진 버튼을 클릭하면 <code>beastify()</code> 함수가 호출 된다.</li> + <li><code>"reset"</code>클래스를 가진 버튼을 클릭하면 <code>reset()</code>함수가 호출 된다.</li> +</ul> + +<p><code>beastify()</code> 함수는 3가지 기능을 한다:</p> + +<ul> + <li><span class="translation">클릭 한 버튼을 동물의 이미지 URL로 매핑</span></li> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code><span class="translation"> API로 CSS를 주입하여 페이지의 전체를 숨긴다.</span></li> + <li><span class="translation">페이지를 동물그림으로 변경하도록 짐승 이미지 URL을 전달 요청하기 위해</span><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code><span class="translation"> API로 "beastify"메시지를 </span>content script<span class="translation">에 보낸다.</span></li> +</ul> + +<p><code>reset()</code> 함수는 페이지가 동물그림으로 변경된 것을 취소한다:</p> + +<ul> + <li><code><a href="/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code> API로 추가한 CSS를 제거한다.</li> + <li>페이지를 리셋하기 위해 content script에 "reset" 메시지를 보낸다.</li> +</ul> + +<h3 id="The_content_script">The content script</h3> + +<p>확장앱의 루트에 "content_scripts"라는 디렉토리를 생성하고, "beastify.js" 파일을 아래 내용으로 작성한다:</p> + +<pre class="brush: js">(function() { + /** + * Check and set a global guard variable. + * If this content script is injected into the same page again, + * it will do nothing next time. + */ + if (window.hasRun) { + return; + } + window.hasRun = true; + + /** + * Given a URL to a beast image, remove all existing beasts, then + * create and style an IMG node pointing to + * that image, then insert the node into the document. + */ + function insertBeast(beastURL) { + removeExistingBeasts(); + let beastImage = document.createElement("img"); + beastImage.setAttribute("src", beastURL); + beastImage.style.height = "100vh"; + beastImage.className = "beastify-image"; + document.body.appendChild(beastImage); + } + + /** + * Remove every beast from the page. + */ + function removeExistingBeasts() { + let existingBeasts = document.querySelectorAll(".beastify-image"); + for (let beast of existingBeasts) { + beast.remove(); + } + } + + /** + * Listen for messages from the background script. + * Call "beastify()" or "reset()". + */ + browser.runtime.onMessage.addListener((message) => { + if (message.command === "beastify") { + insertBeast(message.beastURL); + } else if (message.command === "reset") { + removeExistingBeasts(); + } + }); + +})(); +</pre> + +<p>content script는<span class="translation"> 먼저 전역 변수 </span><code>window.hasRun</code><span class="translation">을 확인한다:</span> content script가 이미 실행되어 있다면 아무작업도 하지 않고, 아직 주입되어 있지않으면 <code>window.hasRun</code>를 true로 셋팅한뒤 잡업을 계속한다. <span class="translation">이 작업을 하는 이유는 팝업을 열 때마다 활성화된 탭에 </span>content script<span class="translation">를 실행하기 때문에 스크립트가 중복으로 실행되기 때문에</span> 첫번째 팝업오픈시에만 content script<span class="translation">를 실행해야한다.</span></p> + +<p>그런 다음 40번째 라인에서 content script는 <span class="translation">browser.runtime.onMessage API로 팝업의 메시지를 받는다.</span> <span class="translation">위에서 봤던 팝업의 스크립트는 "beastify"와 "reset" 두 종류의 메시지를 보낸다.</span></p> + +<ul> + <li>"beastify" 메시지를 받으면 메시지에 동물이미지의 URL이 있다는 걸 예상할수 있다. <span class="translation">우리는 이전의 "beastify" 메시지로 추가 된 동물을 제거하고 <img> 요소를 만들어서 src속성에 동물 이미지 URL을 셋팅한다.</span></li> + <li>"reset" 메시지를 받으면 그냥 모든 추가된 동물을 삭제한다.</li> +</ul> + +<h3 id="The_beasts">The beasts</h3> + +<p><span class="translation">마지막으로 동물의 이미지를 추가한다.</span></p> + +<p>"beasts" 디렉토리를 만들고 그 아래 적절한 이름의 이미지 세개를 추가한다. <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">GitHub 저장소</a><span class="translation">에서 이미지를 가져올 수 있다. </span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p> + +<h2 id="Testing_it_out">Testing it out</h2> + +<p>먼저 파일들이 제자리에 있는 지 확인한다:</p> + +<pre>beastify/ + + beasts/ + frog.jpg + snake.jpg + turtle.jpg + + content_scripts/ + beastify.js + + icons/ + beasts-32.png + beasts-48.png + + popup/ + choose_beast.css + choose_beast.html + choose_beast.js + + manifest.json</pre> + +<p><span class="translation">파이어폭스 45에서 디스크로부터 임시로 확장 기능을 설치할 수 있다.</span></p> + +<p>파이어폭스에서 about:debugging를 열고 "Load Temporary Add-on"를 클릭한다음 manifest.json 파일을 선택한다. 그러면 파이어폭스 툴바에서 버튼을 볼수 있을것이다.</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>웹페이지를 열고 툴바 버튼을 클릭하고 동물을 선택하면 웹페이지가 바뀌는것을 볼 수 있을것이다.</p> + +<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p> + +<h2 id="Developing_from_the_command_line">Developing from the command line</h2> + +<p>아래처럼 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>툴을 이용해 설치할 수도 있다.</p> + +<pre class="brush: bash">cd beastify +web-ext run</pre> +</div> diff --git a/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html b/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html new file mode 100644 index 0000000000..23deaf4ffc --- /dev/null +++ b/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html @@ -0,0 +1,443 @@ +--- +title: Eclipse CDT +slug: Mozilla/Developer_guide/Eclipse/Eclipse_CDT +translation_of: Mozilla/Developer_guide/Eclipse/Eclipse_CDT +--- +<h2 id="Using_Eclipse_CDT_for_Mozilla_development" name="Using_Eclipse_CDT_for_Mozilla_development">Introduction</h2> + +<p> </p> + +<p>Eclipse CDT (C / C ++ Development Tools)는 고급 코드 지원 (상속 / 콜 그래프 탐색기, 정의로 이동, 리팩토링, 자동 완성, 구문 강조 표시 등)을 사용하여 C 및 C ++ 개발을위한 오픈 소스 IDE입니다.이클립스는 자바 오픈소스 IDE로 유명합니다. 하지만 자바뿐만 아니라 C/C++ 개발도구의 기능도 갖는데요, 이를 이클립스 CDT라고 합니다. 이번 포스팅에서는 윈도우즈 환경에 이클립스 CDT를 설치하는 내용을 다루어보고자 합니다.</p> + +<h2 id="System_requirements">System requirements</h2> + +<p>Eclipse will use a lot of memory to fully index the Mozilla source tree to provide code assistance features (easily <strong>4 GB of RAM</strong>, although this will drop to just over 1 GB if you restart after indexing is complete). Therefore, it is not recommended if your machine only has 4 GB of RAM.</p> + +<h2 id="Installing_Eclipse">Installing Eclipse</h2> + +<div class="note"> +<p>Regarding <a class="link-https" href="https://code.google.com/p/llvm4eclipsecdt/" title="https://code.google.com/p/llvm4eclipsecdt/">llvm4eclipsecdt</a>, do not install or select this toolchain for Mozilla development. This plugin is intended mainly for managed projects but we use an unmanaged project for Mozilla (since it has its own build system). Using this plugin will result in parts of the UI described below being hidden or disabled.</p> +</div> + +<p>Download <a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers/oxygenr" title="http://www.eclipse.org/downloads/">Eclipse IDE for C/C++ Developers</a> from the Eclipse download page.</p> + +<h3 id="Increase_Eclipses_memory_limits!">Increase Eclipse's memory limits!</h3> + +<div class="warning"> +<p>Make sure you do this!</p> +</div> + +<p>Before you use Eclipse with the Mozilla source you must increase its memory limits. When Eclipse's indexer tries to process the Mozilla source, Eclipse will need considerably more memory than it allows itself out of the box. You should <a class="external" href="http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F" title="http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F">increase its memory limits using the <code>eclipse.ini</code></a> in your installation directory (or in Eclipse.app/Contents/Eclipse/ if you're on Mac). Set something like <code>-Xms1G -Xmx5G -XX:MaxPermSize=1G</code> (initial heap space of 1 GB, max heap space of 5 GB, max perm-gen space of 1 GB).</p> + +<p>If you fail to increase these limits, then you will likely find that Eclipse hangs when you try to index or work with the Mozilla source later on.</p> + +<h2 id="Express_setup">Express setup</h2> + +<p>For the Eclipse indexer to work well you must first build Mozilla, so that it includes headers from the objdir etc. These can be found and processed by Eclipse.</p> + +<div class="warning"> +<p><strong>Note:</strong> Your <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options#Building_with_an_Objdir">MOZ_OBJDIR</a> must be outside the Mozilla source directory.</p> +</div> + +<p>Once your build is complete then <code>mach</code> can generate a useful Eclipse project on your behalf. Either run:</p> + +<pre class="brush: bash"># Create eclipse project and open it: +./mach ide eclipse +</pre> + +<p>Or else:</p> + +<pre class="brush: bash"># Create eclipse project without opening it: +./mach build-backend -b CppEclipse</pre> + +<p>This should take less than a minute. In the case of the <code>build-backend</code> command, instructions on how to open the project will be displayed after the command completes.</p> + +<h2 id="Setup_time">Setup time</h2> + +<div class="note"> +<p>Some points in the rest of this document below are old and taken care of by the mach commands described above (although some of the project configuration is not done automatically yet). Some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful background information to understand it in more detail on how Eclipse works.</p> +</div> + +<p>You can expect it to take an hour or so to work through these instructions if you're doing so for the first time.</p> + +<p>(This assumes that you already have a copy of the Mozilla source, and that you have also <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build" title="Simple Firefox build">built the source</a> so that you have a pre-existing object directory. If that's not the case, then get your build going now so that it can be running while you continue with the instructions below. FAQ: {{ anch("Why_does_Eclipse_need_an_object_directory.3F","Wait, why does Eclipse need an object directory?") }})</p> + +<h2 id="Code_assistance">Code assistance</h2> + +<p>Out of the box, Eclipse can provide some code assistance for the Mozilla source, but it will be incomplete and often just plain broken. If you set up Eclipse as detailed below it will do a much, much better job.</p> + +<h3 id="Important_background">Important background</h3> + +<p>To help you make sense of the instructions that follow (and so that you can modify them to meet your own needs if necessary), this section provides some background on what IDEs need in order to provide advanced code assistance, and what Eclipse CDT needs in particular.</p> + +<p>To be able to provide really good code assistance for a project's source code, IDEs like Eclipse need to carry out a thorough <a class="link-https" href="https://en.wikipedia.org/wiki/Static_program_analysis" title="https://en.wikipedia.org/wiki/Static_program_analysis">static analysis</a> of the project's source files, to build up a picture of the code (what Eclipse is trying to do when it "indexes" the source.) Static analysis involves parsing the source files, so naturally it can only produce good results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file. Since Eclipse doesn't initially have any of this information, the code assistance that it's able to provide out of the box is pretty broken.<br> + <br> + For projects the size and complexity of Mozilla, it's impractical to manually configure Eclipse when there is a valid set of defines and includes paths for each of the different parts of the source code. Happily, Eclipse makes manual configuration unnecessary. Like some other IDEs, that are used with projects like Mozilla that have their own build system. Eclipse provides a tool that can collect the options that are passed to the compiler for each file that's compiled during an actual build. This process is sometimes called "build option discovery" or "compiler option discovery".</p> + +<p>The way that Eclipse CDT does build option discovery is to scan the console output from a real build looking for lines where a compiler was invoked. For each line that invoked a compiler, it tries to figure out which source file was being built and what its include paths were. <u>If relative paths are used to specify the source file or any of its include paths (common in Mozilla), and if you fail to take steps to make sure the build output specifies which directory the compiler is invoked from, this will not be possible.</u> <em>If</em> Eclipse can successfully identify which source file was being compiled, then it can associate with that file the <em>resolvable</em> include paths, preprocessor defines, and pre-include files that were passed to the compiler.</p> + +<p>Note the requirements that this method of build option discovery imposes on us. First, Eclipse needs build console output for a complete build, so that it can find compiler options for as many source files as possible. The build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "Entering directory..."/"Leaving directory..." lines). Finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of relative paths by interleaving the "Entering directory..."/"Leaving directory..." lines), and the build must not be silenced/quietened.</p> + +<div class="warning">Conversely, note this very carefully: if you configure Eclipse to invoke a build process that is parallelized, silenced, or that fails to identify the directory that the compiler is being run from, then it <strong><u>will</u></strong> mess up the compiler options that Eclipse associates with your files, and that in turn will <strong><u>significantly</u></strong> degrade the quality of the code assistance that Eclipse will provide after it next re-indexes the code.</div> + +<p>These requirements aren't a very good fit with the typical Mozilla developer's wish to minimize build times, implying parallelized, silenced builds.</p> + +<p>The consequences of the above observations are this:</p> + +<div class="warning"> +<ul> + <li>It is strongly recommended that you invoke your normal (re)builds from the command line, <strong>externally</strong> of Eclipse.</li> + <li>Below we will configure Eclipse's build step so that you use it only occasionally to manually trigger a special "build" (actually a fast script that fakes a build) purely for the purposes of setting/updating the compiler options that Eclipse associates with each source file.</li> +</ul> +</div> + +<p>(Not using Eclipse to invoke your real builds does lose you some minor benefits that Eclipse has to offer, but these are worth sacrificing for much improved code assistance. See the {{ anch("Building from Eclipse") }} section below if you're interested in what you lose. If you're interested in future improvements to Eclipse that would allow parallel builds to be run from inside Eclipse while still allowing it to obtain the compiler options, see the FAQ {{ anch("Isn%27t_there_a_better_method_of_build_option_discovery.3F","Isn't there a better method of build option discovery?") }} below.)</p> + +<h2 id="Initial_workspace_preferences">Initial workspace preferences</h2> + +<p>When you open Eclipse, it will ask you to "Select a workspace" (a directory where Eclipse will store files that it generates during indexing, and so on.) It's recommended that you have a separate workspace containing only a single project for each Mozilla source tree [{{ anch("How_can_I_delete_my_Eclipse_project_and_start_over.3F","rational") }}], and that you choose a directory outside the Mozilla source. Something like $HOME/eclipse-workspaces/mozilla-tree-1, for example. After selecting an appropriate directory, click OK, then close the "Welcome" tab when the main Eclipse window opens.</p> + +<div class="warning">Before you proceed any further, check that your changes to Eclipse's memory limits have taken effect and are present in <code>Eclipse/Help > About Eclipse > Installation Details > Configuration</code>.</div> + +<p>To avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below).</p> + +<p>Whenever you create a new workspace for a Mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (<code>Window > Preferences</code>, or <code>Eclipse > Preferences</code>) before creating a project in that workspace:</p> + +<ul> + <li>in "General > Workspace", disable "Build automatically"</li> + <li>in "C/C++ > Indexer", disable "Automatically update the index"</li> +</ul> + +<p>Turning off automatic indexing prevents the CPU intensive indexer from running at various stages during the steps below before we're ready.</p> + +<p>Select "General > Content Types", expand "Text > C Source File > C++ Source File", click "Add" and add "*.mm". Eclipse CDT doesn't currently understand Objective-C files (although there is <a class="external" href="http://code.google.com/p/objectiveclipse/" title="http://code.google.com/p/objectiveclipse/">a project that promises to add Objective-C support</a>), so for now, this is the best we can do to give Eclipse a chance of expanding its understanding of the source into the Objective-C files.</p> + +<p>Select "General > Editors > Text Editors". If you want line numbers, tick "Show line numbers". If you want a column marker to mark the 80th column to help with formatting code to Mozilla's 80 character line limit, tick "Show print margin" and set the value to 80.</p> + +<p>Select "General > Workspace" and select "Refresh using native hooks or polling" and "Refresh on access" to prevent Eclipse giving you annoying "Resource is out of sync" messages when files change from under it due to Mercurial or other external activity.</p> + +<p>Select "C/C++ > Build > Console" and set "Limit console output (number of lines)" to something large, like "1000000".</p> + +<p>Eclipse CDT will try to format C/C++ code that you add as you type. However, its default formats are not a good match to <a href="/en-US/docs/Mozilla/Developer_Guide/Coding_Style" title="Mozilla Coding Style Guide">Mozilla's style rules</a>. Download this <a href="/@api/deki/files/6241/=eclipse-formatter-for-mozilla.xml" title="https://developer.mozilla.org/@api/deki/files/6241/=eclipse-formatter-for-mozilla.xml">first pass at an Eclipse formatter configuration for Mozilla C/C++ coding style</a>, and install it by opening the workspace preferences, selecting "C/C++ > Code Style > Formatter", and then using the "Import" button to import that file. The "Active profile" field should then automatically change to "Mozilla". Depending on the area of the code that you work on, you may need to tweak this configuration using the "Edit" button. (Note that the format settings under "General > Editors > Text Editors" have no effect in C/C++ views, since the C/C++ settings are more specific and override those settings. However, you may still want to tweak those settings if you'll be editing other file types in Eclipse.)</p> + +<p>Select "C/C++ > Editor" and set "Workspace default" to "Doxygen".</p> + +<p>Select "C/C++ > Editor > Content Assist" and set the Auto-Activation delay to 0 so that autocomplete suggestions don't seem to be laggy. (Sadly, there is no auto-activation option to activate autocomplete suggestion., so as soon as you type any alphabetical character that may begin with a symbol name like there is in other IDEs.)</p> + +<p>Select "C/C++ > Editor > Save Actions" and deselect "Ensure newline at the end of file".</p> + +<p>Select "C/C++ > Editor > Scalability" and set "Enable scalability mode when the number of lines in the file is more than:" to something larger, like 100000.</p> + +<p>Select "Run/Debug > Console" and deselect "Limit console output".</p> + +<p>If you want to increase the text size in the editor, select "General > Appearance > Colors and Fonts", select "Basic > Text Font", and edit the font size.</p> + +<h2 id="Creating_an_Eclipse_project">Creating an Eclipse project</h2> + +<p>To create an Eclipse project for your Mozilla source tree, select "File > New > Makefile Project with Existing Code". In the "Import Existing Code" window that opens, enter a meaningful Project Name that identifies your Mozilla source tree, set the code location to the root of your source tree, select an appropriate Toolchain (e.g., "MacOSX GCC"), and click Finish.</p> + +<p>The status bar at the bottom right of the window should now show that Eclipse is "Refreshing the workspace" (gathering a list of all the files in the source tree). Click on the little green button beside this message to open the "Progress" tab, and keep an eye on the "Refreshing workspace" item as you continue with the steps below. (If an "indexing" item starts after the "Refreshing the workspace" item has finished, click the little red box beside that item to cancel it, since we want to configure the project before the indexer runs.)</p> + +<h2 id="Initial_project_properties">Initial project properties</h2> + +<p>So that the indexer will run faster and give better results, and so that Eclipse doesn't give results for irrelevant files, you should add some resource filters to have Eclipse ignore certain non-source files and directories. Note, <em>you must <u>not</u> make Eclipse ignore your (main) object directory</em>. That object directory is needed to resolve include paths to the various headers that the build process generates/copies there.</p> + +<p>To create resource filters, open the project properties (different to the workspace preferences!) by selecting <code>Properties</code> from the context menu for the project (root item) in the Project Explorer tab on the left, or by selecting <code>Project > Properties</code> from the menubar. Select "Resource > Resource Filters" on the left of the window that opens, then use the Add button to add the following filters:</p> + +<ul> + <li>Add an "Exclude all" filter for folders with a <strong>Project Relative Path</strong> matching ".hg". (This directory doesn't show in the Project Explorer tab, but Eclipse still indexes it without this filter!)</li> + <li>If you have secondary object directories (object directories that are <strong><u>not</u></strong> your only/the primary object directory) for the source tree and those directories are <strong><u>inside</u></strong> the source tree (or if you might have such object directories in future), then add an "Exclude all", <strong>regular expression</strong> filter for folders with a <strong>Project Relative Path</strong> matching "obj(?!-debug(?:$|/)).+". This particular regular expression will exclude all directories beginning with the string "obj" <strong>except</strong> "obj-debug", so if "obj-debug" is not the name of your main object directory, then adjust the regular expression as necessary.</li> + <li>Add a <strong>recursive, regular expression</strong> "Exclude all" filter for files with <strong>Name</strong> matching "\.(?:rej|orig|o|pp|swp)$" to exclude .rej, .orig, .pp, .o, and .swp files.</li> + <li>Add "Exclude all" filters for any other non-source directories that you've added to your source tree (e.g., Xcode or MSVC project directories).</li> +</ul> + +<p>Click OK to close the filters window, wait for Eclipse to finish processing your resource filters, then make sure the filtered directories and files have disappeared from the Project Explorer tab on the left. Also, if your <strong><u>main</u></strong> object directory is in your source tree, and not somewhere outside it, make sure that it has <u><strong>not</strong></u> disappeared from the Project Explorer tab.</p> + +<p>Reopen the project properties window and select "C/C++ Build" from the left of the project properties window. Select the "Builder Settings" tab, untick "Use default build command", set the build command to "just-print-mozilla-build.py" or, if you're on Mac, to "bash -l -c 'just-print-mozilla-build.py'" (on Mac Eclipse doesn't seem to pick up the environment properly, so it's necessary to invoke just-print-mozilla-build.py indirectly through bash). (just-print-mozilla-build.py is a fast script that we'll download in the next section.) (append '--objdir /path/to/objdir' if your objdir lives outside your tree) Set the build directory to "${ProjDirPath}/path/of/your/objdir/relative/to/the/root/of/your/source". Select the "Behavior" tab, delete the word "all" from the "Build (incremental build)" field, and disable the Clean checkbox.</p> + +<div class="warning"> +<p>If you can't untick "Use default build command", you must change the current builder by clicking on "Tool Chain Editor" (in C/C++ Build) and choosing another builder (e.g., "Gnu Make Builder").</p> +</div> + +<p>If you will not be using Eclipse for debugging, select "C/C++ Build > Settings" on the left, select the "Binary Parsers" tab, and make sure that all the parsers are deselected. This prevents the (useless if not debugging) "Searching for binaries" action from constantly interrupting everything.</p> + +<p>If you will be using Eclipse for debugging, select "C/C++ General > Paths and Symbols" and select the "Output Location" tab. You should now add the folder containing your Firefox binary (note on Mac this is inside the .app - so "{your-obj-dir}/dist/NightlyDebug.app/Contents/MacOS/" - and since the UI will only allow you to select to the 'dist' folder, you'll need to type the end of the path in manually). How you add this depends on whether your object directory is inside or outside your source tree. If inside, use the "Add Folder" button; if outside, use the "Link Folder" button and tick the "Link to folder in the file system" checkbox. Once you've added this folder, delete the existing output folder that was set to the root of the project. Doing this prevents the "Searching for binaries" which Eclipse constantly starts from taking too long.</p> + +<p>Select "C/C++ General > Preprocessor include Paths, Macros, and so on." Select the Providers tab. Make sure that "CDT GCC Build Output Parser" <strong>is</strong> selected, and that "CDT Managed Build Settings Entries" is not selected. Highlight (select) "CDT GCC Build Output Parser", then in the "Language Settings Provider Options" that appear below, make sure that "Share setting entries between projects (global provider)" is not ticked.</p> + +<div class="warning"> +<p><strong>If the main object directory for your source tree is a Fennec build</strong>: In the "CDT GCC Build Output Parser", change the compiler command pattern to</p> + +<pre>(.*gcc)|(.*[gc]\+\+)|(clang)</pre> + +<p>(before this change it should have been "(gcc)|([gc]\+\+)|(clang)"). This pattern is what CDT uses to identify compiler commands when parsing the build output. By default, it recognizes commands of the form "gcc", "g++", "c++", and "clang". This is fine for a desktop build, where the commands are in fact "gcc" and "g++". For Fennec builds, however, most of the commands are something like "arm-linux-androideabi-g++", which will not be recognized by the default regex. The modified regex accepts any command that ends with "gcc" or "g++". <strong>This may also affect other non-desktop builds besides Fennec.</strong></p> +</div> + +<p class="warning"><strong>Especially important</strong> if the main object directory for your source tree is located somewhere <strong><u>outside</u></strong> your tree's top source directory: If this applies to you, then select the Entries tab, select "GNU C++", select "CDT User Settings Entries", and click "Add". Change "Project Path" to "Filesystem", then select the 'dist/include' directory that's in your main object directory and click OK. Repeat these steps, but this time for "GNU C" instead of "GNU C++". (See the {{ anch("Headers are only parsed once") }} section below to understand why this step is important for people who have their object directory outside their source tree.)</p> + +<h2 id="Getting_code_assistance_working">Getting code assistance working</h2> + +<p>You're now ready to get code assistance working. :-)</p> + +<h3 id="Build_option_discovery">Build option discovery</h3> + +<div class="note">This section requires that you have already <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build" title="https://developer.mozilla.org/En/Simple_Firefox_build">built your mozilla source tree</a> (so that you have an object directory for it), and it is strongly recommended that the object directory is up to date so that the just-print-mozilla-build.py script runs quickly.</div> + +<p>As explained in the {{ anch("Code assistance") }} section above, to provide good code assistance Eclipse CDT needs to collect build information for the source files by processing a build log from a full, clean build made using -j1 -w. Since such a non-parallel, full build would take a very long time, we're going to cheat and set Eclipse's "Build" action to run jwatt's just-print-mozilla-build.py script instead. This script will complete in about 30 seconds on a warm tree (files cached in RAM) if your object directory is up to date, although Eclipse will take several minutes to process the "build output" that it produces.</p> + +<p>Download <a class="link-https" href="https://hg.mozilla.org/users/jwatt_jwatt.org/eclipse-cdt-tools/raw-file/tip/just-print-mozilla-build.py" title="https://hg.mozilla.org/users/jwatt_jwatt.org/eclipse-cdt-tools/raw-file/tip/just-print-mozilla-build.py">just-print-mozilla-build.py</a> and change its permissions to make it executable ('chmod a+x just-print-mozilla-build.py').</p> + +<p class="note">If you don't put just-print-mozilla-build.py somewhere in your PATH, then go back to the {{ anch("Initial project properties") }} section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name.</p> + +<p>Now invoke the script by clicking the Build button (the button with the hammer symbol) or by selecting "Project > Build Project" from the main menu. That done, select the "Console" tab at the bottom of the main Eclipse window and you should see the build console output flying by as Eclipse processes it. It should take about 5-10 minutes for Eclipse to finish processing the output.</p> + +<h3 id="Additional_discovery_for_C11_mode">Additional discovery for C++11 mode</h3> + +<p><a href="/en-US/docs/Using_CXX_in_Mozilla_code" title="/en-US/docs/Using_CXX_in_Mozilla_code">As of Mozilla 25</a>, Mozilla is built in C++11 mode. When GCC is invoked in C++11 mode, it defines pre-processor symbols that enable conditional compilation of C++11 code in its standard library. To correctly parse this code, Eclipse CDT needs to know about these symbols. Unfortunately, the build option discovery process outlined above does not pick up this information, so CDT needs to be told separately about C++11 mode. To do this, go to "Preferences -> C/C++ -> Build -> Settings -> [Discovery] tab -> CDT GCC Built-in Compiler Settings" and add the flag "-std=c++11" at the end of the field labeled "Command to get compiler specs".</p> + +<div class="note">In CDT 8.3 (unreleased as of August 2013), there will be a more user-friendly way to specify this (see <a href="http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains" title="http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains">http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains</a>).</div> + +<h3 id="Building_the_index">Building the index</h3> + +<p>Once you see the end of the build output in the Console tab and the Build item has disappeared from the Progress tab, you can start indexing the source. If indexing started automatically (see the Progress tab), cancel it, since there seems to be a bug that makes it give bad results when it starts automatically at this stage. Right-click the project root in the Project Explorer tab and select "Index > Rebuild". You will now see "Indexing..." in the status bar at the bottom right and an Indexing item in the Progress tab. It will take 10 minutes or so on a decent developer machine for a full rebuild of the index.</p> + +<div class="warning">Once the indexer has finished (keep an eye on the Progress tab), sanity check that everything went as it should have by right-clicking the project in the Project Explorer tab and selecting "Index > Search For Unresolved Includes". If you get many more than 2000 unresolved includes (as of May 2012), then things have gone pretty wrong. You should be able to use the list of unresolved includes to help figure out what the problem is (see also the {{ anch("Parser errors") }} section for more troubleshooting tips).</div> + +<p>Assuming everything went as expected, you should now find that Eclipse's code assistance works a whole lot better. :-) To test out the code assistance, see the {{ anch("Code_assistance_2","Code assistance") }} subsection of the {{ anch("Usage tips") }} section below.</p> + +<p>To improve code assistance even more, see the {{ anch("Headers are only parsed once") }} subsection of the {{ anch("Known Issues") }} section.</p> + +<h3 id="Keeping_the_index_up-to-date">Keeping the index up-to-date</h3> + +<p>As the source changes from day-to-day, you'll want to update the index to keep the code assistance working well.</p> + +<p>Since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often. Rerun it (and then rebuild the index) once a week or so, or as necessary when you start to notice unusual code assistance issues that aren't fixed by rebuilding the index alone.</p> + +<p>Rebuilding the index itself is required much more frequently since the source changes more frequently. In principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "C/C++ > Indexer", and reenabling "Automatically update the index". However, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. The alternative is to leave that option disabled and update the index manually as necessary. To update the index manually, use the context menu in the Project Explorer tab on the left side of the window. To rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "Index > Freshen All Files" on that directory. To rebuild the entire index (for example when you pull from mozilla-central) select "Index > Rebuild" on the project root.</p> + +<h2 id="Usage_tips">Usage tips</h2> + +<p>Below are some of the more useful user tips. (If you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) For further documentation see the official <a class="external" href="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.platform.doc.user/gettingStarted/intro/overview.htm" title="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.platform.doc.user/gettingStarted/intro/overview.htm">Eclipse user guide</a> and <a class="external" href="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.cdt.doc.user/getting_started/cdt_o_tutorial.htm" title="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.cdt.doc.user/getting_started/cdt_o_tutorial.htm">Eclipse CDT user guide</a>.</p> + +<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3> + +<p>Regarding key bindings (keyboard shortcuts), the bindings given below are the defaults. You can change the key bindings by opening the workspace preferences (Eclipse > Preferences, or Window > Preferences) and selecting "General > Keys". You can set the scheme to "Emacs" or "Microsoft Visual Studio" if that's your thing, or change individual key bindings. When changing individual key bindings, <u>note that bindings are context sensitive and that any changes you make may be ignored</u> if they conflict with existing bindings, or if they are overridden by a binding for a more specific context. For example, changing the Find Next command to cmd-G/ctrl-G is not sufficient. For that to work you also either need to find the existing bindings for that key combination (using the Bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "When" field to "C/C++ Editor" instead of the more general "Editing Text".</p> + +<h3 id="Opening_files">Opening files</h3> + +<p>You can quickly open a file by name using Cmd-Shift-R/Ctrl-Shift-R. Although Eclipse doesn't do fuzzy matching when you type a file name, it does allow you to use wildcards.</p> + +<p>To quickly switch between a source file and its header file, use Ctrl-Tab.</p> + +<p>To quickly switch to a recently viewed document use Cmd-F6/Ctrl-F6. If you want to change this awkward key binding, the command you need to rebind is "Next Editor".</p> + +<p>To show a filterable list of open documents (similar to the way Emacs gives you a list of open buffers), use Cmd-E/Ctrl-E.</p> + +<p>If you click the yellow, double arrow button at the top of the Project Explorer tab on the left, it will keep the selected file in the Project Explorer tab in sync with the file that you're currently editing.</p> + +<h3 id="Organizing_views">Organizing views</h3> + +<p>Use Ctrl-M to toggle maximization of the current editor view (the editor must be focused first).</p> + +<p>To tab to another view, use Cmd-F7/Ctrl-F7. This is useful if you have maximized the editor using Ctrl-M and you want to quickly see your search results. For example, without un-maximizing the editor.</p> + +<p>To side-by-side edit the same file in two different tabs, select the tab of the file that you want to edit, then from the menu bar select "Window > New Editor". This will open another tab containing the same file. Now simply drag that tab to position it beside, above, or below the original. Changes you make in one editor will be immediately reflected in the other.</p> + +<p>Note that the Search, Call Hierarchy, and other tabs have a "Pin" button that allows you to open multiple tabs of these type. This is useful if you want to keep your existing search results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing Search tab.</p> + +<h3 id="Code_assistance_2">Code assistance</h3> + +<div class="warning">Note: indexing, by its very nature, is specific to a given compiler configuration. Be aware that when Eclipse gives results for any of the actions that follow, it will not include results for sections of the code that are ifdef'ed out by the configuration used to create your object directory. For example, if you are using a Mac and you search for callers of nsDisplayListBuilder::IsInTransform, the results will not include the caller in nsObjectFrame.cpp because that caller is wrapped in "#ifndef XP_MACOSX". Just something to keep in mind. ;-)</div> + +<p>To jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the Ctrl/Cmd key, move the mouse slightly to linkify the symbol, then click on it. (Having to move the mouse slightly is <a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=26873" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=26873">Eclipse bug 26873</a>). Alternately, you can jump to the definition of the symbol under the cursor by pressing F3.</p> + +<p>To do a C++ symbol search select "Search > C/C++" from the menubar, or use Ctrl-H and select the "C/C++" Search tab.</p> + +<p>To quickly find the definition of an enum, class, method, etc. use Ctrl-shift-t/Cmd-shift-t.</p> + +<p>To get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type Ctrl-Space. Unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a character that might be the start of an identifier name.</p> + +<p>To see the callers of a method (and their callers, etc.), select the method and use the context menu to select "Open Call Hierarchy". Note that there are buttons to the right of the "Open Call Hierarchy" tab that open to switch between "Show Callers" and "Show Callees".</p> + +<p>To see the inheritance tree for a class, select its name in an editor window and select "Open Type Hierarchy" from the context menu. Note that you can switch between "Show the Type Hierarchy", "Show the Supertype Hierarchy", and "Show the Subtype Hierarchy" using the buttons to the right of the "Type Hierarchy" tab.</p> + +<p>To see the overrides of a virtual method, select that method's name in an editor window and select "Open Type Hierarchy" or, "Quick Type Hierarchy" from the context menu. The results for "Open Type Hierarchy" will show all classes in the class inheritance tree, and the classes that have methods that override the method will have a triangular red marker beside them. If you select one of these classes, then in the method pane to the right the method you searched for will be highlighted (you may need to scroll to it) - double click to see its definition. The results for "Quick Type Hierarchy" will only show those classes in the inheritance tree that override the method. Double click on a class to go straight to its override's definition.</p> + +<h2 id="Building_from_Eclipse">Building from Eclipse</h2> + +<div class="warning">In short, don't do this. Eclipse doesn't have good facilities for building incrementally in individual directories in the way that Mozilla developers generally require. More importantly, unless you're willing to screw up Eclipse's code assistance (in which case why bother using Eclipse) you're going to have to set Eclipse's "Build" step to do a very slow, non-parallel, full rebuild. (See the "Code assistance" section above for why.)</div> + +<p>Nevertheless, if you understand the above warning and you still want to configure Eclipse's "Build" button to invoke a real build, then read on.</p> + +<p>Basically, you want to do something similar to the steps in the {{ anch("Initial project properties") }} section above, but use "make -j1 -wB" (or just "make" if you don't care about keeping code assistance working) instead of using just-print-mozilla-build.py.</p> + +<p>If you want to invoke "make -f client.mk" from your source directory instead of invoking 'make' from your object directory, then in the "C/C++ Build" section of the project properties, set "Build command" to "make -f client.mk" and set "Build directory" to just "${ProjDirPath}" (this is the top of the source tree). Select the Behavior tab and remove the "all" from the "Build (Incremental build)" field. Select "C/C++ Build > Build Variables", and add a variable "MOZCONFIG", and set it to the path of your .mozconfig file relative to the top source directory. Set any other environment variables you want to set for the build, then close the project properties window.</p> + +<p>Now when you hit the Build button (the little hammer icon), you should see the source build in the Console tab at the bottom of the window.</p> + +<p>The benefit of building from inside Eclipse is that build errors will appear in the Problems tab at the bottom of the window, and from there you can double click on the build error and it will take you straight to the source file and line where the problem occurred. For this to work reliably though, you still need to build using slow -j1 -w builds, so that make outputs non-interleaved "Entering"/"Leaving" lines. It also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore:</p> + +<pre>export CFLAGS="-fmessage-length=0" +export CPPFLAGS="-fmessage-length=0" +</pre> + +<h2 id="Debugging">Debugging</h2> + +<p class="eval">To create a debug configuration, open the project properties window, and select "Run/Debug Settings" on the left. Click "New", then select "C/C++ Application". In the window that opens enter the path to your firefox binary (something like {your-obj-dir}/dist/NightlyDebug.app/Contents/MacOS/firefox) and select "Disable auto build". Select the Arguments tab and enter any args you want to pass to firefox (such as "--no-remote -p my-testing-profile"). If you're on Linux, you may also need to set the "Working directory" to {your-obj-dir}/dist/bin, and then select the Environment tab and set LD_LIBRARY_PATH to ".:./plugins:." and LIBRARY_PATH to ".:./components:.". (Are these variables really necessary? If so, why? Isn't LIBRARY_PATH for compile time, not runtime, linking?)</p> + +<p>In the workspace preferences, you may want to go to "C/C++ > Debug > GDB" and deselect "Stop on startup at", so that Eclipse won't automatically break in main() when it launches Firefox for debugging.</p> + +<p>To debug, click the Debug button on the toolbar, or select "Run > Debug" from the menu bar.</p> + +<p>It's not obvious, but <a class="external" href="http://wiki.eclipse.org/CDT/User/FAQ#Since_the_debugger_is_gdb.2C_can_I_simply_access_the_gdb_command_line_interface_.28CLI.29.3F" title="http://wiki.eclipse.org/CDT/User/FAQ#Since_the_debugger_is_gdb.2C_can_I_simply_access_the_gdb_command_line_interface_.28CLI.29.3F">you can get a gdb prompt in the console</a> so that you can type gdb commands directly.</p> + +<p>After you've finished debugging, you can get back to the C/C++ perspective (i.e. window layout) via the menubar by selecting "Window > Open Perspective > C/C++".</p> + +<h3 id="Upgrading_GDB_on_Mac">Upgrading GDB on Mac</h3> + +<p>The ancient, barely maintained Apple fork of GDB that comes with Xcode on Mac is really horrible. If you use Mac, you may want to <a class="external" href="http://sourceware.org/gdb/wiki/BuildingOnDarwin" title="http://sourceware.org/gdb/wiki/BuildingOnDarwin">build the latest FSF version of GDB</a> and set Eclipse to use that GDB for debugging. One suggested configuration for building GDB is '--prefix="$HOME" --disable-debug --with-python=/usr' (create an optimized build with <a class="external" href="http://sourceware.org/gdb/wiki/PythonGdbTutorial" title="http://sourceware.org/gdb/wiki/PythonGdbTutorial">support for Python</a> (so that you can use python to much better control when you break etc.), and install it in $HOME/bin). That done, open the workspace preferences, select "C/C++ > Debug > GDB", and set "GDB Debugger" to the full path of your new gdb executable.</p> + +<h3 id="GDB_unexpectedly_detaching">GDB unexpectedly detaching</h3> + +<p>If GDB starts ignoring your breakpoints, or unexpectedly terminates or detaches from the Firefox process, this may be caused by out of date breakpoints (breakpoints that you set during a previous debug session, after which you've since rebuilt). Remove any such breakpoints and restart your debug session.</p> + +<h2 id="Known_Issues">Known Issues</h2> + +<p>There are various known limitations and bugs when it comes to using Eclipse with Mozilla. Eclipse is open source, of course so if anyone feels like doing a bit of Java hacking to fix these issues that'd be great. </p> + +<h3 id="Headers_are_only_parsed_once">Headers are only parsed once</h3> + +<p>For performance reasons, Eclipse only processes header files that have include guards once, using the compiler options for the first source file it encounters that includes that header (<a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=380511" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=380511">Eclipse bug 380511</a>). This is responsible for most of the parse errors in the source files displayed in Eclipse. One problem with the "parse once" strategy is that the compiler options for the original source file may ifdef out sections of the header, that would not be ifdef'ed out - and in fact are required by - source files in other parts of the tree.</p> + +<p>For example, in content/svg/content/src/nsSVGEllipseElement.cpp Eclipse shows a parse error due to NS_DOM_INTERFACE_MAP_ENTRY_CLASSINFO not being defined. This define is in nsDOMClassInfoID.h, which is included via the following include chain:</p> + +<pre>content/svg/content/src/nsSVGEllipseElement.cpp + content/svg/content/src/nsSVGPathGeometryElement.h + content/svg/content/src/nsSVGGraphicElement.h + content/svg/content/src/nsSVGStylableElement.h + content/svg/content/src/nsSVGElement.h + content/base/src/nsGenericElement.h + obj-debug/dist/include/nsDOMClassInfoID.h +</pre> + +<p>In nsDOMClassInfoID.h the NS_DOM_INTERFACE_MAP_ENTRY_CLASSINFO define is behind an |ifdef _IMPL_NS_LAYOUT|. The properties for nsSVGEllipseElement.cpp show that this define was picked up by the build option discovery and set on nsSVGEllipseElement.cpp, but somehow it's not set for nsDOMClassInfoID.h. However, if you right click on nsDOMClassInfoID.h in the Project Explorer and select "Index > Create Parser Log File", the log shows "Context" is set to "accessible/src/base/AccEvent.cpp", not "content/svg/content/src/nsSVGEllipseElement.cpp", and if you check the properties for AccEvent.cpp, indeed it is not built with the _IMPL_NS_LAYOUT define.</p> + +<p>One way to mitigate this problem is to explicitly define defines on problem directories. For example, to solve the _IMPL_NS_LAYOUT issue described above, you would use the context menu for the 'layout' directory in the Project Explorer tab to open the directory's properties. You'd select "C/C++ General > Prepocessor Include Paths, Macros etc.", and select "GNU C++" and "CDT User Settings Entries". You'd then click "Add", select "Preprocessor Macro" from the drop-down, and set Name to _IMPL_NS_LAYOUT and leave Value blank. Finally, you'd click OK twice to return to the main Eclipse window, and then use the context menu for the 'layout' directory to re-index the 'layout' directory, and then to "Run C/C++ Code Analysis" on it to see if the problem is fixed.</p> + +<p>This "parse once" strategy can also cause "Unresolved inclusion" errors in headers if the first time Eclipse sees the header is while indexing a file for which it doesn't have any build output parser data. (Since it then has no explicit include paths to search.) When this happens it frequently causes knock-on errors for the files that include that header (directly or indirectly), since they too now have things missing. People who have their object directory <u>out</u>side their source directory need to take special note of this issue. When the object directory is <u>in</u>side the source directory (and not filtered out by a resource filter), then Eclipse's "Allow heuristic resolution of includes" option (enabled by default) will generally allow the included headers to be found when Eclipse processes source files, that don't have any build output parser data. However, when the object directory is <u>out</u>side the source directory, Eclipse doesn't know about it - or the headers it contains - unless the user takes extra steps to tell it. This is the reason that the instructions in the {{ anch("Initial project properties") }} section above instruct users that have their object directory outside their source directory to explicitly add {objdir}/dist/include to the project's "CDT User Setting Entries".</p> + +<p>Fixing <a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601">Eclipse bug 381601</a> would considerably reduce the impact of the "Unresolved inclusion" issue. (Update 2017-03-28: The option <a href="http://wiki.eclipse.org/CDT/User/NewIn83#Preferences_for_header_variants">Index all header variants</a> has been added in version 8.3.0, as explained in a <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601#c17">comment</a> of the mentioned bug. This option allows to have multiple definitions for the same header file, which might fix this issue. Update 2017-11-04 by jwatt: Ticking the "Index all header variants" option caused Eclipse to blow through the 12 GB of RAM I'd given it while indexing before it ran out of memory and crashed.)</p> + +<h3 id="There_are_parser_errors">There are parser errors</h3> + +<p>It is expected that Eclipse will show parser errors even for a known-good copy of the Mozilla source. Parser errors/warnings are indicated by red/yellow markers on files in the Project Explorer tab, and in the gutter down the right-hand side of open source files. In the case of the latter you can click on the marker to jump to the problem line and then hover over the "bug" icon to get an explanation of what's wrong.</p> + +<p>The parser error indicators don't seem to show (reliably?) until you open a source file, then error markers will be added for that file. To force all markers to show for a directory in the Project Explorer tab, right-click that directory in the Project Explorer tab and select "Run C/C++ Code Analysis". As well as adding the markers, this will give you a list of the issues in the Problems tab at the bottom of the window where you can double-click to jump to the location of any given issue.</p> + +<p>Many of the parser errors are the result of the {{ anch("Headers are only parsed once") }} issue, while others are the result of Eclipse trying to do its best to process files that are not built under your configuration (e.g. files compiled only on other platforms) and that therefore have no build output parser data associated with them.</p> + +<p>If you are trying to dig into a particular parser errors to figure out what it's about, here are a few things you can try:</p> + +<ol> + <li>Select your project in the Project Explorer, then from the context menu select "Index > Search for Unresolved Includes".</li> + <li>For problematic source files, select the file in the Project Explorer and from the context menu select "Index > Create Parser Log File".</li> + <li>Select your project in the Project Explorer, then from the context menu select "Index > Rebuild". When the indexing is done, open the log using "Window > Show View > Other > General > Error Log" and check the summary and look for exceptions.</li> +</ol> + +<h3 id="Searching">Searching</h3> + +<p>Free text search is not backed by a database, so it is <em>extremely</em> slow. Furthermore, the results are not saved so if you immediately search for the exact same text again without any changes to the source files having occurred, Eclipse will do a slow search all over again.</p> + +<p>It is not easy to restrict searches to an arbitrary directory, which is pretty annoying given how slow free text search is. (You have to create a new working set containing that directory.)</p> + +<p>Search history in a project is not preserved across restarts.</p> + +<p>Duplicate searches in history - even consecutive ones - are not coalesced.</p> + +<h3 id="Duplicate_files">Duplicate files</h3> + +<p>Sometimes when searching for files or symbols you will be given the option between a file in the source tree, and a file of the same name under the object directory. (Some source and header files are copied to the object directory by the build process, so we end up with copies in both places.) This will happen if your object directory is inside the source directory. If you don't want to switch to using an object directory that's outside your source tree, then this is just one of those things that you'll have to live with. (If you do change the location of your object directory, then note the instructions that will then apply to you in the {{ anch("Initial project properties") }} section above!) Since the indexer needs to be able to resolve header files in the object directory in order to produce good results, we can't have Eclipse ignore the object directory. But then there's no way to tell Eclipse that any given file in the object directory is actually just a copy of a given file in the source directory and that it should always show the user the copy in the source directory while using the file in the object directory for indexing.</p> + +<h3 id="Building">Building</h3> + +<p>Eclipse's support for building only in certain directories is non-existent. It would be great if the Console tab gave you a shell prompt so that you could invoke commands to build directly from there.</p> + +<p>Failing that, it would be nice if Eclipse could at least pass information about what files have changed to the build process, which could then decide on a faster way to do the build (e.g., "just make in layout/"). I (roc) have actually written a small change to the CDT Make builder that lets you specify that as an option, in which case Eclipse sends the names of all changed files to your build tool. The build tool is a Perl script that figures out if a faster build is possible and if so, does it.</p> + +<h2 id="FAQ">FAQ</h2> + +<p>Here are some frequently asked questions.</p> + +<h3 id="Why_does_Eclipse_need_an_object_directory">Why does Eclipse need an object directory?</h3> + +<p>To provide good code assistance Eclipse needs you to have a build directory for two reasons.</p> + +<p>First, Eclipse needs to be able to collect a usable set of defines, include paths, and preinclude files for the source files in the tree, as explained in the {{ anch("Code assistance") }} section above.</p> + +<p>Second, Eclipse CDT's indexer needs an object directory because virtually all Mozilla source files include header files (directly or indirectly) that have been copied to or generated in the object directory. Without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly degrade its ability to index the source and provide good code assistance.</p> + +<h3 id="How_can_I_open_Eclipse_for_multiple_trees_at_once">How can I open Eclipse for multiple trees at once?</h3> + +<p>To be able to open more than one workspace at a time, you currently need to launch a <em>separate</em> Eclipse process for each workspace.</p> + +<p>On Mac, create a script called something like open-my-workspace.py, give it the following contents, replacing the bold paths as appropriate, and make it executable (chmod a+x open-my-workspace.py):</p> + +<pre>#!/usr/bin/env python +import os, subprocess +eclipse_app_path = <strong>"path/to/Eclipse.app/Contents/MacOS/eclipse"</strong> +workspace_path = <strong>os.path.join(os.environ['HOME'], "HOME/relative/path/to/the/directory/of/the/workspace/you/want/to/open")</strong> +subprocess.Popen([eclipse_app_path, "-data", workspace_path]) +# <strong>Uncomment the following line to automatically close the Terminal window</strong> +# <strong>that opens if you run this script by double clicking it in Finder.</strong> +#subprocess.Popen(["osascript", "-e", 'tell application "Terminal"', "-e", "close front window", "-e", "end tell"]) +</pre> + +<p>TODO: add instructions for Linux and Windows.</p> + +<h3 id="Is_there_a_Mercurial_plugin_for_Eclipse">Is there a Mercurial plugin for Eclipse?</h3> + +<p>There is <a class="external" href="http://www.intland.com/products/mercurialeclipse/download" title="http://www.intland.com/products/mercurialeclipse/download">MercurialEclipse</a>, but probably most Mozilla developers will just prefer to use the command line. If you think we need our own documentation on MercurialEclipse, please consider adding a separate page for that tool since this page is already pretty long.</p> + +<h3 id="How_can_I_delete_my_Eclipse_project_and_start_over">How can I delete my Eclipse project and start over?</h3> + +<p>If you followed the recommendation above to create one workspace containing only one project for each Mozilla tree, then this is easy. (If you didn't, and you have projects for more than one source tree entangled in a workspace directory, well, you're on your own.) Simply delete the <code>.project</code> and <code>.cproject</code> files and the <code>.settings</code> directory (if it exists) from the root of your Mozilla tree, and then delete the workspace directory corresponding to your tree. That's it; you can now create a new Eclipse workspace and project for your tree from scratch.</p> + +<h3 id="Isnt_there_a_better_method_of_build_option_discovery">Isn't there a better method of build option discovery?</h3> + +<p>Yes, but Eclipse doesn't currently support it. Instead of processing build console output, Eclipse could use something like LD_PRELOAD to load its own little library into all the processes that are invoked as part of the build process. This library could then check whether the process is a compiler instance and, if so, use the processes' current working directory and the arguments that were passed to it to reliably obtain the information it needs for each source file that is compiled. This would eliminate the requirement for non-parallelized, non-silenced builds. You could also build from Eclipse and get the benefits that that brings.</p> + +<h3 id="How_can_I_run_a_more_recent_CDT_version">How can I run a more recent CDT version?</h3> + +<p>This can be useful if you need to get certain bug fixes, or to help with testing to make sure that new Eclipse bugs that affect its use with Mozilla don't get shipped. If you've downloaded an <a class="external" href="http://www.eclipse.org/downloads/index-developer.php" title="http://www.eclipse.org/downloads/index-developer.php">Eclipse Developer build</a> then you can use Eclipse's software update mechanism to update your developer snapshot to the latest nightly for that developer branch. To do that, carry out the following steps.</p> + +<p>From Eclipse's "Help" menu select "Install New Software...", then in the "Install" window that opens, click "Available Software Sites". In the window that opens, click "Add", and in the prompt set Name to something like "Nightly" and Location to something like "<a class="external" href="http://download.eclipse.org/tools/cdt/builds/juno/nightly" rel="freelink">http://download.eclipse.org/tools/cd...s/juno/nightly</a>" (change "juno" to the current developer branch). Click "OK", then "OK" again. Type "Nightly" into the "Work with" field and select the repository that you just added. (If it doesn't appear, close the window, reopen it from the Help menu, and try again.) A "CDT Main Features" option should now have been added in the area below. Tick this (<em>all</em> of its sub-options should then be ticked), click "Next" twice, accept the license agreement, and then click "Finish". Eclipse should now update itself and ask you to restart.</p> + +<p><strong>Troubleshooting:</strong> If you get an error when trying to update, try clicking "Available Software Sites" in the "Install" window, make sure "Juno" is still unticked, that "Nightly" is ticked, highlight "Nightly", click "Reload", "OK", and then try again.</p> + +<h2 id="Troubleshooting">Troubleshooting</h2> + +<p>Here is a list of problems people have encountered, and suggestions for solutions.</p> + +<h3 id="Problem_Occurred_Java_heap_space">Problem Occurred (Java heap space)</h3> + +<p>If Eclipse becomes glacially slow or hangs and then you get this error message, see the {{ anch("Increasing memory limits") }} section above. If you already carried out the instructions in that section, then double check that your changes to Eclipse's memory limits actually took effect and are present in <code>Eclipse/Help > About Eclipse > Installation Details > Configuration</code>. If they did, then maybe you need to increase the limits still further for your OS/JVM combination.</p> + +<h3 id="Resource_is_out_of_sync_with_the_file_system">Resource is out of sync with the file system</h3> + +<p>If you get the message "Resource is out of sync with the file system", then you didn't set the "Refresh" options above in the {{ anch("Initial workspace preferences") }} section. Either set those, or else refresh the project (or an individual directory/file) manually using the Refresh item from the context menu in the Project Explorer tab.</p> + +<h2 id="Old">Old</h2> + +<p>Everything that follows is old content that should maybe just be deleted now?</p> + +<h3 id="GDB_Timeouts">GDB Timeouts</h3> + +<p>I don't think this old comment from 2007/2008 is an issue anymore.</p> + +<p>Out of the box, you may/will get GDB connection timeouts. This is because Eclipse is trying to push every subfolder in GDB's environment. The easiest way to resolve this issue is to remove any source entry from the debug configuration (Run->Open Debug Dialog...) in the Source tab. Doing so will, unfortunately, remove the binding between the binaries and the source code. To keep this feature working, you need to add a "Path Mapping" by clicking "Add..." in the Source tab. Once a "Path Mapping" is created, select "Edit..." and add an entry with these values</p> + +<pre class="eval"> Compilation path: / + Local file system path: / +</pre> + +<p>This is the only known workaround to bind binaries to source files. It has been tested and works perfectly under Eclipse Europa (3.3.2) with Eclipse-CDT (4.0.3).</p> diff --git a/files/ko/mozilla/developer_guide/eclipse/index.html b/files/ko/mozilla/developer_guide/eclipse/index.html new file mode 100644 index 0000000000..5a1b2aae8a --- /dev/null +++ b/files/ko/mozilla/developer_guide/eclipse/index.html @@ -0,0 +1,10 @@ +--- +title: Eclipse +slug: Mozilla/Developer_guide/Eclipse +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide/Eclipse +--- +<p>There are versions of eclipse for several of the different languages that are used by Mozilla.</p> +<p>For documentation on using Eclipse CDT for Mozilla C/C++ development, see the <a href="/en/Eclipse_CDT" title="en/Eclipse_CDT">Eclipse CDT</a> page.</p> diff --git a/files/ko/mozilla/developer_guide/index.html b/files/ko/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..e497c4143a --- /dev/null +++ b/files/ko/mozilla/developer_guide/index.html @@ -0,0 +1,92 @@ +--- +title: 개발자 가이드 +slug: Mozilla/Developer_guide +tags: + - Developing Mozilla + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Developer_guide +--- +<p>당신이 숙련가이든 방금 시작했든, 이 페이지에 있는 글들은 당신이 모질라 개발을 할 수 있게끔 도와줄 것입니다.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> + + <dl> + <dt><a href="/en-US/docs/Introduction" title="Introduction">시작하기</a></dt> + <dd>A step-by-step beginner's guide to getting involved with Mozilla.</dd> + </dl> + + <dl> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt> + <dd>A code overview, how to get the code, and the coding style guide.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt> + <dd>How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt> + <dd>An overview of the entire Mozilla development process.</dd> + <dt><a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt> + <dd>When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt> + <dd>How to run Mozilla's automated tests, and how to write new tests.</dd> + <dt><a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt> + <dd>After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt> + <dd>How to ensure that documentation is kept up to date as you develop.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt> + <dd>This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd> + <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt> + <dd>Useful code samples for a wide variety of things you might need to figure out how to do.</dd> + <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt> + <dd>Tips for how to make the most of your time working on the Mozilla project.</dd> + <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt> + <dd>Find helpful tips and guides for debugging Mozilla code.</dd> + <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt> + <dd>Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd> + <dt><a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt> + <dd>Information about the workings of the Mozilla platform.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt> + <dd>How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt> + <dd>Guidelines for modifying scriptable and binary APIs in Mozilla.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt> + <dd>Information about creating customized versions of Firefox.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt> + <dd>How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd> + <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt> + <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd> + </dl> + </td> + <td> + <h2 class="Tools" id="Tools">Tools</h2> + + <dl> + <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd> + <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd>Browse and search the Mozilla source code repository on the Web.</dd> + <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd>The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd> + <dt><a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt> + <dd>The distributed version-control system used to manage Mozilla's source code.</dd> + <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd><a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully). Check this before checking in and out, to be sure you're working with a working tree.</dd> + <dt><a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt> + <dd>Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd> + <dt><a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt> + <dd>See performance information for Mozilla projects.</dd> + <dt><a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt> + <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd> + <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd>A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd> + <dt><a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt> + <dd>Brian Bondy's list of frequently referenced information for platform developers.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html b/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html new file mode 100644 index 0000000000..f4f6e3ee52 --- /dev/null +++ b/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html @@ -0,0 +1,415 @@ +--- +title: Mozilla Build FAQ +slug: Mozilla/Developer_guide/Mozilla_Build_FAQ +tags: + - Build documentation +translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ +--- +<p>See also:</p> +<ul> + <li><a class="external" href="http://www.mozilla.org/build/win32-debugging-faq.html">Win32 Debugging FAQ</a>: Tips on how to debug Mozilla on Windows</li> +</ul> +<h3 id="General_questions" name="General_questions">General questions</h3> +<p> </p> +<p> </p> +<dl> + <dt id="platform"> + Which systems are supported Mozilla build platforms?</dt> + <dd> + There are multiple levels or tiers of Mozilla build "support". + <p>Tier-1 platform refers to platforms that are the primary focus for development. Major problems on these platforms are considered showstoppers. These are also the platforms that show up on the <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">SeaMonkey tinderbox page</a>. The tier-1 platforms are:</p> + <ul> + <li>linux/x86 (gcc)</li> + <li>win32/x86 (msvc)</li> + <li>OS X (gcc)</li> + </ul> + <p>Tier-2 platforms are platforms for which a small varying subset of developers & contributors actively try to maintain but general development does not halt for problems on these platforms. These platforms are usually referred as the Ports as most of them reside on the <a class="external" href="http://tinderbox.mozilla.org/SeaMonkey-Ports/">SeaMonkey-Ports tinderbox page</a>. The tier-2 platforms are:</p> + <ul> + <li>aix 4.3 (aCC)</li> + <li>beos 5.0.3 (gcc)</li> + <li>bsdi 4.x (gcc)</li> + <li>hpux 10.x,11.x (HP cc)</li> + <li>irix 6.x/gcc (gcc/MIPSpro)</li> + <li>linux/ppc (gcc)</li> + <li>os/2 (gcc)</li> + <li>osf1 5.x (Compaq cc)</li> + <li>solaris (sparc & x86) 2.6+ (gcc/Forte)</li> + </ul> + <p>Tier-3 platforms are those platforms which generally are not actively worked on by the main developers of the project but have fixes contributed by third parties. Tier 3 platforms are:</p> + <ul> + <li>freebsd (gcc)</li> + <li>linux/alpha (gcc)</li> + <li>netbsd (gcc)</li> + <li>openvms (?)</li> + <li>ps2linux (gcc)</li> + <li>qnx 6 (gcc)</li> + <li>win32/x86 (gcc)</li> + </ul> + <p>All other platforms are "unsupported" by the primary mozilla developers, where "unsupported" really means "not a priority and no one is actively working on it".</p> + <p>Most Mozilla developers do not have access to non-tier-1 platforms so any bugs reports against non-tier-1 platforms should be overflowing with information to help the owner of the bug determine the cause of the problem and the proper solution. If you can provide a patch and/or verify that the developer's patches work for your platform, that would help a lot towards getting your bugs fixed and checked into the tree.</p> + <p> </p> + </dd> + <dt> + What type of build system does Mozilla use?</dt> + <dd> + Mozilla uses a thin GNU configure layer on top of a legacy Netscape recursive makefile build system on all platforms. Like most configure-based projects, it uses GNU autoconf to generate the configure script. GNU make is used to drive the build process. + <p> </p> + </dd> + <dt> + Why use GNU make?</dt> + <dd> + GNU make has been ported to a lot of systems. This makes porting Mozilla to those systems a bit easier. Using only the subset of make features that are supported by the native make program on 10 different platforms would make the build system unnecessarily complicated. + <p> </p> + </dd> + <dt> + Will any other version of make work?</dt> + <dd> + No. The Mozilla makefiles use GNU make specific features which will only work with gnu make. + <p> </p> + </dd> + <dt> + Why aren't you using automake?</dt> + <dd> + Part of Netscape's legacy system involved using GNU make's -include feature to include a common set of rules from a handful of files in every Makefile that needed to use them. With this centralized rule system, one of the primary selling points of automake was made inconsequential. Also, at the time, Mozilla's method of building libraries did not mesh well with libtool. + <p> </p> + </dd> + <dt> + What happened to the nmake and CodeWarrior build systems?</dt> + <dd> + They no longer exist in the current tree. nmake build support was dropped during the Mozilla 1.2a release cycle. The mac cfm build system was dropped along with OS9 support shortly after the Mozilla 1.3 release. + <p> </p> + </dd> + <dt> + Why not ant, tmake, scons or + <i> + insert your favorite build system here</i> + ?</dt> + <dd> + Mainly, because no one has implemented these systems for Mozilla. When Mozilla was first open sourced, it only contained the legacy Netscape system. The autoconf layer was added on a branch and maintained in parallel for 6 months before it became the standard build system for the unix build. + <p> </p> + </dd> + <dt> + If I wanted to implement my favorite build system for Mozilla, would Mozilla start using it? I don't want to waste my time if you aren't going to use it.</dt> + <dd> + There's no guarantee that any code written for Mozilla will be accepted into the default tree. Any build system that is implemented would have to show that it's better overall than the current build system. Speed, flexibility, portability and the ability for a large group of developers who have 3+ years experience with the current build system to easily transition to the new system would be the major factors in deciding to switch. If you are serious and willing to do lots of work, contact <a>User:Benjamin Smedberg</a> to discuss the details of your proposal. + <p> </p> + </dd> + <dt> + Why doesn't Mozilla support autoconf 2.5x?</dt> + <dd> + Simply put, autoconf 2.5x does not offer anything to make the upgrade worth the effort. Autoconf 2.5x is not backwards compatible with autoconf 2.13 and the additional restrictions made by the newer versions of autoconf would require a major rewrite of the Mozilla build system for questionable gain. + <p>Some of the 2.13 features, such as the ability to pass additional arguments to sub-configures, are not available in 2.5x. People have asked repeated about those features on the autoconf mailing list without any favorable response. Rewriting the configures of the sub-projects of Mozilla (NSPR & LDAP) is not an acceptible tradeoff. The sub-projects are also standalone projects and forking an entire codebase because of a build system incompatiblity is silly.</p> + <p> </p> + </dd> + <dt> + Why doesn't NSS use autoconf?</dt> + <dd> + The NSS project is also used outside of the Mozilla project and the NSS project members did not feel that moving to autoconf was worth the cost. See {{ Bug(52990) }} for details. + <p> </p> + </dd> + <dt> + Can I build multiple Mozilla-based projects from a single source tree?</dt> + <dd> + Yes! Each project must be built in its own objdir. + <p> </p> + </dd> + <dt> + What is an objdir?</dt> + <dd> + An objdir build refers to the process of creating the output files in a different place than where the source lives. This is a standard feature of most configure-based projects. It allows you build for multiple configurations, including multiple platforms if you use a network filesystem, from a single source tree. It also avoid tainting your source tree so that you know that the files in your tree have not been modified by the build process. + <p>If you run configure by hand, you can use the standard method of creating an empty directory any place on the disk, changing to that directory and running /path/to/mozilla/configure from there.</p> + <pre class="eval">mkdir obj-debug +cd obj-debug +../mozilla/configure +</pre> + <p>If you use client.mk to build, you can add the following to your mozconfig file:</p> + <pre class="eval">mk_add_options MOZ_OBJDIR=/path/to/objdir +</pre> + <p> </p> + </dd> + <dt> + Can I cross-compile Mozilla?</dt> + <dd> + Yes, see the <a class="external" href="http://www.mozilla.org/build/cross-compiling.html">Cross-Compiling Mozilla</a> document for details. No, <a class="external" href="http://www.vmlinux.org/joachim/mirror/www.objsw.com/CrossGCC/FAQ-4.html#ss4.9">Canadian Cross-Compiling</a> is not supported. + <p> </p> + </dd> + <dt> + Do parallel (make -j) builds work for Mozilla?</dt> + <dd> + Yes. See the <a class="external" href="http://www.gnu.org/software/make/manual/html_node/Parallel.html">GNU Make Parallel Execution</a> manual entry for optimal usage. + <p>If you get obscure build errors when using parallel building (especially when using -j instead of -jN to run as many tasks in parallel as possible), try reducing the number of parallel tasks by decreasing N (or, if you used unlimited parallelism, add a small number N to -j).</p> + <p>Parallel building with -j4 and -j8 seems to work well.</p> + <p> </p> + </dd> + <dt> + How do I force the build system to pick up any of the changes made to my mozconfig file?</dt> + <dd> + Touch any of the configure scripts in the tree. There is no explicit dependency upon the mozconfig file as the file can reside anywhere via the MOZCONFIG environment variable. + <p> </p> + </dd> + <dt> + error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, <STDIN> line 9.</dt> + <dd> + You are trying to build Firefox without following the instructions on <a href="ko/Configuring_Build_Options">Configuring Build Options</a>. In particular, your mozconfig file <b>must</b> source the Firefox default mozconfig file: + <pre class="eval">. $topsrcdir/browser/config/mozconfig +# add your custom additional options here +</pre> + <p> </p> + </dd> + <dt> + Initial cvs checkout fails with the message: <tt>cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing</tt></dt> + <dd> + You cannot create a cvs tree under a directory named "CVS". This is a feature/bug of cvs. cvs expects to find certain administration files under the CVS directory and will complain if they are missing. + <p> </p> + </dd> + <dt> + Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern</dt> + <dd> + You need make 3.80 and no other version like 3.81 + <p> </p> + </dd> +</dl> +<h3 id="Mac-specific_questions" name="Mac-specific_questions">Mac-specific questions</h3> +<p> </p> +<dl> + <dt> + Can I build a Mozilla application as a Universal Binary?</dt> + <dd> + Yes. See <a href="ko/Mac_OS_X_Universal_Binaries">Mac OS X Universal Binaries</a> for instructions. + <p> </p> + </dd> + <dt> + Does Mozilla build on UFS?</dt> + <dd> + Yes, since {{ Bug(157036) }} has been fixed. + <p> </p> + </dd> + <dt> + Does Mozilla run on UFS?</dt> + <dd> + Yes. + <p> </p> + </dd> + <dt> + Can I use CodeWarrior to compile the Mach-O build?</dt> + <dd> + No, CodeWarrior is dead. See {{ Bug(119589) }} for details. + <p> </p> + </dd> + <dt> + After rebuilding e.g. layout, how do I make my FirefoxDebug.app reflect that change?</dt> + <dd> + make -C browser/app.</dd> +</dl> +<p>For common Mac build errors and additional troubleshooting tips, see <a href="ko/Mac_OS_X_Build_Prerequisites#Troubleshooting">Troubleshooting</a> in <a href="ko/Mac_OS_X_Build_Prerequisites">Mac OS X Build Prerequisites</a>.</p> +<h3 id="Win32-specific_questions" name="Win32-specific_questions">Win32-specific questions</h3> +<p> </p> +<p> </p> +<dl> + <dt> + Is there a Microsoft Visual Studio project file to build Mozilla?</dt> + <dd> + No. You must use cygwin and GNU make. + <p> </p> + </dd> + <dt> + Can I run the build commands from cmd.exe?</dt> + <dd> + Yes. Make invokes the cygwin /bin/sh subshell to execute commands so it does not matter what shell is used to initially invoke make. + <p> </p> + </dd> + <dt> + Which version of cygwin's autoconf package do I need to use?</dt> + <dd> + Because of the incompatibilities between autoconf 2.1x and 2.5x, the cygwin maintainers wrote a wrapper script which will determine which version of autoconf your configure script needs and invoke that version of autoconf. You will need the autoconf(-wrapper) & autoconf-stable packages. See <a class="external" href="http://cygwin.com/ml/cygwin-announce/2001/msg00177.html" rel="freelink">http://cygwin.com/ml/cygwin-announce.../msg00177.html</a> for details. + <p> </p> + </dd> + <dt> + Microsoft tools (CL, LINK, RC) gives + <i> + file not found</i> + errors</dt> + <dd> + The INCLUDE and LIB environment variables are used by the Microsoft Visual C++ tools. They are ordinarily set up in vcvars32.bat. Depending on which modules you build, you may or may not need MFC and ATL. Below are paths that work if Visual C++ is installed at "C:\msvs": + <pre class="eval">set INCLUDE=C:\msvs\VC98\Include;C:\msvs\VC98\MFC\Include;C:\msvs\VC98\ATL\Include +set LIB=C:\msvs\VC98\Lib;C:\msvs\VC98\MFC\Lib +</pre> + <p> </p> + </dd> + <dt> + cvs fails with the message:</dt> + <dd> + <pre class="eval">cvs update: authorization failed: server XXXX rejected access +cvs update: used empty password; try "cvs login" with a real password +</pre> + <p>You are mixing wincvs and cygwin cvs. Use only one or the other.</p> + <p> </p> + </dd> + <dt> + cvs fails with the message:</dt> + <dd> + <pre class="eval">cvs [checkout aborted]: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied +</pre> + <p>As of cygwin 1.3.13, ntsec is enabled by default. ntsec is cygwin's attempt to get a more UNIX like permission structure based upon the security features of Windows NT. The error message indicates that there's a mapping discrepancy between the unix permissions listed in cygwin's /etc/passwd file and those used by Windows NT. As a workaround, you can add "nontsec" to your CYGWIN environment variable. The proper fix would be to fix the mapping problem.</p> + <p> </p> + </dd> + <dt> + Make spits out an error about not being able to find a .dtd file</dt> + <dd> + You probably used WinZip to unpack the source archive. Don't do that. WinZip, by default, doesn't unpack 0 length files from tar.gz archives. Use another utility, or use the pull script to checkout the files that WinZip didn't extract. + <p> </p> + </dd> + <dt> + nsinstall or another native win32 program complains about a file not being found</dt> + <dd> + Check your cygwin mount table. Running the mount command should return something similar to: + <pre class="eval">c: on /cygdrive/c type user (binmode,noumount) +e: on /cygdrive/e type user (binmode,noumount) +c:\cygwin on / type system (textmode) +c:\cygwin\bin on /usr/bin type system (textmode) +c:\cygwin\lib on /usr/lib type system (textmode) +</pre> + <p>The build system expects that drive partitions are mounted using /cygdrive as the drive prefix. If c: or e: does not use /cygdrive as the drive prefix, then you cannot build Mozilla using those drives. You will need to manually mount the drive at the expected spot by using the command:</p> + <pre class="eval">mount -s "e:\" /cygdrive/e +</pre> + <p>binmode (unix lineendings) or textmode (dos lineendings) don't matter as long as you use an editor (emacs, msdev) which can handle the appropriate line endings.</p> + <p> </p> + </dd> + <dt> + xpidl.exe crashes with an access violation</dt> + <dd> + This usually occurs because of a mismatch between your compiler and your glib and/or libIDL libraries. + <p>If you are building with Visual Studio .NET, then you must link against the VC7 built version of the glib & libIDL DLLs. For Visual Studio .NET 2003, use the VC7.1 versions. For Visual Studio 2005, use the VC8 versions.</p> + <p>The directory containing the versions of these libraries specific to your compiler must be in your PATH before any other version of those libraries. The .dll and .lib files must be executable (just chmod 755 them) or cygwin will not load them.</p> + <p>See <a href="ko/Windows_Build_Prerequisites/Free_Microsoft_Compilers">Windows Build Prerequisites</a> for more tips on building with VC7 and newer.</p> + <p>There are also some alternative static libraries available in {{ Bug(242870) }} that may be used instead of compiler specific libraries.</p> + <p>If you are building with VC6, then you must make sure that you are + <i> + not</i> + using the VC7 libraries at buildtime or at runtime.</p> + <p> </p> + </dd> + <dt> + configure: error: the linker major version, , does not match the compiler suite version, 6.</dt> + <dd> + The cygwin tool "link.exe" is being confused for an object linker. Make sure that the Microsoft tools are before cygwin in your PATH, or rename or remove /bin/link.exe + <p> </p> + </dd> + <dt> + configure: error: installation or configuration problem: C compiler cannot create executables.</dt> + <dd> + Try checking to make sure your PATH variable includes all the necessary directories. If you are using MS Visual Studio, run vcvars32.bat (which sets your PATH, LIB, and INCLUDE variables). If your build environment has changed, you may need to delete your config.cache file (in your mozilla or object directory) and then build again. + <p> </p> + </dd> + <dt> + fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'</dt> + <dd> + Try changing the order of the directories in your PATH, LIB, and INCLUDE variables. Move any directories that include "win64" or "IA64" (or "AMD64") closer to the end. + <p> </p> + </dd> + <dt> + LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'</dt> + <dd> + According to <a class="external" href="http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=64509">this Microsoft forum thread</a>, there is a different version of the Active Template Library (ATL) in the free Platform Software Development Kit (PSDK) than in Visual Studio. The ATL in the PSDK does not support 32-bit code, only 64-bit, whereas the Visual Studio ATL supports both and does not require atlthunk.lib. Apparently the atlthunk.lib file is not available and cannot be built from <a href="ko/Windows_Build_Prerequisites/Free_Microsoft_Compilers">freely available tools</a>, including the Visual C++ Toolkit and Visual Studio Express. You can either upgrade to the full version of Visual Studio to use its version of ATL, or you can workaround this problem by changing some code in atlbase.h (in \include\atl under the PSDK directory) as follows. + <pre class="eval">--- atlbase.h.old 2006-06-08 08:20:26.671875000 -0400 ++++ atlbase.h 2006-06-08 08:13:26.578125000 -0400 +@@ -283,7 +283,7 @@ + } + }; + #pragma pack(pop) +- ++/* + PVOID __stdcall __AllocStdCallThunk(VOID); + VOID __stdcall __FreeStdCallThunk(PVOID); + +@@ -291,6 +291,11 @@ + #define FreeStdCallThunk(p) __FreeStdCallThunk(p) + + #pragma comment(lib, "atlthunk.lib") ++*/ ++ ++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition ++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk)) ++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p) + + #elif defined (_M_AMD64) + #pragma pack(push,2) +</pre> + <p>I also had to delete the object directory and compile from scratch in order for the compiler to pick up this change.</p> + <p> </p> + </dd> + <dt> + compiling or building an executable with cygwin and VS6.0 results in FIND: Parameter format not correct</dt> + <dd> + There is confusion between System32 "find" and cygwin's /usr/bin/find. The desired find is cygwin's. This is caused by Path ordering. A few possible solutions are possible: + <ul> + <li>temporarily rename system32/find.exe</li> + <li>make sure cygwin path entry comes before system32 path entry</li> + </ul> + <p> </p> + </dd> + <dt> + I packaged Firefox via the installer: <tt>make -C ${OBJ_DIR}/browser/installer installer</tt> without any problems. Executing the resulting installer asks for a missing mozz.dll; installation fails</dt> + <dd> + Both Thunderbird and Firefox should be compiled with the --enable-static --disable-shared configure flags + <p> </p> + <p> </p> + </dd> + <dt> + build fails with the message:</dt> + <dd> + <pre class="eval">shlibsign.exe - Entry Point Not Found +The procedure entry point CERT_GetFirstEmailAddress could not +be located in the dynamic link library nss3.dll. +</pre> + <p>You may have multiple instances of nss3.dll on your machine and in your path. Run a seach on your machine for all instances of this file. Move any instances found outside of your firefox build tree aside during the build and rename them back when the build is done.</dd></p> + <p> </p> + </dd> +</dl> +<h3 id="Unix-specific_questions" name="Unix-specific_questions">Unix-specific questions</h3> +<p> </p> +<dl> + <dt> + Galeon needs libgtksuperwin.so but I don't have that file in my Mozilla gtk2 builds. Where is it?</dt> + <dd> + Only the Mozilla gtk1 builds build libgtksuperwin.so. If you want to use galeon with a gtk2 build, you will need to use galeon2. + <p> </p> + </dd> + <dt> + Why does configure say that it needs libIDL >= 0.6.3 when I have libIDL 0.8.x installed?</dt> + <dd> + libIDL 0.8x can only be used when compiling against gtk2. Mozilla compiles against gtk1 by default. To use libIDL 0.8.x and gtk2, you must specify --enable-default-toolkit=gtk2 on the configure command line or in your mozconfig file. NOTE: This is an old issue which has been fixed for mozilla 1.8. + <p> </p> + </dd> + <dt> + How do I build on Solaris 10 x86 (Seamonkey)?</dt> + <dd> + I had to do the following to get a working environment</dd> + <dd> + 1. Install forte (free from Sun)</dd> + <dd> + 2. Install gmake (from blastwave)</dd> + <dd> + 3. mv /usr/ucb/cc /usr/ucb/cc.hold</dd> + <dd> + 4. CFLAGS="-xlibmil"; export CFLAGS</dd> + <dd> + 5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; export CXXFLAGS</dd> + <dd> + 6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; export LDFLAGS</dd> + <dd> + 7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; export PATH</dd> + <dd> + 8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; export LD_LIBRARY_PATH</dd> + <dd> + 9. Create a mozconfig file and build as normal</dd> + <dd> + 10. The building of the package (tar and gzip) failed so I just manually tarred up the resulting files in the dist directory + <p> </p> + </dd> + <dt> + libxpcom_core.so: cannot restore segment prot after reloc: Permission denied</dt></dt> + <dd> + You are probably using Fedora Core 5, or some other Linux distrobution that has SELinux turned on. Use the command 'chcon -t chcon -t texrel_shlib_t lib*' in your dist/bin directory to fix it.</dd></dd> +</dl> +<p>{{ languages( { "fr": "fr/FAQ_sur_la_compilation_de_Mozilla" } ) }}</p> diff --git a/files/ko/mozilla/developer_guide/source_code/index.html b/files/ko/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..13120b58e7 --- /dev/null +++ b/files/ko/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,49 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +tags: + - Developing Mozilla + - NeedsTranslation +translation_of: Mozilla/Developer_guide/Source_Code +--- +<p>The articles below will help you get your hands on the Mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.</p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Mercurial" title="En/Mozilla Source Code (Mercurial)">Getting the code from the Mercurial repository</a></dt> + <dd>If you plan to contribute to the Mozilla project, the best way to get the code is to check it out from the version control repository. Learn how to do that here.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Using_the_VM">Getting a pre-configured Mozilla build system virtual machine</a></dt> + <dd>This is the easiest way to get started: use a VirtualBox virtual machine which is already configured with a complete build environment for you to use. Just boot the VM and build!</dd> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">Downloading the source code</a></dt> + <dd>If you want to fetch the code for a specific release of a particular Mozilla product, you may prefer to download a source code archive.</dd> + <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Viewing and searching Mozilla source code online</a></dt> + <dd>Learn how to use MXR, Mozilla's online search and browsing tool for accessing the source code. This isn't a good way to download the code, but is a great way to search it.</dd> + <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navigating the Mozilla source code</a></dt> + <dd>Learn about the various folders in the Mozilla source tree, and how to find what you're looking for.</dd> + <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit_for_new_contributors." title="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit__for_new_contributors.">Bugs for newcomers</a></dt> + <dd>If you are new to the project and want something to work on, look here.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt><a class="internal" href="/en-US/Developer_Guide/Coding_Style" title="En/Mozilla Coding Style Guide">Mozilla Coding Style Guide</a></dt> + <dd>The code style guide provides information about how you should format your source code to ensure that you don't get mocked by the reviewers.</dd> + <dt><a href="/en-US/Developer_Guide/Interface_development_guide" title="En/Developer Guide/Interface development guide">Interface development guide</a></dt> + <dd>Guidelines and documentation for how to create and update XPCOM interfaces.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/CSS_Guidelines">The Firefox codebase: CSS Guidelines</a></dt> + <dd>This document contains guidelines defining how CSS inside the Firefox codebase should be written, it is notably relevant for Firefox front-end engineers.</dd> + <dt><a href="/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines">SVG Cleanup Guide</a></dt> + <dd>Guidelines and best practices for shipping new SVGs.</dd> + <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Try Servers</a></dt> + <dd>Mozilla products build on at least three platforms. If you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass.</dd> + <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Creating a patch</a></dt> + <dd>Once you've made a change to the Mozilla code, the next step (after making sure it works) is to create a patch and submit it for review. <em>This article needs to be updated fully for Mercurial.</em></dd> + <dt><a class="external" href="https://www.mozilla.org/hacking/committer/" title="https://www.mozilla.org/hacking/committer/">Getting commit access to the source code</a></dt> + <dd>Feel ready to join the few, the proud, the committers? Find out how to get check-in access to the Mozilla code.</dd> + <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">Getting older Mozilla code from CVS</a></dt> + <dd>Older versions of the Mozilla source code, as well as the current versions of NSS and NSPR, are kept in a CVS repository. Learn about that in this article.</dd> +</dl> +</div> +</div> diff --git a/files/ko/mozilla/firefox/developer_edition/index.html b/files/ko/mozilla/firefox/developer_edition/index.html new file mode 100644 index 0000000000..5303ed6630 --- /dev/null +++ b/files/ko/mozilla/firefox/developer_edition/index.html @@ -0,0 +1,56 @@ +--- +title: Developer Edition +slug: Mozilla/Firefox/Developer_Edition +tags: + - 초보자 + - 파이어폭스 +translation_of: Mozilla/Firefox/Developer_Edition +--- +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/9143/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;">웹 개발자들을 위한 Firefox입니다.</p> + +<p><a href=" https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;"> Firefox 개발자 에디션 내려받기</a></p> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h3 id="최신_파이어폭스_기능"><strong>최신 파이어폭스 기능</strong></h3> + +<p>파이어폭스 개발자 에디션은 <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Firefox Release Process</a>의 오로라 채널을 대채합니다. 오로라 채널처럼, 개발자 에디션에서도 6개월에 한번씩 새 기능이 업데이트 됩니다.물론, Nightly 빌드에서 검증된 상태로 말이죠.</p> + +<p>개발자 에디션을 사용하면, 여러분은 도구와 플랫폼에 대한 엑세스를 Firefox 릴리즈 보다 적어도 12주 전에 체험할 수 있습니다.</p> + +<p><a href="/en-US/Firefox/Releases/35">어떤 기능이 새로 생겼는지 알아보세요.</a></p> +</div> + +<div class="column-half"> +<h3 id="새로운_테마"><strong>새로운 테마</strong></h3> + +<p>이 테마는 개발자 도구에 더 쉽게 접근할 수 있도록 돕습니다.</p> + +<h3 id="시험적인_개발자_도구"><strong>시험적인 개발자 도구</strong></h3> + +<p>저희는 여러가지 릴리즈에 포함되지 않은 시험적인 개발자 도구들을 포함하고 있습니다.</p> + +<p>예를 들어, 파이어폭스 개발자 에디션은 <a href="/en-US/docs/Tools/Valence">Valence add-on</a>과, <a href="/en-US/docs/Tools">Firefox developer tools</a>를 다른 브라우저에서 연결할 수 있는 도구를 제공합니다.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="다중_프로필"><strong>다중 프로필</strong></h3> + +<p>파이어폭스 개발자 에디션은 다중 프로필을 사용할 수 있습니다. 이는 설치된 다른 파이어폭스 버전과 바꿀 수 있는 것입니다. 이 의미는 굳이 따로 Firefox Beta를 실행시키지 않고도 개발자 에디션을 통해 사용할 수 있다는 것입니다.</p> + +<div class="note"> +<p><strong>노트:</strong> 개발자 에디션을 처음 시작하게 되면, 커스트마이징되지않은 웹 브라우저를 보실겁니다.애드온, 즐겨찾기, 검색기록 없이 말이죠. 당신은 <a href="https://support.mozilla.org/en-US/kb/how-do-i-set-up-firefox-sync">파이어폭스 동기화를 사용하여 </a>다른 에디션과 동기화 할 수 있습니다.</p> +</div> +</div> + +<div class="column-half"> +<h3 id="웹_개발자들을_위한_맞춤_설정"><strong>웹 개발자들을 위한 맞춤 설정</strong></h3> + +<p>저희는 웹 개발자들을 위해 몇가지 설정을 해 두었습니다. 예를 들면, 크롬과 원격 디버깅이 기본적으로 활성화 되어있습니다.</p> +</div> +</div> + +<p> </p> diff --git a/files/ko/mozilla/firefox/headless_mode/index.html b/files/ko/mozilla/firefox/headless_mode/index.html new file mode 100644 index 0000000000..899740e0af --- /dev/null +++ b/files/ko/mozilla/firefox/headless_mode/index.html @@ -0,0 +1,204 @@ +--- +title: Headless mode +slug: Mozilla/Firefox/Headless_mode +tags: + - QA + - node.js + - 모질라 + - 자동화 + - 테스트 + - 테스팅 + - 헤드리스 + - 헤드리스 모드 +translation_of: Mozilla/Firefox/Headless_mode +--- +<p class="summary">Headless mode는 Firefox를 실행시키기 위한 유용한 방법입니다, 즉 UI컴포넌트가 보이지 않더라도 Firefox는 정상적으로 움직인다는 것입니다. 웹서핑하기에는 불편할 지라도 테스트를 자동화하기에는 매우 유용합니다. 이 글은 Headless Firefox 실행을 위해 알아야할 모든 것을 제공합니다.</p> + +<h2 id="headless_mode를_사용하기">headless mode를 사용하기</h2> + +<p><code>-headless</code> flag를 붙이는 것만으로 코맨드라인에서 headless mode를 실행할 수 있습니다.</p> + +<pre class="brush: bash">/path/to/firefox -headless</pre> + +<p>지금은 심플하게 되어있습니다만 앞으로 옵션을 추가할 예정입니다. </p> + +<p>하나의 예를 들자면, headless Firefox를 이용해서 간단하게 스크린샷을 찍을 수 있는 <code>-screenshot</code> 옵션을 작업하고 있습니다. 현재 진행사항은 여기서 {{bug(1378010)}} 볼 수 있습니다.</p> + +<h3 id="Browser_support">Browser support</h3> + +<p>Headless Firefox는 리눅스에서는 Firefox55이상, 윈도우즈와 맥에서는 Firefox56이상의 버전에서 지원하고 있습니다.</p> + +<h2 id="headless_mode를_이용한_테스트_자동화">headless mode를 이용한 테스트 자동화</h2> + +<p>headless Firefox를 이용하는 가장 유용한 방법은 자동화된 테스트와 함께 이용하는 것입니다. 즉,테스트의 과정을 더욱 더 효율적으로 만들어 낼 수 있다는 것입니다. </p> + +<h3 id="Selenium_in_Node.js">Selenium in Node.js</h3> + +<p>여기서는 <a href="https://nodejs.org/">Node.js</a> 와 <code><a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a></code> 패키지를 이용해서 <a href="http://www.seleniumhq.org/">Selenium</a>테스트를 만들어 볼 것입니다. 이 가이드는 Selenium, Webdriver 그리고 Node에 대한 기본적인 지식과 테스팅 환경 설정이 완료되어 있다는 가정하에 쓰여져 있습니다. 그렇지 않다면 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> 를 먼저 보시고 난 후에 본 가이드를 이용하실 것을 권장합니다.</p> + +<p>먼저 Node와 <code>selenium-webdriver</code>패키지가 설치되어 있는지 확인합니다. 그리고 <code>selenium-test.js</code>라는 파일을 만들어서 불러옵니다. 그런 후 아래의 내용을 단계별로 진행합니다.</p> + +<div class="note"> +<p><strong>Note</strong>: 다른 방법으로는 <a href="https://github.com/mdn/headless-examples">headless-examples repo</a>;가 이용 가능합니다.<br> + <code>npm install</code>을 이용하는 것만으로 필요한 라이브러리를 설치해 포함시킬수 있습니다.</p> +</div> + +<ol> + <li> + <p><code>selenium-webdriver</code> module과 <code>firefox</code> submodule을 불러오는 로직을 추가합니다.</p> + + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +var firefox = require('selenium-webdriver/firefox');</pre> + </li> + <li> + <p>다음으로, Firefox Nightly를 설정한 <code>binary</code> objecet를 작성합니다. 그리고 argument를 <code>-headless</code>로 해서 추가하면 headless mode를 실행시키기 위한 준비가 완료됩니다. </p> + + <pre class="brush: js">var binary = new firefox.Binary(firefox.Channel.NIGHTLY); +binary.addArguments("-headless");</pre> + </li> + <li> + <p>Firefox용으로 웹드라이버 인스탄스를 작성합니다. 그리고 <code>setFirefoxOptions()</code> 를 이용해서 작성해둔 바이너리를 설정합니다. ( 이 작업은 리눅스와 윈도우즈와 맥에서 headless mode가 릴리즈 되면 불필요합니다. 하지만 Nightly-specific feature에서 테스트하기를 원한다면 유용합니다 )</p> + + <pre class="brush: js">var driver = new webdriver.Builder() + .forBrowser('firefox') + .setFirefoxOptions(new firefox.Options().setBinary(binary)) + .build();</pre> + </li> + <li> + <p>구글 검색페이지를 이용하는 간단한 테스트를 수행하는 코드를 추가합니다.</p> + + <pre class="brush: js">driver.get('https://www.google.com'); +driver.findElement(By.name('q')).sendKeys('webdriver'); + +driver.sleep(1000).then(function() { + driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); +}); + +driver.findElement(By.name('btnK')).click(); + +driver.sleep(2000).then(function() { + driver.getTitle().then(function(title) { + if(title === 'webdriver - Google Search') { + console.log('Test passed'); + } else { + console.log('Test failed'); + } + }); +}); + +driver.quit();</pre> + </li> + <li> + <p>마지막으로 아래의 명령어와 함께 테스트를 실행해주세요.</p> + + <pre class="brush: bash">node selenium-test</pre> + </li> +</ol> + +<p>몇 초 후 콘솔에서 "Test passed"를 보게될 겁니다. 이게 다입니다! </p> + +<p>headless mode를 이용한 Node.js Selenium tests에 관한 유용한 팁이나 트릭은 이 글 (<a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez) 을 참고해주세요.</p> + +<h3 id="Selenium_in_Java">Selenium in Java</h3> + +<div class="note"> +<p><strong>Note</strong>: Thanks a lot to nicholasdipiazza for writing these instructions!</p> +</div> + +<p> Gradle projects를 지원하는 IDE를 사용하고 있고 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> 가이드에 설명되어진대로 Geckodriver가 설치되어져 있다는 가정하에 쓰여져 있습니다.</p> + +<ol> + <li> + <p><a href="https://github.com/mdn/headless-examples/blob/master/headlessfirefox-gradle.zip">headlessfirefox-gradle.zip</a> 를 다운로드합니다. (<a href="https://github.com/mdn/headless-examples/tree/master/headlessfirefox-gradle">see the source here</a>), 압축을 풉니다, 그리고 headlessfirefox폴더를 IED에 gradle project로 Import합니다.</p> + </li> + <li> + <p><code>build.gradle파일에 </code>selenium을 설정합니다. 필요에 따라 다른 버전을 이용하셔도 상관없습니다. 이번 글에서는 3.5.3을 이용합니다.<code> </code></p> + + <pre class="brush: java">group 'com.mozilla' +version '1.0' + +apply plugin: 'java' + +sourceCompatibility = 1.8 + +repositories { + mavenCentral() +} + +dependencies { + compile('org.seleniumhq.selenium:selenium-api:3.5.3') + compile('org.seleniumhq.selenium:selenium-remote-driver:3.5.3') + compile('org.seleniumhq.selenium:selenium-server:3.5.3') + + testCompile group: 'junit', name: 'junit', version: '4.12' +}</pre> + </li> + <li> + <p>geckodriver를 설치한 경로와 같은 곳에 있는 HeadlessFirefoxSeleniumExample.java 파일에서 <code>webdriver.gecko.driver</code> property를 수정합니다. (see line 15 below).</p> + + <pre class="brush: java">package com.mozilla.example; + +import org.openqa.selenium.By; +import org.openqa.selenium.WebElement; +import org.openqa.selenium.firefox.FirefoxBinary; +import org.openqa.selenium.firefox.FirefoxDriver; +import org.openqa.selenium.firefox.FirefoxOptions; + +import java.util.concurrent.TimeUnit; + +public class HeadlessFirefoxSeleniumExample { + public static void main(String [] args) { + FirefoxBinary firefoxBinary = new FirefoxBinary(); + firefoxBinary.addCommandLineOptions("--headless"); + System.setProperty("webdriver.gecko.driver", "/opt/geckodriver"); + FirefoxOptions firefoxOptions = new FirefoxOptions(); + firefoxOptions.setBinary(firefoxBinary); + FirefoxDriver driver = new FirefoxDriver(firefoxOptions); + try { + driver.get("http://www.google.com"); + driver.manage().timeouts().implicitlyWait(4, + TimeUnit.SECONDS); + WebElement queryBox = driver.findElement(By.name("q")); + queryBox.sendKeys("headless firefox"); + WebElement searchBtn = driver.findElement(By.name("btnK")); + searchBtn.click(); + WebElement iresDiv = driver.findElement(By.id("ires")); + iresDiv.findElements(By.tagName("a")).get(0).click(); + System.out.println(driver.getPageSource()); + } finally { + driver.quit(); + } + } +}</pre> + </li> + <li> + <p>자바 클래스를 실행시킵니다. 그러면 컨솔 또는 터미널에 출력된 HTML컨텐츠를 확인할 수 있습니다.</p> + </li> +</ol> + +<h3 id="(headless_Firefox를_지원하는)_다른_테스팅_솔루션">(headless Firefox를 지원하는) 다른 테스팅 솔루션</h3> + +<p>Slimerjs는 리눅스에서 Firefox를 지원합니다. 윈도우즈와 맥은 지원 예정입니다. 상세한 내용은 이 글 ( <a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl) 을 참고해주세요.</p> + +<p>그 외에 환경변수가 설정가능하다면 거의 모든 일반적인 테스팅 어플리케이션에서 쓰여진 자동화된 테스트에서 headless Firefox를 이용할 수 있습니다. </p> + +<h2 id="트러블슈팅과_상세_지원에_관해">트러블슈팅과 상세 지원에 관해</h2> + +<p>headless mode를 이용중에 문제가 발생했을 경우에는 걱정하시지 말고 이 섹션을 찾아주세요. 이 섹션은 질문이 더 생기거나 답을 찾았을 경우에 내용을 추가 할 수 있도록 설계되어있습니다.</p> + +<ul> + <li>현재 리눅스에서 사용하고 있는 시스템 안에서 headless mode가 쓰이지 않더라도 특정 라이브러리를 필요로 합니다. — 왜냐하면 Firefox에서 사용하고 있기 때문입니다. 상세한 내용과 진행상황은 여기를 {{bug(1372998)}} 참고해주세요.</li> +</ul> + +<p>엔지니어에게 질문이 있다면 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>의 <code>#headless 채널이 최고의 장소입니다.</code> 그리고 버그를 확실하게 발견하셨다면 <a href="https://bugzilla.mozilla.org/">Mozilla Bugzilla</a>에서 내용을 알려주세요. </p> + +<h2 id="관련_글">관련 글</h2> + +<ul> + <li><a href="https://intoli.com/blog/running-selenium-with-headless-firefox/">Using Selenium with Headless Firefox (on Windows)</a> by Andre Perunicic (uses Python)</li> + <li><a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez</li> + <li><a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl</li> +</ul> diff --git a/files/ko/mozilla/firefox/index.html b/files/ko/mozilla/firefox/index.html new file mode 100644 index 0000000000..43a1fb77d1 --- /dev/null +++ b/files/ko/mozilla/firefox/index.html @@ -0,0 +1,76 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Landing + - Mozilla + - 모질라 + - 파이어폭스 +translation_of: Mozilla/Firefox +--- +<div>{{FirefoxSidebar}}</div> + +<p><a href="https://www.mozilla.org/firefox/">Firefox</a>는 모질라 재단의 유명한 웹브라우저로서 윈도우, OS X, 리눅스, 솔라리스(비공식), 안드로이드 기기 등의 다양한 플랫폼을 지원합니다. 호환성과 최신 웹기술, 그리고 강력한 개발 도구로서 Firefox는 웹 개발자들과 사용자들에겐 최고의 선택입니다.</p> + +<p>Firefox는 오픈소스 프로젝트이기 때문에 대부분의 코드가 커뮤니티의 봉사자들에 의해 작성됩니다. 여기서 당신은 Firefox 프로젝트에 어떻게 봉사하는지 배우거나 Firefox 애드온이나 개발툴의 사용법 또는 다른 것에 대한 정보를 얻을 수 있습니다.</p> + +<p><span class="seoSummary"><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a>를 위한 애드온을 어떻게 만드는 지, 어떻게 파이어폭스를 스스로 빌드하고 개발하는 지, Firefox와 그 하위 프로젝트들이 어떻게 이루어 지는 지 알아보세요.</span></p> + +<ul class="card-grid" style="padding-bottom: 25px; padding-left: 40px;"> + <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">개발자 릴리즈노트</span> + + <p><a href="https://developer.mozilla.org/en-US/Firefox/Releases">개발자를 위한 릴리즈 노트 읽기</a> 어떤 기능이나 애드온이 파이어폭스에 추가되었는지, 웹사이트에 대한 지원이 어떻게 바뀌었는지 알아보세요.</p> + </li> + <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">프로젝트 문서</span> + <p><a href="https://developer.mozilla.org/en-US/docs/Mozilla">Firefox의 내부 구성물</a> 에서 더 자세한 정보를 알아보세요. 그 다음에는 빌드시스템에 대한 정보를 알아내어 코드를 어떻게 작성할 지 알아보세요.</p> + </li> + <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">개발자 가이드</span> + <p><a href="https://developer.mozilla.org/en-US/docs/Developer_Guide">개발자 가이드</a>는 어떻게 파이어폭스 소스코드를 얻고 컴파일 하는지에 대한 가이드를 제공합니다. 또한 이를 통해 어떻게 프로젝트에 기여하는 지 알 수 있습니다<strong>.</strong></p> + </li> +</ul> + +<h2 id="Firefox_채널">Firefox 채널</h2> + +<p>Firefox는 네 가지 <strong>채널</strong>로 이루어져 있습니다.</p> + +<h3 id="Firefox_Nightly">Firefox Nightly</h3> + +<p>우리는 매일 밤마다 <a href="/ko/docs/mozilla-central">mozilla-central</a> 저장소의 최신 코드를 기반으로 파이어폭스를 빌드합니다. 이 빌드들은 파이어폭스 개발자들이나 새로운 기능을 미리 체험해보고 싶은 사람들에게 제공되며 언제나 활성화된 개발환경에서 개발될 것입니다.</p> + +<p><a class="external external-icon" href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Nightly 내려받기</a></p> + +<h3 id="Firefox_개발자_에디션">Firefox 개발자 에디션</h3> + +<p>이 버전은 오직 개발자들을 위해 만들어진 파이어폭스입니다. 6주마다, 저희는 Firefox Nightly에서 안정화된 기능을 파이어폭스 개발자 에디션에 넣어 빌드합니다. 저희는 또한 몇가지 개발자들만을 위한 이 에디션에서만 사용할 수 있는 기능을 추가합니다.</p> + +<p><a href="/ko/docs/Firefox/Developer_Edition">파이어폭스 개발자 에디션에 대하여 더 자세히 알아보기</a></p> + + + +<h3 id="Firefox_Beta">Firefox Beta</h3> + +<p>Firefox 개발자 에디션이 출시된지 6주가 지난 후, 저희는 충분히 안정적인 기능들을 넣고, 새 버전의 Firefox Beta를 빌드합니다. Firefox 베타 빌드는 Firefox의 다음버전을 미리 보고 싶은 얼리어답터에게 적합합니다.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Beta 내려받기</a></p> + +<h3 id="Firefox">Firefox</h3> + +<p>Beta 버전에서의 6주가 지나고, 우리는 새 기능을 1억명 이상의 사용자들에게 새 버전에 담아 선보입니다.</p> + +<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">파이어폭스 내려받기</a></p> + +<h2 id="콘텐츠">콘텐츠</h2> + +<p>{{LandingPageListSubpages}}</p> + +<h2 id="파이어폭스_프로파일">파이어폭스 프로파일</h2> + +<p>만일 당신이 규칙적으로 다양한 파이어폭스의 채널들을 같이 사용하고 있거나 다양한 설정을 같이 사용하고 있다면 당신은 사전에 파이어 폭스의 프로필 매니저나 다른 프로필 관리 도구를 이용하여 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Multiple_profiles">멀티 파이어폭스 프로파일 사용하기</a> 를 읽으셔야 합니다.</p> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a class="external external-icon" href="https://mail.mozilla.org/listinfo/firefox-dev">Mailing list</a></li> + <li><a class="external external-icon" href="https://wiki.mozilla.org/Release_Management/Calendar">Release schedule</a></li> +</ul> diff --git a/files/ko/mozilla/firefox/multiple_profiles/index.html b/files/ko/mozilla/firefox/multiple_profiles/index.html new file mode 100644 index 0000000000..ebf8e4adb3 --- /dev/null +++ b/files/ko/mozilla/firefox/multiple_profiles/index.html @@ -0,0 +1,242 @@ +--- +title: 여러 개의 Firefox 프로파일 +slug: Mozilla/Firefox/Multiple_profiles +translation_of: Mozilla/Firefox/Multiple_profiles +--- +<p class="summary">A profile in Firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of Firefox. You can find <a href="https://support.mozilla.org/kb/Profiles">details about profiles</a> on Mozilla's end-user support site.</p> + +<h2 id="여러_개의_프로파일이_필요한_이유">여러 개의 프로파일이 필요한 이유</h2> + +<p>The casual user may want to have different profiles for different family members. Having different profiles would allow each person to have his or her own set of bookmarks, settings, and add-ons.</p> + +<p>Web developers might want a secondary profile for testing websites, apps, or other projects on different Firefox channels. For example, you might want to have the Firebug add-on installed for Web development, but not for general-purpose Web browsing. While using the Nightly channel, you may encounter some add-ons that have become temporarily incompatible with new API changes, until the add-on developer has a chance to update them. You can remove such add-ons from your profile for Nightly use while keeping them for use with other profiles.</p> + +<p>For QA, testing, and bug triaging contributors, you may want to have multiple development versions of Firefox installed, each with its own profile. Creating new profiles for testing can keep you from losing your preferences, bookmarks, and history. It takes little time to set up a new profile, and once it is complete, all of your Firefox versions will update separately and can be run simultaneously.</p> + +<h2 id="가능한_브라우저_개발_채널">가능한 브라우저 개발 채널</h2> + +<p>There are four available browser channels, each at a different level of stability and development. The four channels are <a class="link-https" href="https://www.mozilla.org/firefox/new/" title="Firefox Stable">Release</a>, <a class="link-https" href="https://www.mozilla.org/firefox/beta/" title="Firefox Beta">Beta</a>, <a href="https://www.mozilla.org/firefox/aurora/">Developer Edition</a>, and <a class="external" href="https://nightly.mozilla.org/" title="Firefox Nightly">Nightly</a>. The Release channel is recommended for most users, as it is the "official release" channel. However, for those more adventurous, you can try one of the other three channels to see what is coming in Firefox and play around with emerging features. The Beta channel contains the features that are expected to be in the next release of Firefox and are in final stages of testing. Aurora contains experimental features, which are not yet at beta quality. Nightly contains the latest code from Firefox developers and is the least stable channel.</p> + +<h2 id="써드파티_도구">써드파티 도구</h2> + +<p>In addition to the built-in Profile Manager and the external Profile Manager, there are a few third-party tools that make working with multiple profiles easy.</p> + +<div class="note"> +<p>This list is by no means exhaustive. Please add any helpful tools you discover to the list!</p> +</div> + +<h3 id="크로스플랫폼">크로스플랫폼</h3> + +<ul> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/profileswitcher/?src=ss">ProfileSwitcher</a> by Paolo "Kaosmos". It adds some options to launch easily other profiles and the Profile Manager.</li> + <li><a href="https://addons.mozilla.org/en-US/firefox/addon/profilist/">Profilist</a> by Noitidart. Adds an easy to access profile manager to the Firefox "hamburger" menu.</li> +</ul> + +<h3 id="Mac_OS_X">Mac OS X</h3> + +<ul> + <li><a href="http://davemartorana.com/multifirefox/">Multifirefox</a> by Dave Martorana</li> +</ul> + +<h2 id="프로파일_관리">프로파일 관리</h2> + +<h3 id="Firefox가_실행되는_동안_프로파일_결정">Firefox가 실행되는 동안 프로파일 결정</h3> + +<p>To determine the profile of a currently-running Firefox instance in Windows, macOS or Linux,</p> + +<ol> + <li>Click in the menu: <em>Help</em> > <em>Troubleshooting Information</em>. A new tab will open.</li> + <li>In the section <em>Application Basics</em>, find <em>Profile Folder</em>.</li> + <li>Click the button <em>Show Folder,</em> <em>Show Directory</em>, or <em>Show in Finder</em>. A native file browser window will open.</li> + <li> + <p>Look at the name of the folder being displayed. It will be some random characters, followed by a dot/period, followed by the current profile name. For example, if the folder name is <code>r99d1z7c.default</code>, you are running in a profile named <em>default</em>, which is probably the first profile that was automatically created when Firefox was installed. If the folder name is <code>b5gkn7wd.Suzie</code>, you are running in a profile named <em>Suzie</em>. </p> + </li> +</ol> + +<h3 id="특정_프로파일로_Firefox_실행">특정 프로파일로 Firefox 실행</h3> + +<p id="You_cannot_change_the_profile_while_Firefox_is_running._Although_it_is_possible_in_some_cases_to_have_multiple_instances_of_Firefox_running_in_different_profiles_to_avoid_confusion_you_should_first_exitquitterminate_all_running_instances_of_Firefox_FirefoxDeveloperEdition_or_Nightly._Then_follow_the_instructions_below_applicable_to_your_operating_system."><strong>You cannot change the profile while Firefox is running.</strong> Although it is possible in some cases to have multiple instances of Firefox running in different profiles, to avoid confusion, you should first exit/quit/terminate all running instances of <em>Firefox</em>, <em>FirefoxDeveloperEdition</em> or <em>Nightly</em>. Then follow the instructions below, applicable to your operating system.</p> + +<h4 id="윈도우">윈도우</h4> + +<h5 id="Windows_XP">Windows XP</h5> + +<ol> + <li>Click the Start button.</li> + <li>Click "Run".</li> + <li>Type "firefox -ProfileManager".</li> +</ol> + +<h5 id="Windows_Vista7">Windows Vista/7</h5> + +<ol> + <li>Click the Start button.</li> + <li>Click the search bar at the bottom.</li> + <li>Type "firefox -ProfileManager".</li> +</ol> + +<h5 id="Windows_88.1">Windows 8/8.1</h5> + +<ol> + <li>Press "Windows + R" on your keyboard.</li> + <li>Type <code>firefox -ProfileManager</code>.</li> +</ol> + +<p>If the Profile Manager window does not open, Firefox may have been running in the background, even though it was not visible. Close all instances of Firefox, or restart the computer, and then try again.</p> + +<h4 id="리눅스">리눅스</h4> + +<p>If Firefox is already included in your Linux distribution, or if you have installed Firefox with the package manager of your Linux distribution:</p> + +<ol> + <li>At the top of the Firefox window, click on the File menu and select Quit.</li> + <li>In Terminal run <code>firefox --ProfileManager</code></li> +</ol> + +<p>If the Profile Manager window does not open, Firefox may have been running in the background, even though it was not visible. Close all instances of Firefox, or restart the computer and then try again.</p> + +<h4 id="macOS">macOS</h4> + +<ol> + <li>Run the <em>Terminal</em> application, which is found in Applications/Utilities.</li> + <li>Type or paste in the path to Firefox, followed by <code>.app/Contents/MacOS/firefox</code>. For example, if Firefox is installed in the recommended location, you would enter <code>/Applications/Firefox.app/Contents/MacOS/firefox</code>.</li> + <li>If you have the path to your desired profile handy, enter a space character, followed by <code>-profile</code> followed by another space character, followed by the full path to the profile folder you wish to launch into. This will launch Firefox immediately. Otherwise, enter a space character followed by <code>--profilemanager</code>. This will present the Profile Manager window in which you can make your selection.</li> + <li>Hit <em>return.</em></li> +</ol> + +<p>Here is a complete example Terminal command from steps 2-3:</p> + +<pre>/Applications/Firefox.app/Contents/macOS/firefox -profile /Users/Suzie/Library/Application\ Support/Firefox/Profiles/r99d1z7c.default</pre> + +<p>If you want to do this frequently and more easily, you may wish to create an <em>Automator</em> application, as explained in <a href="http://sonnygill.net/mac/mac-multiple-firefox-profiles/">this tutorial</a>.</p> + +<h3 id="프로파일_생성하기">프로파일 생성하기</h3> + +<h4 id="프로파일_매니저로_프로파일_만들기">프로파일 매니저로 프로파일 만들기</h4> + +<p>These instructions should be the same for all operating systems.</p> + +<ol> + <li>To start the Create Profile Wizard, click "Create Profile..." in the Profile Manager.</li> + <li>Click Next and enter the name of the profile. Use a profile name that is descriptive, such as your personal name. This name is not exposed to the Internet.</li> + <li>You can also choose where to store the profile on your computer. To select storage location, click Choose Folder....</li> + <li>If you choose your folder location for the profile, select a new or empty folder. If you choose a folder that isn't empty, and you later remove the profile and choose the \"Delete Files\" option, everything inside that folder will be deleted.</li> + <li>To create the new profile, click Finish.</li> +</ol> + +<h4 id="Firefox_브라우저로_프로파일_만들기">Firefox 브라우저로 프로파일 만들기</h4> + +<p>You can create a new Firefox profile directly from the browser.</p> + +<ol> + <li>Type about:profiles into the browser URL search bar</li> + <li>On the page, click Create a New Profile button</li> + <li>Read the introduction, and click Next</li> + <li>Enter a profile name for your new Profile. Use a profile name that is descriptive, such as your personal name. This name is not exposed to the Internet.</li> + <li>Optionally, to change where the profile will be stored on your computer, click Choose Folder...</li> + <li>To create the new profile, click Finish.</li> +</ol> + +<h3 id="프로파일_삭제하기">프로파일 삭제하기</h3> + +<ol> + <li>In the Profile Manager, select the profile to remove, and click Delete Profile....</li> + <li>Confirm that you wish to delete the profile: + <ul> + <li>Don't Delete Files removes the profile from the Profile Manager yet retains the profile data files on your computer in the storage folder so that your information is not lost. "Don't Delete Files" is the preferred option, because it saves the old profile's folder, allowing you to recover the files to a new profile.</li> + <li>Delete Files removes the profile and its files, including the profile bookmarks, settings, passwords, etc.<br> + <br> + {{ warning("If you use the \"Delete Files\" option, the profile folder, and files will be deleted. This action cannot be undone.") }}</li> + <li>Cancel interrupts the profile deletion.</li> + </ul> + </li> +</ol> + +<h3 id="프로파일의_이름_바꾸기">프로파일의 이름 바꾸기</h3> + +<ol> + <li>In the Profile Manager, select the profile you want to rename, and then click "Rename Profile".</li> + <li>Enter a new name for the profile and click on OK.</li> +</ol> + +<div class="note"> +<p>Note: The folder containing the files for the profile is not renamed.</p> +</div> + +<h2 id="옵션">옵션</h2> + +<h3 id="오프라인_작업">오프라인 작업</h3> + +<p>Choosing this option loads the selected profile, and starts Firefox offline. You can view previously viewed web pages, and experiment with your profile.</p> + +<h3 id="시작시_묻지_않기">시작시 묻지 않기</h3> + +<p>If you have multiple profiles, Firefox prompts you for the profile to use each time you start Firefox. Select this option to allow Firefox to load the selected profile, without prompting at startup.</p> + +<div class="note"> +<p>Note: To access other profiles after selecting this option, you must start the Profile Manager first.</p> +</div> + +<h2 id="프로파일_사용하기">프로파일 사용하기</h2> + +<h3 id="Windows">Windows</h3> + +<p>If you want to have the profile manager to pop up each time you start Firefox, so you can choose a profile, you will need to edit the "Target" of the launch icon. To do this:</p> + +<ol> + <li>Right-click the icon and choose "Properties".</li> + <li>When the properties dialog box pops up, you should see a "Target" text field that you can edit, and it should show the current file path.</li> + <li>After the closing quote, add <code>-ProfileManager</code>.</li> + <li>Click Ok.</li> +</ol> + +<p>Now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use.</p> + +<p>If you want individual icons to launch specific profiles, you will need to edit the "Target" of each icon. To do this:</p> + +<ol> + <li>Right-click the icon and choose "Properties".</li> + <li>When the properties dialog box pops up, you should see a "Target" text field that you can edit, and it should show the current file path.</li> + <li>To permanently set a specific profile, <code>add -p PROFILE_NAME</code> to the target path, but outside of the quotes, replacing "PROFILE_NAME" with the actual profile name you chose.</li> + <li>If you would also like to allow multiple instances of Firefox to run at the same time, add <code>-no-remote</code> after the profile name.</li> +</ol> + +<p>Once you are all done, click Ok. Do this for each icon you'd like to have a specific profile for. Once done, each one should automatically start with the specified profile<code>.</code></p> + +<h3 id="리눅스_2">리눅스</h3> + +<p>There is no extremely straightforward way to create custom application launchers in Gnome 3 like there was in Gnome 2. The following tutorial will help get you going overall: <a class="external" href="https://blog.randell.ph/how-to-create-custom-application-launchers-in-gnome-3/" title="How to create custom application launchers in gnome 3">Gnome 3 Custom application launcher</a>. Once you get to the point of adding a new item, you can have the profile dialog show up every time or set the launcher to launch a specific profile.</p> + +<p>If you want to have the profile manager to pop up each time you start Firefox, so you can choose a profile, you will need to set the command line for your new launcher.</p> + +<ol> + <li>Set the "command" text field to target the executable file, likely "/usr/bin/firefox", and add the <code>-p</code> parameter.</li> +</ol> + +<p>If you want individual icons to launch specific profiles, you will need to set the command line for your new launcher. To do this:</p> + +<ol> + <li>Set the "command" text field to target the executable file, likely "/usr/bin/firefox", and add the <code>-p PROFILE_NAME</code> parameter, replacing "PROFILE_NAME" with the specific profile.</li> + <li>Repeat as necessary, for each additional profile you want to set.</li> + <li>If you would also like to allow multiple instances of Firefox to run at the same time, add "-no-remote" after the profile name.</li> +</ol> + +<h3 id="Mac_OS_X_2">Mac OS X</h3> + +<p>You can find a useful tutorial to set up custom launchers here: <a href="https://spf13.com/post/managing-multiple-firefox-profiles-in-os-x/" title="Managing Multiple Firefox Profiles in OSX">Managing Multiple Firefox Profiles in OSX</a>. Do note it's best to follow all steps in the "Creating the scripts" section, including the "edit Info.plist" step. Leave off the profile name if you want the profile selector to show up every time you launch.</p> + +<h2 id="Setting_up_multiple_profiles_for_different_Firefox_channels">Setting up multiple profiles for different Firefox channels</h2> + +<p>This section will be especially helpful if you are a developer, wanting to work with multiple channels, and each having their separate launcher.</p> + +<h3 id="Windows_2">Windows</h3> + +<p>In Windows, the Developer and Nightly builds get their own directory in the "Programs" folder, so you don't have to worry about where to store the downloaded files. However, all three will attempt to use the same profile by default. You won't want to keep this behavior, because the different channels have different levels of features. To set each launcher, follow the Windows instructions at <a href="#Windows">Windows Launcher</a>.</p> + +<h3 id="Linux">Linux</h3> + +<p>In Linux, things aren't as automatically set up. You will likely get a prompt to download a tar.bz2 file to extract from. Extract the files to a new directory, and use the new launcher instructions from <a href="#Linux">here</a>. The only change you will need to make is the command path. You will want to set it to the directory where you extracted the Firefox channel's tar.bz2 file, and the executable "firefox" file located within this directory. The remaining profile assignment methods will remain the same. You will want to, for sure, add the <code>-no-remote</code> part to the end of the command field, so that you could run multiple instances at the same time.</p> + +<h3 id="Mac_OS_X_3">Mac OS X</h3> + +<p>You can find a useful tutorial to set up custom launchers here: <a href="https://spf13.com/post/managing-multiple-firefox-profiles-in-os-x/" title="Managing Multiple Firefox Profiles in OSX">Managing Multiple Firefox Profiles in OSX</a>. Do note it's best to follow all steps in the "Creating the scripts" section, including the "edit Info.plist" step. Also, you'll want to change the path in the do shell script to point to the correct .app file for the Firefox channel you want to target.</p> diff --git a/files/ko/mozilla/firefox/releases/3/index.html b/files/ko/mozilla/firefox/releases/3/index.html new file mode 100644 index 0000000000..82ff395697 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/index.html @@ -0,0 +1,273 @@ +--- +title: Firefox 3 for developers +slug: Mozilla/Firefox/Releases/3 +tags: + - Firefox 3 + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Releases/3 +--- +<p>If you're a developer trying to get a handle on all the new features in Firefox 3, this is the perfect place to start. This article provides a list of the new articles covering features added to Firefox 3. While it doesn't necessarily cover every little change, it will help you learn about the major improvements.</p> + +<h2 id="New_developer_features_in_Firefox_3" name="New_developer_features_in_Firefox_3">New developer features in Firefox 3</h2> + +<h3 id="For_web_site_and_application_developers" name="For_web_site_and_application_developers">For web site and application developers</h3> + +<dl> + <dt><a href="/en-US/docs/Updating_web_applications_for_Firefox_3" title="en-US/docs/Updating_web_applications_for_Firefox_3">Updating web applications for Firefox 3</a></dt> + <dd>Provides information about changes you may need to make to your web site or web application to take advantage of new features in Firefox 3.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Online_and_offline_events" title="en-US/docs/Online_and_offline_events">Online and offline events</a></dt> + <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a></dt> + <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="en-US/docs/Drawing_text_using_a_canvas">Drawing text using a canvas</a></dt> + <dd>You can now draw text in a canvas using a non-standardized API supported by Firefox 3.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial/Transformations#Transforms" title="en-US/docs/Canvas_tutorial/Transformations#Transforms">Transform support for canvas</a></dt> + <dd>Firefox now supports the <code>transform()</code> and <code>setTransform()</code> methods on canvases.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Using_microformats" title="en-US/docs/Using_microformats">Using microformats</a></dt> + <dd>Firefox now has APIs for working with microformats.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Drag_and_drop_events" title="en-US/docs/Drag_and_drop_events">Drag and drop events</a></dt> + <dd>Firefox 3 supports new events that are sent to the source node for a drag operation when the drag begins and ends.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="en-US/docs/Focus_management_in_HTML">Focus management in HTML</a></dt> + <dd>The new HTML 5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Offline_resources_in_Firefox" title="en-US/docs/Offline_resources_in_Firefox">Offline resources in Firefox</a></dt> + <dd>Firefox now lets web applications request that resources be cached to allow the application to be used while offline.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/CSS_improvements_in_Firefox_3" title="en-US/docs/CSS_improvements_in_Firefox_3">CSS improvements in Firefox 3</a></dt> + <dd>Firefox 3 features a number of improvements in its CSS support.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/DOM_improvements_in_Firefox_3" title="en-US/docs/DOM_improvements_in_Firefox_3">DOM improvements in Firefox 3</a></dt> + <dd>Firefox 3 offers a number of new features in Firefox 3's DOM implementation, including support for several Internet Explorer extensions to the DOM.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/New_in_JavaScript_1.8" title="en-US/docs/New_in_JavaScript_1.8">JavaScript 1.8 support</a></dt> + <dd>Firefox 3 offers JavaScript 1.8.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/EXSLT" title="en-US/docs/EXSLT">EXSLT support</a></dt> + <dd>Firefox 3 provides support for a substantial subset of the <a href="/en-US/docs/EXSLT" title="en-US/docs/EXSLT">EXSLT</a> extensions to <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/SVG_improvements_in_Firefox_3" title="en-US/docs/SVG_improvements_in_Firefox_3">SVG improvements in Firefox 3</a></dt> + <dd>SVG support in Firefox 3 has been upgraded significantly, with support for over two dozen new filters, several new elements and attributes, and other improvements.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Animated_PNG_graphics" title="en-US/docs/Animated_PNG_graphics">Animated PNG graphics</a></dt> + <dd>Firefox 3 supports the animated PNG (APNG) image format.</dd> +</dl> + +<h3 id="For_XUL_and_extension_developers" name="For_XUL_and_extension_developers">For XUL and extension developers</h3> + +<h4 id="Notable_changes_and_improvements" name="Notable_changes_and_improvements">Notable changes and improvements</h4> + +<dl> + <dt><a href="/en-US/docs/Updating_extensions_for_Firefox_3" title="en-US/docs/Updating_extensions_for_Firefox_3">Updating extensions for Firefox 3</a></dt> + <dd>Provides a guide to the things you'll need to do to update your extension to work with Firefox 3.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/XUL_improvements_in_Firefox_3" title="en-US/docs/XUL_improvements_in_Firefox_3">XUL improvements in Firefox 3</a></dt> + <dd>Firefox 3 offers a number of new XUL elements, including new sliding scales, the date and time pickers, and spin buttons.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Templates_in_Firefox_3" title="en-US/docs/Templates_in_Firefox_3">Templates in Firefox 3</a></dt> + <dd>Templates have been significantly improved in Firefox 3. The key improvement allows the use of custom query processors to allow data sources other than RDF to be used.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="en-US/docs/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">Securing updates</a></dt> + <dd>In order to provide a more secure add-on upgrade path for users, add-ons are now required to provide a secure method for obtaining updates before they can be installed. Add-ons hosted at <a class="external" href="http://addons.mozilla.org">AMO</a> automatically provide this. Any add-ons installed that do not provide a secure update method when the user upgrades to Firefox 3 will be automatically disabled. Firefox will however continue to check for updates to the extension over the insecure path and attempt to install any update offered (installation will fail if the update also fails to provide a secure update method).</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Places_Developer_Guide" title="en-US/docs/Places_migration_guide">Places migration guide</a></dt> + <dd>An article about how to update an existing extension to use the Places API.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Download_Manager_improvements_in_Firefox_3" title="en-US/docs/Download_Manager_improvements_in_Firefox_3">Download Manager improvements in Firefox 3</a></dt> + <dd>The Firefox 3 Download Manager features new and improved APIs, including support for multiple progress listeners.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/XPCOM_Interface_Reference/Using_nsILoginManager" title="en-US/docs/Using_nsILoginManager">Using nsILoginManager</a></dt> + <dd>The Password Manager has been replaced by the new Login Manager.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/XBL/XBL_1.0_Reference/Elements#binding" title="en-US/docs/XBL/XBL_1.0_Reference/Elements#binding">Embedding XBL bindings</a></dt> + <dd>You can now use the <code>data:</code> URL scheme from chrome code to embed XBL bindings directly instead of having them in separate XML files.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Localizing_extension_descriptions" title="en-US/docs/Localizing_extension_descriptions">Localizing extension descriptions</a></dt> + <dd>Firefox 3 offers a new method for localizing add-on metadata. This lets the localized details be available as soon as the add-on has been downloaded, as well as when the add-on is disabled.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Localization_and_Plurals" title="en-US/docs/Localization_and_Plurals">Localization and Plurals</a></dt> + <dd>Firefox 3 adds the new PluralForm module, which provides tools to aid in correctly pluralizing words in multiple localizations.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Theme_changes_in_Firefox_3" title="en-US/docs/Theme_changes_in_Firefox_3">Theme changes in Firefox 3</a></dt> + <dd>Notes and information of use to people who want to create themes for Firefox 3.</dd> +</dl> + +<h4 id="New_components_and_functionality" name="New_components_and_functionality">New components and functionality</h4> + +<dl> + <dt><a href="/en-US/docs/Toolkit_API/FUEL" title="en-US/docs/FUEL">FUEL Library</a></dt> + <dd>FUEL is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Places" title="en-US/docs/Places">Places</a></dt> + <dd>The history and bookmarks APIs have been completely replaced by the new <a href="/en-US/docs/Places" title="en-US/docs/Places">Places</a> API.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/nsIIdleService" title="en-US/docs/nsIIdleService">Idle service</a></dt> + <dd>Firefox 3 offers the new {{Interface("nsIIdleService")}} interface, which lets extensions determine how long it's been since the user last pressed a key or moved their mouse.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/nsIZipWriter" title="en-US/docs/nsIZipWriter">ZIP writer</a></dt> + <dd>The new {{Interface("nsIZipWriter")}} interface lets extensions create ZIP archives.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Full_page_zoom" title="en-US/docs/Full_page_zoom">Full page zoom</a></dt> + <dd>Firefox 3 improves the user experience by offering full page zoom in addition to text-only zoom.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Interfacing_with_the_XPCOM_cycle_collector" title="en-US/docs/Interfacing_with_the_XPCOM_cycle_collector">Interfacing with the XPCOM cycle collector</a></dt> + <dd>XPCOM code can now take advantage of the cycle collector, which helps ensure that unused memory gets released instead of leaking.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/The_Thread_Manager" title="en-US/docs/The_Thread_Manager">The Thread Manager</a></dt> + <dd>Firefox 3 provides the new {{Interface("nsIThreadManager")}} interface, along with new interfaces for threads and thread events, which provides a convenient way to create and manage threads in your code.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/JavaScript_code_modules" title="en-US/docs/JavaScript_modules">JavaScript modules</a></dt> + <dd>Firefox 3 now offers a new shared code module mechanism that lets you easily create modules in JavaScript that can be loaded by extensions and applications for use, much like shared libraries.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/nsIJSON" title="en-US/docs/nsIJSON">The <code>nsIJSON</code> interface</a></dt> + <dd>Firefox 3 offers the new {{Interface("nsIJSON")}} interface, which offers high-performance encoding and decoding of <a href="/en-US/docs/JSON" title="en-US/docs/JSON">JSON</a> strings.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/XPCOM_Interface_Reference/nsIParentalControlsService" title="en-US/docs/nsIParentalControlsService">The nsIParentalControlsService interface</a></dt> + <dd>Firefox 3 now supports the Microsoft Windows Vista parental controls feature, and allows code to interact with it.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Using_content_preferences" title="en-US/docs/Using_content_preferences">Using content preferences</a></dt> + <dd>Firefox 3 includes a new service for getting and setting arbitrary site-specific preferences that extensions as well as core code can use to keep track of their users' preferences for individual sites.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Monitoring_plugins" title="en-US/docs/Monitoring_plugins">Plug-in Monitoring</a></dt> + <dd>A new component of the plugin system is now available to measure how long it takes plugins (e.g., Macromedia Flash) to execute their calls.</dd> +</dl> + +<h4 id="Fixed_bugs" name="Fixed_bugs">Fixed bugs</h4> + +<dl> + <dt><a href="/en-US/docs/Notable_bugs_fixed_in_Firefox_3" title="en-US/docs/Notable_bugs_fixed_in_Firefox_3">Notable bugs fixed in Firefox 3</a></dt> + <dd>This article provides information about bugs that have been fixed in Firefox 3.</dd> +</dl> + +<h2 id="New_features_for_end_users" name="New_features_for_end_users">New features for end users</h2> + +<h3 id="User_experience" name="User_experience">User experience</h3> + +<ul> + <li><strong>Easier password management.</strong> An information bar at the top of the browser window now appears to allow you to save passwords after a successful login.</li> + <li><strong>Simplified add-on installation.</strong> You can now install extensions from third-party download sites in fewer clicks, thanks to the removal of the add-on download site whitelist.</li> + <li><strong>New Download Manager.</strong> The download manager makes it easier to locate your downloaded files.</li> + <li><strong>Resumable downloads.</strong> You can now resume downloads after restarting the browser or resetting your network connection.</li> + <li><strong>Full page zoom.</strong> From the View menu and using keyboard shortcuts, you can now zoom in and out on the content of entire pages -- this scales not just the text but the layout and images as well.</li> + <li><strong>Tab scrolling and quickmenu.</strong> Tabs are easier to locate with the new tab scrolling and tab quickmenu features.</li> + <li><strong>Save what you were doing.</strong> Firefox 3 prompts you to see if you'd like to save your current tabs when you exit Firefox.</li> + <li><strong>Optimized Open in Tabs behavior.</strong> Opening a folder of bookmarks in tabs now appends the new tabs instead of replacing the existing ones.</li> + <li><strong>Easier to resize location and search bars.</strong> You can now easily resize the location and search bars using a simple resize handle between them.</li> + <li><strong>Text selection improvements.</strong> You can now select multiple ranges of text using the Control (Command on Macintosh) key. Double-clicking and dragging now selects in "word-by-word" mode. Triple-clicking selects an entire paragraph.</li> + <li><strong>Find toolbar.</strong> The Find toolbar now opens with the current selection.</li> + <li><strong>Plugin management.</strong> Users can now disable individual plugins in the Add-on Manager.</li> + <li><strong>Integration with Windows Vista.</strong> Firefox's menus now display using Vista's native theme.</li> + <li><strong>Integration with Mac OS X.</strong> Firefox now supports <a class="external" href="http://growl.info/">Growl</a> for notifications of completed downloads and available updates.</li> + <li><strong>Star button.</strong> The new star button in the location bar lets you quickly add a new bookmark with a single click. A second click lets you file and tag your new bookmark.</li> + <li><strong>Tags.</strong> You can now associate keywords with your bookmarks to easily sort them by topic.</li> + <li><strong>Location bar and auto-complete.</strong> Type the title or tag of a page in the location bar to quickly find the site you were looking for in your history and bookmarks. Favicons, bookmark, and tag indicators help you see where the results are coming from.</li> + <li><strong>Smart Bookmarks folder.</strong> Firefox's new Smart Bookmarks folder offers quick access to your recently bookmarked and tagged places, as well as pages you visit frequently.</li> + <li><strong>Bookmarks and History Organizer.</strong> The new unified bookmarks and history organizer lets you easily search your history and bookmarks with multiple views and smart folders for saving your frequent searches.</li> + <li><strong>Web-based protocol handlers.</strong> Web applications, such as your favorite web mail provider, can now be used instead of desktop applications for handling <code>mailto:</code> links from other sites. Similar support is provided for other protocols as well. (Note that web applications do have to register themselves with Firefox before this will work.)</li> + <li><strong>Easy to use Download Actions.</strong> A new Applications preferences pane provides an improved user interface for configuring handlers for various file types and protocol schemes.</li> + <li><strong>Improved look and feel.</strong> Graphics and font handling have been improved to make web sites look better on your screen, including sharper text rendering and better support for fonts with ligatures and complex scripts. In addition, Mac and Linux (Gnome) users will find that Firefox feels more like a native application for their platform than ever, with a new, native, look and feel.</li> + <li><strong>Color management support.</strong> By setting the <code>gfx.color_management.enabled</code> preference in <code>{{mediawiki.external('about:config')}}</code>, you can ask Firefox to use the color profiles embedded in images to adjust the colors to match your computer's display.</li> + <li><strong>Offline support.</strong> Web applications can take advantage of new features to support being used even when you don't have an Internet connection.</li> +</ul> + +<h3 id="Security_and_privacy" name="Security_and_privacy">Security and privacy</h3> + +<ul> + <li><strong>One-click site information.</strong> Want to know more about the site you're visiting? Click the site's icon in the location bar to see who owns it. Identify information is prominently displayed and easier than ever to understand.</li> + <li><strong>Malware protection.</strong> Firefox 3 warns you if you arrive at a web site that is known to install viruses, spyware, trojans, or other dangerous software (known as malware). You can see what the warning looks like by <a class="link-https" href="https://www.mozilla.com/firefox/its-an-attack.html">clicking here</a>.</li> + <li><strong>Web forgery protection enhanced.</strong> Now when you visit a page that's suspected of being a forgery, you're shown a special page instead of the contents of the page with a warning. <a class="link-https" href="https://www.mozilla.com/firefox/its-a-trap.html">Click here</a> to see what it looks like.</li> + <li><strong>Easier to understand SSL errors.</strong> The errors presented when an invalid SSL certificate is encountered have been clarified to make it easier to understand what the problem is.</li> + <li><strong>Out-of-date add-on protection.</strong> Firefox 3 now automatically checks add-on and plugin versions and disables older, insecure versions.</li> + <li><strong>Secure add-on updates.</strong> Add-on update security has been improved by disallowing add-ons that use an insecure update mechanism.</li> + <li><strong>Anti-virus integration.</strong> Firefox 3 now informs anti-virus software when executable files are downloaded.</li> + <li><strong>Windows Vista parental controls support.</strong> Firefox 3 supports the Vista system-wide parental control setting for disabling file downloads.</li> +</ul> + +<h3 id="Performance" name="Performance">Performance</h3> + +<ul> + <li><strong>Reliability.</strong> Firefox 3 now stores bookmarks, history, cookies, and preferences in a transactionally secure database format. This means your data is protected against loss even if your system crashes.</li> + <li><strong>Speed.</strong> Firefox 3 has gotten a performance boost by completely replacing the part of the software that handles drawing to your screen, as well as to how page layout work is handled.</li> + <li><strong>Memory use reduced.</strong> Firefox 3 is more memory efficient than ever, with over 300 memory "leak" bugs fixed and new features to help automatically locate and dispose of leaked memory blocks.</li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<div>{{Firefox_for_developers('2')}}</div> diff --git a/files/ko/mozilla/firefox/releases/66/index.html b/files/ko/mozilla/firefox/releases/66/index.html new file mode 100644 index 0000000000..242b1b0ce6 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/66/index.html @@ -0,0 +1,157 @@ +--- +title: Firefox 66 for developers +slug: Mozilla/Firefox/Releases/66 +translation_of: Mozilla/Firefox/Releases/66 +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">본 문서는, 개발자를 대상으로 Firefox 66에서 변경된 내용을 알려드립니다.</p> + +<h2 id="웹_개발자를_위한_변경사항">웹 개발자를 위한 변경사항</h2> + +<h3 id="개발자_도구">개발자 도구</h3> + +<ul> + <li>JavaScript getters can now be executed from the auto-completion popup in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> ({{bug(1499289)}}).</li> + <li>The Window methods {{domxref("Window.alert()", "alert()")}}, {{domxref("Window.prompt()","prompt()")}}, and {{domxref("Window.confirm()","confirm()")}} now work again in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>, after a period of being broken ({{bug(1273997)}}).</li> + <li>You can copy the output of the console to the clipboard by right-clicking and selecting "<strong>Export visible messages to clipboard</strong>" from the context menu.</li> +</ul> + +<h3 id="HTML">HTML</h3> + +<ul> + <li>UTF-8-encoded HTML (and plain text) files loaded from <code>file:</code> URLs are now supported without <code><meta charset="utf-8"></code> or the UTF-8 BOM, making it easier to work on such files locally before uploading them to a server. You still need to make sure that the server sends <code>charset=utf-8</code> in the <code>Content-Type</code> HTTP header for such files, otherwise the detection mechanism used for local files would break incremental loading in the network case ({{bug(1071816)}}).</li> +</ul> + +<h4 id="제거사항">제거사항</h4> + +<ul> + <li>The <code>x-moz-errormessage</code> attribute has been removed from the {{HTMLElement("input")}} element ({{bug(1513890)}}). You should use {{domxref("Constraint_validation", "Constraint validation features", "", "1")}} to implement custom validation messages instead.</li> +</ul> + +<h3 id="CSS">CSS</h3> + +<ul> + <li><a href="https://drafts.csswg.org/css-scroll-anchoring/">Scroll anchoring</a> has been implemented in Firefox Desktop (but not mobile yet), which includes the {{cssxref("overflow-anchor")}} property ({{bug(1305957)}}).</li> + <li>We've implemented the case-sensitive <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> modifier, <code>s</code> ({{Bug(1512386)}}).</li> + <li>Several <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical property</a> shorthands have landed, along with the flow-relative border radius properties: + <ul> + <li>{{cssxref("padding-block")}} and {{cssxref("padding-inline")}} ({{bug(1519847)}}).</li> + <li>{{cssxref("margin-block")}} and {{cssxref("margin-inline")}} ({{bug(1519944)}}).</li> + <li>{{cssxref("inset")}}, {{cssxref("inset-block")}}, and {{cssxref("inset-inline")}} ({{bug(1520229)}}).</li> + <li>{{cssxref("border-block-color")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-width")}}, {{cssxref("border-inline-color")}}, {{cssxref("border-inline-style")}}, and {{cssxref("border-inline-width")}} ({{bug(1520236)}}).</li> + <li>{{cssxref("border-block")}} and {{cssxref("border-inline")}} ({{bug(1520396)}}).</li> + <li>{{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, and {{cssxref("border-end-end-radius")}} ({{bug(1520684)}}).</li> + </ul> + </li> + <li>We implemented the {{cssxref("@media/overflow-inline", "overflow-inline")}} and {{cssxref("@media/overflow-block", "overflow-block")}} media queries ({{Bug(1422235)}}).</li> + <li>{{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} are now animatable, as per the rules set out in their specs ({{bug(1348519)}}).</li> + <li>We now support {{cssxref("calc")}} with percentages for table cells and column widths ({{bug(957915)}}).</li> + <li>The <code>min-content</code> and <code>max-content</code> keywords are now available unprefixed ({{bug(1322780)}}). These can be set on: + <ul> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("min-width")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("min-block-size")}}</li> + <li>{{cssxref("min-inline-size")}}</li> + <li>{{cssxref("max-block-size")}}</li> + <li>{{cssxref("max-inline-size")}}</li> + <li>{{cssxref("block-size")}}</li> + <li>{{cssxref("inline-size")}}</li> + </ul> + </li> +</ul> + +<h3 id="SVG">SVG</h3> + +<p><em>추가사항 없음.</em></p> + +<h4 id="제거사항_2">제거사항</h4> + +<ul> + <li><code><a href="/en-US/docs/XML_introduction/xml:base">xml:base</a></code> 속성의 지원이 제거되었습니다. ({{Bug(903372)}})</li> +</ul> + +<h3 id="JavaScript">JavaScript</h3> + +<p><em>변경사항 없음.</em></p> + +<h3 id="API">API</h3> + +<h4 id="New_APIschanges">New APIs/changes</h4> + +<ul> + <li>Autoplaying audio will be blocked by default soon after 66 becomes the release version of Firefox ({{bug(1487844)}}, see {{bug(1535667)}} for rollout details). The feature will be rolled out gradually to users until everyone has it.</li> +</ul> + +<h4 id="DOM">DOM</h4> + +<ul> + <li>The {{domxref("HTMLSlotElement.assignedElements()")}} method has been implemented ({{bug(1425685)}}).</li> + <li>The {{domxref("TextEncoder.encodeInto()")}} method has been implemented ({{bug(1514664)}}).</li> +</ul> + +<h4 id="DOM_events">DOM events</h4> + +<ul> + <li>The {{domxref("InputEvent.inputType")}} property has been implemented ({{bug(1447239)}}).</li> + <li>The {{domxref("Window.event")}} and {{domxref("Event.returnValue")}} properties — originally proprietary IE features, then also supported across other browsers for compatibility purposes — have been re-introduced in Firefox 66, after first being added in versions 63 and 64 respectively but then removed again due to compatibility issues. </li> + <li>From 66 onwards, when the {{domxref("KeyboardEvent.keyCode")}} property of the {{event("keypress")}} event object is 0, the value will be the same as {{domxref("KeyboardEvent.charCode")}}. Conversely, when <code>charCode</code> is 0, it will be the same as <code>keyCode</code>. This mirroring behavior matches other browsers and is expected to solve most associated compatibility issues, however user agent sniffing might cause further issues in some JavaScript libraries. Note that in spec terms, we've switched from the <em>split model</em> to the <em>conflated model</em> (see <a href="https://w3c.github.io/uievents/#determine-keypress-keyCode">How to determine keyCode for keypress events</a> in the UI Event spec).</li> +</ul> + +<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> + +<ul> + <li>The {{domxref("MediaDevices")}} method {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, available as <code>navigator.mediaDevices.getDisplayMedia()</code>, has been added and synchronized with the specification. This method lets you capture a screen or part of a screen as a {{domxref("MediaStream")}} for manipulation or sharing ({{bug(1321221)}}).</li> + <li>As a step toward eventually deprecating the Firefox-specific {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}-based method for capturing screen and window contents, the non-standard <code>mediaSource</code> constraint now treats the values <code>screen</code> and <code>window</code> identically. Both now present a list of both screens and windows for the user to choose from ({{bug(1474376)}}).</li> + <li>{{domxref("RTCRtpStreamStats.qpSum", "qpSum")}} has been added to local outbound {{domxref("RTCRTPStreamStats")}} objects. This measures the total of the Quantization Parameter values for every frame sent or received on the video track. The higher this number, the more compressed the stream probably is ({{bug(1347070)}}).</li> + <li>In a step along the road toward implementing support for Feature Policy in a future Firefox update, {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} can no longer be used in situations in which there is no proper origin for the content, such as when called from a sandboxed {{HTMLElement("iframe")}} or from a <code>data</code> URL entered into the address bar by the user. For more specifics and details, see {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Security")}} ({{bug(1371741)}}).</li> +</ul> + +<h4 id="제거사항_3">제거사항</h4> + +<ul> + <li>The legacy WebRTC {{domxref("PeerConnection.getStats()")}} method has been removed, along with associated types ({{bug(1328194)}}).</li> +</ul> + +<h3 id="Networking">Networking</h3> + +<ul> + <li>{{httpheader("Accept")}} 헤더의 기본 값이 <code>*/*</code>로 변경되었습니다. ({{bug(1417463)}})</li> +</ul> + +<h3 id="보안">보안</h3> + +<p><em>변경사항 없음.</em></p> + +<h3 id="플러그인">플러그인</h3> + +<p><em>변경사항 없음.</em></p> + +<h2 id="애드온_개발자를_위한_변경사항">애드온 개발자를 위한 변경사항</h2> + +<h3 id="API_변화">API 변화</h3> + +<h4 id="Menus">Menus</h4> + +<ul> + <li>Extension menu items of the "bookmark" {{WebExtAPIRef("menus.ContextType", "type")}} will also appear in the Bookmarks sidebar (<kbd>Ctrl</kbd> + <kbd>B</kbd>) and Library window (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) ({{bug(1419195)}}).</li> +</ul> + +<h3 id="Manifest_changes">Manifest changes</h3> + +<p><em>No changes.</em></p> + +<h2 id="함께_보기">함께 보기</h2> + +<ul> + <li><a href="https://www.fxsitecompat.com/en-CA/versions/66/">Site compatibility for Firefox 66</a></li> +</ul> + +<h2 id="구_버젼">구 버젼</h2> + +<p>{{Firefox_for_developers(65)}}</p> diff --git a/files/ko/mozilla/firefox/releases/index.html b/files/ko/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..7caccc67f2 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/index.html @@ -0,0 +1,23 @@ +--- +title: Firefox 개발자 배포노트 +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - Landing + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases +--- +<div>{{FirefoxSidebar}}</div> + +<p class="summary">아래에는 모든 Firefox 배포에 대한 개발자 배포 정보에 대한 링크가 나와 있습니다. 이 사랑스럽게 만들어진 노트들은 어떤 기능과 API가 추가되고 개선되었는지, 그리고 각 버전의 Firefox에서 어떤 버그가 제거되었는지에 대한 세부사항을 제공합니다. 모두 여러분과 같은 개발자들이 가장 필요로 하는 정보를 제공하기 위해 작성되되어 있습니다. 감사합니다.</p> + +<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div> + +<p>어휴! Firefoxen이 엄청 많잔아!</p> + +<h2 id="더보기">더보기</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Thunderbird/Releases">Thunderbird developer release notes</a></li> +</ul> diff --git a/files/ko/mozilla/http_cache/index.html b/files/ko/mozilla/http_cache/index.html new file mode 100644 index 0000000000..8613350f2d --- /dev/null +++ b/files/ko/mozilla/http_cache/index.html @@ -0,0 +1,483 @@ +--- +title: HTTP 캐시 +slug: Mozilla/HTTP_cache +translation_of: Mozilla/HTTP_cache +--- +<div class="geckoVersionNote"> +<p style="margin-bottom: 0in;">이 문서는 <strong>새로운 HTTP 캐시 version 2</strong>를 기술하고 있습니다.</p> +</div> + +<p style="margin-bottom: 0in;"> </p> + +<p style="margin-bottom: 0in;">코드는 <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/">/network/cache2</a> 에 존재합니다.</p> + +<p style="margin-bottom: 0in;"> </p> + +<h2 id="API" style="margin-bottom: 0in;">API</h2> + +<p>다음은 HTTP 캐시 v2 API에 대한 자세한 설명으로, 예제들을 포함하고 있습니다. 이 문서에는 <a href="http://mxr.mozilla.org/mozilla-central/find?text=&string=cache2/nsICache">IDL files</a> 주석에서 찾을 수 없거나 명시되지 않은 내용만 들어있습니다.</p> + +<ul> + <li>캐시 API는 완벽하게 <strong>스레드로부터 안전</strong>하며 <strong>블록킹이 없습니다</strong>.</li> + <li><strong>IPC 지원</strong>은 <strong>없습니다</strong>. 기본 크롬 프로세스에서만 액세스할 수 있습니다.</li> + <li>프로파일이 없으면 새로운 HTTP 캐시가 작동하지만, 모든 것은 어떤 특정 제한도 따르지 않는 메모리에만 저장됩니다.</li> +</ul> + +<div class="warning"> +<p><code>nsICacheService</code> 등의 <strong>오래된</strong> 캐시 API를 더 이상 <strong>사용하지 말 것</strong>을 적극 권장합니다. 이는 곧 완전히 폐기되고 제거될 것입니다. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913828">bug 913828</a>).</p> +</div> + +<h3 id="nsICacheStorageService_2" style="margin-bottom: 0in;"><a name="nsICacheStorageService"><strong>nsICacheStorageService</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;">HTTP 캐시 엔트리 포인트입니다. 서비스로만 액세스 가능하며, 스레드로부터 안전하고 스크립팅 가능합니다.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="display: none;"> </span><code><span style="color: #b22222;">"@mozilla.org/netwerk/cache-storage-service;1"</span></code></p> + </li> + <li> + <p style="margin-bottom: 0in;">특정 URL마다 캐시 항목에 대한 추가 액세스 – 아래 <a href="#nsICacheStorage"><code>nsICacheEntry</code></a> 참조 – 를 제공하는 “storage”(“저장소”) 객체 – 아래 <code><a href="#nsICacheStorage">nsICacheStorage</a></code> 참조 – 에 액세스하는 메소드를 제공합니다.</p> + </li> + <li> + <p style="margin-bottom: 0in;">현재 저장소는 3가지 유형이 있으며, 모든 액세스 메소드는 <a href="#nsICacheStorage"><code>nsICacheStorage</code></a>를 반환(return)합니다. :</p> + + <ul> + <li> + <p style="margin-bottom: 0in;"><strong>메모리-온리 </strong>(<code>memoryCacheStorage</code>): 데이터를 메모리 캐시에만 저장하며, 이 저장소의 데이터는 절대로 디스크에 저장되지 않습니다.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><strong>디스크</strong> (<code>diskCacheStorage</code>): 디스크에 데이터를 저장하지만, 기존 항목의 경우 <u>memory-only storage도 검색합니다</u>; 특수한 인수(argument)를 통해 지시를 받으면 <u>애플리케이션 캐시 또한 주로 검색합니다</u>.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><strong>애플리케이션 캐시 </strong>(<code>appCacheStorage</code>): 컨슈머가 특정 <code>nsIApplicationCache</code> (즉, 한 그룹의 특정 앱 캐시 버전)를 가지고 있을 때, 이 저장소는 애플리케이션 캐시 항목에 대한 읽기 및 쓰기 권한을 제공합니다.; 앱 캐시가 특정되지 않았다면, 저장소는 기존의 모든 앱 캐시에서 작동합니다.</p> + </li> + </ul> + </li> + <li> + <p style="margin-bottom: 0in;">The service also provides methods to clear the whole disk and memory cache content or purge any intermediate memory structures:</p> + + <ul> + <li> + <p style="margin-bottom: 0in;"><code>clear </code>– after it returns, all entries are no longer accessible through the cache APIs; the method is fast to execute and non-blocking in any way; the actual erase happens in background</p> + </li> + <li> + <p style="margin-bottom: 0in;"><code>purgeFromMemory </code>– removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the <a href="#Intermediate_memory_caching">intermediate cache</a> below)</p> + </li> + </ul> + </li> +</ul> + +<h3 id="nsILoadContextInfo_2" style="margin-bottom: 0in;"><a name="nsILoadContextInfo">nsILoadContextInfo</a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;">Distinguishes the scope of the storage demanded to open.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Mandatory argument to <code>*Storage</code> methods of <code>nsICacheStorageService</code>.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">It is a</span><span style="font-weight: normal;"> helper interface wrapping following four arguments into a single one:</span></p> + + <ul> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>private-browsing</strong> boolean flag</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>anonymous load</strong> boolean flag</p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>app ID</strong> number (<code>0</code> for no app)</span></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>is-in-browser</strong> boolean flag</span></p> + </li> + </ul> + </li> + <li> + <div class="note"> + <p style="margin-bottom: 0in;">Helper functions to create nsILoadContextInfo objects:</p> + + <ul> + <li> + <p style="margin-bottom: 0in;">C++ consumers: functions at <code>LoadContextInfo.h</code> exported header</p> + </li> + <li> + <p style="margin-bottom: 0in;">JS consumers: <code>resource://gre/modules/LoadContextInfo.jsm</code> module methods</p> + </li> + </ul> + </div> + </li> + <li> + <p style="margin-bottom: 0in;">Two storage objects created with the same set of <code>nsILoadContextInfo </code>arguments are identical, containing the same cache entries.</p> + </li> + <li> + <p style="margin-bottom: 0in;">Two storage objects created with in any way different <code>nsILoadContextInfo </code>arguments are strictly and completely distinct and cache entries in them do not overlap even when having the same URIs.</p> + </li> +</ul> + +<h3 id="nsICacheStorage_2" style="margin-bottom: 0in;"><a name="nsICacheStorage"><strong>nsICacheStorage</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl"><span style="font-weight: normal;">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl</span></a></p> + </li> + <li> + <p style="margin-bottom: 0in;">Obtained from call to one of the <code>*Storage</code> methods on <a href="#nsICacheStorageService"><code>nsICacheStorageService</code></a>.</p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Represents a distinct storage area (or scope) to put and get cache entries mapped by URLs into and from it.</span></p> + </li> + <li> + <p style="margin-bottom: 0in;"><em><span style="font-weight: normal;">Similarity with the old cache</span></em><span style="font-weight: normal;">: this interface may be with some limitations considered as a mirror to <code>nsICacheSession</code>, but less generic and not inclining to abuse.</span></p> + </li> + <li> + <div class="warning"> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>Unimplemented or underimplemented functionality:</strong></span></p> + + <p><span style="font-weight: normal;">asyncEvictStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977766">bug 977766</a>)</span>, asyncVisitStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916052">bug 916052</a>)</p> + </div> + </li> +</ul> + +<h3 id="nsICacheEntryOpenCallback_2" style="margin-bottom: 0in;"><a name="nsICacheEntryOpenCallback"><strong>nsICacheEntryOpenCallback</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in; font-weight: normal;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">The result of <code>nsICacheStorage.asyncOpenURI</code> is always and only sent to callbacks on this interface.</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">These callbacks are ensured to be invoked when <code>asyncOpenURI</code> returns <code>NS_OK</code>.</p> + </li> + <li> + <div class="warning"> + <p style="margin-bottom: 0in; font-weight: normal;"><strong>Important difference in behavior from the old cache:</strong> when the cache entry object is already present in memory or open as “force-new” (a.k.a “open-truncate”) this callback is invoked sooner then the <code>asyncOpenURI </code>method returns (i.e. immediately); there is currently no way to opt out of this feature (watch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=938186">bug 938186</a>).</p> + </div> + </li> +</ul> + +<h3 id="nsICacheEntry_2" style="margin-bottom: 0in;"><a name="nsICacheEntry"><strong>nsICacheEntry</strong></a></h3> + +<ul> + <li> + <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl</a></p> + </li> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Obtained asynchronously or pseudo-asynchronously by a call to <code><a href="#nsICacheStorage">nsICacheStorage</a>.asyncOpenURI</code>.</span></p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Provides access to a cached entry data and meta data for reading or writing or in some cases both, see below.</p> + </li> +</ul> + +<h4 id="Lifetime_of_a_new_entry">Lifetime of a new entry</h4> + +<ul> + <li> + <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Such entry is initially empty (no data or meta data is stored in it).</span></p> + </li> + <li> + <p style="margin-bottom: 0in;">The <code>aNew </code>argument in <code>onCacheEntryAvailable</code> is <code>true</code> for and only for new entries.</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Only one consumer (the so called "<em>writer</em>") may have such an entry available (obtained via <code>onCacheEntryAvailable</code>).</p> + </li> + <li> + <p style="margin-bottom: 0in; font-weight: normal;">Other parallel openers of the same cache entry are blocked (wait) for invocation of their <code>onCacheEntryAvailable</code> until one of the following occurs:</p> + + <ul> + <li>The <em>writer </em>simply throws the entry away: other waiting opener in line gets the entry again as "<em>new</em>", the cycle repeats. + + <div class="note"> + <p>This applies in general, writers throwing away the cache entry means a failure to write the cache entry and a new writer is being looked for again, the cache entry remains empty (a.k.a. "new").</p> + </div> + </li> + <li>The <em>writer </em>stored all necessary meta data in the cache entry and called <code>metaDataReady</code> on it: other consumers now get the entry and may examine and potentially modify the meta data and read the data (if any) of the cache entry.</li> + <li>When the <em>writer</em> has data (i.e. the response payload) to write to the cache entry, it <strong>must </strong>open the output stream on it <strong>before </strong>it calls <code>metaDataReady</code>.</li> + </ul> + </li> + <li>When the <em>writer</em> still keeps the cache entry and has open and keeps open the output stream on it, other consumers may open input streams on the entry. The data will be available as the <em>writer</em> writes data to the cache entry's output stream immediately, even before the output stream is closed. This is called <a href="#Concurrent_read_and_write"><strong>concurrent read/write</strong></a>.</li> +</ul> + +<h4 id="Concurrent_read_and_write" style="margin-bottom: 0in; font-weight: normal;"><a name="Concurrent read and write">Concurrent read and write</a></h4> + +<div class="warning"> +<p><strong>Important difference in behavior from the old cache:</strong> the cache now supports reading a cache entry data while it is still being written by the first consumer - the <em>writer</em>.</p> +</div> + +<p>This can only be engaged for resumable responses that (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960902#c17">bug 960902</a>) don't need revalidation. Reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.</p> + +<div class="note"> +<p>This could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled.</p> +</div> + +<p>When the <em>writer</em> is interrupted, the first concurrent <em>reader</em> in line does a range request for the rest of the data - and becomes that way a new <em>writer</em>. The rest of the <em>readers</em> are still concurrently reading the content since output stream for the cache entry is again open and kept by the current <em>writer</em>.</p> + +<h4 id="Lifetime_of_an_existing_entry_with_only_a_partial_content" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry with only a partial content</h4> + +<ul> + <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where it has to be checked for completeness.</li> + <li>In this case, the <code>Content-Length</code> (or different indicator) header doesn't equal to the data size reported by the cache entry.</li> + <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li> + <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li> + <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li> + <li>The consumer is then responsible to validate the partial content cache entry with the network server and attempt to load the rest of the data.</li> + <li>When the server responds positively (in case of an HTTP server with a 206 response code) the <em>writer </em>(in this order) opens the output stream on the cache entry and calls <code>setValid</code> to unblock other pending openers.</li> + <li>Concurrent read/write is engaged.</li> +</ul> + +<h4 id="Lifetime_of_an_existing_entry_that_doesn't_pass_server_revalidation" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry that doesn't pass server revalidation</h4> + +<ul> + <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where the consumer finds out it must be revalidated with the server before use.</li> + <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li> + <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li> + <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li> + <li>The consumer is then responsible to validate the partial content cache entry with the network server.</li> + <li>The server responses with a 200 response which means the cached content is no longer valid and a new version must be loaded from the network.</li> + <li>The <em>writer</em> then calls <code>recreate </code>on the cache entry. This returns a new empty entry to write the meta data and data to, the <em>writer</em> exchanges its cache entry by this new one and handles it as a new one.</li> + <li>The <em>writer</em> then (in this order) fills the necessary meta data of the cache entry, opens the output stream on it and calls <code>metaDataReady</code> on it.</li> + <li>Any other pending openers, if any, are now given this new entry to examine and read as an existing entry.</li> +</ul> + +<h3 id="Adding_a_new_storage" style="margin-bottom: 0in;">Adding a new storage</h3> + +<p>Should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways:</p> + +<ol> + <li><em>[preffered]</em> Add a new <code><Your>Storage</code> method on <code>nsICacheStorageService</code> and if needed give it any arguments to specify the storage scope even more. Implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - <code>nsICacheStorage</code> implementations to carry any additional information down to the cache service.</li> + <li><em>[<strong>not</strong> preferred]</em> Add a new argument to <a href="#nsILoadContextInfo"><code>nsILoadContextInfo</code></a>; <strong>be careful here</strong>, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. Adding more distinction to <code>nsILoadContextInfo</code> also affects all existing storages which may not be always desirable.</li> +</ol> + +<p>See context keying details for more information.</p> + +<h3 id="Code_examples">Code examples</h3> + +<p>TBD</p> + +<h4 id="Opening_an_entry">Opening an entry</h4> + +<h4 id="Creating_a_new_entry">Creating a new entry</h4> + +<h4 id="Recreating_an_already_open_entry">Recreating an already open entry</h4> + +<h2 id="Implementation">Implementation</h2> + +<h3 id="Threading">Threading</h3> + +<p>The cache API is fully thread-safe.</p> + +<p>The cache is using a single background thread where any IO operations like opening, reading, writing and erasing happen. Also memory pool management, eviction, visiting loops happen on this thread.</p> + +<p>The thread supports several priority levels. Dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of 1000 files will not block opening cache entries.</p> + +<ol> + <li><strong>OPEN_PRIORITY:</strong> except opening priority cache files also file dooming happens here to prevent races</li> + <li><strong>READ_PRIORITY:</strong> top level documents and head blocking script cache files are open and read as the first</li> + <li><strong>OPEN</strong></li> + <li><strong>READ:</strong> any normal priority content, such as images are open and read here</li> + <li><strong>WRITE:</strong> writes are processed as last, we cache data in memory in the mean time</li> + <li><strong>MANAGEMENT:</strong> level for the memory pool and CacheEntry background operations</li> + <li><strong>CLOSE:</strong> file closing level</li> + <li><strong>INDEX:</strong> index is being rebuild here</li> + <li><strong>EVICT:</strong> files overreaching the disk space consumption limit are being evicted here</li> +</ol> + +<p>NOTE: Special case for eviction - when an eviction is scheduled on the IO thread, all operations pending on the OPEN level are first merged to the OPEN_PRIORITY level. The eviction preparation operation - i.e. clearing of the internal IO state - is then put to the end of the OPEN_PRIORITY level. All this happens atomically. This functionality is currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=976866">bug 976866</a>.</p> + +<h3 id="Storage_and_entries_scopes">Storage and entries scopes</h3> + +<p>A <em>scope key</em> string used to map the storage scope is based on the arguments of <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code>. The form is following (currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968593">bug 968593</a>):</p> + +<pre class="bz_comment_text" id="comment_text_0">a,b,i1009,p,</pre> + +<ul> + <li>Regular expression: <code>(.([^,]+)?,)*</code></li> + <li>The first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ','</li> + <li>a - when present the scope is belonging to an <strong>anonymous</strong> load</li> + <li>b - when present the scope is <strong>in browser element</strong> load</li> + <li>i - when present must have a decimal integer value that represents an app ID the scope belongs to, otherwise there is no app (app ID is considered <code>0</code>)</li> + <li>p - when present the scope is of a <strong>private browsing </strong>load, this never persists</li> +</ul> + +<p><code><strong>CacheStorageService </strong></code>keeps a global hashtable mapped by the <em>scope key</em>. Elements in this global hashtable are hashtables of cache entries. The cache entries are mapped by concantation of Enhance ID and URI passed to <code>nsICacheStorage.asyncOpenURI</code>. So that when an entry is beeing looked up, first the global hashtable is searched using the <em>scope key</em>. An entries hashtable is found. Then this entries hashtable is searched using <enhance-id:><uri> string. The elemets in this hashtable are CacheEntry classes, see below.</p> + +<p>The hash tables keep a strong reference to <code>CacheEntry</code> objects. The only way to remove <code>CacheEntry</code> objects from memory is by exhausting a memory limit for <a href="##Intermediate_memory_caching">intermediate memory caching</a>, what triggers a background process of purging expired and then least used entries from memory. Another way is to directly call the <code>nsICacheStorageService.purge </code>method. That method is also called automatically on the <span style="color: #b22222;"><code>"memory-pressure"</code></span> indication.</p> + +<p>Access to the hashtables is protected by a global lock. We also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. The open callback actually doesn't give the consumer directly the <code>CacheEntry</code> object but a small wrapper class that manages the 'consumer reference counter' on its cache entry. This both mechanisms ensure thread-safe access and also inability to have more then a single instance of a <code>CacheEntry</code> for a single <scope+enhanceID+URL> key.</p> + +<p><code><strong>CacheStorage</strong></code>, implementing the <code><a href="#nsICacheStorage">nsICacheStorage</a></code> interface, is forwarding all calls to internal methods of <code>CacheStorageService</code> passing itself as an argument. <code>CacheStorageService</code> then generates the <em>scope key</em> using the <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code> of the storage. <span style="color: #696969;">Note: CacheStorage keeps a thread-safe copy of <code>nsILoadContextInfo</code> passed to a <code>*Storage</code> method on <code>nsICacheStorageService</code>.</span></p> + +<h3 id="Invoking_open_callbacks">Invoking open callbacks</h3> + +<p><code><strong>CacheEntry</strong></code>, implementing the <code><a href="#nsICacheEntry">nsICacheEntry</a></code> interface, is responsible for managing the cache entry internal state and to properly invoke <code>onCacheEntryCheck</code> and <code>onCacheEntryAvaiable</code> callbacks to all callers of <code>nsICacheStorage.asyncOpenURI</code>.</p> + +<ul> + <li>Keeps a FIFO of all openers.</li> + <li>Keeps its internal state like NOTLOADED, LOADING, EMPTY, WRITING, READY, REVALIDATING.</li> + <li>Keeps the number of consumers keeping a reference to it.</li> + <li>Refers a <code>CacheFile</code> object that holds actual data and meta data and, when told to, persists it to the disk.</li> +</ul> + +<p>The openers FIFO is an array of <code>CacheEntry::Callback</code> objects. <code>CacheEntry::Callback</code> keeps a strong reference to the opener plus the opening flags. <code>nsICacheStorage.asyncOpenURI</code> forwards to <code>CacheEntry::AsyncOpen</code> and triggers the following pseudo-code:</p> + +<p><a name="CacheStorage::AsyncOpenURI"><strong>CacheStorage::AsyncOpenURI - the API entry point</strong></a>:</p> + +<ul> + <li>globally atomic: + <ul> + <li>look a given <code>CacheEntry</code> in <code>CacheStorageService</code> hash tables up</li> + <li>if not found: create a new one, add it to the proper hash table and set its state to NOTLOADED</li> + <li>consumer reference ++</li> + </ul> + </li> + <li>call to <a href="#CacheEntry::AsyncOpen">CacheEntry::AsyncOpen</a></li> + <li>consumer reference --</li> +</ul> + +<p><a name="CacheEntry::AsyncOpen"><strong>CacheEntry::AsyncOpen</strong> (entry atomic)</a>:</p> + +<ul> + <li>the opener is added to FIFO, consumer reference ++ (dropped back after an opener is removed from the FIFO)</li> + <li>state == NOTLOADED: + <ul> + <li>state = LOADING</li> + <li>when OPEN_TRUNCATE flag was used: + <ul> + <li><code>CacheFile</code> is created as 'new', state = EMPTY</li> + </ul> + </li> + <li>otherwise: + <ul> + <li><code>CacheFile</code> is created and load on it started</li> + <li><code><a href="#CacheEntry::OnFileReady">CacheEntry::OnFileReady</a></code> notification is now expected</li> + </ul> + </li> + </ul> + </li> + <li>state == LOADING: just do nothing and exit</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><a name="CacheEntry::InvokeCallbacks"><strong>CacheEntry::InvokeCallbacks</strong> (entry atomic):</a></p> + +<ul> + <li>called on: + <ul> + <li>a new opener has been added to the FIFO via an <code><strong><a href="#CacheEntry::AsyncOpen">AsyncOpen</a></strong></code> call</li> + <li>asynchronous result of <a href="#CacheEntry::OnFileReady"><strong><code>CacheFile</code> open</strong></a></li> + <li>the <a href="#CacheEntry::OnHandleClosed"><strong><em>writer</em> throws the entry away</strong></a></li> + <li>the <strong>output stream </strong>of the entry has been <strong>opened </strong>or <strong>closed</strong></li> + <li><code><strong>metaDataReady </strong></code>or <code><strong>setValid </strong></code>on the entry has been called</li> + <li>the entry has been <strong>doomed</strong></li> + </ul> + </li> + <li>state == EMPTY: + <ul> + <li>on OPER_READONLY flag use: onCacheEntryAvailable with <code>null </code>for the cache entry</li> + <li>otherwise: + <ul> + <li>state = WRITING</li> + <li>opener is removed from the FIFO and remembered as the current '<em>writer</em>'</li> + <li>onCacheEntryAvailable with <code>aNew = true </code>and this entry is invoked (on the caller thread) for the <em>writer</em></li> + </ul> + </li> + </ul> + </li> + <li>state == READY: + <ul> + <li>onCacheEntryCheck with the entry is invoked on the first opener in FIFO - on the caller thread if demanded</li> + <li>result == RECHECK_AFTER_WRITE_FINISHED: + <ul> + <li>opener is left in the FIFO with a flag <code>RecheckAfterWrite</code></li> + <li>such openers are skipped until the output stream on the entry is closed, then <code>onCacheEntryCheck</code> is re-invoked on them</li> + <li><span style="color: #696969;">Note: here is a potential for endless looping when RECHECK_AFTER_WRITE_FINISHED is abused</span></li> + </ul> + </li> + <li>result == ENTRY_NEEDS_REVALIDATION: + <ul> + <li>state = REVALIDATING, this prevents invocation of any callback until <code>CacheEntry::SetValid</code> is called</li> + <li>continue as in state ENTRY_WANTED (just bellow)</li> + </ul> + </li> + <li>result == ENTRY_WANTED: + <ul> + <li>consumer reference ++ (dropped back when the consumer releases the entry)</li> + <li>onCacheEntryAvailable is invoked on the opener with <code>aNew = false </code>and the entry</li> + <li>opener is removed from the FIFO</li> + </ul> + </li> + <li>result == ENTRY_NOT_WANTED: + <ul> + <li><code>onCacheEntryAvailable</code> is invoked on the opener with <code>null </code>for the entry</li> + <li>opener is removed from the FIFO</li> + </ul> + </li> + </ul> + </li> + <li>state == WRITING or REVALIDATING: + <ul> + <li>do nothing and exit</li> + </ul> + </li> + <li>any other value of state is unexpected here (assertion failure)</li> + <li>loop this process while there are openers in the FIFO</li> +</ul> + +<p><a name="CacheEntry::OnFileReady"><strong>CacheEntry::OnFileReady</strong> (entry atomic):</a></p> + +<ul> + <li>load result == failure or the file has not been found on disk (is new): state = EMPTY</li> + <li>otherwise: state = READY since the cache file has been found and is usable containing meta data and data of the entry</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><a name="CacheEntry::OnHandleClosed"><strong>CacheEntry::OnHandleClosed</strong> (entry atomic):</a></p> + +<ul> + <li>Called when any consumer throws the cache entry away</li> + <li>If the handle is not the handle given to the current <em>writer</em>, then exit</li> + <li>state == WRITING: the writer failed to call <code>metaDataReady</code> on the entry - state = EMPTY</li> + <li>state == REVALIDATING: the writer failed the re-validation process and failed to call <code>setValid</code> on the entry - state = READY</li> + <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li> +</ul> + +<p><strong><a name="All consumers release the reference">All consumers release the reference</a>:</strong></p> + +<ul> + <li>the entry may now be purged (removed) from memory when found expired or least used on overrun of the <a href="#Intermediate_memory_caching">memory pool</a> limit</li> + <li>when this is a disk cache entry, its cached data chunks are released from memory and only meta data is kept</li> +</ul> + +<h3 id="Intermediate_memory_caching_of_frequently_used_metadata_(a.k.a._disk_cache_memory_pool)"><a name="Intermediate_memory_caching">Intermediate memory caching </a>of frequently used metadata (a.k.a. disk cache memory pool)</h3> + +<div class="note"> +<p>This is a description of this feature status that is currently only a patch in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986179">bug 986179</a>. Current behavior is simpler and causes a serious memory consumption regression (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975367">bug 975367</a>).</p> +</div> + +<p>For the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. The default size of this meta data memory pool is only 250kB and is controlled by a new <code>browser.cache.disk.metadata_memory_limit</code> preference. When the limit is exceeded, we purge (throw away) first <strong>expired</strong> and then <strong>least used </strong>entries to free up memory again. </p> + +<p>Only <code>CacheEntry</code> objects that are already loaded and filled with data and having the 'consumer reference == 0' (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=942835#c3">bug 942835</a>) can be purged.</p> + +<p>The 'least used' entries are recognized by the lowest value of <a href="https://wiki.mozilla.org/User:Jesse/NewFrecency?title=User:Jesse/NewFrecency">frecency</a> we re-compute for each entry on its every access. The decay time is controlled by the <code>browser.cache.frecency_half_life_hours</code> preference and defaults to 6 hours. The best decay time will be based on results of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986728">an experiment</a>.</p> + +<p>The memory pool is represented by two lists (strong refering ordered arrays) of <code>CacheEntry</code> objects:</p> + +<ol> + <li>Sorted by expiration time (that default to 0xFFFFFFFF)</li> + <li>Sorted by frecency (defaults to 0)</li> +</ol> + +<p>We have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data. Each pool has a different limit checking - the memory cache pool is controlled by <code>browser.cache.memory.capacity</code>, the disk entries pool is already described above. The pool can be accessed and modified only on the cache background thread.</p> + +<div id="cke_pastebin" style="position: absolute; top: 144px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">"@mozilla.org/netwerk/cache-storage-service;1"</div> diff --git a/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html b/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html new file mode 100644 index 0000000000..f839f06acd --- /dev/null +++ b/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html @@ -0,0 +1,73 @@ +--- +title: 모질라 프로젝트에서 Pontoon 실행하기 +slug: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +translation_of: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +--- +<p><a class="external external-icon" href="https://pontoon.mozilla.org/">Pontoon</a> 은 보는 대로 얻을 수 있는 웹기반 지역화 도구입니다. 모질라에서는 현재 다양한 모질라 프로젝트와 Gaia라고 알려진 파이어 폭스 OS 인터페이스를 지역화시키기 위하여 폰툰을 사용하고 있습니다. 폰툰은 매우 간단하고 직관적인 도구입니다. 이는 지역화를 위한 시간을 줄여주기 위하여 어떤 전문적인 기술을 요구하지 않습니다. 여기서 저희는 어떻게 폰툰을 당신의 모질라 프로젝트에 추가하는지 이야기할 것입니다.</p> + +<div class="note"> +<p><strong>폰툰을 개선하고 싶으신가요?</strong> <a href="https://github.com/mozilla/pontoon">GitHub</a>에서 어떻게 관여하는지 배우세요.</p> +</div> + +<div class="note"> +<p><strong>단지 당신의 l10n 프로젝트를 시작하고 싶으신가요?</strong> <a href="https://wiki.mozilla.org/L10n:NewProjects">getting your project localized</a>를 확인하세요</p> +</div> + +<h2 id="A._당신의_프로젝트를_번역할_수_있도록_만드세요">A. 당신의 프로젝트를 번역할 수 있도록 만드세요</h2> + +<p>저희는 모질라 프로젝트를 지역화하기 위한 표준이 되는 <a class="external external-icon" href="https://mozweb.readthedocs.org/en/latest/reference/l10n.html">best practices</a> 이 이미 있다는 것을 알고 있지만, 그 방법들을 여기에 추가하는 것이 기억하기에 좋다고 생각하였습니다. </p> + +<ol> + <li>당신의 프로젝트가 l10n 프레임 워크들중 하나를 지원한다는 것을 보증하세요(<a class="external external-icon" href="https://www.gnu.org/software/gettext/">gettext</a>, <a class="external external-icon" href="https://docs.oasis-open.org/xliff/xliff-core/v2.0/xliff-core-v2.0.html">XLIFF</a>, <a class="external external-icon" href="https://projectfluent.org/">L20n</a>, <a class="external external-icon" href="https://github.com/mozilla-l10n/langchecker/wiki/.lang-files-format">lang</a>, <a class="external external-icon" href="https://wikipedia.org/wiki/.properties">properties</a>, etc.).</li> + <li>resource files에 번역할만한 문자들을 넣어주세요</li> + <li>resource files를 저장소(SVN, HG, Git) 에 Push하세요 + <ul> + <li>각각의 지역 폴더들은 반드시 그 디렉토리 트리의 같은 레벨에 위치하고 있어야 합니다. Source locale은 영어로 templates라고 불릴 필요가 있습니다. 당신은 이러한 목적을 위하여 섬세한 지역 폴더를 생성하기 원할지도 모릅니다. 지역 코드는 반드시 그 파일명의 일부가 되서는 안됩니다.</li> + <li>올바른 패턴: + <pre>/locales/{locale_code}/path/to/file.extension</pre> + </li> + <li>부적절한 패턴: + <pre>/locales/{locale_code}/path/to/file.{locale_code}.extension</pre> + </li> + </ul> + </li> + <li>폰툰이 저장소에 쓰기 권한을 가질 수 있도록 확인하세요. + <ul> + <li>만약 GitHub를 사용한다면, 당신의 프로젝트에 <a href="https://github.com/mozilla-pontoon">mozilla-pontoon</a> 혹은 <a href="https://github.com/orgs/mozilla/teams/pontoon-l10n-robots">pontoon-l10n-robots</a>를 추가하세요</li> + </ul> + </li> +</ol> + +<h2 id="B._선택사항_당신의_웹_프로젝트의_in-page_지역화를_활성화하세요">B. (선택사항) 당신의 웹 프로젝트의 in-page 지역화를 활성화하세요</h2> + +<ol> + <li>폰툰이 당신의 사이트에 접속하고, 내용을 찾아 올바르게 번역할 수 있도록 HTML <body> element로 부터 오는 스크립트를 연결하세요. + <ul> + <li> + <pre id="line1"><span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://pontoon.mozilla.org/pontoon.js</a>"</span><span>></<span class="end-tag">script</span>></span></pre> + </li> + </ul> + </li> + <li>만약 당신의 사이트가 <a class="external external-icon" href="/ko/docs/Web/HTTP/CSP">CSP</a>를 사용한다면, 부디 다음의 사항들이 pontoon.mozilla.org 도메인에 허가될 수 있도록 확인해주세요 + <ol> + <li>iframe 내부를 로딩하는 것</li> + <li>멀리 있는 CSS를 로딩하는 것</li> + <li>멀리 있는 이미지들을 로딩하는 것</li> + </ol> + </li> + <li>만약 당신의 사이트가 <a class="external external-icon" href="/ko/docs/Web/HTTP/X-Frame-Options">X-Frame-Options</a> header를 사용한다면, 부디 iframe 내부가 도메인에 허가될 수 있도록 확인해주세요</li> + <li>당신의 사이트가 HTTPS를 지원하는지 확인해주세요. HTTPS는 무료이며, 자동적으로 열립니다. <a href="https://letsencrypt.org/">암호화합시다</a>!</li> +</ol> + +<h2 id="C._폰툰에_당신의_프로젝트를_추가하세요">C. 폰툰에 당신의 프로젝트를 추가하세요</h2> + +<p>당신의 프로젝트는 이제 폰툰에 설치될 준비가 되었습니다. 부디 <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Localization%20Infrastructure%20and%20Tools&component=Administration%20%2F%20Setup">Localization Infrastructure and Tools :: Administration / Setup</a>에 버그를 기록하여 주세요 그리고 아래 사항 정보들을 제공해 주세요</p> + +<ul> + <li>프로젝트 이름</li> + <li>저장소 URL</li> + <li>요청된 지역들의 목록</li> + <li>웹 사이트 URL, 모든 subpage를 포함한 URL들(오직 in-page 지역화를 사용하고 있을 경우에만)</li> +</ul> + +<p>더 자세한 사항을 원한다면, <a class="external external-icon" href="mailto:pontoon-team@mozilla.com">Project Management Team</a>과 연락해주세요.</p> diff --git a/files/ko/mozilla/index.html b/files/ko/mozilla/index.html new file mode 100644 index 0000000000..c39c3f9a70 --- /dev/null +++ b/files/ko/mozilla/index.html @@ -0,0 +1,21 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - NeedsTranslation + - TopicStub + - 모질라 + - 시작하기 + - 애드온 + - 앱 + - 조언 + - 코딩스크립팅 +translation_of: Mozilla +--- +<div>아래 목록에는 모질라 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, 모질라 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다. </div> + +<div> </div> + +<p> </p> + +<div>{{LandingPageListSubpages}}</div> diff --git a/files/ko/mozilla/javascript_code_modules/index.html b/files/ko/mozilla/javascript_code_modules/index.html new file mode 100644 index 0000000000..9c4987b787 --- /dev/null +++ b/files/ko/mozilla/javascript_code_modules/index.html @@ -0,0 +1,97 @@ +--- +title: JavaScript code modules +slug: Mozilla/JavaScript_code_modules +translation_of: Mozilla/JavaScript_code_modules +--- +<p><strong>자바스크립트</strong>(<a href="https://ko.wikipedia.org/wiki/%EC%98%81%EC%96%B4" title="영어">영어</a>: JavaScript)는 <a href="https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EA%B8%B0%EB%B0%98_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" title="프로토타입 기반 프로그래밍">객체 기반</a>의 <a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4" title="스크립트 언어">스크립트 프로그래밍 언어</a>이다. 이 언어는 <a href="https://ko.wikipedia.org/wiki/%EC%9B%B9%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80" title="웹브라우저">웹브라우저</a> 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 <a href="https://ko.wikipedia.org/wiki/Node.js" title="Node.js">Node.js</a>와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 <a href="https://ko.wikipedia.org/wiki/%EB%84%B7%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EC%BB%A4%EB%AE%A4%EB%8B%88%EC%BC%80%EC%9D%B4%EC%85%98%EC%A6%88_%EC%BD%94%ED%8D%BC%EB%A0%88%EC%9D%B4%EC%85%98" title="넷스케이프 커뮤니케이션즈 코퍼레이션">넷스케이프 커뮤니케이션즈 코퍼레이션</a>의 <a href="https://ko.wikipedia.org/wiki/%EB%B8%8C%EB%A0%8C%EB%8D%98_%EC%95%84%EC%9D%B4%ED%81%AC" title="브렌던 아이크">브렌던 아이크</a>(Brendan Eich)가 처음에는 <em>모카</em>(Mocha)라는 이름으로, 나중에는 <em>라이브스크립트</em>(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다JavaScript 코드 모듈을 사용하면 여러 개의 권한이 부여 된 JavaScript 범위에서 코드를 공유 할 수 있습니다. 예를 들어, 코드 중복을 피하기 위해 파이어 폭스 자체뿐만 아니라 확장 모듈에서도 모듈을 사용할 수 있습니다.</p> + +<div class="note"> +<p>These are <em>not</em> the same thing as standard JavaScript modules. See {{jsxref("Statements/export", "export")}} and {{jsxref("Statements/import", "import")}} to learn more about how to use standard modules.</p> +</div> + +<h2 id="General_topics">General topics</h2> + +<dl style="-moz-columns: 2; columns: 2;"> + <dt><a href="/en-US/docs/JavaScript_code_modules/Using" title="./Using">Using JavaScript code modules</a></dt> + <dd>An introduction to how to use JavaScript code modules.</dd> + <dt><a href="/en-US/docs/Components.utils.import" title="Components.utils.import">Components.utils.import</a></dt> + <dd>How to import a JavaScript code module.</dd> + <dt><a href="/en-US/docs/Components.utils.unload" title="Components.utils.unload">Components.utils.unload</a></dt> + <dd>How to unload a JavaScript code module.</dd> + <dt><a href="/en-US/docs/Code_snippets/Modules" title="Code_snippets/Modules">Code snippets: Modules</a></dt> + <dd>Examples of how to use code modules.</dd> + <dt><a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a></dt> + <dd>This page features a list of JavaScript modules, along with download links and documentation, that extension developers can use in their code.</dd> +</dl> + +<dl> +</dl> + +<h2 id="Standard_code_modules">Standard code modules</h2> + +<dl style="-moz-columns: 2; columns: 2;"> + <dt><a href="/en-US/docs/Addons/Add-on_Manager" title="Addons/Add-on_Manager">AddonManager.jsm</a></dt> + <dd>An interface to install, manage, and uninstall add-ons.</dd> + <dt><a href="/en-US/docs/Addons/Add-on_Repository" title="Addons/Add-on Repository">AddonRepository.jsm</a></dt> + <dd>Provides a search of add-ons in the repository.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Assert.jsm" title="./Assert.jsm">Assert.jsm</a></dt> + <dd>Implements the <a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.1" title="http://wiki.commonjs.org/wiki/Unit_Testing/1.1">CommonJS Unit Testing specification version 1.1</a>, which provides a basic standardized interface for performing in-code logical assertions with optional, customizable error reporting.</dd> + <dt>BookmarkHTMLUtils.jsm</dt> + <dd>Provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.</dd> + <dt><a href="/en-US/docs/Mozilla/js-ctypes" title="./ctypes.jsm">ctypes.jsm</a></dt> + <dd>Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm" title="./ctypes.jsm">CustomizableUI.jsm</a></dt> + <dd>Allows you to interact with customizable buttons and items in Firefox's main window UI.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm" title="./DeferredTask.jsm">DeferredTask.jsm</a></dt> + <dd>Run a task after a delay.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="./Dict.jsm">Dict.jsm</a></dt> + <dd>Provides an API for key/value pair dictionaries.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DownloadLastDir.jsm" title="./DownloadLastDir.jsm">DownloadLastDir.jsm</a></dt> + <dd>Supplies the path to the directory into which the last download occurred.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm" title="./Downloads.jsm">Downloads.jsm</a></dt> + <dd>Provides a single entry point to interact with the downloading capabilities of the platform.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/FileUtils.jsm" title="./FileUtils.jsm"><strong style="font-weight: bold;">FileUtils.jsm</strong></a></dt> + <dd>Provides helpers for dealing with files.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Geometry.jsm" title="./Geometry.jsm">Geometry.jsm</a></dt> + <dd>Provides routines for performing basic geometric operations on points and rectangles.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Http.jsm" title="./Geometry.jsm">HTTP.jsm</a></dt> + <dd>A wrapper for XMLHttpRequest that provides convenient and simplified API for dealing with HTTP requests.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/JNI.jsm">JNI.jsm</a></dt> + <dd>Abstracts the js-ctypes to provide an interface that allows JavaScript code to call code running in native JVMs.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/ISO8601DateUtils.jsm" title="./ISO8601DateUtils.jsm">ISO8601DateUtils.jsm</a></dt> + <dd>Provides routines to convert between JavaScript <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/ Reference/Global Objects/Date"><code>Date</code></a> objects and ISO 8601 date strings.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Log.jsm">Log.jsm</a> (formerly log4moz)</dt> + <dd>Provides a <a href="https://en.wikipedia.org/wiki/Log4j">log4j</a> style API for logging, log messages to various endpoints, such as the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> or a file on disk. </dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/NetUtil.jsm" title="./NetUtil.jsm"><strong style="font-weight: bold;">NetUtil.jsm</strong></a></dt> + <dd>Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/openLocationLastURL.jsm" title="./openLocationLastURL.jsm">openLocationLastURL.jsm</a></dt> + <dd>Provides access to the last URL opened using the "Open Location" option in the File menu.</dd> + <dt><a href="/Mozilla/JavaScript_code_modules/OSFile.jsm" title="/en-US/docs/JavaScript_OS.File">OSFile.jsm</a></dt> + <dd>Allows routines to access files. To which can be read, write, rename, create directories,etc.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PerfMeasurement.jsm" title="./PerfMeasurement.jsm">PerfMeasurement.jsm</a></dt> + <dd>Provides access to low-level hardware and OS performance measurement tools.</dd> + <dt><a href="/en-US/docs/Localization_and_Plurals" title="Localization and Plurals">PluralForm.jsm</a></dt> + <dd>Supplies an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm" title="./PopupNotifications.jsm">PopupNotifications.jsm</a></dt> + <dd>Gives an easy way to present non-modal notifications to users.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="./Promise.jsm">Promise.jsm</a></dt> + <dd>Implements the <a class="external" href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PromiseWorker.jsm">PromiseWorker.jsm</a></dt> + <dd>A version of {{domxref("ChromeWorker")}} which uses Promises to return the worker's result instead of using an event to do so.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm" title="./Services.jsm">Services.jsm</a></dt> + <dd>Provides getters for conveniently obtaining access to commonly-used services.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/source-editor.jsm" title="./source-editor.jsm">source-editor.jsm</a></dt> + <dd>The Source Editor is used by developer tools such as, the Style Editor; this interface implements the editor and lets you interact with it.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Sqlite.jsm" title="./Sqlite.jsm">Sqlite.jsm</a></dt> + <dd>A Promise-based API to mozIStorage/SQLite.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Task.jsm" title="./Task.jsm">Task.jsm</a></dt> + <dd>Implements a subset of <a class="external" href="http://taskjs.org/" title="http://taskjs.org/">Task.js</a> to make sequential, asynchronous operations simple, using the power of JavaScript's <code>yield</code> operator.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></dt> + <dd>A pure JS implementation of <code>window.setTimeout</code>.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Webapps.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Webapps.jsm</a></dt> + <dd>Provides an interface to manage Open Web Apps.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/WebRequest.jsm">WebRequest.jsm</a></dt> + <dd>Provides an API to add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request, and can modify or cancel the request.</dd> + <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm" title="./XPCOMUtils.jsm">XPCOMUtils.jsm</a></dt> + <dd>Contains utilities for JavaScript components loaded by the JS component loader.</dd> +</dl> diff --git a/files/ko/mozilla/js-ctypes/index.html b/files/ko/mozilla/js-ctypes/index.html new file mode 100644 index 0000000000..83634cf2ce --- /dev/null +++ b/files/ko/mozilla/js-ctypes/index.html @@ -0,0 +1,53 @@ +--- +title: js-ctypes +slug: Mozilla/js-ctypes +translation_of: Mozilla/js-ctypes +--- +<p><strong>js-ctypes</strong> 에서는 응용 프로그램과 확장코드가 C로 작성된 네이티브 코드를 통해 앞뒤로 호출할 수 있습니다. C++지원이 제한되니 {{bug("505907")}} 완전히 지원을 바랍니다. binary XPCOM 구성 요서와는 달리,개발자가 파이어 폭스의 여러버전과 함께 사용할 수 있는 단일 바이너리를 출시할 수 있습니다.</p> +<div class="note"> + <strong>참고:</strong> js-ctypes는 크롬 코드에서만 사용할 수 있습니다. 즉, ctypes의 전용 응용 프로그램 및 확장 코드는 웹 사이트에 사용할 수 없습니다.</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">문서</h2> + <dl> + <dt> + <a href="/en-US/docs/Mozilla/js-ctypes/Using_js-ctypes" title="Mozilla/js-ctypes/Using_js-ctypes">소개: js-ctypes에 사용하기</a></dt> + <dd> + ctypes 사용하기 시직하기.</dd> + <dt> + <a href="/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference" title="js-ctypes/js-ctypes_reference">JS-ctypes 참조</a></dt> + <dd> + js-ctypes API에 대한 참조설명서를 참조하십시오.</dd> + <dt> + <a href="/en-US/docs/Mozilla/js-ctypes/Standard_OS_Libraries" title="Mozilla/js-ctypes/Standard_Libraries_per_OS">표준 OS 라이브러리</a></dt> + <dd> + 다른 운영 체제의 표준 라이브러리에 대한 문서. (예: 함수는 Windows에서 어떤 DLL을 필요로 하는지에 대한 문서)</dd> + <dt> + <a href="/en-US/docs/Mozilla/js-ctypes/FAQ" title="js-ctypes/FAQ">질문</a></dt> + <dd> + ctypes에 대해 자주 묻는 질문</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/js-ctypes" title="tag/js-ctypes">모두 보기...</a></span></p> + <h2 class="Tools" id="Examples" name="Examples"><a href="/en-US/docs/Mozilla/js-ctypes/Examples" title="Mozilla/js-ctypes/Examples">예시</a></h2> + <a href="/en-US/docs/Mozilla/js-ctypes/Examples/Add_to_iPhoto" title="Mozilla/js-ctypes/Examples/Add_to_iPhoto">iPhoto 추가하기</a> + <dl> + <dd> + Firefox에서 "iPhoto에서 이미지를 추가"하는 기능을 구현하는 맥 OS X의 Carbon과 Core Foundation framework routines을 호출하여 JS-ctypes에 사용하는 Firefox 확장기능.</dd> + </dl> + </td> + <td> + <h2 class="Community" id="Community" name="Community">커뮤니티</h2> + <ul> + <li>Mozilla 포럼 보기...{{DiscussionList("dev-extensions", "mozilla.dev.extensions")}}</li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">관련항목</h2> + <ul> + <li><a href="/en-US/docs/Extensions" title="Extensions">추가하기</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/ko/mozilla/marketplace/publishing/소개/index.html b/files/ko/mozilla/marketplace/publishing/소개/index.html new file mode 100644 index 0000000000..4dc1f99578 --- /dev/null +++ b/files/ko/mozilla/marketplace/publishing/소개/index.html @@ -0,0 +1,84 @@ +--- +title: 소개 — 앱 출판 +slug: Mozilla/Marketplace/Publishing/소개 +tags: + - Firefox OS + - Marketplace + - 마켓플레이스 + - 시작 + - 앱 + - 인트로 +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +<div class="summary">So you've figured out how you'll make your <a href="/en-US/Marketplace/Prepare/Introduction">app a success</a>, chosen how to <a href="/en-US/Marketplace/Options/Introduction">deliver it and seen the options for delivering it beyond Firefox OS</a>, and written and tested your code. Now it's time to make it available to users worldwide and publish it on Firefox Marketplace. <span class="seoSummary">This section provides a guide to all the tasks you need to perform to publish and update your Open Web Apps on Firefox Marketplace, as well as useful additional information. </span></div> + +<div class="column-container"> </div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Community" id="Community" name="Community">출판 가이드</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></dt> + <dd>This checklist will help you prepare for submitting your app.</dd> + <dt><a href="/en-US/Marketplace/Publishing/Marketplace_review_criteria">Marketplace review</a></dt> + <dd>Understand the process and criteria used when your app is reviewed.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">정책 및 가이드라인</h2> + +<dl> + <dt><a href="/en-US/Apps/Build/Icon_implementation_for_apps#Firefox_OS">Icons (App Center)</a></dt> + <dd>Get details of the icon sizes required for various releases of Firefox OS.</dd> +</dl> + +<dl> + <dt><a class="external external-icon" href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/">Icon design (Mozilla Style Guide)</a></dt> + <dd>Your app or in-app product icons may follow a circlar or square design, find out more from the Mozilla Style Guide.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies#Mozilla_Marketplace_privacy_requirements">Privacy Policies</a></dt> + <dd>If your app uses personal data about a user, it must have a privacy policy. These guidelines cover the information you need to include in your app's privacy policy.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria">Screenshot guidelines</a></dt> + <dd>These guidelines provide information on the best approaches to the screenshots you include in your app's Marketplace listing.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></dt> + <dd>These guidelines provide information on setting up a test environment, testing your app and troubleshooting issues you may find.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">앱 제출</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Submit/Overview">App submission process guide</a></dt> + <dd>So you're ready to publish your first app, or want to publish an app with a packaging method or features you haven't used before, get step-by-step instructions for submitting your app to Firefox Marketplace.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">앱 업데이트하기</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Updating_apps">Updating apps</a></dt> + <dd>Maintaining the momentum behind your app means offering users regular updates; for new features and, although we all hope not, bug fixes. This page provides the information you need on how to deliver your app updates through Firefox Marketplace.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">출시된 앱 관리</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">App management guide</a></dt> + <dd>Your app is published and you now want to make changes or find out how well it's been received. In this section discover how to change your app status, review statistics, and check your reviews and ratings on Firefox Marketplace.</dd> +</dl> + +<h2 id="추가_도구">추가 도구</h2> + +<dl> + <dt><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain">Adding a subdomain for your app</a></dt> + <dd>If you want to offer more than one hosted app from your website, you'll need to create a subdomain for each one. This page explains how.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/ko/mozilla/marketplace/submission/index.html b/files/ko/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..1c01f1e00d --- /dev/null +++ b/files/ko/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +<p>Marketplace submission</p> diff --git a/files/ko/mozilla/marketplace_kr/index.html b/files/ko/mozilla/marketplace_kr/index.html new file mode 100644 index 0000000000..e36b711de6 --- /dev/null +++ b/files/ko/mozilla/marketplace_kr/index.html @@ -0,0 +1,137 @@ +--- +title: Firefox 마켓플레이스 +slug: Mozilla/Marketplace_KR +tags: + - Firefox OS + - 개관 + - 마켓플레이스 + - 비기너 + - 시작 + - 시작자 + - 아마추어 + - 앱 + - 어플리케이션 + - 우선사항 + - 응용프로그램 + - 인트로 + - 초심자 +translation_of: Archive/Mozilla/Marketplace +--- +<div class="summary">Firefox Marketplace는 개방되고 독점되지 않은 HTML5를 이용해서 만들어진 응용 프로그램들을 위한 온라인 장터입니다. 이곳에서는 당신의 응용프로그램을 Firefox Marketplace에 출판하기 위한 정보들을 찾을 수 있습니다. 응용프로그램들을 성공적으로 만들고 전달하고, 출판하고 업데이트하며 Marketplace의 기능을 이용하기 위한 라이브러리들과 API들을 찾아보세요.</div> + +<div class="column-container"> +<p><span class="seoSummary">파이어폭스 마켓플레이스는 크로스 플랫폼을 지원하는 <a href="/ko/docs/Apps">열린 웹앱환경</a>을 이용한 앱을 출판할 수 있는 곳입니다. Mozilla는 세상 모든 응용프로그램들에 대해 다음과 같은 가치를 추구합니다. - 공개성, 자유성, 사용자 선택성</span></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<div class="column-container"> +<p> 표준화된 웹 기술, 언어, 도구, 그리고 <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> 를 사용하여<a href="https://developer.mozilla.org/en-US/Apps"> Open Web Apps</a> 를 출시할 수 있습니다. 이러한 응용프로그램들은 패키징되고 Firefox OS에서 구동되거나 당신의 웹 서버에 호스팅될 수 있습니다. 출시된 응용프로그램들은 Firefox OS 스마트폰 사용자에게 그들이 어디에 있든 제공됩니다. 사용자들은 당신의 응용프로그램을 Firefox Marketplace내의 추천 응용프로그램, 카테고리, 강력한 검색기능을 이용해 쉽게 찾을 수 있습니다. 또한 사용자들은 빠르게 무료 응용프로그램들을 설치하거나 유료 응용프로그램들을 신용카드나 다른 수단을 통해 구매할 수 있습니다.</p> +</div> +</div> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Community" id="Community" name="Community"></h2> + +<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare">성공을 위한 준비</a></h2> + +<dl> + <dd>당신이 기쁨을 위해서, 또는 돈을 목적으로 응용프로그램을 만들지라도 당신은 사람들이 당신이 만든것을 찾고, 사용하고, 즐기기를 원할 것입니다. 이곳에서는 당신이 어떻게 소문을 내고 만족스러운 사용자들을 위해 커뮤니티를 만드는 방법을 설명합니다.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Options">공개 옵션</a></h2> + +<dl> + <dd>패키징되거나 호스팅되거나, 그것이 문제로다. 당신의 응용프로그램 콘텐츠들을 사용자들에게 전달하는 방법과 안드로이드 기기 또는 데스크톱, 그리고 Firefox Os에서 응용프로그램을 사용할 수 있게 해주는 옵션들을 찾아보세요.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Introduction">응용프로그램 출판</a></h2> + +<dl> + <dd>당신의 응용프로그램들을 대기상태에서 놓아주세요. 응용프로그램들을 제출하고, 평가받고, 업데이트하고, 실적을 모니터링하고, 사용자들의 피드백을 받는 과정들과 같은 Firefox Marketplace에서의 응용프로그램 등록 방법을 찾아보세요.</dd> +</dl> +</div> + +<h2 class="Tools" id="Tools" name="Tools">앱 개발자들을 위한 도구들</h2> + +<dl> + <dd><strong><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">Firefox Marketplace 라이브러리 및 API</a></strong> 당신의 마켓플레이스 응용프로그램에 추가할 라이브러리 및 API를 찾아보세요.</dd> + <dd><strong><a href="https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/App_developer_tools">응용프로그램 개발자 도구</a></strong> 당신이 오픈 웹 응용프로그램 개발에 효율적이고 재밋게 사용할 수 있는 도구들의 완벽한 목록을 찾아보세요.</dd> + <dd><strong><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a> <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 시뮬레이터</a></strong>를 사용하거나 실제의 Firefox OS 기기를 이용하여 당신의 <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> 응용프로그램에 대한 테스트, 배치 및 디버깅을 할 수 있는 기본 도구입니다.</dd> +</dl> +</div> + +<h2 id="목차">목차</h2> + +<ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare">성공을 위한 준비</a> + + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Introduction">소개</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Deciding_what_to_build">무엇을 만들지 정합니다</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Getting_to_know_your_users">당신의 사용자들을 파악합니다</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Choosing_your_business_model">당신의 비즈니스 모델을 선정합니다</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Localizing_your_apps">당신의 응용프로그램들을 지역화합니다</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Promoting_your_app">당신의 응용프로그램을 홍보합니다</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Creating_your_community">당신의 커뮤니티를 만드세요</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options">출시 옵션</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Introduction">소개</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps">패키징된 응용프로그램</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps">호스팅된 응용프로그램</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_or_hosted">패키징과 호스팅이란?</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Mobile_optimized_websites">모바일에 최적화된 웹사이트</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing">응용프로그램을 스스로 출시해보세요</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing">응용프로그램 출시 미리보기</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Introduction">소개</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submission_checklist">제출전 확인사항</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">마켓플레이스 리뷰 표준</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">마켓플레이스 공개행사 표준</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">응용프로그램을 위한 서브도메인 추가</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines">정책 및 가이드라인</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">안내</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">마켓플레이스 스크린샷 표준</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">개인 정책</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">응용프로그램 테스트 및 원인분석</a></li> + </ol> + </li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit">당신의 응용프로그램을 제출하기</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Overview">개관</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Step 1: 가입</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: 응용프로그램 불러오기</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: 세부사항 나열</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: 다음단계</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: 응용프로그램 평가</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: 팀 맴버 정의</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: 목록 보기</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: 다른 지역의 지역화를 위한 편집</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps">출판된 응용프로그램 관리 및 업데이트</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">소개</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">당신의 응용프로그램 상태</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">응용프로그램 업데이트</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">별점</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission">추가제출</a> + <ol> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission">추가제출 개관</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">추가제출 리뷰 기준</a></li> + </ol> + </li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">라이브러리 및 API</a></li> + <li><a href="https://developer.mozilla.org/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li> +</ol> diff --git a/files/ko/mozilla/mobile/index.html b/files/ko/mozilla/mobile/index.html new file mode 100644 index 0000000000..6431893f01 --- /dev/null +++ b/files/ko/mozilla/mobile/index.html @@ -0,0 +1,30 @@ +--- +title: Mobile +slug: Mozilla/Mobile +translation_of: Mozilla/Mobile +--- +<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2> + +<p>Firefox OS는 사용자 인터페이스와 HTML, CSS 및 JavaScript로 작성된 응용 프로그램을 구동하는 Linux와 Mozilla의 Gecko 엔진을 사용하는 오픈 소스 모바일 운영 체제입니다.</p> + +<p>Firefox OS 설치 방법과 앱을 개발하는 방법에 대해서 살펴보십시오.</p> + +<div id="gt-res-tools"> +<div id="gt-res-tools-l"> +<div id="gt-pb-star"> +<div class="goog-toolbar-button goog-inline-block trans-pb-button"></div> +</div> +</div> +</div> + +<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2> + +<p><span class="hps">안드로이드</span><span class="hps">용</span> <span class="atn hps">Firefox</span><span>는</span> 안드로이드 기기를 <span>위한</span> <span class="atn hps">Mozilla</span><span>의</span> <span class="hps">모바일</span> <span class="hps">웹</span> <span class="hps">브라우저입니다.</span> 최근에 안드로이드 자체 UI를 사용하도록 재개발 되어서 더 빠르고 응답성도 좋아졌습니다. <span class="hps">카메라나</span><span class="hps"> 전화기능과 같은 기기 자체의 기능에 접근하는 강력한 API를 제공합니다.</span></p> + +<p>안드로이드용 Firefox를 만드는데 도움을 주는 방법이나 device API를 사용하는 방법, 모바일 부가 기능을 만드는 방법에 대해서 살펴보세요.</p> + +<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2> + +<p><span class="hps">모바일 장치는</span> <span class="atn hps">데스크톱</span><span>이나</span> <span class="hps">노트북</span> <span class="atn hps">컴퓨터와는 </span><span class="hps">매우 다른</span> <span class="hps">하드웨어 특징을</span> <span class="hps">가지고 있으며</span> 기기를 제어하는데 사용되는 <span class="atn hps">API</span><span>의 대부분은</span> 아직 표준화 단계에 있습니다.</p> + +<p><span class="hps">모바일 장치에서</span> 잘<span class="hps"> 보이는</span> <span class="atn hps">웹 사이트를 개발</span><span>하고</span> <span class="hps">제공되는</span> <span class="atn hps">새로운 가능성</span><span>을</span> <span class="atn hps">활용</span><span>하는 방법에 대해서 살펴보십시오. </span><span class="hps">웹 사이트가</span> <span class="hps">다른 브라우저에서</span> <span class="hps">잘</span> <span class="hps">작동하는지</span> <span class="hps">확인하는 방법을</span> <span class="hps">배웁니다.</span></p> diff --git a/files/ko/mozilla/mobile/viewport_meta_tag/index.html b/files/ko/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..577fa0b5ee --- /dev/null +++ b/files/ko/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,99 @@ +--- +title: viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법 +slug: Mozilla/Mobile/Viewport_meta_tag +tags: + - viewport + - 레이아웃 + - 모바일 +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +<p>앞으로 공개될 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 에는 개선된 <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code><meta name="viewport"></code></a> 태그를 지원한다. 이전 버전의 Fennec에서 viewport 속성(property)으로 <code>width</code>, <code>height</code>, 그리고 <code>initial-scale</code> 가 지원되긴 했지만 iphone과 android 브라우저에 맞추어 디자인된 몇몇 사이트에서 문제가 있었다. 이제 모바일 safari 에서도 같은 속성들이 지원되며, Fennec을 고쳐서 여러가지 화면크기와 다른 해상도에서도 모바일 사이트들이 문제없이 나타나도록 했다.</p> + +<p>이전 touch.facebook.com:</p> + +<p class="figure"><img alt="05-11-fennec-meta-viewport-2.png" class="default internal" src="/@api/deki/files/4371/=05-11-fennec-meta-viewport-2.png"></p> + +<p class="caption">개선후 touch.facebook.com:</p> + +<p class="figure"><img alt="05-11-fennec-meta-viewport-1.png" class="default internal" src="/@api/deki/files/4372/=05-11-fennec-meta-viewport-1.png"></p> + +<p>이러한 개선점들은 최신의 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> 와 Maemo, Windows, Mac, or Linux를 위한 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">trunk</a> nightly 빌드에서 볼 수 있다.</p> + +<h2 id="배경설명">배경설명</h2> + +<p>Fenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.</p> + +<p>모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 <a href="http://developer.apple.com/safari/library/documentatio">문서</a>를 통해 이 태그의 사용법을 자세히 알 수 있기는 하지만 Fenec내에서 정확히 어떻게 구현해야 할 것인가에 대해 상당한 연구가 진행되어야 했다. 예를 들어 사파리의 문서에는 페이지 컨텐트를 "comma-delimited list"라고 쓰고 있는데, 현존하는 브라우저와 웹페이지는 comma, semicolon, 그리고 space의 다양한 조합을 사용한다.</p> + +<p>다양한 브라우저내의 뷰포트에 대해 더 배우고 싶으면 quirksmode.org에 있는 <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> 를 보라.</p> + +<h2 id="뷰포트_기본">뷰포트 기본</h2> + +<p>모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함한다:</p> + +<pre class="notranslate"><meta name="viewport" content="width=device-width, initial-scale=1"></pre> + +<p><code>width </code>속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 <code>width=600</code>라고 할 수도 있고 <code>device-width</code>와 같은 특정한 값을 사용할 수도 있는데, <code>device-width</code>는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 <code>height</code>와 <code>device-height</code> 값들이 유용하게 사용될 수 있다.)</p> + +<p><code>initial-scale</code> 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. <code>maximum-scale</code>, <code>minimum-scale</code>, 그리고 <code>user-scalable</code> 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정한다.</p> + +<div class="blockIndicator warning"> +<p><code>user-scalable=no</code>를 사용하면 저시력과 같은 시각 장애를 가진 사용자에게 접근성 문제를 일으킬 수 있습니다.</p> +</div> + +<h2 id="픽셀은_사실_픽셀이_아니다">픽셀은 사실 픽셀이 아니다</h2> + +<p>iPhone과 인기가 많은 다양한 안드로이드 폰은 3에서 4인치 (7-10센티미터) 스크린으로 320-480픽셀 (~160 dpi)로 이루어져 있다. 동일한 물리적 스크린을 갖는 Nokia N900에서 구동되는 Maemo의 파이어폭스는 480-800픽셀(~240dpi)이다. 이러한 이유로 Fennec의 최신 버전에서 보여지는 웹페이지들은 아이폰이나 안드로이드에 비해 1/3정도 작기 때문이다(실제 물리적으로). 이는 터치인터페이스에 최적화된 웹사이트에서 사용성과 가독성의 문제를 야기시킨다. Peter-Paul Koch가 이 문제에 대해 <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">픽셀은 사실 픽셀이 아니다</a>를 작성하였다.</p> + +<p>Maemo 의 Fennec 1.1는 안드로이드의 웹킷기반 브라우저에 의해 각 CSS의 "픽셀"을 1.5 하드웨어 픽셀로 사용한다. 이는 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">initial-scale=1 로 정의된 페이지를 </span><span style="line-height: 1.5;">Maemo의 </span><span style="line-height: 1.5;">Fennec과 아이폰의 사파리, 그리고 </span><a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range" style="line-height: 1.5;">HDPI 와 MDPI</a> 모두의 <span style="line-height: 1.5;">안드로이드 브라우저에서 거의 동일한 물리적 사이즈로 렌더링한다는 뜻이다. 이는 </span><a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units" style="line-height: 1.5;">CSS 2.1 명세서</a>에 의해 아래와 같이 정의되어있다:</p> + +<blockquote> +<p>만약 출력장치의 픽셀밀도가 일반적인 컴퓨터 디스플레이와 상이하게 다를경우, user agent는 반드시 픽셀값을 조절해야 한다. <span style="line-height: 1.5;">It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. </span><span style="line-height: 1.5;">It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</span><span style="line-height: 1.5;"> </span></p> +</blockquote> + +<p>웹 개발자들에게 이는 세로모드에서 scale=1로 지정됐을 경우, 위에서 언급된 장치들상에서 320px이 가로로 최대가 되어야 하며, 역시 레이아웃과 이미지들도 마찬가지로 조절이 되어야 함을 의미한다. 하지만 모든 모바일 장치들이 같은 가로 값을 가지지 않는다는 점을 기억해야한다. 작성된 페이지는 가로모드뿐만 아니라, 아이패드와 안드로이드 타블렛과 같은 더 큰 장치들에서도 잘 동작되어야 한다.</p> + +<p>240-dpi 화면상에서, <span style="font-family: courier new,andale mono,monospace;">initial-scale=1</span>로 정의된 페이지는 Fennec과 안드로이드 웹킷에서 150%로 확대된다. 페이지의 텍스트들은 부드럽고 또렷해질것이나, 아마도 비트맵 이미지들은 최대 해상도에서 이점을 가지지 못한다. 이러한 스크린에서 또렷한 이미지를 보여주기 위해서는, 이미지나 전체적인 레이아웃을 최종 디자인의 150%(아이폰의 레티나 디스플레이와 같은 320-dpi장치들을 지원하기 위해서는 200%이다)로 작성하고, CSS나 viewport속성을 이용해 사이즈를 줄여 보여줄수도 있다.</p> + +<p>기본 비율은 디스플레이의 밀도에 따라 달라진다. 200dpi이하의 밀도를 갖는 디스플레이에서는 1.0이다. 200에서 300dpi사이의 장치에서는, 1.5가 된다. 300dpi이상의 장치에서는 소수점 없는 정수가 된다.(밀도/150dpi). 기본 비율은 viewport 크기가 1일때만 참이 됨을 기억하라. 그렇지 않을 경우 CSS픽셀과 장치의 픽셀간 관계는 현재의 zoom 레벨에 따라 달라진다.</p> + +<p><strong style="">뷰포트 너비 와 스크린 너비</strong></p> + +<p>많은 사이트에서 세로보기 모드로 iPhone 디스플레이에 정확하게 맞도록 뷰포트의 너비를 "width = 320, initial-scale = 1"로 설정합니다. 위에서 언급했듯이 Fennec1.0에서 특히 디스플레이가 가로 모드일때 문제가 발생했습니다. 이 문제를 해결하기 위해 Fennec 1.1은 필요한 경우 화면을 채우기 위해 뷰포트 너비를 확장합니다. 이런 현상은 Android 및 Mobile Safari의 동작과 일치하며 특히 iPad와 같은 대형 스크린 장치에 유용합니다. (Allen Pike의 iPad 사이트 용 뷰포트를 선택하여 적용해 보세요.)</p> + +<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p> + +<pre class="notranslate"><meta name="viewport" content="width=500, initial-scale=1"></pre> + +<p>Fennec 1.1 also adds support for <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>, with defaults and limits similar to <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari's</a>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p> + +<p>Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p> + +<pre class="notranslate"><meta name="viewport" content="initial-scale=1, maximum-scale=1"></pre> + +<p>This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like <code>device-width</code>, based on its new window dimensions.</p> + +<h2 id="모바일과_태블릿에_대한_일반_viewport_크기">모바일과 태블릿에 대한 일반 viewport 크기</h2> + +<p>If you are wanting to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/">모바일 및 태블릿 뷰포트 크기</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p> + +<h2 id="표준">표준</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">사양</th> + <th scope="col">상태</th> + <th scope="col">댓글</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Non-normatively describes the Viewport META element</td> + </tr> + </tbody> +</table> + +<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.</p> diff --git a/files/ko/mozilla/participating_in_the_mozilla_project/index.html b/files/ko/mozilla/participating_in_the_mozilla_project/index.html new file mode 100644 index 0000000000..834c5cb808 --- /dev/null +++ b/files/ko/mozilla/participating_in_the_mozilla_project/index.html @@ -0,0 +1,98 @@ +--- +title: Participating in the Mozilla project +slug: Mozilla/Participating_in_the_Mozilla_project +translation_of: Mozilla/Participating_in_the_Mozilla_project +--- +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">버그를 고치거나 모질라 플랫폼 코드를 개선하는 작업에 관심이 있다면, 이 곳은 여러분이 작업하는데 필요한 문서를 찾을 수 있는 곳 입니다.</p> +<table class="mainpage-table" style="font-size: 14px; margin-bottom: 10px; margin-top: 0px; margin-right: 0px; margin-left: 0px; border-collapse: collapse; width: auto; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;"> + <tbody> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;"> + <h2 id="General_topics">General topics</h2> + <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/En/Developer_Guide" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Mozilla developer guide">Mozilla developer guide</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 코드베이스 개선을 위한 개발 팁과 가이드.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/En/Developer_Guide/Source_Code" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Mozilla source code">Mozilla source code</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 다운로드 또는 버전 컨트롤을 통해서 모질라 코드를 얻는 방법과 여러분이 수정한 코드를 소스 코드 트리에 포함시키는 방법에 관한 정보.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/En/Developer_Guide/Build_Instructions" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Build Documentation">Build documentation</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 파이어폭스와 썬더버드 같은 모질라 프로젝트를 빌드하는 방법에 관한 정보. <em>이 페이지는 좀 더 정리를 해야할 필요가 있음.</em></dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/En/The_Mozilla_platform" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/The Mozilla platform">The Mozilla platform</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 플랫폼의 모든 API와 각 종 기술들(technologies)을 사용하는 방법에 관한 정보.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/Project:en/How_to_Help" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="Project:en/How to Help">Documenting Mozilla</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라와 오픈 웹에 관한 새로운 문서를 적성하거나 기존의 문서 개선에 도움을 주는 방법.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/En/Debugging" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Debugging">Debugging</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 코드 디버깅시, 유용한 팁과 가이드라인.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/QA" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/QA">Quality assurance</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 테스트와 버그 추적(tracking)에 관한 정보.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/Localization" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Localization">Localization</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 프로젝트와 문서 등을 여러 언어로 번역에 필요한 참고할 문서들. </dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/Glossary" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Glossary">Glossary</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 해커들이 사용하는 용어와 정의.</dd> + </dl> + <h2 id="Project_pages">Project pages</h2> + <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/Thunderbird" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Thunderbird">Thunderbird</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 이메일 클라이언트</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/Calendar" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Calendar">Sunbird</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 달력(calendar) 프로젝트</dd> + </dl> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;"> + <h2 id="Tools">Tools</h2> + <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"> + <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 프로젝트의 여러 이슈들을 추적하는데 사용되는 버그질라 (<a class="internal" href="/en/Bugzilla" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Bugzilla">Bugzilla</a>) 데이터베이스.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 웹 상에서 모질라 소스 코드를 보거나 특정 코드를 찾는데 사용되는 프로그램.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 본자이(<a class="internal" href="/en/Bonsai" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Bonsai">Bonsai</a>)는 누군가 소스 코드 파일을 수정했을 때, 이를 누가 수정하였는지 알려주는 프로그램.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 틴더박스(<a class="internal" href="/en/Tinderbox" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Tinderbox">Tinderbox</a>)는 소스 코드 트리가 성공적으로 빌드 되었는지 아닌지를 보여줍니다. 여러분이 현재 올바르게 빌드된 소스 코드 트리를 가지고 작업하는지 알아보기 위해서는 소스 코드를 체크인하거나 체크아웃할 때 반드시 소스 코드 트리의 상태를 확인 하세요. </dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="internal" href="/en/Crash_reporting" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Crash reporting">Crash tracking</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 사코로(<a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a>)와 토크백(<a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a>) 충돌(crash) 보고 시스템에 관한 정보.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질라 프로젝트의 성능(performance) 정보를 보세요.</dd> + <dt style="font-style: normal; font-weight: bold;"> + <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt> + <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"> + 모질자 개발 이슈들에 대한 이야기를 할 수 있는 토론 포럼의 주제별 목록</dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/ko/mozilla/persona/bootstrapping_persona/index.html b/files/ko/mozilla/persona/bootstrapping_persona/index.html new file mode 100644 index 0000000000..126b3d7a43 --- /dev/null +++ b/files/ko/mozilla/persona/bootstrapping_persona/index.html @@ -0,0 +1,29 @@ +--- +title: Persona Hosted Services +slug: Mozilla/Persona/Bootstrapping_Persona +translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona +--- +<p>To be truly successful and decentralized, Persona needs support from three different groups:</p> +<ul> + <li><strong>Web Sites</strong> must let their users sign in with Persona.</li> + <li><strong>Web Browsers</strong> must implement the <a href="/en/DOM/navigator.id" title="navigator.id"><code>navigator.id</code></a> APIs.</li> + <li><strong>Email Providers</strong> must become Identity Providers (IdPs).</li> +</ul> +<p>This creates a chicken-and-egg problem: none of these groups would significantly benefit unless there was a critical mass of users, but a distributed system can't get a critical mass of users without support from the above groups.</p> +<p>To solve this problem, <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> hosts three resources:</p> +<ol> + <li>A fallback Identity Provider, which vouches for users whose email providers don't support Persona.</li> + <li>A <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser</a>, JavaScript implementation of the <code><a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a></code> APIs for browsers without native support.</li> + <li>A hosted verification API to make it easy for sites to verify user credentials.</li> +</ol> +<p>Together, this allows web sites to offer Persona to users regardless of browser and without email providers needing to get involved.</p> +<p>These services are temporary, and the Persona system is designed such that they transparently and automatically drop away as native support gets added to browsers and email providers. Thus, they will become less relevant as Persona matures, and may eventually be removed all together. At that point, <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> won't feature at all in the Persona system.</p> +<h2 id="Fallback_Identity_Provider">Fallback Identity Provider</h2> +<p>Any domain can become an Identity Provider as long as relying parties are willing to trust the certificates issued by that domain. We expect email providers to act as an IdPs for the addresses they administer, making the user experience of Persona seamless for those users. It allows the user to leverage their existing relationship with the email provider when authenticating at other sites.</p> +<p>However, email providers won't become IdPs until there is significant demand from their users. In the meantime, Mozilla operates a fallback IdP at <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a>. This fallback allows users to sign into sites with their existing email address, regardless of whether or not the email provider supports Persona. The fallback IdP will certify email addresses from any domain using its own authentication flow and its own password, so long as the user is able to prove control of an address by clicking a link in a verification email.</p> +<p>Once an email provider supports Persona natively, its users will transparently begin use it instead of the fallback IdP.</p> +<h2 id="Cross-browser_API_Library">Cross-browser API Library</h2> +<p>For Persona to work, the user's browser must support the <a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a> API. Eventually, browsers will add native support for these APIs, but until then a <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser </a>implementation is available at <a href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a>. By including this file, web sites can already begin using Persona. Once native implementations of the API are available, the library will automatically defer to those.</p> +<h2 id="Remote_verification_service">Remote verification service</h2> +<p>At <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> Mozilla hosts a <a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">remote verification service</a> that web sites can use to verify identity assertions sent from users. This makes it simpler for web sites to support Persona as it takes care of parsing the assertion and cryptographically verifying user identities.</p> +<p>Once the Persona data formats stabilize, verification will most likely be done locally on each site's server. This transition is especially important for user privacy, since it will make it impossible for the fallback IdP to track its users. Even with remote verification, users of native IdPs can't be tracked by that IdP.</p> diff --git a/files/ko/mozilla/persona/browser_compatibility/index.html b/files/ko/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..b11f987e57 --- /dev/null +++ b/files/ko/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,86 @@ +--- +title: Browser compatibility +slug: Mozilla/Persona/Browser_compatibility +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +<h2 id="Supported_Browsers">Supported Browsers</h2> +<p>Persona is developed, tested, and supported with the following browsers. Thanks to Persona's cross-platform JavaScript library, users do not need add-ons in order to use Persona.</p> +<table> + <tbody> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Desktop Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Internet Explorer</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup>, 10.0<sup>*</sup><sup>*</sup> (but see <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Compatibility Mode</a> below)</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, Nightly, and Extended Support Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Safari</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Opera</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release<sup>‡</sup></td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>iOS Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Mobile Safari</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td> + </tr> + <tr> + <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Android Browsers</strong></th> + </tr> + <tr> + <th scope="row"><strong>Default Browser</strong></th> + <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td> + </tr> + <tr> + <th scope="row"><strong>Firefox</strong></th> + <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, and Nightly Releases<br> + Previous Stable Release</td> + </tr> + <tr> + <th scope="row"><strong>Chrome</strong></th> + <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td> + </tr> + </tbody> +</table> +<p><sup>*</sup>: For Windows XP. <sup>†</sup>: For Windows Vista and Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup> </sup><sup>‡</sup>: As time allows.</p> +<h2 id="Unsupported_Browsers">Unsupported Browsers</h2> +<ul> + <li>Internet Explorer versions 6.0 and 7.0 are not supported. Users will be prompted to upgrade their browser. Also see the section below on <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE "Compatibility Mode"</a>.</li> + <li>Google Chrome Frame is not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li> + <li>Third party browsers on iOS are not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li> +</ul> +<h2 id="Internet_Explorer_Compatibility_Mode">Internet Explorer "Compatibility Mode"</h2> +<p>From version 8.0 onwards Internet Explorer supports a feature called Compatibility Mode, in which the browser may be instructed to emulate a pre-8.0 version when rendering a page. This feature may be controlled in three different ways</p> +<ol> + <li>as a local setting in the browser</li> + <li>based on the presence and value of the <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> declaration in the page</li> + <li>as an instruction sent from the site, using the <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> header either as an HTTP header or as a <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code><meta></code></a> tag in the page. This method overrides the other two.</li> +</ol> +<p>Because versions of Internet Explorer earlier than 8.0 are not supported by Persona, any version of Internet Explorer which is configured to emulate a pre-8.0 version will also not function with Persona. This is typically for one of the following reasons:</p> +<ul> + <li>your site is using "X-UA-Compatible" to explicitly instruct the browser to emulate a pre-8.0 version</li> + <li>your site's pages omit the DOCTYPE, do not have the DOCTYPE as the first line of the page, or set the browser to quirks mode, and your site is not setting "X-UA-Compatible" to IE version 8.0 or higher</li> + <li>the browser is locally configured to use a pre-8.0 Compatibility Mode, and your site is not overriding this by setting "X-UA-Compatible" to IE version 8.0 or higher</li> +</ul> +<p>For more information, see <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Understanding Compatibility Modes in Internet Explorer 8"</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p> +<h2 id="Other_Browsers">Other Browsers</h2> +<p>Despite not being explicitly supported, any browser that includes both {{ domxref("window.postMessage()") }} and {{ domxref("Storage", "localStorage") }} should work. These APIs have been available in all major browsers since March 2010.</p> +<h2 id="Known_Issues">Known Issues</h2> +<ul> + <li>Browsers must accept third party cookies for full functionality (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li> + <li>Android 2.x users without a default browser selected may be unable to log in (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li> +</ul> diff --git a/files/ko/mozilla/persona/index.html b/files/ko/mozilla/persona/index.html new file mode 100644 index 0000000000..5b48646237 --- /dev/null +++ b/files/ko/mozilla/persona/index.html @@ -0,0 +1,137 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Persona +translation_of: Archive/Mozilla/Persona +--- +<div class="callout-box"> +<p><strong>연락 및 도움을 얻고 싶다면!</strong></p> + +<p><a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">블로그</a>를 확인하거나, <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">메일링 리스트</a>에 가입하거나, <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC">IRC</a>에서 <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity"><u><font color="#0066cc">#identity</font></u></a>를 찾아보세요.</p> +</div> + +<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a>는 웹을 위한 크로스-브라우저 로그인 시스템으로, 쉽고 알맞은 사용이 가능합니다. Persona는 <a href="https://developer.mozilla.org/ko/docs/persona/Browser_compatibility">모든 주요 브라우저</a>에서 작동하며, <a href="https://developer.mozilla.org/ko/docs/Persona/Quick_Setup">오늘 당장 시작할 수 있습니다.</a></p> + +<p>왜 우리와 우리의 사이트가 Persona를 사용해야 합니까?</p> + +<ol> + <li><strong>Persona는 사이트별 암호에 대한 </strong>사용자의 생성, 관리, 안전하게 관리하는 부담을 사용자와 웹사이트로부터<strong> 완전히 제거합니다.</strong></li> + <li><strong>Persona는 사용이 간편합니다.</strong> 두 번의 클릭 만으로도 Persona 사용자는 <a href="http://voo.st" title="http://voo.st">Voost</a>나 <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a>와 같은 사이트에 새로운 계정을 생성하지 않고도 로그인할 수 있습니다.</li> + <li><strong>Persona는 쉽게 구현할 수 있습니다</strong><strong>.</strong> 개발자는 반나절만에 Persona를 사이트에 추가할 수 있습니다.</li> + <li>무엇보다도, <strong>변경 불가능이 없습니다</strong>. 개발자는 모든 사용자의 확인 된 E-Mail 주소를 받고, 사용자는 Persona에 어떠한 E-Mail 주소도 사용할 수 있습니다.</li> +</ol> + +<p>여기에 더해, Persona는 점점 나아지고 있습니다: Persona는 공개된 분산프로트콜로 제작되었으며, 직접 브라우저와 통합할 수 있으며 이메일 제공자가 네이티브 지원을 할 수 있도록 합니다. Persona를 사용한 사이트들은 오늘날 코드를 전혀 바꾸지 않아도 자동적으로 UX가 개선됩니다.</p> + +<p>시작하기 위해 읽어보세요!</p> + +<div class="note"><strong>노트:</strong> Persona는 개발 중입니다. <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">블로그</a>로부터 새로운 기능에 대해 알아보거나, <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">메일링 리스트</a>에 가입하여 여러분의 의견을 피드백 해주세요!</div> + +<h2 id="사이트에서_Persona_사용하기">사이트에서 Persona 사용하기</h2> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="시작하기">시작하기</h3> + + <dl> + <dt><a href="/ko/docs/Persona/Why_Persona" title="ko/Persona/Why_Persona">왜 Persona를 사용해야 합니까?</a></dt> + <dd>여러분의 사이트에 Persona를 지원해야 하는지, 그리고 어떻게 다른 ID와 인증 시스템이 다른지 비교해보십시오.</dd> + <dt><a href="/en/Persona/Quick_Setup" title="BrowserID/Quick setup">빠른 설치</a></dt> + <dd>여러분의 웹 사이트에 Persona를 빠르게 추가하는 방법을 알아보세요.</dd> + </dl> + </td> + <td> + <h3 id="Persona_API_레퍼런스">Persona API 레퍼런스</h3> + + <p><a href="/en/DOM/navigator.id" title="navigator.id">navigator.id API 레퍼런스</a></p> + + <dl> + <dd>웹 개발자가 Persona를 사이트에 추가할 수 있는 <code>navigator.id</code> 객체를 위한 레퍼런스입니다.</dd> + <dt><a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">인증 API 레퍼런스</a></dt> + <dd>원격 인증 API에 대한 레퍼런스를 아래 링크에서 제공하고 있습니다.</dd> + <dd><code><a href="https://verifier.login.persona.org/verify">https://verifier.login.persona.org/verify</a></code></dd> + </dl> + </td> + </tr> + <tr> + <td> + <h3 id="가이드">가이드</h3> + + <dl> + <dt><a href="/en/Persona/Security_Considerations" title="BrowserID/Security considerations">보안 고려 사항</a></dt> + <dd>따라하기와 기술은 여러분의 Persona 개발을 안전하게 만듭니다.</dd> + <dt><a href="/en/Persona/Browser_compatibility" title="/Browser_compatibility">브라우저 호환성</a></dt> + <dd>브라우저의 Persona 지원에 대해 자세히 알아보세요.</dd> + <dt><a href="/en/Persona/Internationalization" title="/Internationalization">국제화</a></dt> + <dd>다른 언어에서는 어떻게 Persona를 관리하는지 알아보세요.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Persona/The_implementor_s_guide">운영자 가이드</a></dt> + <dd>Persona에 도움을 보탠 사이트에서 제공하는 팁을 알아보세요.</dd> + </dl> + </td> + <td> + <h3 id="리소스">리소스</h3> + + <dl> + <dt><a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">라이브러리와 플러그인</a></dt> + <dd>당신이 가장 선호하는 프로그래밍 언어, 웹 프레임워크, 블로그 또는 컨텐츠 관리 시스템(CMS)의 드롭인 라이브러리를 찾아보세요.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona 설명서</a></dt> + <dd>Persona 사이트를 위한 예제 소스 코드입니다. C# (MVC3), PHP, Node.JS와 그 외에 대한 미리보기를 포함합니다.</dd> + <dt> </dt> + <dt><a href="https://developer.mozilla.org/ko/Persona/User_interface_guidelines">UI 가이드라인</a></dt> + <dd>사이트 이용자들에게 어떻게 Persona 로그인 시스템을 선사할 수 있는 지 담겨있습니다.</dd> + <dd> </dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 id="ID_제공에_대한_정보">ID 제공에 대한 정보</h2> + + <p>만약 여러분이 E-Mail 제공 업체 또는 다른 ID 제공 서비스라면 Persona ID 제공자에 대해 링크를 통해 익혀보세요.</p> + + <dl> + <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">IdP 개요</a></dt> + <dd>Persona ID 제공자의 고수준 보기.</dd> + <dt><a href="/en/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">IdP 구현</a></dt> + <dd>IdP에 대해 기술적으로 세세한 가이드입니다.</dd> + <dt><a href="/en-US/Persona/IdP_Development_tips" title="Developer tips">개발 팁</a></dt> + <dd>A set of tips and tricks useful while developing a new Identity Provider.</dd> + <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt> + <dd>IdP가 광고를 사용할 경우 프로토콜에 대한 지원과 <code>.well-known/browserid</code> 파일에 대한 목적과 구조에 대한 개요입니다.</dd> + </dl> + </td> + <td> + <h2 id="Persona_프로젝트">Persona 프로젝트</h2> + + <dl> + <dt><a href="/en/Persona/Glossary" title="navigator.id">어휘</a></dt> + <dd>BrowserID와 Persona의 용어 정의입니다.</dd> + <dt><a href="/en/Persona/FAQ" title="en/BrowserID/FAQ">FAQ</a></dt> + <dd>일반적인 질문에 대한 답변입니다.</dd> + <dt><a href="/en/Persona/Protocol_Overview" title="BrowserID/Protocol overview">프로토콜 개요</a></dt> + <dd>기본적인 BrowserID 프로토콜의 중간 수준 기술 개요입니다.</dd> + <dt><a href="/en/persona/Crypto" title="MDN">암호화</a></dt> + <dd>Persona와 BrowserID에 대한 암호화 개념을 살펴봅니다.</dd> + <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">명세</a></dt> + <dd>세부적인 기술은 여기에 있습니다.</dd> + <dt><a href="/Persona/Bootstrapping_Persona" title="en/BrowserID/Bootstrapping_BrowserID">Persona 웹 사이트</a></dt> + <dd>To get Persona going, we're hosting three services at <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: a fallback Identity Provider, a portable implementation of the {{ domxref("navigator.id") }} APIs, and an identity assertion verification service.</dd> + <dt><a href="https://github.com/mozilla/browserid">Persona</a> 소스코드</dt> + <dd>Persona의 소스코드를 GitHub에서 찾으실 수 있습니다!</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ko/mozilla/persona/quick_setup/index.html b/files/ko/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..d39d67820f --- /dev/null +++ b/files/ko/mozilla/persona/quick_setup/index.html @@ -0,0 +1,248 @@ +--- +title: 빠른 시작 +slug: Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +<p>5가지 단계를 통해 Persona 로그인 시스템을 여러분의 사이트에 추가할 수 있습니다.:</p> + +<ol> + <li>페이지에 Persona 자바스크립트 라이브러리를 포함시킵니다.</li> + <li>"로그인", "로그아웃"버튼을 추가합니다</li> + <li>Watch for login and logout actions.</li> + <li>이용자의 신원을 검증합니다.</li> + <li>가장 잘 된 연습을 다시 재연합니다..</li> +</ol> + +<p>여러분은 시작한 지 반나절 만에 작동하도록 할 수 있을 것이지만, 먼저 해야 할 것이 있습니다: 만약 여러분이 Persona를 여러분의 사이트에 사용하고자 한다면, 조금 기다린 후 <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> 메일링 리스트에 가입해주세요. It’s extremely low traffic, only being used to announce changes or security issues which might adversely impact your site.</p> + +<h2 id="1단계_Persona_라이브러리_추가하기">1단계: Persona 라이브러리 추가하기</h2> + +<p>Persona는 어느 브라우저에서나 작동되도록 설계되었으며 <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">모든 주요 웹브라우저들과 모바일 브라우저</a>에서 작동합니다.</p> + +<p>In the future we expect browsers to provide native support for Persona, but in the meantime we provide a JavaScript library that fully implements the user interface and client-side part of the protocol. By including this library, your users will be able to sign in with Persona whether or not their browser has native support.</p> + +<p>Once this library is loaded in your page, the Persona functions you need ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) will be available in the global <code>navigator.id</code> object.</p> + +<p>To include the Persona JavaScript library, place this <code>script</code> tag at the bottom of the page body:</p> + +<pre class="brush: html;"><script src="https://login.persona.org/include.js"></script> +</pre> + +<p>You <strong>must</strong> include this on every page which uses {{ domxref("navigator.id") }} functions. Because Persona is still in development, you should not self-host the <code>include.js</code> file.</p> + +<h3 id="Suppressing_Compatibility_Mode">Suppressing Compatibility Mode</h3> + +<p>You should also make sure users of Internet Explorer can't use Compatibility Mode, as this will break Persona. To do this:</p> + +<ul> + <li>either include <code><meta http-equiv="X-UA-Compatible" content="IE=Edge"></code> on your page, before any script elements</li> + <li>or set the following HTTP header on your page: <code>X-UA-Compatible: IE=Edge</code>.</li> +</ul> + +<p>For more information, see the notes in <a href="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE Compatibility Mode</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p> + +<h2 id="Step_2_Add_login_and_logout_buttons">Step 2: Add login and logout buttons</h2> + +<p>Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} <em>must</em> be made in the click handler of the logout button.</p> + +<p>For example:</p> + +<pre class="brush: js;">var signinLink = document.getElementById('signin'); +if (signinLink) { + signinLink.onclick = function() { navigator.id.request(); }; +} + +var signoutLink = document.getElementById('signout'); +if (signoutLink) { + signoutLink.onclick = function() { navigator.id.logout(); }; +} +</pre> + +<p>What should those buttons look like? Check out our <a href="https://developer.mozilla.org/docs/persona/branding">Branding Resources</a> page for premade images and CSS-based buttons!</p> + +<h2 id="Step_3_Watch_for_login_and_logout_actions">Step 3: Watch for login and logout actions</h2> + +<p>For Persona to function, it must be told what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:</p> + +<ol> + <li> + <p>The email address of the user currently logged into your site from this computer, or <code>null</code> if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.</p> + </li> + <li> + <p>A function to invoke when an <code>onlogin</code> action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.</p> + </li> + <li> + <p>A function to invoke when an <code>onlogout</code> action is triggered. This function is not passed any parameters.</p> + </li> +</ol> + +<div class="note style-wrap"> +<p><strong>Note:</strong> You must always include both <code>onlogin</code> and <code>onlogout</code> when you call {{ domxref("navigator.id.watch()") }}.</p> +</div> + +<p>For example, if you currently think Bob is logged into your site, you might do this:</p> + +<pre class="brush: js;">var currentUser = 'bob@example.com'; + +navigator.id.watch({ + loggedInUser: currentUser, + onlogin: function(assertion) { + // A user has logged in! Here you need to: + // 1. Send the assertion to your backend for verification and to create a session. + // 2. Update your UI. + $.ajax({ /* <-- This example uses jQuery, but you can use whatever you'd like */ + type: 'POST', + url: '/auth/login', // This is a URL on your website. + data: {assertion: assertion}, + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { + navigator.id.logout(); + alert("Login failure: " + err); + } + }); + }, + onlogout: function() { + // A user has logged out! Here you need to: + // Tear down the user's session by redirecting the user or making a call to your backend. + // Also, make sure loggedInUser will get set to null on the next page load. + // (That's a literal JavaScript null. Not false, 0, or undefined. null.) + $.ajax({ + type: 'POST', + url: '/auth/logout', // This is a URL on your website. + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { alert("Logout failure: " + err); } + }); + } +}); +</pre> + +<p>In this example, both <code>onlogin</code> and <code>onlogout</code> are implemented by making an asynchronous <code>POST</code> request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.</p> + +<p>Note that if the identity assertion can't be verified, you should call {{ domxref("navigator.id.logout()") }}: this has the effect of telling Persona that no one is currently logged in. If you don't do this, then Persona may immediately call onlogin again with the same assertion, and this can lead to an <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login" title="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login">endless loop of failed logins</a>.</p> + +<p>You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.</p> + +<p>Here is another example, this time not using jQuery.</p> + +<pre class="brush: js;">function simpleXhrSentinel(xhr) { + return function() { + if (xhr.readyState == 4) { + if (xhr.status == 200){ + // reload page to reflect new login state + window.location.reload(); + } + else { + navigator.id.logout(); + alert("XMLHttpRequest error: " + xhr.status); + } + } + } + } + +function verifyAssertion(assertion) { + // Your backend must return HTTP status code 200 to indicate successful + // verification of user's email address and it must arrange for the binding + // of currentUser to said address when the page is reloaded + var xhr = new XMLHttpRequest(); + xhr.open("POST", "/xhr/sign-in", true); + // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php + var param = "assertion="+assertion; + xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xhr.setRequestHeader("Content-length", param.length); + xhr.setRequestHeader("Connection", "close"); + xhr.send(param); // for verification by your backend + + xhr.onreadystatechange = simpleXhrSentinel(xhr); } + +function signoutUser() { + // Your backend must return HTTP status code 200 to indicate successful + // sign out (usually the resetting of one or more session variables) and + // it must arrange for the binding of currentUser to 'null' when the page + // is reloaded + var xhr = new XMLHttpRequest(); + xhr.open("GET", "/xhr/sign-out", true); + xhr.send(null); + xhr.onreadystatechange = simpleXhrSentinel(xhr); } + +// Go! +navigator.id.watch( { + loggedInUser: currentUser, + onlogin: verifyAssertion, + onlogout: signoutUser } ); +</pre> + +<p>You <strong>must</strong> call <code>navigator.id.watch()</code> on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you <strong>should</strong> call this function on every page of your site.</p> + +<p>Persona will compare the email address you've passed into <code>loggedInUser</code> with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke <code>onlogin</code> or <code>onlogout</code> on page load.</p> + +<p> </p> + +<h2 id="Step_4_Verify_the_user’s_credentials">Step 4: Verify the user’s credentials</h2> + +<p>Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your <code>onlogin</code> callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.</p> + +<p>It’s <em>extremely important</em> that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s <code>$.ajax()</code> helper to <code>POST</code> it to <code>/auth/login</code>.</p> + +<p>Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply <code>POST</code> the assertion to <code>https://verifier.login.persona.org/verify</code> with two parameters:</p> + +<ol> + <li><code>assertion</code>: The identity assertion provided by the user.</li> + <li><code>audience</code>: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.</li> +</ol> + +<p>For example, if you’re <code>example.com</code>, you can use the command line to test an assertion with:</p> + +<pre class="brush: bash;">$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify" +</pre> + +<p>If it’s valid, you’ll get a JSON response like this:</p> + +<pre class="brush: js;">{ + "status": "okay", + "email": "bob@eyedee.me", + "audience": "https://example.com:443", + "expires": 1308859352261, + "issuer": "eyedee.me" +} +</pre> + +<p>You can learn more about the verification service by reading <a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">The Verification Service API</a>. An example <code>/auth/login</code> implementation, using <a href="http://python.org/">Python</a>, the <a href="http://flask.pocoo.org/">Flask</a> web framework, and the <a href="http://python-requests.org">Requests</a> HTTP library might look like this:</p> + +<pre class="brush: python;">@app.route('/auth/login', methods=['POST']) +def login(): + # The request has to have an assertion for us to verify + if 'assertion' not in request.form: + abort(400) + + # Send the assertion to Mozilla's verifier service. + data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'} + resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True) + + # Did the verifier respond? + if resp.ok: + # Parse the response + verification_data = resp.json() + + # Check if the assertion was valid + if verification_data['status'] == 'okay': + # Log the user in by setting a secure session cookie + session.update({'email': verification_data['email']}) + return 'You are logged in' + + # Oops, something failed. Abort. + abort(500) +</pre> + +<p>For examples of how to use Persona in other languages, have a look at the <a href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">cookbook</a>.</p> + +<p>The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the <code>loggedInUser</code> parameter to {{ domxref("navigator.id.watch()") }}.</p> + +<p>Logout is simple: you just need to remove the user’s session cookie.</p> + +<h2 id="Step_5_Review_best_practices">Step 5: Review best practices</h2> + +<p>Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">best practices</a> for using Persona safely and securely.</p> + +<p>If you're making a production site, have a look at the <a href="/en-US/docs/Persona/The_implementor_s_guide" title="/en-US/docs/Persona/The_implementor_s_guide">implementor's guide</a>, where we've collected tips for adding the kind of features often needed in real-world login systems.</p> + +<p>Lastly, don’t forget to sign up for the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.</p> diff --git a/files/ko/mozilla/persona/user_interface_guidelines/index.html b/files/ko/mozilla/persona/user_interface_guidelines/index.html new file mode 100644 index 0000000000..4be5607bf0 --- /dev/null +++ b/files/ko/mozilla/persona/user_interface_guidelines/index.html @@ -0,0 +1,113 @@ +--- +title: UI 가이드라인 +slug: Mozilla/Persona/User_interface_guidelines +tags: + - Persona +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +<p>Presenting sign-in options to users without confusing them can be difficult, especially if your site offers multiple sign-in options. This article aims to provide guidance about the best way to present Persona sign-in to your users. It covers four different possible approaches, depending on the different sign-in options the website supports:</p> + +<ul> + <li><a href="#persona-only">Persona 전용으로</a></li> + <li><a href="#persona_plus_traditional">Persona + "일반 로그인"</a> (that is, sign in with a username and password stored on the site)</li> + <li><a href="#persona_plus_federated">Persona + 1개 이상의 다른 로그인 방법</a> (OAuth 2 나 Facebook Connect 등.)</li> + <li><a href="#persona_plus_traditional_plus_federated">Persona + "일반 로그인" + 1개이상의 다른 로그인 방법(OAuth 2)</a></li> +</ul> + +<p>In each approach there are three user interface elements to consider:</p> + +<ul> + <li>the Sign in/Sign up link, displayed on pages when the user is not signed in</li> + <li>the Sign up view: the interface that appears when the user clicks "Sign up"</li> + <li>the Sign in view: the interface that appears when the user clicks "Sign in"</li> +</ul> + +<p>None of the recommendations here are mandatory.</p> + +<h2 id="Persona_전용으로"><a name="persona-only">Persona 전용으로</a></h2> + +<p>Persona가 유일한 로그인 옵션으로 제공된다면, 제공되는 경우의 수가 하나 뿐이기 때문에, 이용자의 혼란이 줄어들 것입니다., this offers the least confusing user experience, because the user has fewer choices to make.</p> + +<h3 id="Sign_upSign_in_link">Sign up/Sign in link</h3> + +<p>여러분은 그냥 "로그인 / 회원가입"이라고 표시된 링크 하나를 보여주면 됩니다. 사용자들이 어떠한 방법으로 로그인 하는 지 미리 알도록 하기 위해서, Persona 아이콘을 포함하는 것을 추천합니다.<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/6773/persona-only-signin-link.png" style="display: block; height: 132px; margin-left: auto; margin-right: auto; width: 323px;"></p> + +<h3 id="Sign_up_view">Sign up view</h3> + +<p>You don't need to implement the sign up view at all, as Persona takes care of it for you.</p> + +<h3 id="Sign_in_view">Sign in view</h3> + +<p>Similarly, you don't need to implement the Sign in view, as Persona takes care of it.</p> + +<h2 id="Persona_일반적인_로그인_방법"><a name="persona_plus_traditional">Persona + 일반적인 로그인 방법</a></h2> + +<p>In this case you support Persona alongside traditional sign-in, where you ask users for a username and password which you then store yourself.</p> + +<h3 id="Sign_upSign_in_link_2">Sign up/Sign in link</h3> + +<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p> + +<h3 id="Sign_up_view_2">Sign up view</h3> + +<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to create a new username and password on your site.</p> + +<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6777/persona-plus-trad-signup.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<h3 id="Sign_in_view_2">Sign in view</h3> + +<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6779/persona-plus-trad-signin.png" style="display: block; height: 349px; margin-left: auto; margin-right: auto; width: 273px;"></p> + +<h2 id="Persona_federated_sign-in"><a name="persona_plus_federated">Persona + federated sign-in</a></h2> + +<p>In this case you support Persona alongside one or more other federated sign-in options such as Facebook Connect or Google+.</p> + +<h3 id="Sign_upSign_in_link_3">Sign up/Sign in link</h3> + +<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p> + +<h3 id="Sign_up_view_3">Sign up view</h3> + +<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to sign up using one of the other federated identity options.</p> + +<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6783/persona-plus-fed-signup.png" style="display: block; height: 185px; margin-left: auto; margin-right: auto; width: 275px;"></p> + +<h3 id="Sign_in_view_3">Sign in view</h3> + +<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or one of the other federated sign-in options. This can be just like the "Sign up view":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6785/persona-plus-fed-signin.png" style="display: block; height: 187px; margin-left: auto; margin-right: auto; width: 275px;"></p> + +<h2 id="Persona_traditional_sign-in_federated_sign-in"><a name="persona_plus_traditional_plus_federated">Persona + traditional sign-in + federated sign-in</a></h2> + +<p>In this case you support everything: Persona, traditional sign-in, and one or more additional federated sign-in options.</p> + +<h3 id="Sign_upSign_in_link_4">Sign up/Sign in link</h3> + +<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p> + +<h3 id="Sign_up_view_4">Sign up view</h3> + +<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona, to create a new username and password on your site, or to sign up using one of the other federated identity options.</p> + +<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6787/persona-plus-everything-signup.png" style="display: block; height: 411px; margin-left: auto; margin-right: auto; width: 275px;"></p> + +<h3 id="Sign_in_view_4">Sign in view</h3> + +<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona, one of the other federated options, or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6789/persona-plus-everything-signin.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 275px;"></p> + +<h2 id="More_Info">More Info</h2> + +<p>You can find more information about Persona's visual design in <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">Sean Martell's style primer</a>.</p> diff --git a/files/ko/mozilla/persona/why_persona/index.html b/files/ko/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..7f3552c1b6 --- /dev/null +++ b/files/ko/mozilla/persona/why_persona/index.html @@ -0,0 +1,31 @@ +--- +title: 왜 Persona를 사용해야 합니까? +slug: Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +<p style=""> </p> +<p style=""><span style="line-height: inherit;">아이디와 비밀번호로 사용자 인증을 제공하는 </span><span style="line-height: inherit;">일반적인 시스템은 불안합니다. 왜냐하면 사용자는 새로운 사이트나 서비스에 가입할 때 마다 복잡한 비밀번호를 만들어서 사용하고 그것을 기억해야 하고, 모든 사이트는 저장된 비밀번호를 안전하게 보관해야 합니다. 그러나 최근 신뢰할만한 기업들 마저 사용자 정보를 위험으로부터 지켜내지 못하는 일이 눈에 띄게 증가하고 있습니다.</span></p> +<p><span style="line-height: inherit;">Persona는 오픈되고, 분산된 웹 규모의 식별 시스템으로써 각 사이트마다 제공하는 비밀번호 인증 시스템을 대체합니다. 이 시스템은 Facebook Connect와 같이 중앙 집중식 인프라에 의존하지 않고 가용성을 제공하고, 개인 정보 보호와 관련된 결점을 보완하는 OpenID와 같은 시스템입니다. </span></p> +<h2 id="Persona는_사이트별_비밀번호를_제거합니다">Persona는 사이트별 비밀번호를 제거합니다</h2> +<p><span style="line-height: inherit;">Persona는 </span><span style="line-height: inherit;">사이트별 비밀번호를 입력하는 대신 사용자가 단지 두 번의 클릭으로 사이트에 로그인 할 수 있도록 간단한 방법을 제공합니다. 이것은 안전하고, 보안적이고, 공개 키 암호화 방식의 상위에서 구축되었습니다. 패스워드 대신에 사용자의 브라우져는 하나의 사이트에만 유효하고, </span><span style="line-height: inherit;">몇 분 후에 만료되는 </span><span style="line-height: inherit;">"신원 증명" 암호를 생성합니다. Persona를 사용하는 웹 사이트는 개별 비밀번호를 사용하지 않기 때문에 더 이상 비밀번호 데이터베이스의 보안적인 저장이나 잠재적 위험으로부터 벗어날 수 있습니다.</span></p> +<p>이 <span style="line-height: inherit;">빠른 로그인 절차는 </span><span style="line-height: inherit;">사용자가 새로운 사이트에 방문 했을 때 불편함을 덜어줍니다.</span></p> +<h2 id="Persona의_ID는_E-Mail_주소입니다">Persona의 ID는 E-Mail 주소입니다</h2> +<p><span style="line-height: inherit;">Persona는 각종 형태의 사용자명 보다 E-Mail 주소를 ID로 사용합니다. 이것은 사용자와 개발자 모두에게 몇 가지 장점을 제공합니다.</span></p> +<h3 id="사용자_입장에서의_장점">사용자 입장에서의 장점</h3> +<ul> + <li>사용자는 이미 자신의 E-Mail 주소를 알고 있습니다. OpenID를 사용할 때 혼란스러운 URL과 새로운 것을 알아야 하는 것과 다릅니다.</li> + <li><span style="line-height: 1.5em;">E-Mail 주소는 </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">someone@some-context</span><span style="line-height: 1.5em;"> 의 깔끔한 형태를 가지는데, 이 아이디어는 사용자가 </span><code style="font-size: 14px;">@work</code><span style="line-height: 1.5em;">, </span><code style="font-size: 14px;">@home</code><span style="line-height: 1.5em;">, </span><code style="font-size: 14px;">@school</code><span style="line-height: 1.5em;"> 에 따라 자신의 ID를 쉽게 구분 지을 수 있도록 합니다. 이것은 Facebook과 Google+와 같은 소셜 네트워크의 단일 계정 정책에 따른 자신의 실제 이름으로 ID를 통합하려는 트렌드와 다릅니다.</span></li> + <li>E-Mail은 사용자 ID의 제어권을 스스로 가지거나 다른 공급자에게 양도할 수 있습니다.</li> +</ul> +<h3 id="개발자_입장에서의_장점">개발자 입장에서의 장점</h3> +<ul> + <li>E-Mail 주소는 개발자에게 사용자에게 통하는 직접적인 연락 수단을 제공합니다.</li> + <li>대부분의 사이트는 사용자에게 E-Mail 주소를 요구합니다. Persona는 사용자가 사이트에 로그인 할 때 자동으로 E-Mail 주소를 개발자에게 제공하고, 별도의 가입 절차가 필요 없습니다.</li> + <li>대개의 로그인 시스템은 이미 E-Mail 주소를 고유 키로 간주하고 있습니다. 이 말은 Persona에 갖힐 필요 없이 기존의 로그인 시스템과 함께 서비스 가능하다는 것을 의미합니다.</li> +</ul> +<p><span style="line-height: inherit;">E-Mail은 이미 셀 수 없는 공급자들로부터 수십억 개의 계정 갖추어진 완전한 분산 시스템이라는 것은 말할 필요도 없을 것입니다.</span></p> +<h2 id="Persona는_다른_싱글-사인-온(SSO)_공급자와_어떻게_다른가" style="">Persona는 다른 싱글-사인-온(SSO) 공급자와 어떻게 다른가?</h2> +<p><span style="line-height: inherit;">Persona는 안전하고, 보안적이고, 쉽습니다. 사용자의 개인 정보, 권한, 선택을 다른 공급자가 하지 않거나, 하지 못하는 방법으로 보호합니다.</span></p> +<p><span style="line-height: inherit;">Facebook이나 Google+와 같은 대부분의 소셜 네트워크는 사용자에게 실명 사용을 요구하고, 하나의 계정만을 사용하도록 제한합니다. Persona는 E-Mail 주소 위에서 만들어 짐으로써 사용자가 자신의 직장, 집 그리고 학교와 같은 각기 다른 정체성을 구분할 수 있도록 허용합니다.</span></p> +<p><span style="line-height: inherit;">Persona는 오픈되고, 분산된 시스템입니다. E-Mail 주소를 가진 누구나 Persona를 이용해 사이트에 로그인 할 수 있습니다. 뿐만 아니라 누구나 E-Mail과 같이 자신의 ID 공급자를 호스팅하거나 다른 기관에 양도할 수 있습니다. 이것이 단일 계정을 요구하는 </span><span style="line-height: inherit;">중앙 집중식 소셜 로그인 서비스와 다른 부분입니다.</span></p> +<p><span style="line-height: inherit;">Persona는 사용자의 개인 정보를 보호하기 위해 인증 과정 중간에 사용자의 브라우저를 넣은 새로운 접근 방식을 가집니다. 브라우저는 사용자의 E-Mail 공급자로부터 자격 증명을 획득한 이후, 다시 돌아와서 웹사이트에게 자격 증명을 제공합니다. E-Mail 공급자는 사용자를 추적하지 못하지만 웹사이트는 여전히 암호화 된 자격 증명을 확인해 사용자를 식별할 수 있습니다. OpenID를 포함한 대부분의 다른 시스템은 사용자의 로그인을 허용하기 전에 사이트에 "phone home"(역주: OAuth와 같은 시스템에서 콘텐츠 공급자가 사용자 식별 정보를 서비스 공급자에게 확인하여 식별을 확인하는 방식)을 요구합니다.</span></p> diff --git a/files/ko/mozilla/projects/emscripten/index.html b/files/ko/mozilla/projects/emscripten/index.html new file mode 100644 index 0000000000..9ce63c51cc --- /dev/null +++ b/files/ko/mozilla/projects/emscripten/index.html @@ -0,0 +1,37 @@ +--- +title: Emscripten +slug: Mozilla/Projects/Emscripten +translation_of: Mozilla/Projects/Emscripten +--- +<p><span class="seoSummary">엠스크립튼은 자바스크립트 컴파일러의 LLVM입니다. 엠스크립튼은 LLVM 바이트 코드를 받아 웹에서 동작할 수 있는 자바스크립트로 컴파일해줍니다. (예를 들어, Clang을 이용한 C/C++ 코드나 그 외의 언어로부터 생성된 LLVM 바이트 코드)</span></p> + +<div class="warning"> +<p><span style="font-size: 14px;"><strong>중요</strong></span>: 이 페이지는 엠스크립튼에 대한 굉장히 간략한 설명만을 다루고 있습니다. 엠스크립튼에 대해 더욱 자세히 알고 싶다면, <a href="http://kripken.github.io/emscripten-site/index.html">공식 홈페이지의 엠스크립튼 Wiki</a>에서 정보를 찾아보세요.</p> +</div> + +<p>엠스크립튼을 사용하면, 당신은</p> + +<ul> + <li>C나 C++ 코드를 자바스크립트로 컴파일할 수 있습니다.</li> + <li>LLVM 바이트코드로 변환될 수 있는 다른 코드들을 자바스크립트로 컴파일할 수 있습니다.</li> + <li>다른 언어에서의 C/C++ 런타임을 자바스크립트로 컴파일 한 후 간접적인 방법을 통해 다른 언어의 코드를 실행시킬 수 있습니다(파이썬과 루아에 대해서는 이미 테스트 되었어요)!</li> +</ul> + +<p>엠스크립튼은 네이티브 코드를 웹에서 사용 가능하게 만들어줍니다. 아시다시피 웹은 표준 기반이면서, 독립적인 서로 호환 가능한 수많은 구현체들이 존재하며, PC부터 아이패드까지 모든 곳에서 동작하는 플랫폼이지요!</p> + +<p>엠스크립튼을 이용하면 C나 C++ 개발자들은 일일히 코드를 자바스크립트로 포팅하는 고된 작업을 할 필요가 없습니다. 아니, 아예 자바스크립트를 배울 필요도 없습니다. 웹 개발자들에게도 또한 이점이 있는데, 이미 존재하는 수많은 네이티브 유틸리티나 라이브러리들을 그들의 사이트에 사용할 수 있기 때문입니다.</p> + +<p>사실상 거의 모든 포팅 가능한 C나 C++ 코드베이스가 엠스크립튼을 이용하여 자바스크립트로 컴파일 될 수 있으며, 그 범위는 그래픽 렌더링이나 소리 재생, 파일 처리 등을 요구하는 고성능 게임에서부터 Qt와 같은 어플리케이션 프레임워크까지 다양합니다.</p> + +<p>엠스크립튼은 빠른 코드를 생성해내며, 기본적인 컴파일 결과 값은 네이티브 속도에 가까운 성능을 낼 수 있도록 고성능으로 최적화 된 자바스크립트의 서브셋인 <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> 포맷입니다.</p> + +<div class="note"> +<p><strong>주의</strong>: 꽤 재미있을 것 같지요? <a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">엠스크립튼에 대해 좀 더 읽어보고, 한번 직접 데모를 실행</a>시켜본 다음에, <a href="http://kripken.github.io/emscripten-site/docs/getting_started/index.html">어떻게 사용하는지 시작해보세요</a>.</p> +</div> + +<h2 id="비슷한_주제의_다른_MDN_글">비슷한 주제의 다른 MDN 글</h2> + +<ul> + <li>MDN의 <a href="/en-US/docs/Games">Games zone</a> 에서는 게임 개발과 관련하여 유용한 정보들이 있습니다. 게임 개발에서는 엠스크립튼의 사용이 꽤나 일반적이지요.</li> + <li>MDN의 <a href="/en-US/docs/Mozilla/Projects/Emscripten/Techniques">Emscripten techniques</a> 페이지에서는 엠스크립튼과 관련한 유용한, 엠스크립튼 Wiki에 서술되지 않은 생각들을 담고 있습니다.</li> +</ul> diff --git a/files/ko/mozilla/projects/index.html b/files/ko/mozilla/projects/index.html new file mode 100644 index 0000000000..c1e43934a2 --- /dev/null +++ b/files/ko/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +<p>{{ draft() }}</p> +<p>Below you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p> +<p>{{ LandingPageListSubpages() }}</p> diff --git a/files/ko/mozilla/projects/l20n/index.html b/files/ko/mozilla/projects/l20n/index.html new file mode 100644 index 0000000000..9f4a8dcbfb --- /dev/null +++ b/files/ko/mozilla/projects/l20n/index.html @@ -0,0 +1,126 @@ +--- +title: L20n +slug: Mozilla/Projects/L20n +translation_of: Mozilla/Projects/L20n +--- +<div class="note"> +<p><strong>일러두기</strong>: 이 문서는 아직 드래프트 단계이거나 최신 버전이 아닐 수 있습니다. 가장 최근 문서는 <a href="https://github.com/l20n/l20n.js/tree/master/docs">깃헙 문서</a>를 확인하세요.</p> +</div> + +<div class="summary">L20n은 아주 간단한 코드로 여러분이 사용하는 언어의 힘을 더욱 끌어올릴 수 있는 JavaScript 지역화 프레임워크입니다.</div> + +<div class="column-container"> +<div class="column-half"> +<h2 id="L20n_소개">L20n 소개</h2> + +<p>L20n reinvents software localization. Users should be able to benefit from the entire expressive power of the natural language. L20n keeps simple things simple, and at the same time makes complex things possible.</p> + +<p>Through L20n, Mozilla is creating a new generation of technology that places more power in localizers' hands. <span class="seoSummary">L20n lets localizers reach higher levels of free linguistic expression by sharpening the divide between localization and application logic.</span> It allows to adapt your web application not only to languages and cultures, but also contextual data, user gender and screen dimensions.</p> +</div> + +<div class="column-half"> +<h2 id="What_L20n_looks_like">What L20n looks like</h2> + +<p>Here is a simple, straightforward example showing an English string being provided:</p> + +<pre class="brush: html"><brandName "Firefox"> +<about "About \{{ brandName }}"></pre> + +<p>Here is the same string being provided in Slovenian:</p> + +<pre class="brush: html"><brandName { + nominative: "Firefox", + genitive: "Firefoxa", + dative: "Firefoxu", + accusative: "Firefox", + locative: "Firefoxu", + instrumental: "Firefoxom" +}> +<about "O \{{ brandName.locative }}"></pre> +</div> +</div> + +<p> </p> + +<div class="column-container"> +<div class="column-third"> +<h2 class="Documentation" id="For_Developers">For Developers</h2> + +<p><strong>Documentation for developers wanting to implement localization functionality on their web apps using L20n.</strong></p> + +<dl> + <dt>Internationalization for your web app</dt> + <dd>First read for developers looking to use the L20n infrastructure.</dd> + <dt><a href="/en-US/docs/L20n/HTML_Bindings">L20n's HTML bindings</a></dt> + <dd>Tutorial on implementing L20n in your HTML code.</dd> + <dt><a href="/en-US/docs/L20n/Javascript_API">L20n JavaScript API</a></dt> + <dd>An API for l20n.js.</dd> + <dt>L20n syntax cheatsheet for developers</dt> + <dd>A simple cheatsheet to help developers as they add L20n to their localization infrastructure.</dd> +</dl> +</div> + +<div class="column-third"> +<h2 class="Documentation" id="For_Localizers">For Localizers</h2> + +<p><strong>Documentation for Localizers creating localized content for a project that uses L20n.</strong></p> + +<dl> + <dt><a href="http://l20n.org/learn/">Learn the L20n syntax</a></dt> + <dd>How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/L20n/Localization_Use_Cases">Localization use-cases</a></dt> + <dd>How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.</dd> + <dt>L20n and Translation Memory eXchange (TMX)</dt> + <dd>How L20n impacts the Translation Memory eXchange standard for translation memory data.</dd> + <dt>L20n syntax cheatsheet for localizers</dt> + <dd>A simple cheatsheet to help localizers as they localize projects with L20n.</dd> +</dl> +</div> + +<div class="column-third"> +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Additional resources</h2> + +<p><strong>Some additional resources for developers and localizers involved with L20n.</strong></p> + +<dl> + <dt><a href="http://www.l20n.org" title="http://www.l20n.org">L20n.org</a></dt> + <dd>You can try L20n live in your browser on the project page.</dd> + <dt><a href="http://l20n.github.io/tinker/" title="http://l20n.github.io/tinker/">L20n Tinker</a></dt> + <dd>Test out your own L20n code in L20n Tinker.</dd> + <dt><a href="https://github.com/l20n" title="https://github.com/l20n/l20n.js">GitHub</a></dt> + <dd>Where the main code for the L20n infrastructure and design spec lives.</dd> + <dt><a href="https://wiki.mozilla.org/L20n" title="https://wiki.mozilla.org/L20n">Wiki page</a></dt> + <dd>Info about the project to develop L20n.</dd> +</dl> +</div> +</div> + +<h2 id="Subnav">Subnav</h2> + +<ol> + <li><a href="#" title="Documentation for developers wanting to implement localization functionality on their web apps using L20n">For Developers</a> + + <ol> + <li><a href="#" title="First read for developers looking to use the L20n infrastructure">Internationalization for your web app</a></li> + <li><a href="/en-US/docs/Mozilla/Projects/L20n/HTML_Bindings" title="Tutorial on implementing L20n in your HTML code">L20n's HTML bindings</a></li> + <li><a href="#" title="A complete description of the use, function, and role of L20n's .lol format.">.lol file format</a></li> + <li><a href="#" title="A simple cheatsheet to help developers as they add L20n to their localization infrastructure.">L20n syntax cheatsheet for developers</a></li> + </ol> + </li> + <li><a href="#" title="Documentation for Localizers creating localized content for a project that uses L20n.">For Localizers</a> + <ol> + <li><a href="#" title="How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.">Learn the L20n syntax</a></li> + <li><a href="/en-US/docs/L20n/Localization_Use_Cases">Localization use cases</a></li> + <li><a href="#" title="How L20n impacts the Translation Memory eXchange standard for translation memory data.">L20n and Translation Memory eXchange (TMX)</a></li> + <li><a href="#" title="A simple cheatsheet to help localizers as they localize projects with L20n.">L20n syntax cheatsheet for localizers</a></li> + </ol> + </li> + <li><a href="#" title="Some additional resources for developers and localizers involved with L20n.">Additional resources</a> + <ol> + <li><a href="http://www.l20n.org" title="You can try L20n live in your browser on the project page">L20n.org</a></li> + <li><a href="http://l20n.github.io/tinker/" title="Test out your own L20n code in L20n Tinker">L20n Tinker</a></li> + <li><a href="https://github.com/l20n/l20n.js" title="Where the main code for the L20n infrastructure and language lives">L20n GitHub repo</a></li> + <li><a href="https://wiki.mozilla.org/L20n" title="Info about the project to develop L20n">Mozilla Wiki</a></li> + </ol> + </li> +</ol> diff --git a/files/ko/mozilla/projects/psm/index.html b/files/ko/mozilla/projects/psm/index.html new file mode 100644 index 0000000000..962da69c8f --- /dev/null +++ b/files/ko/mozilla/projects/psm/index.html @@ -0,0 +1,15 @@ +--- +title: Personal Security Manager (PSM) +slug: Mozilla/Projects/PSM +translation_of: Mozilla/Projects/PSM +--- +<p>Personal Security Manager (PSM)는 클라이언트 어플리케이션을 대신하여 암호화 동작을 수행하는 라이브러리 셋으로 구성되어 있습니다. 이 암호화 동작에는 SSL 연결 설정, 오브젝트 사이닝(object signing), 서명 확인(signature verification), 증명 관리(certificate management - issuance 및 revocation 포함) 및 기타 일반적인 PKI 기능이 포함됩니다.</p> + +<p>주 :</p> + +<ul> + <li>PSM은 현재 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions"><u><font color="#0066cc">Firefox와 같이 빌드</font></u></a>되기 때문에 별도의 빌드 지침은 존재하지 않습니다.</li> + <li><a href="http://www-archive.mozilla.org/projects/security/pki/psm/"><u><font color="#0066cc">PSM에 관련된 문서 정보 </font></u></a></li> +</ul> + +<p> </p> diff --git a/files/ko/mozilla/qa/bug_writing_guidelines/index.html b/files/ko/mozilla/qa/bug_writing_guidelines/index.html new file mode 100644 index 0000000000..886539d894 --- /dev/null +++ b/files/ko/mozilla/qa/bug_writing_guidelines/index.html @@ -0,0 +1,177 @@ +--- +title: 버그 작성 지침 +slug: Mozilla/QA/Bug_writing_guidelines +tags: + - Bugzilla + - QA + - 버그 +translation_of: Mozilla/QA/Bug_writing_guidelines +--- +<div class="note"> +<p>이 페이지는 2014년 4분기에 모질라 QA팀의 테크니컬 리뷰를 받아야합니다.(<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Ioana </span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Chiorean님이 담당합니다) QMO의 </span><a class="link-https" href="https://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug/" style="font-size: 14px; line-height: 1.5;">How to write a proper bug</a>페이지 글이 이 글로 병합되었습니다.</p> + +<p><strong style="font-size: 14px; line-height: 1.5;">모질라 소프트웨어를 사용하는데 도움이 필요하다면 </strong><strong style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"><a href="http://www.mozilla.org/support/">지원 페이지</a></strong><strong style="font-size: 14px; line-height: 1.5;">에서 해당 소프트웨어를 선택하시기 바랍니다. 이 페이지는 수정하면 안됩니다. 모질라의 버그 추적 시스템인 </strong><strong style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"><a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a>를 사용하는 방법을 배우는데에 사용해주시기 바랍니다.</strong></p> + +<p><span style="font-size: 14px; line-height: 1.5;">버그 리포팅이 처음이라면 유경험자에게 도움을 받아야할 수도 있습니다. </span><a href="/en-US/docs/QA" style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">QA</a><span style="font-size: 14px; line-height: 1.5;">페이지의 커뮤니티 섹션을 참고하시기 바랍니다. 파이어폭스의 버그를 리포팅하려면 </span><a href="http://irc.mozilla.org/" style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">irc.mozilla.org</a><span style="font-size: 14px; line-height: 1.5;"> 의 </span><span style="font-family: monospace; font-size: 14.3999996185303px; line-height: 16.7999992370605px;">#firefox</span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"> 채널에서 도움을 받을 수도 있습니다.</span></p> +</div> + +<p>효과적인 버그 리프트는 수정될 수 있을것 같이 작성한 것입니다. 이 가이드 라인은 그런 보고서를 작성하기 위한 방법을 설명합니다.</p> + +<h2 id="선행준비">선행준비</h2> + +<ol> + <li>당신의 소프트웨어가 최신버전인지 확인하십시오. + <ul> + <li>이상적으로는 개발중인 버전을 테스트하여 버그가 이미 수정되었는지 확인하십시오. (예 : <a href="http://www.mozilla.com/en-US/firefox/channel/">Firefox Beta, Aurora</a>, or bleeding-edge <a class="link-https" href="https://nightly.mozilla.org/">Nightly</a>).</li> + </ul> + </li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a> 에서 해당 버그가 발견되었는지 확인하십시오. (<a href="http://www.mozilla.org/quality/help/screening-duplicates.html">예제</a>).</li> + <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">새로운 버그리포트</a>를 작성할때에는 대부분 버그 리포팅 방법을 안내합니다. + <ul> + <li>여러 가지 이슈사항을 가지고 있다면, 버그리포트를 각각 분리해서 제출하십시오.</li> + </ul> + </li> +</ol> + +<h2 id="재현가능한_정확한_단계_작성">재현가능한 정확한 단계 작성</h2> + +<p>어떻게 개발자는 자신의 컴퓨터에서 버그를 재현할 수 있을까요?</p> + +<p>재현 단계는 버그 보고서 전체에서 <strong>가장 중요한 부분</strong>입니다. 개발자가 버그를 재현 가능한 경우에 고쳐질 가능성이 매우 높습니다. 만약 이 과정이 명확하지 않은 경우에는, 버그가 수정되었는지조차 모를 수도 있습니다.</p> + +<p>각 단계의 의도와 더불어 Firefox와의 상호작용을 개연성있게 설명하십시오.</p> + +<ul> + <li>잘못된 예 : "다른 창에서 Gmail 열기"</li> + <li>올바른 예 : "Cmd + N을 눌러 새 브라우저 창을 열고, 검색 주소창에 https://mail.google.com/을 입력하고 Enter 키를 누르십시오. "</li> +</ul> + +<p>당신이 지시한 단계를 진행한 후, 예상했던 결과와 관찰력롸를 명확하게 설명하십시오. 추측에서 명확하게 관찰결과를 분리하십시오.</p> + +<ul> + <li>잘못된 예 : "동작하지 않습니다."</li> + <li> + <p>올바른 예 : "내 편지함이 보이지 않고, 다음과 같은 메시지가 출력됩니다. '당신의 브라우저는 쿠키를 지원하지 않습니다. (error -91)' "</p> + </li> +</ul> + +<p>버그가 심각해보이는 경우, 버그를 재현하는 중요 단계중에 당신이 설정한 일반적이지 않은 설정이 있을 수 있습니다. 만약 당신이 작성한 버그가 <a href="http://support.mozilla.com/en-US/kb/Managing-profiles">새 Firefox 프로필</a>에서 재현되는지 확인하십시오. 만약 당신의 기존 프로필에서만 버그가 발생한다면, 어떤 설정이나 확장도구, 혹은 <a href="http://support.mozilla.com/en-US/kb/Profiles">당신의 프로필 파일</a>이 버그를 재현하는데 필요합니다.</p> + +<ul> + <li><a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html#intermittent">만약 해당 버그 발생 원인을 알 수 없거나 가끔씩 나타나면 어떻게 해야할까요?</a></li> +</ul> + +<h2 id="명확한_요약문_작성"><strong>명확한 요약문 작성</strong></h2> + +<p>어떻게하면 간략하게 버그를 설명할 수 있을까요? 이것은 버그 관리자(Triager)나 개발자가 볼 문서의 첫 부분입니다.</p> + +<p>좋은 요약문은 짧고 명확하게 구분가능하게 작성되어야 합니다. 그리고 해결책이 아닌 문제에 집중하여 설명해야합니다.</p> + +<ul> + <li>좋은 예 : "파일 복사 메시지에서 취소를 누르면, 파일관리자에서 오류가 발생함."</li> + <li>나쁜 예 : "소프트웨어 오류"</li> +</ul> + +<ul> + <li>좋은 예 : "overflow : hidden으로 스타일이 지정된 <textarea>에서 아래쪽 화살표 스크롤이 작동하지 않습니다."</li> + <li>나쁜 예 : "내 웹사이트에서 브라우저가 동작해야합니다."</li> +</ul> + +<h2 id="Finding_the_correct_product_and_component" name="Finding_the_correct_product_and_component"><strong style="font-weight: bold;">Finding the correct product and component</strong></h2> + +<p>You will be asked to categorize your bug into a "product" and a "component" within that product, in order to direct your report to the correct developers.</p> + +<p>If you're using Firefox, the bug is most likely in "Firefox", "Toolkit", or "Core".</p> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox">List of components in the "Firefox" product</a> - Most parts of Firefox that you interact with directly</li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Toolkit">List of components in the "Toolkit" product</a> - Interface widgets and some frontend features</li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Core">List of components in the "Core" product</a> - Web page rendering, networking, etc.</li> +</ul> + +<p>When in doubt, search for similar bugs and see what component they are in.</p> + +<p>If none of the components seem appropriate, look for a "General" component in the most appropriate product.</p> + +<h2 id="Specific_types_of_bugs">Specific types of bugs</h2> + +<p>If you are reporting a <strong>crash bug</strong>, please <a href="/en-US/docs/How_to_get_a_stacktrace_for_a_bug_report">include a Breakpad ID or attach stack trace</a>, and include the crash signature in the bug summary.</p> + +<p>If you are reporting a <strong>memory use or leak bug</strong>, please attach the output of about:memory (Firefox 6+). Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled <a href="http://support.mozilla.com/en-US/kb/High%20memory%20usage">High Memory Usage</a>. If you are a C++ developer, <a class="link-https" href="https://wiki.mozilla.org/Performance:Leak_Tools">more precise tools are available</a>.</p> + +<p>If you are reporting a <strong>bug involving a specific web page</strong>, please try to make a <a href="/en-US/docs/Reducing_testcases">reduced testcase</a> and attach it to the bug report.</p> + +<p>If the bug was <strong>recently introduced</strong>, finding a <a href="http://quality.mozilla.org/docs/bugzilla/guide-to-triaging-bugs-for-firefox/finding-a-regression-window/">regression window</a> can help identify the cause of the bug.</p> + +<div class="originaldocinfo"> +<h2 id="Original_document_information">Original document information</h2> + +<ul> + <li>Author(s): Jesse Ruderman, Gervase Markham</li> + <li>Other Contributors: Eli Goldberg, Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, and others.</li> +</ul> +</div> + +<hr> +<div class="note"> +<p>The following article has been merged into this page from QMO: <a class="link-https" href="https://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug/">How to write a proper bug</a></p> +</div> + +<h2 id="Bug_Validity_Checklist">Bug Validity Checklist</h2> + +<h3 id="Verify_the_problem_you_found_is_a_New_Bug">Verify the problem you found is a New Bug</h3> + +<p>To verify if what you've found is indeed a new software bug in one of Mozilla's products, go through the following checklist to make sure it's something worth creating a new bug report for.</p> + +<ul> + <li>Make sure it's a <a href="http://support.mozilla.com/tiki-wiki_rankings.php?limit=500&categId=1" title="Support @ Mozilla">software bug</a>. It should be either an error, flaw, mistake failure of fault in the browser that produces an incorrect and/or unexpected result.</li> + <li>See if it's an already known bug by looking at your particular version's <a href="http://www.mozilla.com/en-US/firefox/releases/">release notes</a></li> + <li>Make sure that no one has already fixed the problem by re-verifying the bug against the latest trunk nightly located <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">here</a></li> + <li>Make sure there isn't a duplicate bug already created by using this handy <a href="https://developer.mozilla.org/En/Screening_duplicate_bugs#Searching guide">guide</a> to search through Bugzilla for your problem</li> +</ul> + +<p>If you're lost and not sure what to do always check out the IRC channel, #qa, at irc.mozilla.org and ask there. If no one answers, try posting to our Bugzilla <a href="/forums/quality-assurance-discussion/bugs">forums</a>. Otherwise if you haven't found your software bug, its time to write a bug report!</p> + +<h2 id="The_Bug_Report">The Bug Report</h2> + +<h3 id="Where_do_I_go_to_create_a_bug">Where do I go to create a bug?</h3> + +<ul> + <li>Mozilla's main tracking tool for reporting, investigating and fixing bugs is located <a href="http://bugzilla.mozilla.org/Bugzilla">here</a>. The first step in order to log a bug, is to register an account. To do that, go to Bugzilla's home page and click on the "New Account" hyperlink at the top of the page.</li> + <li>After registering and then logging into your new account, go back to the Bugzilla home page and click on the "New" hyperlink at the top of the page. Click the product that the bug is found in and fill out the resulting form. If you have any issues with finding the product you want to file the bug for, go to the #qa channel at irc.mozilla.org and ask for help from our very friendly MozQA community.</li> +</ul> + +<h3 id="What_does_the_community_want_to_see_in_a_bug_report">What does the community want to see in a bug report?</h3> + +<p>There are a couple of generally-held principles that should be taken into account when creating a bug. They would be the following:</p> + +<ul> + <li>Keep the Description and Summary <u>clear</u> and <u>concise</u></li> + <li>Only report one issue in a bug report</li> + <li>Report only facts in your bugs and remove any assumptions you might have</li> +</ul> + +<h3 id="General_Outline_of_a_Bug_Report">General Outline of a Bug Report</h3> + +<ul> + <li><strong>Summary</strong>: How would you describe the bug in less than 60 characters? It should quickly and uniquely identify a bug report as well as explain the problem, not your suggested solution.Good: "Cancelling a File Copy dialog crashes File Manager" Bad: "Software crashes" Bad: "Browser should work with my web site"</li> + <li><strong>Component</strong>: In which sub-part of the software does it exist?This field is a requirement to submit any bug report. Click the word "Component" to see a description of each component. If none seems appropriate, highlight the "General" component.</li> + <li><strong>OS</strong>: On which operating system (OS) did you find it? (e.g. Linux, Windows XP, Mac OS X.)Example: "<em>If you know the bug happens on more than one type of operating system, choose "All". If your OS isn't listed, choose Other".</em></li> + <li><strong>Description</strong>: The details of your problem report, including:-<u>Overview</u>: This is a larger detailed restatement of the summary. An example would be: <em>"Drag-selecting any page crashes Mac builds in the NSGetFactory function"</em>. -<u>Build Id</u>: To find this either go to the "about:" page via the location bar or, if you have MozQA's <a href="https://addons.mozilla.org/en-US/firefox/addon/nightly-tester-tools/">Nightly Tester Tools</a> extension, then go to Tools | Nightly Tester Tools and select the option that contains the output of the build Id. It should look something like this: <em>"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3"</em>. -<u>Additional Builds and Platforms</u>: Whether or not the bug takes place on other platforms (or browsers, if applicable). It should look something like this: <em>"Doesn't Occur On Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20081107 Firefox/3.1b2"</em>.</li> + <li><strong>Steps to Reproduce</strong>: Minimized, easy-to-follow steps that will trigger the bug. If they're necessary, make sure to include any special setup steps.A good example of this would look like the following: 1) View any web page. (I used the default sample page, http://www.google.com/). 2) Drag-select the page. Specifically, while holding down the mouse button, drag the mouse pointer downwards from any point in the browser's content region to the bottom of the browser's content region.</li> + <li><strong>Actual Results</strong>: What the application did after performing the above steps.An example would be: <em>The application crashed.</em></li> + <li><strong>Expected Results</strong>: What the application should have done, were the bug not present.An example would be: <em>The window should scroll downwards. Scrolled content should be selected. Or, at least, the application should not crash.</em></li> +</ul> + +<p>Continue reading <a href="http://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug-part-2/">How to Write a Proper Bug Report Part 2</a></p> + +<div class="originaldocinfo"> +<h2 id="Original_document_information_2">Original document information</h2> + +<ul> + <li>Author(s): Aakash Desai</li> + <li>Date last modified: June 3, 2013 at 2:41 am PST</li> +</ul> +</div> + +<p>Triager 라는 직업군을 처음봤으나 구글 검색결과 가장 의미에 부합하는 단어로 번역해봤습니다.</p> diff --git a/files/ko/mozilla/qa/index.html b/files/ko/mozilla/qa/index.html new file mode 100644 index 0000000000..87214803b6 --- /dev/null +++ b/files/ko/mozilla/qa/index.html @@ -0,0 +1,65 @@ +--- +title: 'QA: Quality assurance at Mozilla' +slug: Mozilla/QA +translation_of: Mozilla/QA +--- +<p><span class="seoSummary">QA부서에서 Mozilla 프로젝트를 함께 도울 수 있는 많은 것들이 있으며, 모두 코드를 필요로 하는건 아닙니다. 일부는 심지어 HTML이나 기타 웹 기술을 배우고, 필요로 하지도 않습니다. 테스트와 기타 QA활동으로 우리를 도우는데 관심이 있으시다면, <a class="external" href="http://quality.mozilla.org/">quality.mozilla.org</a>를 먼저 볼 수 있을겁니다..</span></p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">문서</h2> + + <dl> + <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">버그 작성 지침</a></dt> + <dd>보다 효과적으로 엔지니어가 버그를 고칠 수 있다는 가능성을 보고할 수 있습니다. 다음 지침을 통해, 버그를 모질라 엔지니어의 heep의 상단에 머물고, 고정되는것을 보장할 수 있습니다.</dd> + <dt style="font-weight: 700;"><a class="internal" href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="en-US/docs/Confirming unconfirmed bugs">확인되지 않은 버그 확인</a></dt> + <dd style="margin-left: 0; margin-bottom: .5em; padding-left: 15px;">최종 사용자의 유용한 버그 리포트만 식별하고 나머지는 닫습니다.</dd> + <dt style="font-weight: 700;"><a href="/en-US/docs/Screening_duplicate_bugs">중복 버그 심사</a></dt> + <dd style="margin-left: 0; margin-bottom: .5em; padding-left: 15px;">이미 나온 중복 보고서를 피하거나, 보고서를 수신함으로서 더 빠르게 버그를 수정하는데 도움을 얻릉 수 있습니다.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="en-US/docs/Reducing testcases">testcases 감소</a></dt> + <dd>개발자는 버그를 이해하고, 자동화 된 테스트를 만드는데 사용할 수 있어, 도움이 되는 간단한 테스트 케이스로 깨진 웹 페이지를 만들어 버그 리포트를 향상시킬 수 있습니다.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/en-US/docs/Mozilla/QA/Robocop">Robocop</a></dt> + <dd>로보캅. Firefox for Android에 사용되는 자동화 된 테스트 시스템에 대한 설명서를 참조하십시오.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/en-US/docs/Mozilla/QA/Automated_testing">Mozilla에서 자동화 된 테스트</a></dt> + <dd>모질라 코드에 대한 자동화된 테스트를 생성하시고 사용하는 방법에 대한 설명서를 참조하십시오.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="en-US/docs/Developing_Tests">개발 테스트</a></dt> + <dd>미래의 변화가 모질라에서 현재 제대로 작동되는 일들을 방해하지 않는지 확인하기 위함.</dd> + <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="en-US/docs/QA/Avoiding intermittent oranges">간혈적인 oranges 방지</a></dt> + <dd>검사 결과가 더 신뢰할 수 있도록 하는 방법에 대한 제한으로, 임의의 간혈적인 검사가 오류를 방지하는데 도움이 됩니다.</dd> + </dl> + + <p><span class="alllinks"><a href="/en-US/docs/tag/QA" title="en-US/docs/tag/QA">모두보기...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">커뮤니티</h2> + + <ul> + <li><a class="external" href="http://quality.mozilla.org/">QMO | quality.mozilla.org</a></li> + <li>Mozilla 포럼 보기... + <div></div> + </li> + <li><a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/#channels">IRC channels 리스트</a></li> + <li>MozillaZine 포럼: <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=23">Firefox Builds</a>, <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=29">Thunderbird Builds</a></li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">도구</h2> + + <ul> + <li><a href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> -모질라 프로젝트를 위한 버그 데이터베이스</li> + <li><a class="external" href="http://litmus.mozilla.org/">Litmus</a></li> + <li><a href="/en-US/docs/QA/Stress_Testing" title="en-US/docs/QA/Stress_Testing">Stress Testing</a></li> + </ul> + + <p><span class="alllinks"><a href="/en-US/docs/tag/QA:Tools" title="en-US/docs/tag/QA:Tools">모두보기...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">관련 항목</h2> + + <ul> + <li><a href="/en-US/docs/Developer_Guide" title="en-US/docs/Developing_Mozilla">Developing Mozilla</a></li> + </ul> + </td> + </tr> + </tbody> +</table> diff --git a/files/ko/mozilla/tech/index.html b/files/ko/mozilla/tech/index.html new file mode 100644 index 0000000000..b891a01cb4 --- /dev/null +++ b/files/ko/mozilla/tech/index.html @@ -0,0 +1,13 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - XUL + - 모질라 + - 시작하기 + - 참조 +translation_of: Mozilla/Tech +--- +<p>모질라 프로젝트의 컴포넌트로 사용되는 몇가지 기술이 있습니다. 이 문서는 이를 기술합니다. (현재 모든 하위문서가 번역되진 않았습니다.)</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/ko/mozilla/tech/xpcom/guide/index.html b/files/ko/mozilla/tech/xpcom/guide/index.html new file mode 100644 index 0000000000..898a1f2b20 --- /dev/null +++ b/files/ko/mozilla/tech/xpcom/guide/index.html @@ -0,0 +1,16 @@ +--- +title: XPCOM guide +slug: Mozilla/Tech/XPCOM/Guide +tags: + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide +--- +<p><span class="seoSummary">These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.</span></p> +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt></dt></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/Creating_XPCOM_Components">Creating XPCOM Components</a></dt><dd class="landingPageList"></dd></dl></div> + </div><p></p> diff --git a/files/ko/mozilla/tech/xpcom/language_bindings/index.html b/files/ko/mozilla/tech/xpcom/language_bindings/index.html new file mode 100644 index 0000000000..3bdc969de3 --- /dev/null +++ b/files/ko/mozilla/tech/xpcom/language_bindings/index.html @@ -0,0 +1,25 @@ +--- +title: Language bindings +slug: Mozilla/Tech/XPCOM/Language_Bindings +tags: + - Embedding + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM + - 'XPCOM:Language Bindings' +translation_of: Mozilla/Tech/XPCOM/Language_Bindings +--- +<p>An <strong>XPCOM Language Binding</strong> is a bridge between a particular language and <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> to provide access to XPCOM objects from that language, and to let modules written in that language be used as XPCOM objects by all other languages for which there are XPCOM bindings.</p> +<p>More specifically, an XPCOM language binding:</p> +<ul> + <li>Enables <em>access to XPCOM objects from that language</em> (where access means reading/writing/creating XPCOM objects as well as calling methods on them).</li> + <li>Exposes <em>modules written in the bound language as XPCOM objects</em>, thereby enabling all other languages for which XPCOM bindings exist to access these modules.</li> +</ul> +<p>Since the XPCOM layer itself is written in C/C++, its API can be accessed out-of-the-box using C or C++. In order to allow any other language to use the XPCOM API, a bridging layer is required.</p> +<p>The following bridging layers are currently available:</p> +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt></dt></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/PyXPCOM">PyXPCOM</a></dt><dd class="landingPageList"></dd></dl></div> + </div><p></p> diff --git a/files/ko/mozilla/tech/xpcom/reference/index.html b/files/ko/mozilla/tech/xpcom/reference/index.html new file mode 100644 index 0000000000..5a7636ec04 --- /dev/null +++ b/files/ko/mozilla/tech/xpcom/reference/index.html @@ -0,0 +1,30 @@ +--- +title: XPCOM reference +slug: Mozilla/Tech/XPCOM/Reference +tags: + - Add-ons + - Extensions + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Reference +--- +<p>This reference describes the interfaces and functions provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a> library. In addition, it details the various helper classes and functions, as well as the components, provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Glue">XPCOM glue</a> library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.</p> + +<div class="warning"> +<p><strong>WebExtensions are becoming the new standard for creating add-ons. </strong>Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API, and <a href="https://mzl.la/webext-feature-needed">report any missing functionality</a> so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a>. In addition, any binaries you use will then need to be converted for use with the WebExtensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a> API, or compiled using <a href="https://webassembly.github.io/">WebAssembly</a> or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</p> +</div> + +<div class="note"> +<p>If you're working on a module in the Mozilla codebase that's compiled with the <code>MOZILLA_INTERNAL_API</code> flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Guide/Internal_strings">XPCOM internal string guide</a> for documentation of the internal string API used within the Mozilla codebase.</p> +</div> + +<p></p><div class="row topicpage-table"> + <div class="section"><dl><dl><dt></dt></dl></dl></div> + <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/XPCOM_Interface_Reference">XPCOM Interface Reference</a></dt><dd class="landingPageList">This is a reference to the XPCOM interfaces provided by the Mozilla platform.</dd></dl></div> + </div><p></p> + +<p>Many XPCOM pages return an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Core_functions/nsresult">nsresult</a></code>. Prior to Gecko 19 (Firefox 19 / Thunderbird 19 / SeaMonkey 2.16), this was an integer that simply returned an error code. It is now a strongly typed <code>enum</code> when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.</p> diff --git a/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html b/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html new file mode 100644 index 0000000000..d282b17f13 --- /dev/null +++ b/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html @@ -0,0 +1,26 @@ +--- +title: About Scriptable Interfaces +slug: Mozilla/Tech/XPCOM/Reference/Interface/About_Scriptable_Interfaces +tags: + - 'Interfaces:Scriptable' +translation_of: Interfaces/About_Scriptable_Interfaces +--- +<p> </p> + +<h3 id=".EB.AC.B8.EC.84.9C.EC.9D.98_.EC.83.81.ED.83.9C" name=".EB.AC.B8.EC.84.9C.EC.9D.98_.EC.83.81.ED.83.9C">문서의 상태</h3> + +<p>이 문서는 시작단계이고 문서를 완성할 생각이 없을 지도 모릅니다. 이 문서에 있는 정보들은 <a class="external" href="http://www.mozilla.org/scriptable/" rel="freelink">http://www.mozilla.org/scriptable/</a> 와 <a href="ko/Creating_XPCOM_Components">XPCOM 컴포넌트 만들기</a>에 있는 내용을 기반으로 합니다.</p> + +<h3 id=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.84.B0.EB.B8.94_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.28Scriptable_Interface.29" name=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.84.B0.EB.B8.94_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.28Scriptable_Interface.29">스크립터블 인터페이스(Scriptable Interface)</h3> + +<p><a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces">인터페이스</a>는 XPCOM 컴포넌트의 자세한 세부 구현을 감추면서 기능을 외부 세계로 노출할 수 있도록 해 줍니다. <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces">인터페이스</a>는 <a href="ko/XPIDL">IDL(인터페이스 기술 언어)</a>로 작성됩니다.</p> + +<p>interface에 scriptable 라벨링 한다는 것은, 스크립트 언어(예: <a href="ko/JavaScript">JavaScript</a>)를 이용하여 인터페이스를 통해 컴포넌트를 참조할 수 있으며 또한 인터페이스를 구현한 새로운 컴포넌트를 작성할 수 있다는 것을 의미합니다.</p> + +<h3 id="XPConnect" name="XPConnect">XPConnect</h3> + +<p><a href="ko/XPConnect">XPConnect</a>는 <a href="ko/JavaScript">JavaScript</a> 언어로 스크립터블 인터페이스를 사용하거나 구현할 수 있게 해 주는 기술입니다. 다른 스크립트 언어들에서는 <a href="ko/XPConnect">XPConnect</a>을 지원하지 않습니다.</p> + +<h3 id="Python" name="Python">Python</h3> + +<p>Python 스크립트에서 스크립터블 인터페이스를 사용하거나 구현할 수 있게 해주는 <a href="ko/XPCOM">XPCOM</a>와 Python<a class="external" href="http://python.org/">을 연결하는 확장 기능 {{ Source("extensions/python") }} 이 있습니다. </a></p> diff --git a/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html b/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html new file mode 100644 index 0000000000..c417f645f5 --- /dev/null +++ b/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html @@ -0,0 +1,372 @@ +--- +title: nsILoginManager +slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager +tags: + - Firefox 3 + - Interfaces + - 'Interfaces:Scriptable' + - Login Manager + - NeedsTranslation + - Thunderbird 3 + - TopicStub + - XPCOM + - XPCOM API Reference + - thunderbird +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager +--- +<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;"> +<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/passwordmgr/public/nsILoginManager.idl" rel="custom">toolkit/components/passwordmgr/public/nsILoginManager.idl</a></code><span style="text-align: right; float: right;"><a href="/ko/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">스크립트에서 사용 가능</a></span></div> +<span style="padding: 4px 2px;"> + +Used to interface with the built-in Password Manager +</span> + + <div style="height: 42px; position: relative; padding: 2px; width: auto;"> + + <div style="top: 22px; font-size: 11px; position: absolute;">1.0</div> + + <div style="top: 22px; font-size: 11px; position: absolute; left: 0px; text-align: right; float: right; width: 100%;">66</div> + + <div style="height: 8px; top: 16px; background: #dd0000; left: 0px; position: absolute; width: 8.571428571428571%;"></div> + +<div style="height: 8px; top: 16px; left: 8.571428571428571%; background: #00dd00; position: absolute; width: 91.42857142857143%;" title="Introduced in Gecko 1.9 (Firefox 3)"></div> + +<div style="top: 0px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Introduced</div> +<div style="top: 22px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Gecko 1.9</div> + + <div style="height: 8px; top: 16px; left: 9.976190285714287%; background: #eeee00; position: absolute; width: 1%; border-radius: 4px; -webkit-border-radius: 4px;" title="Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)"></div> + +</div> + +<div style="background: #eee; padding: 2px;"> +Inherits from: <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code> +<span style="text-align: right; float: right;">Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)</span></div> +</div><p></p> +<p>Replaces <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPasswordManager" title="">nsIPasswordManager</a></code> which was used in older versions of Gecko.</p> +<p>Implemented by: <code>@mozilla.org/login-manager;1</code>. To create an instance, use:</p> +<pre class="eval">var loginManager = Components.classes["@mozilla.org/login-manager;1"] + .getService(Components.interfaces.nsILoginManager); +</pre> +<h2 id="Method_overview" name="Method_overview">Method overview</h2> +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#addLogin()">addLogin</a>(in nsILoginInfo aLogin);</code></td> + </tr> + <tr> + <td><code>nsIAutoCompleteResult <a href="#autoCompleteSearch()">autoCompleteSearch</a>(in AString aSearchString, in nsIAutoCompleteResult aPreviousResult, in nsIDOMHTMLInputElement aElement);</code></td> + </tr> + <tr> + <td><code>unsigned long <a href="#countLogins()">countLogins</a>(in AString aHostname, in AString aActionURL, in AString aHttpRealm);</code></td> + </tr> + <tr> + <td><code>boolean <a href="#fillForm()">fillForm</a>(in nsIDOMHTMLFormElement aForm);</code> </td> + </tr> + <tr> + <td><code>void <a href="#findLogins()">findLogins</a>(out unsigned long count, in AString aHostname, in AString aActionURL, in AString aHttpRealm, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td> + </tr> + <tr> + <td><code>void <a href="#getAllDisabledHosts()">getAllDisabledHosts</a>([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames);</code></td> + </tr> + <tr> + <td><code>void <a href="#getAllLogins()">getAllLogins</a>([optional] out unsigned long count, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td> + </tr> + <tr> + <td><code>boolean <a href="#getLoginSavingEnabled()">getLoginSavingEnabled</a>(in AString aHost);</code></td> + </tr> + <tr> + <td><code>void <a href="#modifyLogin()">modifyLogin</a>(in nsILoginInfo oldLogin, in nsISupports newLoginData);</code></td> + </tr> + <tr> + <td><code>void <a href="#removeAllLogins()">removeAllLogins</a>();</code></td> + </tr> + <tr> + <td><code>void <a href="#removeLogin()">removeLogin</a>(in nsILoginInfo aLogin);</code></td> + </tr> + <tr> + <td><code>void <a href="#searchLogins()">searchLogins</a>(out unsigned long count, in nsIPropertyBag matchData, [retval, array, size_is(count)] out nsILoginInfo logins);</code> </td> + </tr> + <tr> + <td><code>void <a href="#setLoginSavingEnabled()">setLoginSavingEnabled</a>(in AString aHost, in boolean isEnabled);</code></td> + </tr> + </tbody> +</table> +<h2 id="Methods" name="Methods">Methods</h2> +<h3 id="addLogin()" name="addLogin()">addLogin()</h3> +<p>Stores a new login in the Login Manager.</p> +<p></p><div class="blockIndicator note"><strong>주의:</strong> Default values for the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are created if the specified login doesn't explicitly specify them.</div><p></p> +<pre class="eval">void addLogin( + in nsILoginInfo aLogin +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aLogin</code></dt> + <dd> + The login to store.</dd> +</dl> +<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6> +<dl> + <dt> + </dt> + <dd> + An exception is thrown if the login information is already stored in the Login Manager. To change a login, you have to use <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#modifyLogin()">modifyLogin()</a></code>.</dd> +</dl> +<h3 id="autoCompleteSearch()" name="autoCompleteSearch()">autoCompleteSearch()</h3> +<p>Generates results for a user field autocomplete menu.</p> +<p></p><div class="blockIndicator note"><strong>주의:</strong> This method is provided for use only by the <code>FormFillController</code>, which calls it directly. It should not be used for any other purpose.</div><p></p> +<pre class="eval">nsIAutoCompleteResult autoCompleteSearch( + in AString aSearchString, + in nsIAutoCompleteResult aPreviousResult, + in nsIDOMHTMLInputElement aElement +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aSearchString</code></dt> + <dd> + Missing Description</dd> + <dt> + <code>aPreviousResult</code></dt> + <dd> + Missing Description</dd> + <dt> + <code>aElement</code></dt> + <dd> + Missing Description</dd> +</dl> +<h6 id="Return_value" name="Return_value">Return value</h6> +<p>Missing Description</p> +<h3 id="countLogins()" name="countLogins()">countLogins()</h3> +<p>Returns the number of logins matching the specified criteria. Called when only the number of logins is needed, and not the actual logins (which avoids prompting the user for a Master Password, as the logins don't need to be decrypted).</p> +<pre class="eval">unsigned long countLogins( + in AString aHostname, + in AString aActionURL, + in AString aHttpRealm +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aHostname</code></dt> + <dd> + The hostname to which to restrict searches, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>". To match all hostnames, specify <code>""</code> (empty string). A value of <code>null</code> will cause countLogins() to not match any logins.</dd> + <dt> + <code>aActionURL</code></dt> + <dd> + For form logins, this parameter should specify the URL to which the form will be submitted. To match any form login, specify <code>""</code> (empty string). To not match any form logins (For example when interested in protocol logins only), specify <code>null</code>.</dd> + <dt> + <code>aHttpRealm</code></dt> + <dd> + For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). To match any protocol login, specify <code>""</code> (empty string). To not match any protocol logins (For example when interested in form logins only), specify <code>null</code>.</dd> +</dl> +<h6 id="Return_value" name="Return_value">Return value</h6> +<p>The number of logins matching the parameters passed.</p> +<p></p><h3 id="fillForm()">fillForm()</h3><p></p> +<p>Fills out a form with login information, if appropriate information is available.</p> +<p></p><div class="blockIndicator note"><strong>주의:</strong> This method will attempt to fill out the form regardless of the setting of the <code>signon.autofillForms</code> preference.</div><p></p> +<pre class="eval">boolean fillForm( + in nsIDOMHTMLFormElement aForm +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aForm</code></dt> + <dd> + The HTMLform to attempt to fill out.</dd> +</dl> +<h6 id="Return_value" name="Return_value">Return value</h6> +<p><code>true</code> if the form was successfully filled out; otherwise <code>false</code>.</p> +<h3 id="findLogins()" name="findLogins()">findLogins()</h3> +<p>Searches for logins matching the specified criteria. Called when looking for logins that might be applicable to a given form or authentication request.</p> +<pre class="eval">void findLogins( + out unsigned long count, + in AString aHostname, + in AString aActionURL, + in AString aHttpRealm, + [retval, array, size_is(count)] out nsILoginInfo logins +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>count</code></dt> + <dd> + The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd> + <dt> + <code>aHostname</code></dt> + <dd> + The hostname to restrict searches to, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>".</dd> + <dt> + <code>aActionURL</code></dt> + <dd> + For form logins, this parameter should specify the URL to which the form will be submitted. For protocol logins, specify <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd> + <dt> + <code>aHttpRealm</code></dt> + <dd> + For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). For form logins, this parameter should be <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd> + <dt> + <code>logins</code></dt> + <dd> + An array of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd> +</dl> +<h6 id="Example" name="Example">Example</h6> +<p>This method can be called from JavaScript like this:</p> +<pre class="brush: js"> var logins = myLoginMgr.findLogins({}, hostname, ...); +</pre> +<h3 id="getAllDisabledHosts()" name="getAllDisabledHosts()">getAllDisabledHosts()</h3> +<p>Returns a list of all hosts for which login saving is disabled.</p> +<pre class="eval">void getAllDisabledHosts( + [optional] out unsigned long count, + [retval, array, size_is(count)] out wstring hostnames +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>count</code></dt> + <dd> + The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd> + <dt> + <code>hostnames</code></dt> + <dd> + An array of hostname strings in URL format without a pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd> +</dl> +<h6 id="Example" name="Example">Example</h6> +<p>You can call this method from JavaScript like this:</p> +<pre class="brush: js"> var disabledHosts = myLoginMgr.getAllDisabledHosts({}); +</pre> +<h3 id="getAllLogins()" name="getAllLogins()">getAllLogins()</h3> +<p>Returns an array containing all logins recorded by the Login Manager.</p> +<p>If you just want to see if any logins are stored, use <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#countLogins()">countLogins()</a></code> instead. It's more efficient, and avoids the possibility of the user being prompted for their master password.</p> +<pre class="eval">void getAllLogins( + [optional] out unsigned long count, + [retval, array, size_is(count)] out nsILoginInfo logins +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>count</code></dt> + <dd> + The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd> + <dt> + <code>logins</code></dt> + <dd> + An array of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects containing all the logins the Login Manager has on record.</dd> +</dl> +<h6 id="Example" name="Example">Example</h6> +<p>You can call this method from JavaScript like this:</p> +<pre class="brush: js"> var logins = myLoginMgr.getAllLogins({}); +</pre> +<h3 id="getLoginSavingEnabled()" name="getLoginSavingEnabled()">getLoginSavingEnabled()</h3> +<p>Reports whether or not saving login information is enabled for a host.</p> +<pre class="eval">boolean getLoginSavingEnabled( + in AString aHost +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aHost</code></dt> + <dd> + The hostname to check. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd> +</dl> +<h6 id="Return_value" name="Return_value">Return value</h6> +<p><code>true</code> if login saving is enabled for the host, otherwise <code>false</code>.</p> +<h3 id="modifyLogin()" name="modifyLogin()">modifyLogin()</h3> +<p>Modifies an existing login by replacing it with a new one.</p> +<p>If newLoginData is a <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code>, all of the old login's <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> properties are changed to the values from newLoginData (but the old login's <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are unmodified).</p> +<p>If newLoginData is a <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag" title="">nsIPropertyBag</a></code>, only the specified properties will be changed. The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties of oldLogin can be changed in this manner.</p> +<p>If the propertybag contains an item named "timesUsedIncrement", the login's timesUsed property will be incremented by the item's value.</p> +<pre class="eval">void modifyLogin( + in nsILoginInfo oldLogin, + in nsISupports newLoginData +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>oldLogin</code></dt> + <dd> + The login to be modified.</dd> + <dt> + <code>newLoginData</code></dt> + <dd> + The login information to replace the <code>oldLogin</code> with. This may be specified as either an <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> or an <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag2" title="">nsIPropertyBag2</a></code> object.</dd> +</dl> +<h3 id="removeAllLogins()" name="removeAllLogins()">removeAllLogins()</h3> +<p>Removes all logins known by the Login Manager. This works without a need for the master password, if one is set.</p> +<pre class="eval">void removeAllLogins(); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<p>None.</p> +<h3 id="removeLogin()" name="removeLogin()">removeLogin()</h3> +<p>Removes a login from the Login Manager.</p> +<p></p><div class="blockIndicator note"><strong>주의:</strong> The specified login must exactly match a stored login. However, the values of any <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are ignored.</div><p></p> +<pre class="eval">void removeLogin( + in nsILoginInfo aLogin +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aLogin</code></dt> + <dd> + The login to remove from the Login Manager. Only a login that is an exact match is deleted.</dd> +</dl> +<p></p><h3 id="searchLogins()">searchLogins()</h3><p></p> +<p>Searches for logins in the login manager's data store, returning an array of matching logins. If there are no matching logins, an empty array is returned.</p> +<pre class="eval">void searchLogins( + out unsigned long count, + in nsIPropertyBag matchData, + [retval, array, size_is(count)] out nsILoginInfo logins +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>count</code></dt> + <dd> + The number of elements in the returned array.</dd> + <dt> + <code>matchData</code></dt> + <dd> + The data used for the search. This does not follow the same requirements as <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#findLogins()">findLogins()</a></code> for those fields; wildcard matches are not specified.</dd> + <dt> + <code>logins</code></dt> + <dd> + An array of matching <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd> +</dl> +<h6 id="Example" name="Example">Example</h6> +<p>This method can be called from JavaScript like this:</p> +<pre class="brush: js"> var logins = myLoginMgr.searchLogins({}, matchData); + var numLogins = logins.length; +</pre> +<h3 id="setLoginSavingEnabled()" name="setLoginSavingEnabled()">setLoginSavingEnabled()</h3> +<p>Enables or disables storing logins for a specified host. When login storing is disabled, the Login Manager won't prompt the user to store logins for that host. Existing logins are not affected.</p> +<pre class="eval">void setLoginSavingEnabled( + in AString aHost, + in boolean isEnabled +); +</pre> +<h6 id="Parameters" name="Parameters">Parameters</h6> +<dl> + <dt> + <code>aHost</code></dt> + <dd> + The hostname to adjust the setting for. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd> + <dt> + <code>isEnabled</code></dt> + <dd> + If <code>true</code>, login saving is enabled for the specified host. If <code>false</code>, login saving is disabled.</dd> +</dl> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code></li> + <li><a href="/en/XPCOM_Interface_Reference/nsILoginManager/Using_nsILoginManager" title="en/Using_nsILoginManager">Using nsILoginManager</a></li> +</ul> +<p></p> diff --git a/files/ko/mozilla/tech/xul/attribute/accesskey/index.html b/files/ko/mozilla/tech/xul/attribute/accesskey/index.html new file mode 100644 index 0000000000..611ef87975 --- /dev/null +++ b/files/ko/mozilla/tech/xul/attribute/accesskey/index.html @@ -0,0 +1,44 @@ +--- +title: accesskey +slug: Mozilla/Tech/XUL/Attribute/accesskey +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/accesskey +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div> +<div class="noinclude"> + <dl> + <dd> + 사용요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/textbox (Firefox autocomplete)" title="textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a></code></dd> + </dl> +</div> +<dl> + <dt> + <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd> + 타입: + <i> + character</i> + </dd> + <dd> + 이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다. + <div class="noinclude"> + 문자는 보통 밑줄이 그어져 출력되며, 이는 플랫폼과 테마에 따라 다를 수 있습니다. 사용자가 Alt(또는 플랫폼에 따라 다른 키)와 단축키를 같이 누르면 창의 어디에 있든 해당 요소가 활성화 됩니다. <b>속성값은 대소문자를 구분하지 않지만 라벨에 대문자와 소문자가 같이 있다면 accesskey 속성과 동일한 문자가 사용됩니다.</b></div> + </dd> +</dl> +<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4> +<div class="float-right"> + <img alt="Image:XUL_ref_accesskey_attr.png"></div> +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> +<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4> +<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> +<div class="noinclude"> + </div> +<p></p> diff --git a/files/ko/mozilla/tech/xul/attribute/currentset/index.html b/files/ko/mozilla/tech/xul/attribute/currentset/index.html new file mode 100644 index 0000000000..2f597090c5 --- /dev/null +++ b/files/ko/mozilla/tech/xul/attribute/currentset/index.html @@ -0,0 +1,25 @@ +--- +title: currentset +slug: Mozilla/Tech/XUL/Attribute/currentset +tags: + - MDC Project + - NeedsTechnicalReview + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute/currentset +--- +<div class="noinclude"> + <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div> +<dl> + <dt> + <code id="a-currentset"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code></dt> + <dd> + <b><span class="highlightred">Firefox only</span></b></dd> + <dd> + 타입: + <i> + comma-separated string</i> + </dd> + <dd> + 현재 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 출력되는 항목의 집합입니다. 이 집합은 사용자가 툴바를 커스터마이징(사용자 지정) 할 경우 변경될 수 있습니다. 속성값은 쉼표(,)로 분리된 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>에 있는 항목들의 ID 목록이어야 하며, 추가적으로 "<code>separator</code>", "<code>spring</code>", "<code>spacer</code>"의 문자열을 포함할 수 있습니다.</dd> +</dl> +<p><span class="comment">this isn't necessary the *current* set, i.e. it might not be equal the value of the currentSet property which is computed from the actual DOM</span></p> diff --git a/files/ko/mozilla/tech/xul/attribute/image.onload/index.html b/files/ko/mozilla/tech/xul/attribute/image.onload/index.html new file mode 100644 index 0000000000..a8b0c5020a --- /dev/null +++ b/files/ko/mozilla/tech/xul/attribute/image.onload/index.html @@ -0,0 +1,12 @@ +--- +title: image.onload +slug: Mozilla/Tech/XUL/Attribute/image.onload +translation_of: Archive/Mozilla/XUL/Attribute/image.onload +--- +<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div> + +<dl> + <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt> + <dd>Type: <em>script code</em></dd> + <dd>이 이벤트 핸들러는 이미지 로딩이 완료 되었을때 <code><a href="/ko/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element에서 호출됩니다. This applies whether the image is applied via the <code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute or the <code>list-style-image</code> style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.</dd> +</dl> diff --git a/files/ko/mozilla/tech/xul/attribute/index.html b/files/ko/mozilla/tech/xul/attribute/index.html new file mode 100644 index 0000000000..6091401093 --- /dev/null +++ b/files/ko/mozilla/tech/xul/attribute/index.html @@ -0,0 +1,270 @@ +--- +title: Attributes +slug: Mozilla/Tech/XUL/Attribute +tags: + - XUL Attributes +translation_of: Archive/Mozilla/XUL/Attribute +--- +<p><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></p> +<ul> + <li><a href="ko/XUL/Attribute/acceltext">acceltext</a></li> + <li><a href="ko/XUL/Attribute/accessible">accessible</a></li> + <li><a href="ko/XUL/Attribute/accesskey">accesskey</a></li> + <li><a href="ko/XUL/Attribute/afterselected">afterselected</a></li> + <li><a href="ko/XUL/Attribute/align">align</a></li> + <li><a href="ko/XUL/Attribute/allowevents">allowevents</a></li> + <li><a href="ko/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li> + <li><a href="ko/XUL/Attribute/alternatingbackground">alternatingbackground</a></li> + <li><a href="ko/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li> + <li><a href="ko/XUL/Attribute/attribute">attribute</a></li> + <li><a href="ko/XUL/Attribute/autocheck">autocheck</a></li> + <li><a href="ko/XUL/Attribute/autoCheck">autoCheck</a></li> + <li><a href="ko/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li> + <li><a href="ko/XUL/Attribute/autocompletepopup">autocompletepopup</a></li> + <li><a href="ko/XUL/Attribute/autocompletesearch">autocompletesearch</a></li> + <li><a href="ko/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li> + <li><a href="ko/XUL/Attribute/autoFill">autoFill</a></li> + <li><a href="ko/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li> + <li><a href="ko/XUL/Attribute/autoscroll">autoscroll</a></li> + <li><a href="ko/XUL/Attribute/beforeselected">beforeselected</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li> + <li><a href="ko/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li> + <li><a href="ko/XUL/Attribute/buttonalign">buttonalign</a></li> + <li><a href="ko/XUL/Attribute/buttondir">buttondir</a></li> + <li><a href="ko/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li> + <li><a href="ko/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li> + <li><a href="ko/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li> + <li><a href="ko/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li> + <li><a href="ko/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li> + <li><a href="ko/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li> + <li><a href="ko/XUL/Attribute/buttonorient">buttonorient</a></li> + <li><a href="ko/XUL/Attribute/buttonpack">buttonpack</a></li> + <li><a href="ko/XUL/Attribute/buttons">buttons</a></li> + <li><a href="ko/XUL/Attribute/checked">checked</a></li> + <li><a href="ko/XUL/Attribute/checkState">checkState</a></li> + <li><a href="ko/XUL/Attribute/class">class</a></li> + <li><a href="ko/XUL/Attribute/closebutton">closebutton</a></li> + <li><a href="ko/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li> + <li><a href="ko/XUL/Attribute/collapse">collapse</a></li> + <li><a href="ko/XUL/Attribute/collapsed">collapsed</a></li> + <li><a href="ko/XUL/Attribute/color">color</a></li> + <li><a href="ko/XUL/Attribute/cols">cols</a></li> + <li><a href="ko/XUL/Attribute/command">command</a></li> + <li><a href="ko/XUL/Attribute/commandupdater">commandupdater</a></li> + <li><a href="ko/XUL/Attribute/completedefaultindex">completedefaultindex</a></li> + <li><a href="ko/XUL/Attribute/container">container</a></li> + <li><a href="ko/XUL/Attribute/containment">containment</a></li> + <li><a href="ko/XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li> + <li><a href="ko/XUL/Attribute/contenttooltip">contenttooltip</a></li> + <li><a href="ko/XUL/Attribute/context">context</a></li> + <li><a href="ko/XUL/Attribute/contextmenu">contextmenu</a></li> + <li><a href="ko/XUL/Attribute/control">control</a></li> + <li><a href="ko/XUL/Attribute/crop">crop</a></li> + <li><a href="ko/XUL/Attribute/curpos">curpos</a></li> + <li><a href="ko/XUL/Attribute/current">current</a></li> + <li><a href="ko/XUL/Attribute/currentset">currentset</a></li> + <li><a href="ko/XUL/Attribute/customindex">customindex</a></li> + <li><a href="ko/XUL/Attribute/customizable">customizable</a></li> + <li><a href="ko/XUL/Attribute/cycler">cycler</a></li> + <li><a href="ko/XUL/Attribute/datasources">datasources</a></li> + <li><a href="ko/XUL/Attribute/default">default</a></li> + <li><a href="ko/XUL/Attribute/defaultButton">defaultButton</a></li> + <li><a href="ko/XUL/Attribute/defaultset">defaultset</a></li> + <li><a href="ko/XUL/Attribute/description">description</a></li> + <li><a href="ko/XUL/Attribute/dir">dir</a></li> + <li><a href="ko/XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li> + <li><a href="ko/XUL/Attribute/disableautocomplete">disableautocomplete</a></li> + <li><a href="ko/XUL/Attribute/disableautoselect">disableautoselect</a></li> + <li><a href="ko/XUL/Attribute/disableclose">disableclose</a></li> + <li><a href="ko/XUL/Attribute/disabled">disabled</a></li> + <li><a href="ko/XUL/Attribute/disablehistory">disablehistory</a></li> + <li><a href="ko/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li> + <li><a href="ko/XUL/Attribute/disablekeynavigation">disablekeynavigation</a></li> + <li><a href="ko/XUL/Attribute/disablesecurity">disablesecurity</a></li> + <li><a href="ko/XUL/Attribute/dlgType">dlgType</a></li> + <li><a href="ko/XUL/Attribute/dragging">dragging</a></li> + <li><a href="ko/XUL/Attribute/editable">editable</a></li> + <li><a href="ko/XUL/Attribute/editortype">editortype</a></li> + <li><a href="ko/XUL/Attribute/element">element</a></li> + <li><a href="ko/XUL/Attribute/empty">empty</a></li> + <li><a href="ko/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li> + <li><a href="ko/XUL/Attribute/enablehistory">enablehistory</a></li> + <li><a href="ko/XUL/Attribute/equalsize">equalsize</a></li> + <li><a href="ko/XUL/Attribute/eventnode">eventnode</a></li> + <li><a href="ko/XUL/Attribute/events">events</a></li> + <li><a href="ko/XUL/Attribute/firstpage">firstpage</a></li> + <li><a href="ko/XUL/Attribute/first-tab">first-tab</a></li> + <li><a href="ko/XUL/Attribute/fixed">fixed</a></li> + <li><a href="ko/XUL/Attribute/flags">flags</a></li> + <li><a href="ko/XUL/Attribute/flex">flex</a></li> + <li><a href="ko/XUL/Attribute/focused">focused</a></li> + <li><a href="ko/XUL/Attribute/forceComplete">forceComplete</a></li> + <li><a href="ko/XUL/Attribute/forcecomplete">forcecomplete</a></li> + <li><a href="ko/XUL/Attribute/grippyhidden">grippyhidden</a></li> + <li><a href="ko/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li> + <li><a href="ko/XUL/Attribute/group">group</a></li> + <li><a href="ko/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> + <li><a href="ko/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li> + <li><a href="ko/XUL/Attribute/height">height</a></li> + <li><a href="ko/XUL/Attribute/helpURI">helpURI</a></li> + <li><a href="ko/XUL/Attribute/hidden">hidden</a></li> + <li><a href="ko/XUL/Attribute/hidechrome">hidechrome</a></li> + <li><a href="ko/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li> + <li><a href="ko/XUL/Attribute/hideheader">hideheader</a></li> + <li><a href="ko/XUL/Attribute/homepage">homepage</a></li> + <li><a href="ko/XUL/Attribute/icon">icon</a></li> + <li><a href="ko/XUL/Attribute/id">id</a></li> + <li><a href="ko/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> + <li><a href="ko/XUL/Attribute/ignoreblurwhilesearching">ignorebluewhilesearching</a></li> + <li><a href="ko/XUL/Attribute/ignorecolumnpicker">ignorecolumnpicker</a></li> + <li><a href="ko/XUL/Attribute/ignorekeys">ignorekeys</a></li> + <li><a href="ko/XUL/Attribute/image">image</a></li> + <li><a href="ko/XUL/Attribute/increment">increment</a></li> + <li><a href="ko/XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li> + <li><a href="ko/XUL/Attribute/insertafter">insertafter</a></li> + <li><a href="ko/XUL/Attribute/insertbefore">insertbefore</a></li> + <li><a href="ko/XUL/Attribute/instantApply">instantApply</a></li> + <li><a href="ko/XUL/Attribute/inverted">inverted</a></li> + <li><a href="ko/XUL/Attribute/iscontainer">iscontainer</a></li> + <li><a href="ko/XUL/Attribute/isempty">isempty</a></li> + <li><a href="ko/XUL/Attribute/key">key</a></li> + <li><a href="ko/XUL/Attribute/keycode">keycode</a></li> + <li><a href="ko/XUL/Attribute/keytext">keytext</a></li> + <li><a href="ko/XUL/Attribute/label">label</a></li> + <li><a href="ko/XUL/Attribute/lastpage">lastpage</a></li> + <li><a href="ko/XUL/Attribute/lastSelected">lastSelected</a></li> + <li><a href="ko/XUL/Attribute/last-tab">last-tab</a></li> + <li><a href="ko/XUL/Attribute/left">left</a></li> + <li><a href="ko/XUL/Attribute/linkedpanel">linkedpanel</a></li> + <li><a href="ko/XUL/Attribute/maxheight">maxheight</a></li> + <li><a href="ko/XUL/Attribute/maxlength">maxlength</a></li> + <li><a href="ko/XUL/Attribute/maxpos">maxpos</a></li> + <li><a href="ko/XUL/Attribute/maxrows">maxrows</a></li> + <li><a href="ko/XUL/Attribute/maxwidth">maxwidth</a></li> + <li><a href="ko/XUL/Attribute/member">member</a></li> + <li><a href="ko/XUL/Attribute/menu">menu</a></li> + <li><a href="ko/XUL/Attribute/menuactive">menuactive</a></li> + <li><a href="ko/XUL/Attribute/minheight">minheight</a></li> + <li><a href="ko/XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li> + <li><a href="ko/XUL/Attribute/minresultsforpopup">minresultsforpopup</a></li> + <li><a href="ko/XUL/Attribute/minwidth">minwidth</a></li> + <li><a href="ko/XUL/Attribute/mode">mode</a></li> + <li><a href="ko/XUL/Attribute/modifiers">modifiers</a></li> + <li><a href="ko/XUL/Attribute/mousethrough">mousethrough</a></li> + <li><a href="ko/XUL/Attribute/multiline">multiline</a></li> + <li><a href="ko/XUL/Attribute/name">name</a></li> + <li><a href="ko/XUL/Attribute/next">next</a></li> + <li><a href="ko/XUL/Attribute/noautohide">noautohide</a></li> + <li><a href="ko/XUL/Attribute/nomatch">nomatch</a></li> + <li><a href="ko/XUL/Attribute/observes">observes</a></li> + <li><a href="ko/XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li> + <li><a href="ko/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li> + <li><a href="ko/XUL/Attribute/onchange">onchange</a></li> + <li><a href="ko/XUL/Attribute/onclosetab">onclosetab</a></li> + <li><a href="ko/XUL/Attribute/oncommand">oncommand</a></li> + <li><a href="ko/XUL/Attribute/oncommandupdate">oncommandupdate</a></li> + <li><a href="ko/XUL/Attribute/ondialogaccept">ondialogaccept</a></li> + <li><a href="ko/XUL/Attribute/ondialogcancel">ondialogcancel</a></li> + <li><a href="ko/XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li> + <li><a href="ko/XUL/Attribute/ondialoghelp">ondialoghelp</a></li> + <li><a href="ko/XUL/Attribute/onerror">onerror</a></li> + <li><a href="ko/XUL/Attribute/onerrorcommand">onerrorcommand</a></li> + <li><a href="ko/XUL/Attribute/oninput">oninput</a></li> + <li><a href="ko/XUL/Attribute/onload">onload</a></li> + <li><a href="ko/XUL/Attribute/onnewtab">onnewtab</a></li> + <li><a href="ko/XUL/Attribute/onpageadvanced">onpageadvanced</a></li> + <li><a href="ko/XUL/Attribute/onpagehide">onpagehide</a></li> + <li><a href="ko/XUL/Attribute/onpagerewound">onpagerewound</a></li> + <li><a href="ko/XUL/Attribute/onpageshow">onpageshow</a></li> + <li><a href="ko/XUL/Attribute/onpanelload">onpanelload</a></li> + <li><a href="ko/XUL/Attribute/onpopuphidden">onpopuphidden</a></li> + <li><a href="ko/XUL/Attribute/onpopuphiding">onpopuphiding</a></li> + <li><a href="ko/XUL/Attribute/onpopupshowing">onpopupshowing</a></li> + <li><a href="ko/XUL/Attribute/onpopupshown">onpopupshown</a></li> + <li><a href="ko/XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li> + <li><a href="ko/XUL/Attribute/onselect">onselect</a></li> + <li><a href="ko/XUL/Attribute/ontextcommand">ontextcommand</a></li> + <li><a href="ko/XUL/Attribute/ontextentered">ontextentered</a></li> + <li><a href="ko/XUL/Attribute/ontextrevert">ontextrevert</a></li> + <li><a href="ko/XUL/Attribute/ontextreverted">ontextreverted</a></li> + <li><a href="ko/XUL/Attribute/onwizardback">onwizardback</a></li> + <li><a href="ko/XUL/Attribute/onwizardcancel">onwizardcancel</a></li> + <li><a href="ko/XUL/Attribute/onwizardfinish">onwizardfinish</a></li> + <li><a href="ko/XUL/Attribute/onwizardnext">onwizardnext</a></li> + <li><a href="ko/XUL/Attribute/open">open</a></li> + <li><a href="ko/XUL/Attribute/ordinal">ordinal</a></li> + <li><a href="ko/XUL/Attribute/orient">orient</a></li> + <li><a href="ko/XUL/Attribute/pack">pack</a></li> + <li><a href="ko/XUL/Attribute/pageid">pageid</a></li> + <li><a href="ko/XUL/Attribute/pageincrement">pageincrement</a></li> + <li><a href="ko/XUL/Attribute/pagestep">pagestep</a></li> + <li><a href="ko/XUL/Attribute/parent">parent</a></li> + <li><a href="ko/XUL/Attribute/parsetype">parsetype</a></li> + <li><a href="ko/XUL/Attribute/persist">persist</a></li> + <li><a href="ko/XUL/Attribute/phase">phase</a></li> + <li><a href="ko/XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li> + <li><a href="ko/XUL/Attribute/popup">popup</a></li> + <li><a href="ko/XUL/Attribute/position">position</a></li> + <li><a href="ko/XUL/Attribute/preference">preference</a></li> + <li><a href="ko/XUL/Attribute/preference-editable">preference-editable</a></li> + <li><a href="ko/XUL/Attribute/primary">primary</a></li> + <li><a href="ko/XUL/Attribute/properties">properties</a></li> + <li><a href="ko/XUL/Attribute/readonly">readonly</a></li> + <li><a href="ko/XUL/Attribute/ref">ref</a></li> + <li><a href="ko/XUL/Attribute/removeelement">removeelement</a></li> + <li><a href="ko/XUL/Attribute/resizeafter">resizeafter</a></li> + <li><a href="ko/XUL/Attribute/resizebefore">resizebefore</a></li> + <li><a href="ko/XUL/Attribute/rows">rows</a></li> + <li><a href="ko/XUL/Attribute/screenX">screenX</a></li> + <li><a href="ko/XUL/Attribute/screenY">screenY</a></li> + <li><a href="ko/XUL/Attribute/searchSessions">searchSessions</a></li> + <li><a href="ko/XUL/Attribute/selected">selected</a></li> + <li><a href="ko/XUL/Attribute/selectedIndex">selectedIndex</a></li> + <li><a href="ko/XUL/Attribute/seltype">seltype</a></li> + <li><a href="ko/XUL/Attribute/setfocus">setfocus</a></li> + <li><a href="ko/XUL/Attribute/showCommentColumn">showCommentColumn</a></li> + <li><a href="ko/XUL/Attribute/showcommentcolumn">showcommentcolumn</a></li> + <li><a href="ko/XUL/Attribute/showpopup">showpopup</a></li> + <li><a href="ko/XUL/Attribute/size">size</a></li> + <li><a href="ko/XUL/Attribute/sizemode">sizemode</a></li> + <li><a href="ko/XUL/Attribute/sizetopopup">sizetopopup</a></li> + <li><a href="ko/XUL/Attribute/sort">sort</a></li> + <li><a href="ko/XUL/Attribute/sortActive">sortActive</a></li> + <li><a href="ko/XUL/Attribute/sortDirection">sortDirection</a></li> + <li><a href="ko/XUL/Attribute/sortResource">sortResource</a></li> + <li><a href="ko/XUL/Attribute/sortResource2">sortResource2</a></li> + <li><a href="ko/XUL/Attribute/src">src</a></li> + <li><a href="ko/XUL/Attribute/state">state</a></li> + <li><a href="ko/XUL/Attribute/statedatasource">statedatasource</a></li> + <li><a href="ko/XUL/Attribute/statusbar">statusbar</a></li> + <li><a href="ko/XUL/Attribute/statustext">statustext</a></li> + <li><a href="ko/XUL/Attribute/style">style</a></li> + <li><a href="ko/XUL/Attribute/substate">substate</a></li> + <li><a href="ko/XUL/Attribute/suppressonselect">suppressonselect</a></li> + <li><a href="ko/XUL/Attribute/tabindex">tabindex</a></li> + <li><a href="ko/XUL/Attribute/tabScrolling">tabScrolling</a></li> + <li><a href="ko/XUL/Attribute/tabscrolling">tabscrolling</a></li> + <li><a href="ko/XUL/Attribute/targets">targets</a></li> + <li><a href="ko/XUL/Attribute/template">template</a></li> + <li><a href="ko/XUL/Attribute/timeout">timeout</a></li> + <li><a href="ko/XUL/Attribute/title">title</a></li> + <li><a href="ko/XUL/Attribute/toolbarname">toolbarname</a></li> + <li><a href="ko/XUL/Attribute/tooltip">tooltip</a></li> + <li><a href="ko/XUL/Attribute/tooltiptext">tooltiptext</a></li> + <li><a href="ko/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li> + <li><a href="ko/XUL/Attribute/top">top</a></li> + <li><a href="ko/XUL/Attribute/type">type</a></li> + <li><a href="ko/XUL/Attribute/uri">uri</a></li> + <li><a href="ko/XUL/Attribute/userAction">userAction</a></li> + <li><a href="ko/XUL/Attribute/validate">validate</a></li> + <li><a href="ko/XUL/Attribute/value">value</a></li> + <li><a href="ko/XUL/Attribute/wait-cursor">wait-cursor</a></li> + <li><a href="ko/XUL/Attribute/width">width</a></li> + <li><a href="ko/XUL/Attribute/windowtype">windowtype</a></li> + <li><a href="ko/XUL/Attribute/wrap">wrap</a></li> +</ul> +<p></p> diff --git a/files/ko/mozilla/tech/xul/index.html b/files/ko/mozilla/tech/xul/index.html new file mode 100644 index 0000000000..d2517521b3 --- /dev/null +++ b/files/ko/mozilla/tech/xul/index.html @@ -0,0 +1,25 @@ +--- +title: XUL +slug: Mozilla/Tech/XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL +--- +<div class="callout-box"><strong><a href="/ko/XUL_Tutorial" title="ko/XUL_Tutorial">XUL 입문서</a></strong><br> +처음 XUL을 시작하는 사람을 위한 안내서입니다. 원문은 XULPlanet 에 있습니다.</div> +<div><strong>XUL</strong> (XML User Interface Language)은 Mozilla의 <a href="/ko/XML" title="ko/XML">XML</a> 기반 언어로 인터넷과 연결되거나 또는 연결되지 않은 채로 동작하는 풍부한 기능을 제공하는 크로스 플랫폼 응용프로그램을 만들 수 있게 해줍니다. 이렇게 만들어진 응용프로그램은 텍스트나 그래픽, 배치 등을 쉽게 바꿀 수 있기 때문에 여러가지 요구에 맞게 즉시 상품화나 지역화 해 내어놓을 수 있습니다. 다이나믹 HTML (<a href="/ko/DHTML" title="ko/DHTML">DHTML</a>)에 친숙한 웹 개발자들은 XUL을 금방 배워서 바로 응용프로그램을 만들어 볼 수 있을 것입니다. XUL 데모(demo)를 조금 보려면 Firefox나 다른 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 기반 브라우저에서 <a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">XUL 주기표</a>를 여세요.</div> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="문서"><a href="/Special:Tags?tag=XUL&language=ko" title="Special:Tags?tag=XUL&language=ko">문서</a></h4> <dl> <dt> <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL 레퍼런스</a> </dt> <dd> <small>MDC에 있는 <a href="/ko/Preferences_System" title="ko/Preferences_System">prefwindow</a> 관련 문서도 보시기 바랍니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_controls" title="ko/XUL_controls">XUL 컨트롤</a> </dt> <dd> <small>XUL에서 사용할 수 있는 컨트롤들의 목록입니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/The_Joy_of_XUL" title="ko/The_Joy_of_XUL">XUL 개요</a> </dt> <dd> <small>XUL의 주요 특징과 구성요소들을 설명합니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL/PopupGuide" title="ko/XUL/PopupGuide">메뉴와 팝업 가이드</a> </dt> <dd> <small>메뉴와 팝업 판넬 사용 가이드</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL/Template_Guide" title="ko/XUL/Template_Guide">템플릿 안내</a> </dt> <dd> <small>데이터소스로 부터 컨텐츠를 만드는 방법인 XUL 템플릿에 대한 자세한 안내. </small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_Overlays" title="ko/XUL_Overlays">오버레이</a> </dt> <dd> <small>XUL 오버레이에 대한 글. 오버레이는 UI에 대한 추가적인 내용을 기술하기 위해서 사용됩니다. 그럼으로써 기존의 XUL 애플리케이션을 확장하고 커스터마이징하는 강력한 수단을 제공합니다. </small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_improvements_in_Firefox_3" title="ko/XUL_improvements_in_Firefox_3">XUL 애플리케이션을 Firefox 3.0에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_3_for_developers" title="ko/Firefox_3_for_developers">Firefox 3.0</a>에서 바뀐 점.</small> </dd> </dl> <dl> <dt> <a href="/ko/Firefox_2_for_developers#For_XUL_and_extension_developers" title="ko/Firefox_2_for_developers#For_XUL_and_extension_developers">XUL 애플리케이션을 Firefox 2.0에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_2_for_developers" title="ko/Firefox_2_for_developers">Firefox 2.0</a>에서 바뀐 점.</small> </dd> </dl> <dl> <dt> <a href="/ko/Adapting_XUL_Applications_for_Firefox_1.5" title="ko/Adapting_XUL_Applications_for_Firefox_1.5">XUL 애플리케이션을 Firefox 1.5에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox_1.5_for_developers">Firefox 1.5</a>에서 바뀐 점.</small> </dd> </dl> <p><span><a href="/Special:Tags?tag=XUL&language=ko" title="Special:Tags?tag=XUL&language=ko">모두 보기...</a></span></p> </td> <td> <h4 id="커뮤니티">커뮤니티</h4> <ul> <li>Mozilla 포럼 보기...</li> </ul> <p></p><ul> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xul"> 메일링 리스트</a></li> + + + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul"> 뉴스그룹</a></li> + <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul/feeds"> 웹 Feed</a></li> +</ul><p></p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/xul">irc.mozilla.org #xul 채널</a></li> </ul> <h4 id="도구">도구</h4> +<ul> <li><a href="/ko/XUL_Explorer" title="ko/XUL_Explorer">XUL Explorer</a> (경량 XUL IDE)</li> <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">확장 기능 개발자를 위한 확장</a> (실시간 XUL 편집기능 포함)</li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">XULRef 사이드바</a></li> <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> <li><a href="/ko/DOM_Inspector" title="ko/DOM_Inspector">DOM 검사기</a></li> <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, XUL/XBL용 IDE</li> <li><a class=" external" href="http://www.amplesdk.com/" title="http://www.amplesdk.com/">Ample SDK</a>, (JavaScript/HTML 기반의 크로스 브라우저 XUL 렌더러 )</li> +</ul> +<p><span><a href="/Special:Tags?tag=XUL:Tools&language=ko" title="Special:Tags?tag=XUL:Tools&language=ko">모두 보기...</a></span></p><h4 id="관련_주제">관련 주제</h4> <dl> <dd> <a href="/ko/JavaScript" title="ko/JavaScript">JavaScript</a>, <a href="/ko/XBL" title="ko/XBL">XBL</a>, <a href="/ko/CSS" title="ko/CSS">CSS</a>, <a href="/ko/RDF" title="ko/RDF">RDF</a>, <a href="/ko/Extensions" title="ko/Extensions">확장 기능</a>, <a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a> </dd> </dl> </td> </tr> </tbody> +</table> +<p><span>Categories</span></p> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/menu/index.html b/files/ko/mozilla/tech/xul/menu/index.html new file mode 100644 index 0000000000..fa3a01a593 --- /dev/null +++ b/files/ko/mozilla/tech/xul/menu/index.html @@ -0,0 +1,338 @@ +--- +title: menu +slug: Mozilla/Tech/XUL/menu +translation_of: Archive/Mozilla/XUL/menu +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/ko/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">예제</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">관련 항목</a> ] +</span></div> +<p>이 엘리먼트는 <code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>에 위치한 <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>과 비슷합니다. 사용자가 menu 엘리먼트를 클릭하면 <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>의 자식 메뉴를 표시해 줍니다. menupopup엘리먼트는 서브메뉴를 만듭니다.</p> +<p>더자세한 정보는 <a href="/en/XUL_Tutorial/Simple_Menu_Bars" title="en/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>를 참고하세요.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-acceltext">acceltext</a>, <a href="#a-accesskey">accesskey</a>, <a href="#a-allowevents">allowevents</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-menuactive">menuactive</a>, <a href="#a-open">open</a>, <a href="#a-sizetopopup">sizetopopup</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessibleType">accessibleType</a>, <a href="#p-accessKey">accessKey</a>, <a href="#p-command">command</a>, <a href="#p-menuitem.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-label">label</a>, <a href="#p-labelElement">labelElement</a>, <a href="#p-menupopup">menupopup</a>, <a href="#p-menu.open">open</a>, <a href="#p-parentContainer">parentContainer</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-appendItem">appendItem</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeItemAt">removeItemAt</a></dd> + <dt> + Style classes</dt> + <dd> + <a href="#s-menu-iconic">menu-iconic</a></dd> +</dl> +<h3 id="Example" name="Example">Example</h3> +<pre class="brush: xml"><menubar id="sample-menubar"> + <menu id="file-menu" label="File"> + <menupopup id="file-popup"> + <menuitem label="New"/> + <menuitem label="Open"/> + <menuitem label="Save"/> + <menuseparator/> + <menuitem label="Exit"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit"> + <menupopup id="edit-popup"> + <menuitem label="Undo"/> + <menuitem label="Redo"/> + </menupopup> + </menu> +</menubar> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p><div id="a-acceltext"> + +<dl> + <dt> + <code id="a-acceltext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Text that appears beside the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd> +</dl> +</div><div id="a-accesskey"> + + +<dl> + <dt> + <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd> + 타입: + <i> + character</i> + </dd> + <dd> + 이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다. + + </dd> +</dl> +<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4> +<div class="float-right"> + <img alt="Image:XUL_ref_accesskey_attr.png"></div> +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> +<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4> +<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div><div id="a-allowevents"> + +<dl> + <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.</dd> +</dl> + + + + +</div><div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: <em>one of the values below</em></dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> + <dd> + <dl> + <dt> + <code>start</code></dt> + <dd> + The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd> + <dt> + <code>end</code></dt> + <dd> + The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd> + <dt> + <code>left</code></dt> + <dd> + <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd> + <dt> + <code>right</code></dt> + <dd> + <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd> + <dt> + <code>center</code></dt> + <dd> + The text will be cropped in the middle, showing both the start and end of the text normally.</dd> + <dt> + <code>none</code></dt> + <dd> + The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd> + </dl> + </dd> + <dd> + Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd> + <dd> + <pre class="eval">menupopup > menuitem, menupopup > menu { max-width: none; } +</pre> + </dd> +</dl> +</div><div id="a-disabled"> + + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the <code>command</code> event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to <code>true</code>, as this will suggest you can set it to <code>false</code> to enable the element again, which is not the case. + + <div>The <code>disabled</code> attribute is allowed only for form controls. Using it with an anchor tag (an <code><a></code> link) will have no effect.</div> + + <div> + The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.</div> + </dd> + <dd>Visible controls have a <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code> property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.</dd> +</dl> + + +</div><div id="a-label"> + + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label that will appear on the element. If this is left out, no text appears. For an editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> element the value of this attribute is copied to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>.value property upon user selection of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd> +</dl> + + +</div><div id="a-menuactive"> + + +<dl> + <dt><code id="a-menuactive"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/menuactive">menuactive</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>This attribute is set on an item in a menu when it is being hovered over. Typcially, the theme will use this to highlight the item. A <code>DOMMenuItemActive</code> event will be sent to the item when the item is hovered over, and a <code>DOMMenuItemInactive</code> event will be sent to the item when the selection moves away.</dd> +</dl> +</div><div id="a-open"> + + +<dl> + <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd> +</dl> +</div><div id="a-sizetopopup"> + + +<dl> + <dt><code id="a-sizetopopup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizetopopup">sizetopopup</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Indicates how the menu width and the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> width are determined. If the <code>sizetopopup</code> attribute is left out or set to <code>none</code>, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. Otherwise, the menu will size itself to at least the size of the popup. If the menu has a maximum width, the popup will also be this width.</dd> + <dd> + <dl> + <dt><code>none</code></dt> + <dd>The width of the popup will not be constrained to the size of the menu.</dd> + <dt><code>pref</code></dt> + <dd>The preferred width of the menu label or button will be the size needed for the popup contents. This is the default value for menulists.</dd> + <dt><code>always</code></dt> + <dd>Both the preferred and minimum width of the menu label or button will be the same as that necessary for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>.</dd> + </dl> + </dd> +</dl> +</div><div id="a-value"> + + +<dl> + <dt><code id="a-value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use. Be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) Use another attribute like "value2" or "data-myAtt" (as in the HTML5 draft), as XUL does not require validation (less future-proof); 2) Use <a href="/en/DOM/element.setAttributeNS" title="en/DOM/element.setAttributeNS">setAttributeNS()</a> to put custom attributes in a non-XUL namespace (serializable and future-proof); 3) Use <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData()</a> (future-proof and clean, but not easily serializable). For user editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> elements, the contents, as visible to the user, are read and set using the Menulist.value syntax. For those elements, <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttributeNS">setAttribute("value", myValue)</a> and <a href="/en/DOM/element.setAttribute" title="en/DOM/element.getAttributeNS">getAttribute("value")</a> do not access or affect the contents displayed to the user.</dd> +</dl> + + + +<p> </p> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><div id="p-accessibleType"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + A value indicating the type of accessibility object for the element.</dd> +</dl> +</div><div id="p-menuitem.control"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menuitem.control">control</a></span></code></dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</em></dd> + <dd>Returns the enclosing <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd> +</dl></div><div id="p-itemCount"> +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt> + <dd>Type: <em>integer</em></dd> + <dd>Read only property holding the number of child items.</dd> +</dl> +</div><div id="p-menupopup"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menupopup">menupopup</a></span></code></dt> + <dd>Type: <em>menupopup element</em></dd> + <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> used by the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>. This property is read-only.</dd> +</dl></div><div id="p-menu.open"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menu.open">open</a></span></code> </dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + This property will be set to true when the menu is open. The menu may be opened by setting the open property to true and closed by setting it to false.</dd> +</dl></div><div id="p-parentContainer"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt> + <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</em></dd> + <dd>Read only property that returns the containing <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd> +</dl></div><div id="p-value"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/value">value</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute. For <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code> and user editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> elements, the contents, as visible to the user, are read and set using the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/Textbox.value">Textbox.value</a></span></code> and Menulist.value syntax.</dd> +</dl> + +<p> </p></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;"> +<tbody> +<tr> +<td> +<p><strong>Inherited Methods</strong><br> +<small><code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p> + +</td> +</tr> +</tbody> +</table><dl> + <dt> + <span id="m-appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem( label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Creates a new item and adds it to the end of the existing list of items. You may optionally set a value. The function returns the newly created element.</dd> +</dl><dl> + <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt> + <dd>Return type: <em>integer</em></dd> + <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd> +</dl><dl> + <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt> + <dd>Return type: <em>element</em></dd> + <dd>Returns the element that is at the specified index.</dd> +</dl><dl> + <dt> + <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd> +</dl><dl> + <dt> + <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt> + <dd> + Return type: <em>element</em></dd> + <dd> + Removes the child item in the element at the specified index. The method returns the removed item.</dd> +</dl><p></p> +<h3 id="Style_classes" name="Style_classes">Style classes</h3> +<p></p><dl> <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/menu-iconic">menu-iconic</a></code></dt> <dd>Use this class to have an image appear on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>. Specify the image using the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULContainerElement" title="">nsIDOMXULContainerElement</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULContainerItemElement" title="">nsIDOMXULContainerItemElement</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULSelectControlItemElement" title="">nsIDOMXULSelectControlItemElement</a></code></dd> +</dl> +<p></p> diff --git a/files/ko/mozilla/tech/xul/property/index.html b/files/ko/mozilla/tech/xul/property/index.html new file mode 100644 index 0000000000..f9c5eb52b4 --- /dev/null +++ b/files/ko/mozilla/tech/xul/property/index.html @@ -0,0 +1,219 @@ +--- +title: Property +slug: Mozilla/Tech/XUL/Property +tags: + - XUL Properties +translation_of: Archive/Mozilla/XUL/Property +--- +<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/ko/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></p> +<ul> + <li><a href="ko/XUL/Property/accessible">accessible</a></li> + <li><a href="ko/XUL/Property/accessKey">accessKey</a></li> + <li><a href="ko/XUL/Property/align">align</a></li> + <li><a href="ko/XUL/Property/allowEvents">allowEvents</a></li> + <li><a href="ko/XUL/Property/alwaysOpenPopup">alwaysOpenPopup</a></li> + <li><a href="ko/XUL/Property/appLocale">appLocale</a></li> + <li><a href="ko/XUL/Property/autoCheck">autoCheck</a></li> + <li><a href="ko/XUL/Property/autoFill">autoFill</a></li> + <li><a href="ko/XUL/Property/autoFillAfterMatch">autoFillAfterMatch</a></li> + <li><a href="ko/XUL/Property/boxObject">boxObject</a></li> + <li><a href="ko/XUL/Property/browsers">browsers</a></li> + <li><a href="ko/XUL/Property/builder">builder</a></li> + <li><a href="ko/XUL/Property/builderView">builderView</a></li> + <li><a href="ko/XUL/Property/buttons">buttons</a></li> + <li><a href="ko/XUL/Property/canAdvance">canAdvance</a></li> + <li><a href="ko/XUL/Property/canGoBack">canGoBack</a></li> + <li><a href="ko/XUL/Property/canGoForward">canGoForward</a></li> + <li><a href="ko/XUL/Property/canRewind">canRewind</a></li> + <li><a href="ko/XUL/Property/checked">checked</a></li> + <li><a href="ko/XUL/Property/checkState">checkState</a></li> + <li><a href="ko/XUL/Property/child">child</a></li> + <li><a href="ko/XUL/Property/children">children</a></li> + <li><a href="ko/XUL/Property/className">className</a></li> + <li><a href="ko/XUL/Property/collapsed">collapsed</a></li> + <li><a href="ko/XUL/Property/color">color</a></li> + <li><a href="ko/XUL/Property/columns">columns</a></li> + <li><a href="ko/XUL/Property/command">command</a></li> + <li><a href="ko/XUL/Property/commandManager">commandManager</a></li> + <li><a href="ko/XUL/Property/completeDefaultIndex">completeDefaultIndex</a></li> + <li><a href="ko/XUL/Property/container">container</a></li> + <li><a href="ko/XUL/Property/contentDocument">contentDocument</a></li> + <li><a href="ko/XUL/Property/contentTitle">contentTitle</a></li> + <li><a href="ko/XUL/Property/contentView">contentView</a></li> + <li><a href="ko/XUL/Property/contentViewerEdit">contentViewerEdit</a></li> + <li><a href="ko/XUL/Property/contentViewerFile">contentViewerFile</a></li> + <li><a href="ko/XUL/Property/contentWindow">contentWindow</a></li> + <li><a href="ko/XUL/Property/contextMenu">contextMenu</a></li> + <li><a href="ko/XUL/Property/control">control</a></li> + <li><a href="ko/XUL/Property/controller">controller</a></li> + <li><a href="ko/XUL/Property/controllers">controllers</a></li> + <li><a href="ko/XUL/Property/crop">crop</a></li> + <li><a href="ko/XUL/Property/current">current</a></li> + <li><a href="ko/XUL/Property/currentIndex">currentIndex</a></li> + <li><a href="ko/XUL/Property/currentItem">currentItem</a></li> + <li><a href="ko/XUL/Property/currentPage">currentPage</a></li> + <li><a href="ko/XUL/Property/currentPane">currentPane</a></li> + <li><a href="ko/XUL/Property/currentSet">currentSet</a></li> + <li><a href="ko/XUL/Property/currentURI">currentURI</a></li> + <li><a href="ko/XUL/Property/customToolbarCount">customToolbarCount</a></li> + <li><a href="ko/XUL/Property/database">database</a></li> + <li><a href="ko/XUL/Property/datasources">datasources</a></li> + <li><a href="ko/XUL/Property/defaultButton">defaultButton</a></li> + <li><a href="ko/XUL/Property/description">description</a></li> + <li><a href="ko/XUL/Property/dir">dir</a></li> + <li><a href="ko/XUL/Property/disableAutocomplete">disableAutocomplete</a></li> + <li><a href="ko/XUL/Property/disableAutoComplete">disableAutoComplete</a></li> + <li><a href="ko/XUL/Property/disableautoselect">disableautoselect</a></li> + <li><a href="ko/XUL/Property/disabled">disabled</a></li> + <li><a href="ko/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></li> + <li><a href="ko/XUL/Property/dlgType">dlgType</a></li> + <li><a href="ko/XUL/Property/docShell">docShell</a></li> + <li><a href="ko/XUL/Property/documentCharsetInfo">documentCharsetInfo</a></li> + <li><a href="ko/XUL/Property/editable">editable</a></li> + <li><a href="ko/XUL/Property/editingSession">editingSession</a></li> + <li><a href="ko/XUL/Property/editortype">editortype</a></li> + <li><a href="ko/XUL/Property/enableColumnDrag">enableColumnDrag</a></li> + <li><a href="ko/XUL/Property/eventNode">eventNode</a></li> + <li><a href="ko/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a></li> + <li><a href="ko/XUL/Property/firstPermanentChild">firstPermanentChild</a></li> + <li><a href="ko/XUL/Property/flex">flex</a></li> + <li><a href="ko/XUL/Property/focused">focused</a></li> + <li><a href="ko/XUL/Property/focusedItem">focusedItem</a></li> + <li><a href="ko/XUL/Property/forceComplete">forceComplete</a></li> + <li><a href="ko/XUL/Property/group">group</a></li> + <li><a href="ko/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li> + <li><a href="ko/XUL/Property/handleCtrlTab">handleCtrlTab</a></li> + <li><a href="ko/XUL/Property/height">height</a></li> + <li><a href="ko/XUL/Property/hidden">hidden</a></li> + <li><a href="ko/XUL/Property/homePage">homePage</a></li> + <li><a href="ko/XUL/Property/id">id</a></li> + <li><a href="ko/XUL/Property/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li> + <li><a href="ko/XUL/Property/image">image</a></li> + <li><a href="ko/XUL/Property/inputField">inputField</a></li> + <li><a href="ko/XUL/Property/inverted">inverted</a></li> + <li><a href="ko/XUL/Property/isSearching">isSearching</a></li> + <li><a href="ko/XUL/Property/isWaiting">isWaiting</a></li> + <li><a href="ko/XUL/Property/label">label</a></li> + <li><a href="ko/XUL/Property/lastSelected">lastSelected</a></li> + <li><a href="ko/XUL/Property/left">left</a></li> + <li><a href="ko/XUL/Property/linkedPanel">linkedPanel</a></li> + <li><a href="ko/XUL/Property/listBoxObject">listBoxObject</a></li> + <li><a href="ko/XUL/Property/locked">locked</a></li> + <li><a href="ko/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></li> + <li><a href="ko/XUL/Property/maxHeight">maxHeight</a></li> + <li><a href="ko/XUL/Property/maxLength">maxLength</a></li> + <li><a href="ko/XUL/Property/maxRows">maxRows</a></li> + <li><a href="ko/XUL/Property/maxWidth">maxWidth</a></li> + <li><a href="ko/XUL/Property/menu">menu</a></li> + <li><a href="ko/XUL/Property/menuBoxObject">menuBoxObject</a></li> + <li><a href="ko/XUL/Property/menupopup">menupopup</a></li> + <li><a href="ko/XUL/Property/minHeight">minHeight</a></li> + <li><a href="ko/XUL/Property/minResultsForPopup">minResultsForPopup</a></li> + <li><a href="ko/XUL/Property/minWidth">minWidth</a></li> + <li><a href="ko/XUL/Property/mode">mode</a></li> + <li><a href="ko/XUL/Property/name">name</a></li> + <li><a href="ko/XUL/Property/next">next</a></li> + <li><a href="ko/XUL/Property/noMatch">noMatch</a></li> + <li><a href="ko/XUL/Property/object">object</a></li> + <li><a href="ko/XUL/Property/observes">observes</a></li> + <li><a href="ko/XUL/Property/onFirstPage">onFirstPage</a></li> + <li><a href="ko/XUL/Property/onLastPage">onLastPage</a></li> + <li><a href="ko/XUL/Property/open">open</a></li> + <li><a href="ko/XUL/Property/ordinal">ordinal</a></li> + <li><a href="ko/XUL/Property/orient">orient</a></li> + <li><a href="ko/XUL/Property/pack">pack</a></li> + <li><a href="ko/XUL/Property/pageCount">pageCount</a></li> + <li><a href="ko/XUL/Property/pageid">pageid</a></li> + <li><a href="ko/XUL/Property/pageIndex">pageIndex</a></li> + <li><a href="ko/XUL/Property/pageStep">pageStep</a></li> + <li><a href="ko/XUL/Property/palette">palette</a></li> + <li><a href="ko/XUL/Property/persist">persist</a></li> + <li><a href="ko/XUL/Property/popup">popup</a></li> + <li><a href="ko/XUL/Property/popupBoxObject">popupBoxObject</a></li> + <li><a href="ko/XUL/Property/popupOpen">popupOpen</a></li> + <li><a href="ko/XUL/Property/position">position</a></li> + <li><a href="ko/XUL/Property/predicate">predicate</a></li> + <li><a href="ko/XUL/Property/preferenceElements">preferenceElements</a></li> + <li><a href="ko/XUL/Property/preferencePanes">preferencePanes</a></li> + <li><a href="ko/XUL/Property/preferences">preferences</a></li> + <li><a href="ko/XUL/Property/radioGroup">radioGroup</a></li> + <li><a href="ko/XUL/Property/readonly">readonly</a></li> + <li><a href="ko/XUL/Property/ref">ref</a></li> + <li><a href="ko/XUL/Property/resource">resource</a></li> + <li><a href="ko/XUL/Property/resultsPopup">resultsPopup</a></li> + <li><a href="ko/XUL/Property/scrollBoxObject">scrollBoxObject</a></li> + <li><a href="ko/XUL/Property/searchCount">searchCount</a></li> + <li><a href="ko/XUL/Property/searchParam">searchParam</a></li> + <li><a href="ko/XUL/Property/searchSessions">searchSessions</a></li> + <li><a href="ko/XUL/Property/securityUI">securityUI</a></li> + <li><a href="ko/XUL/Property/selected">selected</a></li> + <li><a href="ko/XUL/Property/selectedBrowser">selectedBrowser</a></li> + <li><a href="ko/XUL/Property/selectedCount">selectedCount</a></li> + <li><a href="ko/XUL/Property/selectedIndex">selectedIndex</a></li> + <li><a href="ko/XUL/Property/selectedItem">selectedItem</a></li> + <li><a href="ko/XUL/Property/selectedItems">selectedItems</a></li> + <li><a href="ko/XUL/Property/selectedPanel">selectedPanel</a></li> + <li><a href="ko/XUL/Property/selectedTab">selectedTab</a></li> + <li><a href="ko/XUL/Property/selectionEnd">selectionEnd</a></li> + <li><a href="ko/XUL/Property/selectionStart">selectionStart</a></li> + <li><a href="ko/XUL/Property/selstyle">selstyle</a></li> + <li><a href="ko/XUL/Property/selType">selType</a></li> + <li><a href="ko/XUL/Property/sessionCount">sessionCount</a></li> + <li><a href="ko/XUL/Property/sessionHistory">sessionHistory</a></li> + <li><a href="ko/XUL/Property/showCommentColumn">showCommentColumn</a></li> + <li><a href="ko/XUL/Property/showPopup">showPopup</a></li> + <li><a href="ko/XUL/Property/size">size</a></li> + <li><a href="ko/XUL/Property/src">src</a></li> + <li><a href="ko/XUL/Property/statusbar">statusbar</a></li> + <li><a href="ko/XUL/Property/statusText">statusText</a></li> + <li><a href="ko/XUL/Property/stringBundle">stringBundle</a></li> + <li><a href="ko/XUL/Property/strings">strings</a></li> + <li><a href="ko/XUL/Property/style">style</a></li> + <li><a href="ko/XUL/Property/subject">subject</a></li> + <li><a href="ko/XUL/Property/suppressOnSelect">suppressOnSelect</a></li> + <li><a href="ko/XUL/Property/tabContainer">tabContainer</a></li> + <li><a href="ko/XUL/Property/tabIndex">tabIndex</a></li> + <li><a href="ko/XUL/Property/tabs">tabs</a></li> + <li><a href="ko/XUL/Property/tabScrolling">tabScrolling</a></li> + <li><a href="ko/XUL/Property/tag">tag</a></li> + <li><a href="ko/XUL/Property/textLength">textLength</a></li> + <li><a href="ko/XUL/Property/textValue">textValue</a></li> + <li><a href="ko/XUL/Property/timeout">timeout</a></li> + <li><a href="ko/XUL/Property/title">title</a></li> + <li><a href="ko/XUL/Property/toolbarName">toolbarName</a></li> + <li><a href="ko/XUL/Property/toolbarset">toolbarset</a></li> + <li><a href="ko/XUL/Property/tooltip">tooltip</a></li> + <li><a href="ko/XUL/Property/tooltipText">tooltipText</a></li> + <li><a href="ko/XUL/Property/top">top</a></li> + <li><a href="ko/XUL/Property/treeBoxObject">treeBoxObject</a></li> + <li><a href="ko/XUL/Property/type">type</a></li> + <li><a href="ko/XUL/Property/uri">uri</a></li> + <li><a href="ko/XUL/Property/userAction">userAction</a></li> + <li><a href="ko/XUL/Property/value">value</a></li> + <li><a href="ko/XUL/Property/view">view</a></li> + <li><a href="ko/XUL/Property/webBrowserFind">webBrowsereFind</a></li> + <li><a href="ko/XUL/Property/webNavigation">webNavigation</a></li> + <li><a href="ko/XUL/Property/webProgress">webProgress</a></li> + <li><a href="ko/XUL/Property/width">width</a></li> + <li><a href="ko/XUL/Property/wizardPages">wizardPages</a></li> +</ul> +<h3 id=".EA.B4.80.EB.A0.A8_DOM_.EC.9A.94.EC.86.8C_properties" name=".EA.B4.80.EB.A0.A8_DOM_.EC.9A.94.EC.86.8C_properties">관련 DOM 요소 properties</h3> +<ul> + <li><a href="ko/DOM/element.attributes">DOM:element.attributes</a></li> + <li><a href="ko/DOM/element.childNodes">DOM:element.childNodes</a></li> + <li><a href="ko/DOM/element.cloneNode">DOM:element.cloneNode</a></li> + <li><a href="ko/DOM/element.firstChild">DOM:element.firstChild</a></li> + <li><a href="ko/DOM/element.lastChild">DOM:element.lastChild</a></li> + <li><a href="ko/DOM/element.localName">DOM:element.localName</a></li> + <li><a href="ko/DOM/element.namespaceURI">DOM:element.namespaceURI</a></li> + <li><a href="ko/DOM/element.nextSibling">DOM:element.nextSibling</a></li> + <li><a href="ko/DOM/element.nodeName">DOM:element.nodeName</a></li> + <li><a href="ko/DOM/element.nodeType">DOM:element.nodeType</a></li> + <li><a href="ko/DOM/element.nodeValue">DOM:element.nodeValue</a></li> + <li><a href="ko/DOM/element.ownerDocument">DOM:element.ownerDocument</a></li> + <li><a href="ko/DOM/element.parentNode">DOM:element.parentNode</a></li> + <li><a href="ko/DOM/element.prefix">DOM:element.prefix</a></li> + <li><a href="ko/DOM/element.previousSibling">DOM:element.previousSibling</a></li> + <li><a href="ko/DOM/element.tagName">DOM:element.tagName</a></li> +</ul> +<p></p> diff --git a/files/ko/mozilla/tech/xul/splitter/index.html b/files/ko/mozilla/tech/xul/splitter/index.html new file mode 100644 index 0000000000..863f3c76db --- /dev/null +++ b/files/ko/mozilla/tech/xul/splitter/index.html @@ -0,0 +1,79 @@ +--- +title: splitter +slug: Mozilla/Tech/XUL/splitter +translation_of: Archive/Mozilla/XUL/splitter +--- +<p><?xml version="1.0"?> <?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin</a>" type="text/css"?></p> +<p><window title="XUL Splitters"</p> +<pre class="eval"> xmlns:html="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>" + xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"> +</pre> +<p><script> <![CDATA[</p> +<p>]]> </script></p> +<p><description><html:h1>XUL Splitters</html:h1></description></p> +<pre class="eval"><vbox flex="1" style="overflow: auto"> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="collapse before" /> + <groupbox flex="1"><label flex="1" value="Left side" /></groupbox> + <splitter collapse="before" ><grippy /></splitter> + <groupbox flex="1"><label flex="1" value="Right side" /></groupbox> + </groupbox> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="collapse after" /> + <groupbox flex="1"><label flex="1" value="Left side" /></groupbox> + <splitter collapse="after" ><grippy /></splitter> + <groupbox flex="1"><label flex="1" value="Right side" /></groupbox> + </groupbox> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="no collapse" /> + <groupbox flex="1"><label flex="1" value="Left side" /></groupbox> + <splitter collapse="none" /> + <groupbox flex="1"><label flex="1" value="Right side" /></groupbox> + </groupbox> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="resize the closest widgets on both sides" /> + <groupbox flex="1"><description>Left most side</description></groupbox> + <groupbox flex="1"><description>Middle Left side</description></groupbox> + <groupbox flex="1"><description>Closest Left side</description></groupbox> + <splitter collapse="none" resizebefore="closest" resizeafter="closest" /> + <groupbox flex="1"><description>Closest Right side</description></groupbox> + <groupbox flex="1"><description>Middle Right side</description></groupbox> + <groupbox flex="1"><description>Right most side</description></groupbox> + </groupbox> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="resize the farthest widgets on both sides" /> + <groupbox flex="1"><description>Left most side</description></groupbox> + <groupbox flex="1"><description>Middle Left side</description></groupbox> + <groupbox flex="1"><description>Closest Left side</description></groupbox> + <splitter collapse="none" resizebefore="farthest" resizeafter="farthest" /> + <groupbox flex="1"><description>Closest Right side</description></groupbox> + <groupbox flex="1"><description>Middle Right side</description></groupbox> + <groupbox flex="1"><description>Right most side</description></groupbox> + </groupbox> +</pre> +<p> </p> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="grow the widgets on the right side" /> + <groupbox flex="1"><description>Left side</description></groupbox> + <splitter collapse="none" resizebefore="grow" resizeafter="grow" /> + <groupbox flex="1"><description>Closest Right side</description></groupbox> + <groupbox flex="1"><description>Middle Right side</description></groupbox> + <groupbox flex="1"><description>Right most side</description></groupbox> + </groupbox> +</pre> +<pre class="eval"> <groupbox orient="horizontal" flex="1"> + <caption label="double splitters" /> + <groupbox flex="1"><label flex="1" value="Left side" /></groupbox> + <splitter collapse="before" ><grippy /></splitter> + <groupbox flex="1"><label flex="1" value="Middle" /></groupbox> + <splitter collapse="after" ><grippy /></splitter> + <groupbox flex="1"><label flex="1" value="Right side" /></groupbox> + </groupbox> +</pre> +<p></vbox></p> +<p></window></p> diff --git a/files/ko/mozilla/tech/xul/template_guide/index.html b/files/ko/mozilla/tech/xul/template_guide/index.html new file mode 100644 index 0000000000..0d769a66de --- /dev/null +++ b/files/ko/mozilla/tech/xul/template_guide/index.html @@ -0,0 +1,52 @@ +--- +title: Template Guide +slug: Mozilla/Tech/XUL/Template_Guide +tags: + - XUL + - XUL_Template_Guide +translation_of: Archive/Mozilla/XUL/Template_Guide +--- +<p> </p> +<h5 id="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B0.9C.EC.9A.94" name="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B0.9C.EC.9A.94">XUL 템플릿 개요</h5> +<ul> + <li><a href="ko/XUL/Template_Guide/Introduction">소개</a></li> + <li><a href="ko/XUL/Template_Guide/Rule_Compilation">규칙 만들기</a></li> + <li><a href="ko/XUL/Template_Guide/Result_Generation">결과 생성하기</a></li> +</ul> +<h5 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EB.B2.95">템플릿 문법</h5> +<ul> + <li><a href="ko/XUL/Template_Guide/Conditions">컨디션</a></li> + <li><a href="ko/XUL/Template_Guide/Actions">액션</a></li> + <li><a href="ko/XUL/Template_Guide/Recursive_Generation">리커시브 생성</a></li> + <li><a href="ko/XUL/Template_Guide/Simple_Example">예제</a></li> + <li><a href="ko/XUL/Template_Guide/Bindings">바인딩</a></li> + <li><a href="ko/XUL/Template_Guide/Attribute_Substitution">속성 대체</a></li> + <li><a href="ko/XUL/Template_Guide/Additional_Navigation">추가 네비게이션</a></li> + <li><a href="ko/XUL/Template_Guide/Filtering">필터링</a></li> + <li><a href="ko/XUL/Template_Guide/Static_Content">정적 컨텐트</a></li> + <li><a href="ko/XUL/Template_Guide/Simple_Rule_Syntax">간단한 규칙 문법</a></li> + <li><a href="ko/XUL/Template_Guide/Containment_Properties">컨테인멘트 프로퍼티</a></li> +</ul> +<h5 id=".EB.8B.A4.EC.A4.91_.EA.B7.9C.EC.B9.99" name=".EB.8B.A4.EC.A4.91_.EA.B7.9C.EC.B9.99">다중 규칙</h5> +<ul> + <li><a href="ko/XUL/Template_Guide/Multiple_Rules">다중 규칙</a></li> + <li><a href="ko/XUL/Template_Guide/Multiple_Rule_Example">다중 규칙 예제</a></li> + <li><a href="ko/XUL/Template_Guide/Using_Recursive_Templates">리커시브 템플릿 사용하기</a></li> + <li><a href="ko/XUL/Template_Guide/Special_Condition_Tests">특수 조건 테스트</a></li> + <li><a href="ko/XUL/Template_Guide/Using_Multiple_Rules_to_Generate_More_Results">많은 결과를 만들기 위한 다중 규칙 이용</a></li> + <li><a href="ko/XUL/Template_Guide/Building_Trees">트리 만들기</a></li> + <li><a href="ko/XUL/Template_Guide/Building_Hierarchical_Trees">계층적 트리 만들기</a></li> +</ul> +<h5 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EC.88.98.EC.A0.95_.EB.B0.A9.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EC.88.98.EC.A0.95_.EB.B0.A9.EB.B2.95">템플릿 수정 방법</h5> +<ul> + <li><a href="ko/XUL/Template_Guide/Template_Builder_Interface">템플릿 빌더 인터페이스</a></li> + <li><a href="ko/XUL/Template_Guide/Template_and_Tree_Listeners">템플릿과 트리 리스너</a></li> + <li><a href="ko/XUL/Template_Guide/RDF_Modifications">RDF 변경</a></li> +</ul> +<h5 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C" name=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h5> +<ul> + <li><a href="ko/XUL/Template_Guide/Sorting_Results">결과 정렬하기</a></li> + <li><a href="ko/XUL/Template_Guide/Additional_Template_Attributes">추가 템플릿 속성</a></li> +</ul> +<p><span class="comment">Interwiki Language Links</span></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/toolbar/index.html b/files/ko/mozilla/tech/xul/toolbar/index.html new file mode 100644 index 0000000000..3efda02e8c --- /dev/null +++ b/files/ko/mozilla/tech/xul/toolbar/index.html @@ -0,0 +1,218 @@ +--- +title: toolbar +slug: Mozilla/Tech/XUL/toolbar +tags: + - MDC Project + - NeedsTechnicalReview + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/toolbar +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/ko/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">예제</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">관련 항목</a> ] +</span></div> +<p>보통 한 줄로 된 버튼들을 포함하는 컨테이너로 기본적으로 내부 요소가 수평으로 나열되는 상자의 한 유형입니다. <code>toolbar</code>가 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code> 내에 위치할 경우 <code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code>를 이용하여 접혀질 수 있습니다. 툴바는 항상 <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> 속성을 가져야 합니다. Firefox에서는 사용자 지정 툴바(도구 모음)를 지원하지만, Mozilla 브라우저는 지원하지 않습니다.</p> +<p>좀 더 자세한 사항은 <a href="ko/XUL_Tutorial/Toolbars">XUL tutorial</a>를 참조하세요.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-currentset">currentset</a>, <a href="#a-customindex">customindex</a>, <a href="#a-customizable">customizable</a>, <a href="#a-defaultset">defaultset</a>, <a href="#a-grippyhidden">grippyhidden</a>, <a href="#a-grippytooltiptext">grippytooltiptext</a>, <a href="#a-toolbar.mode">mode</a>, <a href="#a-toolbarname">toolbarname</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accesible">accesible</a>, <a href="#p-currentSet">currentSet</a>, <a href="#p-firstPermanentChild">firstPermanentChild</a>, <a href="#p-lastPermanentChild">lastPermanentChild</a>, <a href="#p-toolbarName">toolbarName</a></dd> +</dl> +<dl> + <dt> + Methods</dt> + <dd> + <a href="#m-insertItem">insertItem</a></dd> +</dl> +<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3> +<div class="float-right"> + <img alt="Image:XUL_ref_toolbar.png"></div> +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton id="nav-users" accesskey="U" label="Users"/> + <toolbarbutton id="nav-groups" accesskey="p" label="Groups"/> + <toolbarbutton id="nav-events" accesskey="E" label="Events" disabled="true"/> + </toolbar> +</toolbox> +</pre> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-currentset"> + +<dl> + <dt> + <code id="a-currentset"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code></dt> + <dd> + <b><span class="highlightred">Firefox only</span></b></dd> + <dd> + 타입: + <i> + comma-separated string</i> + </dd> + <dd> + 현재 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 출력되는 항목의 집합입니다. 이 집합은 사용자가 툴바를 커스터마이징(사용자 지정) 할 경우 변경될 수 있습니다. 속성값은 쉼표(,)로 분리된 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>에 있는 항목들의 ID 목록이어야 하며, 추가적으로 "<code>separator</code>", "<code>spring</code>", "<code>spacer</code>"의 문자열을 포함할 수 있습니다.</dd> +</dl> +<p><span class="comment">this isn't necessary the *current* set, i.e. it might not be equal the value of the currentSet property which is computed from the actual DOM</span></p> +</div> <div id="a-customindex"> + + +<dl> + <dt><code id="a-customindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/customindex">customindex</a></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>integer</em></dd> + <dd>This value is the index of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> in the list of the custom toolbars. The value is updated automatically by the toolbar customization dialog.</dd> +</dl> +</div> <div id="a-customizable"> + + +<dl> + <dt><code id="a-customizable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/customizable">customizable</a></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>boolean</em></dd> + <dd>Set this attribute to <code>true</code> on <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>s that can be customized. This causes the set of buttons to be persisted across sessions.</dd> +</dl> +</div> <div id="a-defaultset"> + + +<dl> + <dt><code id="a-defaultset"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultset">defaultset</a></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>comma-separated list of item ids</em></dd> + <dd>The default set of displayed items on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. This should be set to a comma-separated list of item IDs from the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>. For example, <code>back-button,forward-button,print-button</code>.</dd> +</dl> +</div> <div id="a-grippyhidden"> + + +<dl> + <dt><code id="a-grippyhidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/grippyhidden">grippyhidden</a></code></dt> + <dd><strong><span class="highlightred">SeaMonkey only</span></strong></dd> + <dd>Type: <em>boolean</em></dd> + <dd>When set to <code>true</code>, the grippy will be hidden. When set to <code>false</code>, the default, the grippy will be shown.</dd> +</dl> +</div> <div id="a-grippytooltiptext"> + + +<dl> + <dt><code id="a-grippytooltiptext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></code></dt> + <dd><strong><span class="highlightred">SeaMonkey only</span></strong></dd> + <dd>Type: <em>string</em></dd> + <dd>The text to appear on the tooltip for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>'s <code><a href="/en-US/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code> when the toolbar is collapsed. This would be used to label the grippy so that the user knows which toolbar it represents.</dd> +</dl> +</div> <div id="a-toolbar.mode"> + + +<dl> + <dt><code id="a-toolbar.mode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbar.mode">mode</a></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>one of the values below</em></dd> + <dd>How the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>s on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> are displayed.</dd> + <dd> + <dl> + <dt><code>icons</code></dt> + <dd>Show only icons.</dd> + <dt><code>text</code></dt> + <dd>Show only text.</dd> + <dt><code>full</code></dt> + <dd>Show both.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-toolbarname"> + + +<dl> + <dt><code id="a-toolbarname"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbarname">toolbarname</a></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>string</em></dd> + <dd>The name of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, which is listed on the Show/Hide toolbars menu.</dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessible"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessible">accessible</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></em></dd> + <dd> + Returns the accessibility object for the element.</dd> +</dl></div> <div id="p-currentSet"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/currentSet">currentSet</a></span></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>comma-separated list of strings</em></dd> + <dd>Holds a comma-separated list of the IDs of the items currently on the toolbar. For spacers, separators, and flexible spacers the following strings are used instead of IDs: "<code>spacer</code>", "<code>separator</code>", "<code>spring</code>". An empty toolbar has a <code>currentSet</code> value of <code>"__empty"</code>.</dd> +</dl> + +<dl> + <dd>You may change the current set of items by setting this property. Be careful, as setting this property doesn't automatically update the <code id="a-currentset"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code> attribute.</dd> +</dl></div> <div id="p-firstPermanentChild"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/firstPermanentChild">firstPermanentChild</a></span></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>element</em></dd> + <dd>The first permanent child of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code> are permanent.</dd> +</dl></div> <div id="p-lastPermanentChild"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/lastPermanentChild">lastPermanentChild</a></span></code></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Type: <em>element</em></dd> + <dd>The last permanent child of the toolbar. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code> are permanent.</dd> +</dl></div> <div id="p-toolbarName"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/toolbarName">toolbarName</a></span></code></dt> + <dd> + <strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd> + Type: <em>string</em></dd> + <dd> + The name of the toolbar.</dd> +</dl></div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><dl> + <dt><span id="m-insertItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItem">insertItem( id, beforeNode, wrapper, beforePermanent )</a></code></span></dt> + <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd> + <dd>Return type: <em>element</em></dd> + <dd>Add an item with the given <var>id</var> to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. The new item is added just before the item given by the second argument. If the second argument is <code>null</code>, but the <var>beforePermanent</var> argument is <code>true</code>, the item is added to the beginning of the toolbar before the first permanent item. Otherwise, if the <var>beforePermanent</var> argument is <code>false</code>, the new item is added to the end of the toolbar. The third argument can be used to wrap the new item in another element. Usually, the last argument will be <code>null</code> as it is mainly for the use of the customize dialog.</dd> +</dl> + +<p>The <var>id</var> should match an element in the toolbar's <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>. Some special ids may also be used to create special spacing items:</p> + +<ul> + <li><code>separator</code>: A separator, which is drawn as a vertical bar.</li> + <li><code>spacer</code>: A non-flexible space.</li> + <li><code>spring</code>: A flexible space.</li> +</ul> + +<p>The method returns the DOM element for the created item.</p> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Related" name="Related">Related</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd> +</dl> +<dl> + <dt> + Interfaces</dt> + <dd> + <a href="ko/NsIAccessibleProvider">nsIAccessibleProvider</a></dd> +</dl> +<p></p> diff --git a/files/ko/mozilla/tech/xul/toolbarbutton/index.html b/files/ko/mozilla/tech/xul/toolbarbutton/index.html new file mode 100644 index 0000000000..b494ade76e --- /dev/null +++ b/files/ko/mozilla/tech/xul/toolbarbutton/index.html @@ -0,0 +1,477 @@ +--- +title: toolbarbutton +slug: Mozilla/Tech/XUL/toolbarbutton +translation_of: Archive/Mozilla/XUL/toolbarbutton +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/ko/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">예제</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">관련 항목</a> ] +</span></div> +<p><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 올라가는 버튼입니다. 일반 <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>과 유사하지만 조금 다르게 출력됩니다. 보통 이미지를 포함합니다.</p> +<p>자세한 사항은 <a href="ko/XUL_Tutorial/Toolbars">XUL tutorial</a>를 참조하세요.</p> +<dl> + <dt> + Attributes</dt> + <dd> + <a href="#a-accesskey">accesskey</a>, <a href="#a-autoCheck">autoCheck</a>, <a href="#a-checkState">checkState</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-dir">dir</a>, <a href="#a-disabled">disabled</a>, <a href="#a-dlgType">dlgType</a>, <a href="#a-group">group</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-open">open</a>, <a href="#a-orient">orient</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-toolbarbutton.type">type</a>, <a href="#a-validate">validate</a></dd> +</dl> +<dl> + <dt> + Properties</dt> + <dd> + <a href="#p-accessKey">accessKey</a>, <a href="#p-accessible">accessible</a>, <a href="#p-autoCheck">autoCheck</a>, <a href="#p-checkState">checkState</a>, <a href="#p-checked">checked</a>, <a href="#p-command">command</a>, <a href="#p-crop">crop</a>, <a href="#p-dir">dir</a>, <a href="#p-disabled">disabled</a>, <a href="#p-dlgType">dlgType</a>, <a href="#p-group">group</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-open">open</a>, <a href="#p-orient">orient</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-type">type</a></dd> +</dl> +<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3> +<p>(example needed)</p> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p> </p><div id="a-accesskey"> + + +<dl> + <dt> + <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd> + 타입: + <i> + character</i> + </dd> + <dd> + 이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다. + + </dd> +</dl> +<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4> +<div class="float-right"> + <img alt="Image:XUL_ref_accesskey_attr.png"></div> +<pre><vbox> + <label value="Enter Name" accesskey="e" control="myName"/> + <textbox id="myName"/> + <button label="Cancel" accesskey="n"/> + <button label="Ok" accesskey="O"/> +</vbox> +</pre> +<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4> +<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p> + +<p></p> +</div> <div id="a-autoCheck"> + + +<dl> + <dt><code id="a-autocheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>If this attribute is <code>true</code> or left out, the checked state of the button will be switched each time the button is pressed. If this attribute is <code>false</code>, the checked state must be adjusted manually. When autocheck is true, the button type should be "checkbox" or "radio".</dd> +</dl> +</div> <div id="a-checkState"> + + +<dl> + <dt><code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code></dt> + <dd>Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd> + <dd>This attribute may be used to create three state buttons, numbered 0, 1 and 2. When in state 0 or 1, pressing the button will switch to the opposite state. When in state 2, pressing the button will switch to state 0. This means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting the check state. If you wish to have different behavior for how the states are adjusted, set the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute to <code>false</code> and adjust the state with a script. The <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute must be set to <code>checkbox</code> for buttons with a check state. Constants for the possible values for this attribute are in the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULButtonElement" title="">nsIDOMXULButtonElement</a></code> interface.</dd> +</dl> +</div> <div id="a-checked"> + + +<dl> + <dt><code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Indicates whether the element is checked or not.</dd> + <dd>Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd> + <dd>For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.</dd> +</dl> +</div> <div id="a-command"> + + +<dl> + <dt><code id="a-command"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt> + <dd>Type: <em>id</em></dd> + <dd>Set to the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd> +</dl> + + +</div> <div id="a-crop"> + +<dl> + <dt> + <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt> + <dd> + Type: <em>one of the values below</em></dd> + <dd> + If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd> + <dd> + <dl> + <dt> + <code>start</code></dt> + <dd> + The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd> + <dt> + <code>end</code></dt> + <dd> + The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd> + <dt> + <code>left</code></dt> + <dd> + <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd> + <dt> + <code>right</code></dt> + <dd> + <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd> + <dt> + <code>center</code></dt> + <dd> + The text will be cropped in the middle, showing both the start and end of the text normally.</dd> + <dt> + <code>none</code></dt> + <dd> + The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd> + </dl> + </dd> + <dd> + Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd> + <dd> + <pre class="eval">menupopup > menuitem, menupopup > menu { max-width: none; } +</pre> + </dd> +</dl> +</div> <div id="a-dir"> + + +<dl> + <dt><code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The direction in which the child elements of the element are placed. + <dl> + <dt><code>normal</code></dt> + <dd>For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.</dd> + <dt><code>reverse</code></dt> + <dd>For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-disabled"> + + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the <code>command</code> event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to <code>true</code>, as this will suggest you can set it to <code>false</code> to enable the element again, which is not the case. + + <div>The <code>disabled</code> attribute is allowed only for form controls. Using it with an anchor tag (an <code><a></code> link) will have no effect.</div> + + <div> + The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.</div> + </dd> + <dd>Visible controls have a <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code> property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.</dd> +</dl> + + +</div> <div id="a-dlgType"> + + +<dl> + <dt><code id="a-dlgtype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgtype">dlgtype</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>The dialog type of the button, used only when the button is in a dialog box. You can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. For example, if the <code>dlgType</code> is set to <code>accept</code>, the button will replace the dialog box's accept button, which is usually labeled <code>OK</code>. Using this attribute on a button that is not in a dialog box has no effect. The following values can be used as the dialog type:</dd> + <dd> + <dl> + <dt><code>accept</code></dt> + <dd>The OK button, which will accept the changes when pressed.</dd> + <dt><code>cancel</code></dt> + <dd>The cancel button which will cancel the operation.</dd> + <dt><code>help</code></dt> + <dd>A help button for displaying help about the dialog.</dd> + <dt><code>disclosure</code></dt> + <dd>A button to show more information. This might be a button or a disclosure triangle.</dd> + <dt><code>extra1</code></dt> + <dd>An optional additional button.</dd> + <dt><code>extra2</code></dt> + <dd>A second optional additional button.</dd> + </dl> + </dd> +</dl> +</div> <div id="a-group"> + + +<dl> + <dt><code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code></dt> + <dd>Type: <em>string group name</em> </dd> + <dd>Buttons with type="radio" and the same value for their group attribute are put into the same group. Only one button from each group can be checked at a time. If the user selects one the buttons, the others in the group are unchecked.</dd> +</dl> +</div> <div id="a-image"> + +<dl> + <dt><code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt> + <dd>Type: <em>URI</em></dd> + <dd>The URI of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd> +</dl> + + + +</div> <div id="a-label"> + + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The label that will appear on the element. If this is left out, no text appears. For an editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> element the value of this attribute is copied to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>.value property upon user selection of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd> +</dl> + + +</div> <div id="a-open"> + + +<dl> + <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd> +</dl> +</div> <div id="a-orient"> + + +<dl> + <dt><code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>Used to specify whether the children of the element are oriented horizontally or vertically. The default value depends on the element. You can also use the <a href="/en-US/docs/Web/CSS/-moz-box-orient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-orient</code></a> style property. + <dl> + <dt><code>horizontal</code></dt> + <dd>Child elements of the element are placed next to each other in a row in the order that they appear in the XUL source.</dd> + <dt><code>vertical</code></dt> + <dd>Child elements of the element are placed under each other in a column in the order that they appear in the XUL source.</dd> + </dl> + </dd> +</dl> + + +</div> <div id="a-tabindex"> + + +<dl> + <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt> + <dd>Type: <em>integer</em></dd> + <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd> +</dl> +</div> <div id="a-toolbarbutton.type"> + + +<dl> + <dt><code id="a-toolbarbutton.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbarbutton.type">type</a></code></dt> + <dd>Type: <em>string</em></dd> + <dd>The type of button. If this attribute is not present, a normal button is created. You can set this attribute to the value <code>menu</code> to create a button with a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menu popup</a>. This will typically cause the button to be displayed differently.</dd> +</dl> + +<ul> + <li><code>menu</code>: Set the type attribute to the value <code>menu</code> to create a button with a menu popup. Place a <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element inside the button in this case. The user may click anywhere on the button to open and close the menu.</li> + <li><code>menu-button</code>: You can also use the value <code>menu-button</code> to create a button with a menu. Unlike the <code>menu</code> type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed.</li> + <li><code>checkbox</code>: Use this type to create a toggle button which will switch the <code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checked state</a></code> each time the button is pressed.</li> + <li><code>radio</code>: Use this type to create a radio button. You can also create a group of toolbarbuttons using this type and the attribute <code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code>.</li> +</ul> + +<table class="standard-table"> + <caption>Examples:</caption> + <thead> + <tr> + <th scope="row">type value</th> + <th scope="col"><<code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code> ></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"> </th> + <td><img alt="Toolbarbutton without a type attribute" src="https://mdn.mozillademos.org/files/13601/toolbarbutton,%20type%20no%20value.png" style="height: 41px; width: 41px;"></td> + </tr> + <tr> + <th scope="row">menu</th> + <td><img alt='Toolbarbutton with type attribute equals "menu"' src="https://mdn.mozillademos.org/files/13603/toolbarbutton,%20type%20eq%20menu.png" style="height: 42px; width: 45px;"></td> + </tr> + <tr> + <th scope="row">menu-button</th> + <td><img alt='Toolbarbutton with type attribute equals "menu-button"' src="https://mdn.mozillademos.org/files/13605/toolbarbutton,%20type%20eq%20menu-button.png" style="height: 39px; width: 53px;"></td> + </tr> + <tr> + <th scope="row">checkbox</th> + <td><img alt='Toolbarbutton with type attribute equals "checkbox"' src="https://mdn.mozillademos.org/files/13607/toolbarbutton,%20type%20eq%20checkbox.png" style="height: 41px; width: 47px;"></td> + </tr> + <tr> + <th scope="row">radio</th> + <td><img alt='Toolbarbutton with type attribute equals "radio"' src="https://mdn.mozillademos.org/files/13609/toolbarbutton,%20type%20eq%20radio.png" style="height: 41px; width: 38px;"></td> + </tr> + </tbody> +</table> + + +</div> <div id="a-validate"> + + +<dl> + <dt><code id="a-validate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt> + <dd>Type: <em>one of the values below</em></dd> + <dd>This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd> + <dd> + <dl> + <dt><code>always</code></dt> + <dd>The image is always checked to see whether it should be reloaded.</dd> + <dt><code>never</code></dt> + <dd>The image will be loaded from the cache if possible.</dd> + </dl> + </dd> +</dl> +</div><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p> </p><div id="p-accessKey"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessKey">accessKey</a></span></code></dt> + <dd> + Type: <em>character</em></dd> + <dd> + Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd> +</dl></div> <div id="p-accessible"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessible">accessible</a></span></code></dt> + <dd> + Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></em></dd> + <dd> + Returns the accessibility object for the element.</dd> +</dl></div> <div id="p-autoCheck"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/autoCheck">autoCheck</a></span></code></dt> + <dd>Type: <em>boolean</em></dd> + <dd>Gets and sets the value of the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute.</dd> +</dl></div> <div id="p-checkState"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checkState">checkState</a></span></code></dt> + <dd> + Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd> + <dd> + Gets and sets the value of the <code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code> attribute.</dd> +</dl></div> <div id="p-checked"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checked">checked</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute.</dd> +</dl></div> <div id="p-command"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/command">command</a></span></code></dt> + <dd>Type: <em>element id</em></dd> + <dd>Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd> +</dl></div> <div id="p-crop"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/crop">crop</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd> +</dl></div> <div id="p-dir"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dir">dir</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute.</dd> +</dl></div> <div id="p-disabled"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd> +</dl> +</div> <div id="p-dlgType"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dlgType">dlgType</a></span></code></dt> + <dd>Type: <em>string</em></dd> + <dd>Gets and sets the value of the <code id="a-dlgType"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgType">dlgType</a></code> attribute.</dd> +</dl></div> <div id="p-group"> + +<dl> + <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/group">group</a></span></code></dt> + <dd>Type: <em>string group name</em></dd> + <dd>Gets and sets the value of the <code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code> attribute.</dd> +</dl></div> <div id="p-image"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/image">image</a></span></code></dt> + <dd> + Type: <em>image URL</em></dd> + <dd> + Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd> +</dl></div> <div id="p-label"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/label">label</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd> +</dl> +</div> <div id="p-open"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/open">open</a></span></code></dt> + <dd> + Type: <em>boolean</em></dd> + <dd> + Gets and sets the value of the <code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> attribute.</dd> +</dl> +</div> <div id="p-orient"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/orient">orient</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute.</dd> +</dl></div> <div id="p-tabIndex"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt> + <dd> + Type: <em>integer</em></dd> + <dd> + Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd> +</dl></div> <div id="p-type"> +<dl> + <dt> + <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/type">type</a></span></code></dt> + <dd> + Type: <em>string</em></dd> + <dd> + Gets and sets the value of the <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute.</dd> +</dl> +</div><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9" name=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9">관련 항목</h3> +<dl> + <dt> + 요소</dt> + <dd> + <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd> +</dl> +<dl> + <dt> + 인터페이스</dt> + <dd> + <a href="ko/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="ko/NsIDOMXULButtonElement">nsIDOMXULButtonElement</a></dd> +</dl> +<p></p> diff --git a/files/ko/mozilla/tech/xul/toolbarpalette/index.html b/files/ko/mozilla/tech/xul/toolbarpalette/index.html new file mode 100644 index 0000000000..d2f9a2abd6 --- /dev/null +++ b/files/ko/mozilla/tech/xul/toolbarpalette/index.html @@ -0,0 +1,98 @@ +--- +title: toolbarpalette +slug: Mozilla/Tech/XUL/toolbarpalette +tags: + - MDC Project + - NeedsTechnicalReview + - XUL Elements + - XUL Reference +translation_of: Archive/Mozilla/XUL/toolbarpalette +--- +<div class="noinclude"> + <span class="breadcrumbs XULRef_breadcrumbs"> + « <a href="/ko/docs/XUL_Reference">XUL Reference home</a> [ + <a href="#Examples">예제</a> | + <a href="#Attributes">Attributes</a> | + <a href="#Properties">Properties</a> | + <a href="#Methods">Methods</a> | + <a href="#Related">관련 항목</a> ] +</span></div> +<p><b><span class="highlightred">Firefox only</span></b></p> +<p><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 넣을 수 있는 항목들의 팔레트입니다. 이 요소는 직접 출력되지 않으며, 대신 도구 모음 설정 대화창의 항목들로 출력됩니다. <code>toolbarpalette</code>의 자식 요소들은 툴바에 포함될 수 있는 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>과 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code> 이어야 합니다. 여백 항목은 자동적으로 포함되기 때문에 직접 추가하면 안됩니다.</p> +<p><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>가 <code>BrowserToolbarPalette</code>인 <code>toolbarpalette</code>를 <code><a href="/ko/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>내에 포함하여 Firefox 브라우저에 사용자 정의 버튼을 추가할 수 있습니다.</p> +<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3> +<p>(example needed)</p> +<h3 id="Attributes" name="Attributes">Attributes</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);"> +<tbody> +<tr> +<td><p><strong>Inherited from XUL element</strong><br> <small> +<code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>, +<code id="a-allowevents"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>, +<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>, +<code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>, +<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>, +<code id="a-collapsed"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>, +<code id="a-container"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>, +<code id="a-containment"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>, +<code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>, +<code id="a-contextmenu"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>, +<code id="a-datasources"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>, +<code id="a-dir"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>, +<code id="a-empty"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>, +<code id="a-equalsize"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>, +<code id="a-flags"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>, +<code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>, +<code id="a-height"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>, +<code id="a-hidden"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>, +<code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>, +<code id="a-insertafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>, +<code id="a-insertbefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>, +<code id="a-left"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>, +<code id="a-maxheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>, +<code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>, +<code id="a-menu"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>, +<code id="a-minheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>, +<code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>, +<code id="a-mousethrough"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>, +<code id="a-observes"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>, +<code id="a-ordinal"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>, +<code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>, +<code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>, +<code id="a-persist"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>, +<code id="a-popup"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>, +<code id="a-position"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>, +<code id="a-preference-editable"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>, +<code id="a-querytype"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>, +<code id="a-ref"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>, +<code id="a-removeelement"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>, +<code id="a-sortDirection"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>, +<code id="a-sortResource"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>, +<code id="a-sortResource2"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>, +<code id="a-statustext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>, +<code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>, +<code id="a-template"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>, +<code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>, +<code id="a-tooltiptext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>, +<code id="a-top"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>, +<code id="a-uri"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>, +<code id="a-wait-cursor"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>, +<code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p> +</td> +</tr> +</tbody> +</table><p></p> +<h3 id="Properties" name="Properties">Properties</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id="Methods" name="Methods">Methods</h3> +<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody> +</table><p></p> +<h3 id=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9" name=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9">관련 항목</h3> +<dl> + <dt> + Elements</dt> + <dd> + <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd> +</dl> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_controls/index.html b/files/ko/mozilla/tech/xul/xul_controls/index.html new file mode 100644 index 0000000000..fbafdfac68 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_controls/index.html @@ -0,0 +1,548 @@ +--- +title: XUL controls +slug: Mozilla/Tech/XUL/XUL_controls +tags: + - XUL +translation_of: Archive/Mozilla/XUL/XUL_controls +--- +<p>아래의 표는 <a href="/ko/XUL" title="ko/XUL">XUL</a>에서 제공하는 사용자 인터페이스 컨트롤들의 목록입니다. 컨트롤들의 단계별 사용 방법은 <a href="/ko/XUL_Tutorial" title="ko/XUL_Tutorial">XUL Tutorial</a>을, 레퍼런스 정보는 <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL Reference</a>를 참고하세요.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong><button></strong> + + <p>사용자가 누를 수 있는 버튼.</p> + + <pre> +<button label="Save" accesskey="S"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Adding_Buttons" title="ko/XUL_Tutorial/Adding_Buttons">버튼 요소에 대한 좀더 많은 정보</a>.</li> + <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><button type="menu"></strong> + <p>드롭다운 메뉴가 붙은 버튼. 버튼을 누르면 메뉴가 열립니다.</p> + + <pre> +<button type="menu" label="View"> + <menupopup> + <menuitem label="List"/> + <menuitem label="Details"/> + </menupopup> +</button> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup">메뉴 버튼 요소의 유형에 대한 좀더 많은 정보</a>.</li> + <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li> + <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><button type="menu-button"></strong> + <p>메뉴가 붙은 별도의 화살표 버튼이 있는 버튼. '<code>menu</code>' 유형과 달리 버튼의 메인 부분을 눌렀을 때 다른 행위를 수행할 수 있습니다.</p> + + <pre> +<button type="menu-button" label="New"> + <menupopup> + <menuitem label="New Document"/> + <menuitem label="New Image"/> + </menupopup> +</button> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup">메뉴 버튼 요소의 유형에 대한 좀더 많은 정보</a>.</li> + <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li> + <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li> + </ul> + </td> + <td><span class="comment"><a href="/ko/Image/Controlsguide-button-menubutton.png">Image:Controlsguide-button-menubutton.png</a></span></td> + </tr> + <tr> + <td><strong><checkbox></strong> + <p>켜거나 끌 수 있는 컨트롤로, 일반적으로 가능 혹은 불가능할 수 있는 옵션을 만드는데 사용됩니다.</p> + + <pre> +<checkbox label="Show Toolbar Labels" checked="true"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements" title="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements">체크박스 요소에 대한 좀더 많은 정보</a>.</li> + <li><a href="/ko/XUL/checkbox" title="ko/XUL/checkbox">체크박스 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><colorpicker></strong> + <p>색을 선택하는데 사용하는 컨트롤.</p> + + <pre> +<colorpicker color="#FF0000"/> +</pre> + + <ul> + <li><a href="/ko/XUL/colorpicker" title="ko/XUL/colorpicker">색선택기(colorpicker) 레퍼런스</a></li> + </ul> + </td> + <td><span class="comment"><a href="/ko/Image/Controlsguide-colorpicker.png">Image:Controlsguide-colorpicker.png</a></span></td> + </tr> + <tr> + <td><strong><colorpicker type="button"></strong> + <p>버튼만 있는 특수한 색 선택기로, 버튼이 눌려지면 색을 선택할 수 있는 팝업이 출력됩니다.</p> + + <pre> +<colorpicker type="button" color="#CC0080"/> +</pre> + + <ul> + <li><a href="/ko/XUL/colorpicker" title="ko/XUL/colorpicker">색선택기(colorpicker) 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><datepicker></strong> + + + <p>날짜 입력에 사용할 수 있는 텍스트박스 집합.</p> + + <pre> +<datepicker value="2007/03/26"/> +</pre> + + <ul> + <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><datepicker type="grid"></strong> + + + <p>날짜를 선택할 수 있는 달력이 출력되는 형태의 날짜선택기(datepicker).</p> + + <pre> +<datepicker type="grid" value="2007/02/20"/> +</pre> + + <ul> + <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><datepicker type="popup" ></strong> + + + <p>날짜를 입력할 수 있는 텍스트박스와 함께 달력 팝업을 출력할 수 있는 버튼이 같이 있는 날짜 선택기.</p> + + <pre> +<datepicker type="popup" value="2008/08/24"/> +</pre> + + <ul> + <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><description></strong> + <p>긴 문장의 텍스트를 출력하는데 사용되는 요소</p> + + <pre> +<description> + Select a time for the event to start +</description> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Description_Element" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Description_Element">description 요소에 대한 자세한 정보</a>.</li> + <li><a href="/ko/XUL/description" title="ko/XUL/description">description 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><groupbox></strong> + <p>다른 사용자 인터페이스 컨트롤들을 포함하는 제목이 있는 상자 요소</p> + + <pre> +<groupbox> + <caption label="Network"/> +</groupbox> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Groupboxes" title="ko/XUL_Tutorial/Groupboxes">groupbox 요소에 대한 자세한 정보</a>.</li> + <li><a href="/ko/XUL/groupbox" title="ko/XUL/groupbox">Groupbox 레퍼런스</a></li> + <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><image></strong> + <p>URL로 지정한 이미지</p> + + <pre> +<image src="start.png"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Images" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Images">image 요소에 대한 자세한 정보</a>.</li> + <li><a href="/ko/XUL/image" title="ko/XUL/image">Image 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><label></strong> + <p>label은 특정 컨트롤의 제목을 출력하기 위해 사용됩니다.</p> + + <pre> +<label control="volume" value="Volume:"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Label_Element" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Label_Element">label 요소에 대한 자세한 정보</a>.</li> + <li><a href="/ko/XUL/label" title="ko/XUL/label">Label 레퍼런스</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><listbox></strong> + <p>listbox는 라벨이 달린 항목 중 하나를 선택하는데 사용됩니다.</p> + + <pre> +<listbox> + <listitem label="Chocolate"/> + <listitem label="Jelly Beans"/> +</listbox> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/List_Controls#List_Boxes" title="ko/XUL_Tutorial/List_Controls#List_Boxes">listbox 요소에 대한 자세한 정보</a>.</li> + <li><a href="/ko/XUL/listbox" title="ko/XUL/listbox">Listbox 레퍼런스</a></li> + <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><menulist></strong> + <p>A menulist (or combobox) is used to create a control with a drop down to select a value.</p> + + <pre> +<menulist> + <menupopup> + <menulist label="Lions" value="l"/> + <menuitem label="Tigers" value="t"/> + <menuitem label="Bears" value="b"/> + </menupopup> +</menulist> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/List_Controls#Drop-down_Lists" title="ko/XUL_Tutorial/List_Controls#Drop-down_Lists">More information about the menulist element</a>.</li> + <li><a href="/ko/XUL/menulist" title="ko/XUL/menulist">Menulist Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><menulist editable="true"></strong> + <p>An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.</p> + + <pre> +<menulist editable="true"> + <menupopup> + <menuitem label="Elephants" value="Elephants"/> + <menuitem label="Kangaroos" value="Kangaroos"/> + <menuitem label="Bats" value="Bats"/> + </menupopup> +</menulist> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/List_Controls#Editable_menulist" title="ko/XUL_Tutorial/List_Controls#Editable_menulist">More information about the editable menulist element</a>.</li> + <li><a href="/ko/XUL/menulist" title="ko/XUL/menulist">Menulist Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><progressmeter></strong> + <p>A progress meter is used to display the progress of a lengthy task.</p> + + <pre> +<progressmeter value="40"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Progress_Meters" title="ko/XUL_Tutorial/Progress_Meters">More information about the progressmeter element</a>.</li> + <li><a href="/ko/XUL/progressmeter" title="ko/XUL/progressmeter">Progressmeter Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><radio></strong> + <p>A radio button is used when only one of a set of options may be selected at a time.</p> + + <pre> +<radiogroup> + <radio label="Light" value="light"/> + <radio label="Heavy" value="heavy"/> +</radiogroup> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" title="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">More information about the radio element</a>.</li> + <li><a href="/ko/XUL/radio" title="ko/XUL/radio">Radio Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><richlistbox></strong> + <p>The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.</p> + + <pre> +<richlistbox> + <richlistitem> + <image src="happy.png"/> + </richlistitem> + <richlistitem> + <image src="sad.png"/> + </richlistitem> + <richlistitem> + <image src="angry.png"/> + </richlistitem> +</richlistbox> +</pre> + + <ul> + <li><a href="/ko/XUL/richlistbox" title="ko/XUL/richlistbox">Richlistbox Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/richlistitem" title="richlistitem">richlistitem</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><scale></strong> + + + <p>A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.</p> + + <pre> +<scale min="1" max="10"/> +</pre> + + <ul> + <li><a href="/ko/XUL/scale" title="ko/XUL/scale">Scale Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><textbox></strong> + <p>A textbox which allows a single line of text to be entered.</p> + + <pre> +<textbox value="firefox"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields" title="ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields">More information about the textbox element</a>.</li> + <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><textbox multiline="true"></strong> + <p>A textbox which allows multiple lines of text to be entered.</p> + + <pre> +<textbox multiline="true"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Input_Controls#Multiline_textbox" title="ko/XUL_Tutorial/Input_Controls#Multiline_textbox">More information about the multiple line textbox element</a>.</li> + <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><textbox type="autocomplete"></strong> + <p>A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.</p> + + <pre> +<textbox type="autocomplete" autocompletesearch="history"/> +</pre> + + <ul> + <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><textbox type="number"></strong> + + + <p>A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.</p> + + <pre> +<textbox type="number" min="1" max="20"/> +</pre> + + <ul> + <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><textbox type="password"></strong> + <p>A textbox that hides the characters typed, used for entering passwords.</p> + + <pre> +<textbox type="password"/> +</pre> + + <ul> + <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><timepicker></strong> + + + <p>A timepicker displays a set of textboxes for entering a time.</p> + + <pre> +<timepicker value="12:05"/> +</pre> + + <ul> + <li><a href="/ko/XUL/timepicker" title="ko/XUL/timepicker">Timepicker Reference</a></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><toolbarbutton></strong> + <p>A button that is displayed on a toolbar.</p> + + <pre> +<toolbarbutton label="Reload"/> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about the toolbarbutton element</a>.</li> + <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><toolbarbutton type="menu"></strong> + <p>A button that is displayed on a toolbar with a drop down menu attached to it.</p> + + <pre> +<toolbarbutton type="menu" label="Show"> + <menupopup> + <menuitem label="Toolbars"/> + <menuitem label="Status Bar"/> + </menupopup> +</toolbarbutton> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li> + <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><toolbarbutton type="menu-button"></strong> + <p>A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.</p> + + <pre> +<toolbarbutton type="menu-button" label="Open"> + <menupopup> + <menuitem label="Open Changed Files"/> + <menuitem label="Open All"/> + </menupopup> +</toolbarbutton> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li> + <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li> + </ul> + </td> + <td></td> + </tr> + <tr> + <td><strong><tree></strong> + <p>A tree displays a hierarchy of items in multiple columns.</p> + + <pre> +<tree> + <treecols> + <treecol label="Name" flex="1"/> + <treecol label="Size" flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="Popcorn"/> + <treecell label="Large"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Root Beer"/> + <treecell label="Small"/> + </treerow> + </treeitem> + </treechildren> +</tree> +</pre> + + <ul> + <li><a href="/ko/XUL_Tutorial/Trees" title="ko/XUL_Tutorial/Trees">More information about the tree element</a>.</li> + <li><a href="/ko/XUL/tree" title="ko/XUL/tree">Tree Reference</a></li> + <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></li> + </ul> + </td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ko/mozilla/tech/xul/xul_reference/index.html b/files/ko/mozilla/tech/xul/xul_reference/index.html new file mode 100644 index 0000000000..11d5570ccf --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_reference/index.html @@ -0,0 +1,148 @@ +--- +title: XUL Reference +slug: Mozilla/Tech/XUL/XUL_Reference +tags: + - XUL + - XUL Reference +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +<p>« <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> « +</p> +<table class="fullwidth-table"> +<tbody><tr> +<th colspan="3">전체 XUL 요소</th> +</tr> +<tr> +<td> +<p><a href="ko/XUL/action">action</a><br> +<a href="ko/XUL/arrowscrollbox">arrowscrollbox</a><br> +<a href="ko/XUL/bbox">bbox</a><br> +<a href="ko/XUL/binding">binding</a><br> +<a href="ko/XUL/bindings">bindings</a><br> +<a href="ko/XUL/box">box</a><br> +<a href="ko/XUL/broadcaster">broadcaster</a><br> +<a href="ko/XUL/broadcasterset">broadcasterset</a><br> +<a href="ko/XUL/button">button</a><br> +<a href="ko/XUL/browser">browser</a><br> +<a href="ko/XUL/checkbox">checkbox</a><br> +<a href="ko/XUL/caption">caption</a><br> +<a href="ko/XUL/colorpicker">colorpicker</a><br> +<a href="ko/XUL/column">column</a><br> +<a href="ko/XUL/columns">columns</a><br> +<a href="ko/XUL/commandset">commandset</a><br> +<a href="ko/XUL/command">command</a><br> +<a href="ko/XUL/conditions">conditions</a><br> +<a href="ko/XUL/content">content</a><br> +<a href="ko/XUL/deck">deck</a><br> +<a href="ko/XUL/description">description</a><br> +<a href="ko/XUL/dialog">dialog</a><br> +<a href="ko/XUL/dialogheader">dialogheader</a><br> +<a href="ko/XUL/editor">editor</a><br> +<a href="ko/XUL/grid">grid</a><br> +<a href="ko/XUL/grippy">grippy</a><br> +<a href="ko/XUL/groupbox">groupbox</a><br> +<a href="ko/XUL/hbox">hbox</a><br> +<a href="ko/XUL/iframe">iframe</a><br> +<a href="ko/XUL/image">image</a><br> +<a href="ko/XUL/key">key</a><br> +<a href="ko/XUL/keyset">keyset</a><br> +<a href="ko/XUL/label">label</a><br> +<a href="ko/XUL/listbox">listbox</a><br> +<a href="ko/XUL/listcell">listcell</a><br> +<a href="ko/XUL/listcol">listcol</a><br> +<a href="ko/XUL/listcols">listcols</a><br> +<a href="ko/XUL/listhead">listhead</a><br> +<a href="ko/XUL/listheader">listheader</a><br> +</p> +</td> +<td> +<p><a href="ko/XUL/listitem">listitem</a><br> +<a href="ko/XUL/member">member</a><br> +<a href="ko/XUL/menu">menu</a><br> +<a href="ko/XUL/menubar">menubar</a><br> +<a href="ko/XUL/menuitem">menuitem</a><br> +<a href="ko/XUL/menulist">menulist</a><br> +<a href="ko/XUL/menupopup">menupopup</a><br> +<a href="ko/XUL/menuseparator">menuseparator</a><br> +<a href="ko/XUL/notification">notification</a><br> +<a href="ko/XUL/notificationbox">notificationbox</a><br> +<a href="ko/XUL/observes">observes</a><br> +<a href="ko/XUL/overlay">overlay</a><br> +<a href="ko/XUL/page">page</a><br> +<a href="ko/XUL/popup">popup</a><br> +<a href="ko/XUL/popupset">popupset</a><br> +<a href="ko/XUL/preference">preference</a><br> +<a href="ko/XUL/preferences">preferences</a><br> +<a href="ko/XUL/prefpane">prefpane</a><br> +<a href="ko/XUL/prefwindow">prefwindow</a><br> +<a href="ko/XUL/progressmeter">progressmeter</a><br> +<a href="ko/XUL/radio">radio</a><br> +<a href="ko/XUL/radiogroup">radiogroup</a><br> +<a href="ko/XUL/resizer">resizer</a><br> +<a href="ko/XUL/richlistbox">richlistbox</a><br> +<a href="ko/XUL/richlistitem">richlistitem</a><br> +<a href="ko/XUL/row">row</a><br> +<a href="ko/XUL/rows">rows</a><br> +<a href="ko/XUL/rule">rule</a><br> +<a href="ko/XUL/script">script</a><br> +<a href="ko/XUL/scrollbar">scrollbar</a><br> +<a href="ko/XUL/scrollbox">scrollbox</a><br> +<a href="ko/XUL/scrollcorner">scrollcorner</a><br> +<a href="ko/XUL/separator">separator</a><br> +<a href="ko/XUL/spacer">spacer</a><br> +<a href="ko/XUL/splitter">splitter</a><br> +<a href="ko/XUL/stack">stack</a><br> +<a href="ko/XUL/statusbar">statusbar</a><br> +<a href="ko/XUL/statusbarpanel">statusbarpanel</a><br> +</p> +</td> +<td> +<p><a href="ko/XUL/stringbundle">stringbundle</a><br> +<a href="ko/XUL/stringbundleset">stringbundleset</a><br> +<a href="ko/XUL/tab">tab</a><br> +<a href="ko/XUL/tabbrowser">tabbrowser</a><br> +<a href="ko/XUL/tabbox">tabbox</a><br> +<a href="ko/XUL/tabpanel">tabpanel</a><br> +<a href="ko/XUL/tabpanels">tabpanels</a><br> +<a href="ko/XUL/tabs">tabs</a><br> +<a href="ko/XUL/template">template</a><br> +<a href="ko/XUL/textnode">textnode</a><br> +<a href="ko/XUL/textbox">textbox</a><br> +<a href="ko/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br> +<a href="ko/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br> +<a href="ko/XUL/titlebar">titlebar</a><br> +<a href="ko/XUL/toolbar">toolbar</a><br> +<a href="ko/XUL/toolbarbutton">toolbarbutton</a><br> +<a href="ko/XUL/toolbargrippy">toolbargrippy</a><br> +<a href="ko/XUL/toolbaritem">toolbaritem</a><br> +<a href="ko/XUL/toolbarpalette">toolbarpalette</a><br> +<a href="ko/XUL/toolbarseparator">toolbarseparator</a><br> +<a href="ko/XUL/toolbarset">toolbarset</a><br> +<a href="ko/XUL/toolbarspacer">toolbarspacer</a><br> +<a href="ko/XUL/toolbarspring">toolbarspring</a><br> +<a href="ko/XUL/toolbox">toolbox</a><br> +<a href="ko/XUL/tooltip">tooltip</a><br> +<a href="ko/XUL/tree">tree</a><br> +<a href="ko/XUL/treecell">treecell</a><br> +<a href="ko/XUL/treechildren">treechildren</a><br> +<a href="ko/XUL/treecol">treecol</a><br> +<a href="ko/XUL/treecols">treecols</a><br> +<a href="ko/XUL/treeitem">treeitem</a><br> +<a href="ko/XUL/treerow">treerow</a><br> +<a href="ko/XUL/treeseparator">treeseparator</a><br> +<a href="ko/XUL/triple">triple</a><br> +<a href="ko/XUL/vbox">vbox</a><br> +<a href="ko/XUL/window">window</a><br> +<a href="ko/XUL/wizard">wizard</a><br> +<a href="ko/XUL/wizardpage">wizardpage</a><br> +</p> +</td> +</tr> +</tbody></table> +<h3 id=".EB.8B.A4.EB.A5.B8_XUL_.EB.AA.A9.EB.A1.9D" name=".EB.8B.A4.EB.A5.B8_XUL_.EB.AA.A9.EB.A1.9D"> 다른 XUL 목록 </h3> +<ul><li> <a href="ko/XUL/Attribute">전체 속성</a> +</li><li> <a href="ko/XUL/Property">전체 프로퍼티</a> +</li><li> <a href="ko/XUL/Method">전체 메소드</a> +</li><li> <a href="ko/XUL_element_attributes">전체 XUL 요소를 위해 정의된 속성</a> +</li><li> <a href="ko/XUL/Events">이벤트 처리기</a> +</li></ul> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html new file mode 100644 index 0000000000..7547d91ba9 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html @@ -0,0 +1,102 @@ +--- +title: Adding Buttons +slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Buttons +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images">다음 »</a></p> +</div><p></p> +<p>이 절에서, 우리는 창에 간단한 버튼 몇 개를 추가하는 법을 살펴보겠습니다.</p> +<h3 id=".EC.B0.BD.EC.97.90_.EB.B2.84.ED.8A.BC_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.B0.BD.EC.97.90_.EB.B2.84.ED.8A.BC_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">창에 버튼 추가하기</h3> +<p>우리가 지금까지 만든 창은 안에 아무것도 없습니다, 그래서 아직까지는 재미있지 않습니다. 이 절에서, 우리는 찾기(Find)와 취소(Cancel) 버튼 둘을 추가합니다. 또한 창에 버튼을 두는 간단한 방법을 배웁니다.</p> +<p>HTML처럼, XUL은 UI 요소를 만드는 데 쓸 수 있는 태그가 다수 있습니다. 이 가운데 가장 기본은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 태그입니다. 이 요소는 간단한 버튼을 만드는 데 씁니다.</p> +<p>button 요소에는 요소와 관련된 두 주요 프로퍼티 <code>label</code>과 <code>image</code>가 있습니다. 여러분은 하나나 둘 다 필요합니다. 이와 같이, button은 label, image만이나 label과 image 둘 다 있을 수 있습니다. 예를 들어, button은 보통 대화상자에서 확인(OK)과 취소(Cancel) 버튼에 씁니다.</p> +<h4 id="button_.EA.B5.AC.EB.AC.B8" name="button_.EA.B5.AC.EB.AC.B8">button 구문</h4> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 태그의 구문은 다음과 같습니다.</p> +<pre><button + id="identifier" + class="dialog" + label="OK" + image="images/image.jpg" + disabled="true" + accesskey="t"/> +</pre> +<p>속성은 다음과 같고, 모두 선택 속성입니다.</p> +<dl> + <dt> + <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> + <dd> + 여러분이 식별할 수 있도록 버튼에 붙이는 유일한 식별자. 여러분은 모든 요소에서 이 속성을 봅니다. 여러분이 스타일시트나 스크립트에서 버튼을 참조하고 싶다면 이를 쓰고 싶을 겁니다. 그러나, 여러분은 거의 모든 요소에 이 속성을 추가해야 합니다. 단순함을 위해 항상 이 입문서의 요소에 두지는 않습니다.</dd> + <dt> + <code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt> + <dd> + 버튼의 스타일 클래스. 이는 HTML에서와 같이 작동합니다. 버튼이 안에 보이는 스타일을 나타내는 데 씁니다. 이 경우에는 <code>dialog</code>값이 쓰입니다. 대개의 경우, 여러분은 버튼에 클래스를 쓰지 않습니다.</dd> + <dt> + <code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt> + <dd> + 버튼에 보이는 label. 예를 들어, 확인( + <i> + OK</i> + )이나 취소( + <i> + Cancel</i> + ). 이 속성을 빼면, 텍스트가 보이지 않습니다.</dd> + <dt> + <code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt> + <dd> + 버튼에 보이는 image의 URL. 이 속성을 빼면, image가 보이지 않습니다. 여러분은 또한 <code><a href="ko/CSS/list-style-image">list-style-image</a></code> 프로퍼티를 써서 스타일시트에 image를 지정할 수 있습니다.</dd> + <dt> + <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> + <dd> + 이 속성을 <code>true</code>로 설정하면, button이 기능하지 않습니다. 이는 보통 회색으로 텍스트를 그립니다. 버튼이 기능하지 않으면, 버튼의 기능이 수행될 수 없습니다. 이 속성을 아주 빼면, 버튼이 작동합니다. 여러분은 <a href="ko/JavaScript">JavaScript</a>를 써서 버튼의 기능 상태를 엇바꿀(switch) 수 있습니다.</dd> + <dt> + <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt> + <dd> + 이는 단축키(shortcut key)로 쓸 문자로 설정돼야 합니다. 이 문자는 label 텍스트에 보여야 하고 대체로 밑줄이 그려집니다. 사용자가 ALT(나 각 플랫폼마다 다른 비슷한 키)와 access key를 눌렀을 때, 버튼은 창의 어디에서나 focus를 받습니다.</dd> +</dl> +<p>button은 위에 나열된 것보다 더 많은 속성을 지원함을 유념하세요. 그 밖의 속성은 <a href="ko/XUL_Tutorial/More_Button_Features">나중에 논의</a>합니다.</p> +<h4 id=".EB.B2.84.ED.8A.BC_.EC.98.88.EC.A0.9C" name=".EB.B2.84.ED.8A.BC_.EC.98.88.EC.A0.9C">버튼 예제</h4> +<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:buttons1.png"></div> +<pre><button label="Normal"/> +<button label="Disabled" disabled="true"/> +</pre> +<p>위 예제는 그림(image)처럼 버튼을 생성합니다. 첫째 버튼은 보통 버튼입니다. 둘째 버튼은 기능하지 않으므로 회색으로 나옵니다.</p> +<p>파일 찾기(find files) 유틸리티를 위한 간단한 찾기(Find) 버튼을 만들면서 시작합니다. 아래 예제 코드는 그 방법을 보입니다.</p> +<pre><button id="find-button" label="Find"/> +</pre> +<div class="note"> + Firefox는 웹 페이지에서 chrome 창 열기를 허용하지 않으므로, 입문서의 View 링크는 보통 브라우저 창에 열림을 유념하세요. 이 때문에, button은 창을 가로질러 늘어나 보입니다. 여러분은 늘어남을 막기 위해 window 태그에 align="start"를 추가할 수 있습니다.</div> +<div class="highlight"> + <h5 id="findfile.xul_.EC.98.88.EC.A0.9C" name="findfile.xul_.EC.98.88.EC.A0.9C">findfile.xul 예제</h5> + <p>우리가 이전 절에서 만든 findfile.xul 파일에 이 코드를 추가합시다. 코드는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그 사이에 삽입이 필요합니다. 추가한 코드는 아래에 빨간 색으로 보입니다.</p> + <pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + + <span class="highlightred"><button id="find-button" label="Find"/></span> + <span class="highlightred"><button id="cancel-button" label="Cancel"/></span> + +</window> +</pre> + <div class="float-right"> + <img alt="Image:buttons2.png"></div> + <p>여러분은 취소(Cancel) 버튼 또한 추가됐음을 알아챌 겁니다. 창은 두 버튼이 서로 곁에 보이도록 horizontal 방향을 주었습니다. 혹시 여러분이 Mozilla에서 그 파일을 열면, 여기 보이는 그림 같은 것을 얻습니다.</p> +</div> +<p> </p> +<div class="note"> + 우리가 XUL 파일에 직접 텍스트 label을 넣지 않았음을 유념하세요. 우리는 <a href="ko/XUL_Tutorial/Localization">텍스트가 쉽게 번역될 수 있도록 대신 엔티티</a>를 쓸 겁니다.</div> +<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Adding_Labels_and_Images"> XUL 창에 label과 image를 추가</a>하는 법을 알아보겠습니다.</p> +<p><small>같이 보기 <a href="ko/XUL_Tutorial/More_Button_Features">more button fetaures</a></small></p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html new file mode 100644 index 0000000000..ca1cc19642 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html @@ -0,0 +1,137 @@ +--- +title: Adding Event Handlers +slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Event_Handlers +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers">다음 »</a></p> +</div><p></p> + +<p>지금까지의 파일 찾기 대화창은 꽤 괜찮은 모양세를 갖추고 있습니다. 다 끝나지는 않았지만 손쉽게 간단한 사용자 인터페이스를 만들었습니다. 다음으로는 스크립트를 추가하는 방법에 대해 알아보겠습니다.</p> + +<h3 id=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">스크립트 사용하기</h3> + +<p>파일 찾기 대화창이 제대로 동작하려면 대화창과 사용자의 상호작용시 실행해야하는 스크립트를 추가해야 합니다. 우리는 Find 및 Cancel 버튼과 각 메뉴 명령을 처리할 스크립트를 추가하려고 합니다. 이를 위해 <a href="ko/HTML">HTML</a>에서와 거의 동일한 방법으로 <a href="ko/JavaScript">JavaScript</a> 함수를 이용해서 작성할 것입니다.</p> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> 요소를 사용해서 XUL 파일에 스크립트를 포함할 수 있습니다. XUL 파일에서 <code>script</code> 태그 내에 직접 코드를 넣을수도 있지만 별도의 파일에 코드를 포함하는게 더 좋으며, 이렇게 하면 XUL창의 로딩 속도가 약간 빨라집니다. 외부 스크립트 파일과 연결하기 위해서는 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 사용합니다.</p> + +<div class="highlight"> +<h5 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h5> + +<p>파일 찾기 대화창에 스크립트를 넣어보도록 하겠습니다. 스크립트 파일의 이름을 무엇으로 하든 상관없지만, 보통 XUL 파일과 이름은 같으면서 확장자만 .js로 하여 작성합니다. 이 경우 findfile.js가 사용될 것입니다. 여는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그 아래 그리고 다른 요소들 앞에 아래 줄을 추가하세요.</p> + +<pre class="eval"><span class="highlightred"><script src="findfile.js"/></span> +</pre> + +<p>우리는 스크립트 파일에 무엇을 써야하는지를 안 후에 이 파일을 생성할것 입니다. 스크립트 파일에는 이벤트 핸들러에서 호출할 수 있도록 몇 개의 함수를 정의할 것입니다.</p> +</div> + +<p>여러분은 하나의 XUL 파일에 여러개의 스크립트를 포함할 수 있습니다. 이를 위해서는 각각 다른 스크립트를 가리키는 여러개의 <code>script</code> 태그를 사용하면 됩니다. <code>src</code> 속성에는 상대 혹은 절대 URL을 사용할 수 있습니다. 예를 들어 다음과 같은 형식으로 URL을 사용할 수 있습니다.</p> + +<pre class="eval"><script src="findfile.js"/> +<script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/> +<script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/> +</pre> + +<p>본 자습서에서는 JavaScript의 사용법과 관련된 내용에 대해서는 다루지 않겠습니다. 이는 아주 넓은 주제이며 이를 위한 다양한 리소스들이 있습니다.</p> + +<div class="note"> +<p>기본적으로 JavaScript 콘솔은 웹 페이지에서 발생하는 오류만 보여줍니다. Chrome JavaScript에서 발생하는 오류를 출력하려면 설정에서 <code>javascript.options.showInConsole</code> 값을 <code>true</code>로 변경해야 합니다. 또한 디버깅을 위해 <code>javascript.options.strict</code> 설정값을 바꿀 수 있습니다. 이 값을 <code>true</code>로 설정하면, 표준에 맞지 않고 잘못 쓰여졌거나 구문에 맞지 않아서 로직 오류를 발생시킬 수 있는 것들이 JavaScript 콘솔에 기록될 것입니다.</p> +</div> + +<h3 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.97.90_.EC.9D.91.EB.8B.B5.ED.95.98.EA.B8.B0" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.97.90_.EC.9D.91.EB.8B.B5.ED.95.98.EA.B8.B0">이벤트에 응답하기</h3> + +<p>스크립트는 사용자 혹은 다른 상황에 의해 발생하는 다양한 이벤트에 응답하는 코드를 포함합니다. 대략 30개 이상의 서로 다른 이벤트가 존재하며 이것들은 각각 서로 다른 방식으로 처리됩니다. 사용자가 마우스 버튼이나 키를 누르는 것과 같은 것들이 일반적인 이벤트입니다. 각각의 XUL 요소는 서로 다른 상황에서 특정 이벤트를 발생시킬 수 있는 능력이 있습니다. 어떤 이벤트는 특정 요소에 의해서만 발생됩니다.</p> + +<p>각 이벤트는 이름을 가지고 있으며, 'mousemove' 이벤트의 경우는 사용자가 UI 요소 위에서 마우스를 움직일 경우에 발생하는 이벤트 이름입니다. XUL은 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events</a>에서 정의한 것과 동일한 이벤트 메카니즘을 사용합니다. 사용자가 마우스를 움직이는 것과 같이, 이벤트를 발생시킬 수 있는 어떤 행위가 발생하면 해당 이벤트 유형에 해당하는 이벤트 객체가 생성됩니다. 이벤트 객체에는 마우스 위치나 눌러진 키와 같은 다양한 속성이 설정됩니다.</p> + +<p>그리고 나면 이벤트는 다음의 단계에 따라 XUL로 전송됩니다.</p> + +<ul> + <li>캡쳐 단계(capturing phase)에서는 이벤트는 맨 먼저 창으로 전송되고 다음으로는 문서로, 다음으로는 이벤트가 발생한 XUL 요소의 부모 요소들로 하위방향으로 대상 요소에 도착할때까지 전송됩니다.</li> + <li>타겟 단계(target phase)에서는 대상 XUL 요소로 이벤트가 전달됩니다.</li> + <li>버블링 단계(bubbling phase)에서는 이벤트가 다시 창에 도착할 때까지 위로 각 요소들에 전송됩니다.</li> +</ul> + +<p>여러분은 캡쳐나 버블링 단계에서 이벤트에 응답할 수 있습니다. 이벤트의 전파가 모두 끝난 후에 대상 요소에 미리 정의된 기본 행위가 발생합니다.</p> + +<p>예를 들어, 마우스가 상자안에 있는 버튼위에서 움직였다면 'mousemove' 이벤트가 발생되고, 창, 문서, 상자 순으로 전송됩니다. 여기까지오면 캡쳐 단계가 끝이 납니다. 다음으로는 버튼으로 'mousemove' 이벤트가 전달됩니다. 최종 버블링 단계에서는 다시 상자, 문서, 창으로 이벤트가 전송됩니다. 버블링 단계는 당연히 캡처 단계의 역순으로 진행됩니다. 어떤 이벤트는 버블링 단계를 수행하지 않는다는 것을 알아 두십시요.</p> + +<p>여러분은 이벤트 전파 단계별로 각 요소가 이벤트에 응답하도록 리스너를 부착할 수 있습니다. 하나의 이벤트는 대상 요소의 모든 부모 요소들에게도 전달되기 때문에 특정 요소나 계층 구조상 상위에 있는 요소에도 리스너를 부착할 수 있습니다. 당연히 더 높은 위치에 있는 요소에 부착된 이벤트는 이 요소 내부에 있는 모든 요소의 알림을 받게 됩니다. 반대로 버튼에 부착된 이벤트는 해당 버튼과 관련된 이벤트만 받게 됩니다. 이것은 동일하거나 유사한 코드를 사용해서 여러개의 요소의 이벤트를 처리하고자 할 때 유용합니다.</p> + +<p>가장 일반적으로 사용되는 이벤트는 'command' 이벤트입니다. command 이벤트는 사용자가 어떤 요소를 활성화할 때 발생합니다. 예를 들어 버튼을 누르거나, 체크박스를 변경한다던지, 메뉴의 한 항목을 선택하는 것들이 이에 해당됩니다. command 이벤트는 해당 요소를 활성화하는 여러가지 방법을 자동으로 처리하기 때문에 유용하게 사용됩니다. 예를 들어 command 이벤트는 사용자가 버튼을 클릭하기 위해 마우스를 이용하던지 Enter 키를 누르던지 상관없이 발생됩니다.</p> + +<p>이벤트 리스너를 요소에 부착하는데는 2가지 방법이 있습니다. 첫 번째는 속성값에 스크립트를 사용하는 것입니다. 두 번째는 대상 요소의 <code>addEventListener</code> 메소드를 호출하는 것입니다. 전자는 버블링 단계에서 발생하는 이벤트만을 처리할 수 있긴 하지만, 사용하기 쉽다는 장점이 있습니다. 후자는 어떠한 단계의 이벤트도 처리할 수 있으며 한 요소의 특정 이벤트에 대해 여러개의 리스너를 부착할 수도 있습니다. 보통 대부분의 이벤트에 대해 속성을 이용하여 처리하는 형식이 더 많이 사용됩니다.</p> + +<h3 id=".EC.86.8D.EC.84.B1_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88" name=".EC.86.8D.EC.84.B1_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88">속성 이벤트 리스너</h3> + +<p>속성 형태를 사용하기 위해서는 이벤트에 반응해야 할 요소에 이벤트 이름 앞에 'on'이 붙은 이름의 속성을 위치시키면 됩니다. 예를 들어, 'command' 이벤트에 해당하는 속성은 'oncommand'입니다. 속성 값은 어떤 이벤트가 발생할 때 실행될 스크립트이어야 합니다. 일반적으로 이 코드는 짧은 내용이거나 별도의 스크립트에서 정의된 함수를 호출할 것입니다. 다음은 버튼이 눌러졌을때 응답하는 예제입니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">View</a></p> + +<pre class="eval"><button label="OK" oncommand="alert('Button was pressed!');"/> +</pre> + +<p>command 이벤트는 버블링 단계를 거치기 때문에 해당 요소를 감싸는 요소(부모 요소)에도 이벤트 리스너를 부착시킬 수 있습니다. 아래의 예제에서 상자는 이벤트 리스너가 부착되어 있으며, 이 상자의 자식 요소들 모두에서 발생하는 이벤트에 응답하게 됩니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">View</a></p> + +<pre class="eval"><vbox oncommand="alert(event.target.tagName);"> + <button label="OK"/> + <checkbox label="Show images"/> +</vbox> +</pre> + +<p>예제에서 command 이벤트는 버튼이나 체크박스에서 vbox로의 버블링 단계를 거칩니다. 만일 또 다른 리스너가 버튼에 위치해 있었다면, 이 코드가 먼저 호출되고 다음에 vbox의 핸들러가 실행될 것입니다. 이벤트 핸들러는 이벤트 객체인 'event'라는 미리 정의된 인자를 전달 받습니다. 이것은 이벤트에 관한 특정 정보를 얻기 위해 사용됩니다. 이벤트 객체에서 자주 사용되는 속성은 이벤트의 'target' 속성으로 이것은 실제로 이벤트가 발생한 대상 요소를 포함하고 있습니다. 예제에서는 대상 요소의 태그 이름이 포함된 경고창을 출력하였습니다. 버블링 단계에서 'target' 속성은 유용하게 사용할 수 있는데, 여러분은 하나의 스크립트로 여러개의 버튼들을 처리할 수 있습니다.</p> + +<p>여러분은 속성 구문이 HTML 문서에서 이벤트에 사용된것과 비슷하다는 것을 발견하였을 것입니다. 사실 HTML과 XUL 모두 동일한 이벤트 메카니즘을 공유합니다. 한 가지 중요한 차이는 HTML에서는 버튼의 응답에 'click' 이벤트(<code>onclick</code> 속성)가 사용되는 반면, XUL에서는 command 이벤트가 사용된다는 것입니다. XUL에서도 click 이벤트가 존재하지만 키보드가 아닌 마우스 클릭에만 응답합니다. 따라서, XUL에서는 특정 요소가 꼭 마우스에 의해서만 처리되어야만 하는 이유가 없다면 click 이벤트를 사용하지 않는게 좋습니다. 또한, command 이벤트는 요소가 사용할 수 없는 상태(disabled)일때는 전송되지 않지만 click 이벤트는 대상 요소의 상태와 상관없이 전송됩니다.</p> + +<div class="highlight"> +<h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h5> + +<p>파일 찾기 대화창에 있는 Find와 Cancel 버튼에는 command 이벤트 핸들러를 부착할 수 있습니다. Find 버튼을 누르면 검색을 시작해야 할 것입니다. 이 부분은 아직 구현되지 않았기 때문에 지금은 그냥 두겠습니다. 그러나 Cancel 버튼을 눌렀을때는 창이 닫히게 하는 것이 좋을것 같습니다. 아래의 코드는 이것을 어떻게 하는지 보여줍니다. 동일한 코드를 Close 메뉴 항목에도 넣어 보겠습니다.</p> + +<pre class="eval"><menuitem label="Close" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/> +... + +<button id="cancel-button" label="Cancel" + <span class="highlightred">oncommand="window.close();</span>"/> +</pre> + +<p>두 개의 핸들러가 추가되었습니다. <code>oncommand</code> 속성이 Close 메뉴 항목에 추가되었습니다. 이 핸들러를 사용해서 사용자는 마우스로 메뉴 항목을 클릭하거나 키보드로 선택함으로서 창을 닫을 수 있습니다. Cancel 버튼에도 <code>oncommand</code> 핸들러가 추가되었습니다.</p> +</div> + +<h3 id="DOM_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88" name="DOM_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88">DOM 이벤트 리스너</h3> + +<p>이벤트 핸들러를 추가하는 두 번째 방법은 해당 요소의 <code>addEventListener</code> 메소드를 호출하는 것입니다. 이 방법은 동적으로 이벤트 리스너를 부착할 수 있게 해주며 캡처 단계에서 이벤트에 응답하게 해 줍니다. 구문은 다음과 같습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">View</a></p> + +<pre><button id="okbutton" label="OK"/> + +<script> +function buttonPressed(event){ + alert('Button was pressed!'); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command', buttonPressed, true); +</script> +</pre> + +<p><code><a href="ko/DOM/document.getElementById">getElementById()</a></code> 함수는 주어진 <code>id</code>에 해당하는 요소를 반환하며, 이 경우에는 버튼 요소입니다. <code><a href="ko/DOM/element.addEventListener">addEventListener()</a></code> 함수는 새로운 캡처 단계의 이벤트 리스너를 추가하기 위해 호출되었습니다. 첫 번째 인자는 응답할 대상 이벤트 이름입니다. 두 번째 인자는 이벤트가 발생했을 때 호출될 이벤트 리스너 함수입니다. 마지막 인자는 캡처 단계에서 사용하기 위해 <code>true</code>이어야 합니다. 여러분은 마지막 인자를 <code>false</code>로 설정하면 캡쳐 단계가 아닌 버블링 단계에서 응답하도록 합니다. 두 번째 인자로 주어진 이벤트 리스너 함수는 위의 <code>buttonPressed</code> 함수에서 선언된 것과 같이 인자로 event 객체 하나만 받아야 합니다.</p> + +<div class="highlight"><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">View</a></div> + +<p>다음에는 <a href="ko/XUL_Tutorial/More_Event_Handlers">이벤트 객체</a>에 대해 좀 더 자세히 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers">다음 »</a></p> +</div><p></p> + +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html new file mode 100644 index 0000000000..6c3e3921ee --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html @@ -0,0 +1,114 @@ +--- +title: Adding HTML Elements +slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_HTML_Elements +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Using_Spacers">다음 »</a></p> +</div><p></p> +<p>버튼을 넣었으니 이제 다른 요소들을 더 넣어 보도록 하겠습니다.</p> +<h3 id=".EC.B0.BD.EC.97.90_HTML_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.B0.BD.EC.97.90_HTML_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">창에 HTML 요소 추가하기</h3> +<p>XUL 파일에는 XUL 요소뿐만 아니라 HTML 요소들도 바로 넣을 수 있습니다. 모든 HTML 요소를 XUL 파일에서 사용할 수 있기 때문에 자바 애플릿이나 테이블을 창에 표시하는 것도 가능합니다. 될 수 있으면 HTML 요소를 사용하지 않는 것이 바람직하지만(몇 가지 이유가 있지만 가장 중요한 것은 다음에 설명할 <a href="ko/XUL_Tutorial/Box_Model_Details">컨트롤의 배치</a>와 관련된 것입니다.), 그래도 이번 단원에서는 XUL에서 HTML 요소를 사용하는 방법을 알아 보도록 하겠습니다. XML은 대소문자를 구별하기 때문에 모든 태그와 속성은 소문자로 입력해야 한다는 점에 유의하세요.</p> +<h4 id="XHTML_.EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84" name="XHTML_.EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84">XHTML 이름공간</h4> +<p>HTML 요소를 XUL 파일에서 사용하려면 먼저 XHTML 이름공간을 사용한다는 것을 선언해야 합니다. 이렇게 함으로써, Mozilla는 HTML 태그와 XUL 태그를 구별할 수 있습니다. 아래 속성이 XUL 파일의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그나 제일 바깥 HTML 요소에 추가되어야 합니다.</p> +<pre class="eval"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span> +</pre> +<p>이것은 XUL 을 선언하기 위해 사용했던 것과 비슷한 것으로, HTML을 선언하는 것입니다. 이것은 위와 정확히 일치하도록 입력되어야 하며, 그렇지 않아면 제대로 작동하지 않을 것입니다. 실제로는 Mozilla가 위의 URL을 다운로드하는 것은 아니며, 그냥 HTML이라는 것을 인식하기 위한 것입니다.</p> +<p>다음은 파일 찾기 창에 추가한 예제입니다.</p> +<pre class="eval"> <?xml version="1.0"?> + <?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> + <window + id="findfile-window" + title="Find Files" + orient="horizontal" + <span class="highlightred"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span></span> + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> +</pre> +<p>이제 다음 내용만 잘 세겨두고 있으면, HTML 태그를 사용하실 수 있습니다.</p> +<ul> + <li>HTML 이름 공간을 위와 같이 정의했다고 하면, 각각의 HTML 태그의 시작부분에는 <code>html:</code> 접두어가 들어가야 합니다.</li> + <li>모든 태그는 "소문자로 입력"해야만 합니다.</li> + <li>모든 속성값은 "인용부호"로 묶여야 합니다.</li> + <li>XML에서는 내용이 없는 태그의 끝에 마침 슬래쉬(/>)가 필요합니다. 이것은 다음 예제를 통해 보다 명확히 알 수 있을 것입니다.</li> +</ul> +<h4 id="HTML_.EC.9A.94.EC.86.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name="HTML_.EC.9A.94.EC.86.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">HTML 요소 사용하기</h4> +<p>여러분은 어떠한 HTML 태그도 사용하실 수 있습니다(사실 <code>head</code>나 <code>body</code>같은 것들은 쓸데가 없습니다). HTML 요소를 사용하는 몇 가지 예제를 아래에서 보실 수 있습니다.</p> +<pre><html:img src="banner.jpg"/> + +<html:input type="checkbox" value="true"/> + +<html:table> + <html:tr> + <html:td> + A simple table + </html:td> + </html:tr> +</html:table> +</pre> +<p>위의 예제는 banner.jpg 이미지와 체크 박스, 단일 셀 테이블을 생성합니다. 여러분은 가능하면 XUL의 기능을 사용하는 것이 좋고, 레이아웃을 위해 테이블을 사용하지 않는게 좋습니다(레이아웃을 위한 XUL 요소가 존재합니다). 각 태그 앞에 <code>html:</code> 접두어가 추가되어 있는 것을 보실 수 있습니다. 이것은 Mozilla에게 이러한 태그가 XUL이 아닌 HTML 태그라는 것을 알려 줍니다. 만일 <code>html:</code> 부분이 빠지면 브라우저는 해당 요소가 XUL 요소인 것으로 생각할 것이며, img, input, table들은 유효한 XUL 태그가 아니기 때문에 출력되지 않을 것입니다.</p> +<p>XUL에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>나 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소를 이용해서 라벨을 넣을 수 있습니다. 가능하면 이런 요소들을 사용하세요. 여러분은 컨트롤에 라벨을 넣기 위해 HTML의 <code>label</code> 요소를 사용하거나, 아래의 예제와 같이 다른 블럭 요소(<code>p</code>나 <code>div</code> 같은 것들)내에 직접 텍스트를 넣어서 사용할 수 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">View</a></p> +<pre><html:p> + Search for: + <html:input id="find-text"/> + <button id="okbutton" label="OK"/> +</html:p> +</pre> +<p>위의 코드에서는 'Search for:'라는 텍스트가 출력되고, 다음에는 input 요소와 OK 버튼이 출력됩니다. 위에서와 같이 XUL 버튼이 HTML 요소 내에 나타날 수 있다는 점에 유의하세요. 텍스트는 보통 출력을 위해 사용되는 HTML 요소 내에 위치해야지만 출력됩니다. 바깥쪽에 있는 텍스트는 <code>description</code>와 같이 텍스트를 포함할 수 있는 XUL 요소외에서는 출력되지 않습니다. 아래의 예제가 도움이 될것입니다.</p> +<h3 id="HTML_.EC.9A.94.EC.86.8C_.EC.98.88.EC.A0.9C" name="HTML_.EC.9A.94.EC.86.8C_.EC.98.88.EC.A0.9C">HTML 요소 예제</h3> +<p>다음은 HTML 요소를 창에 추가하는 몇 가지 예제입니다. 단순하게 하기 위해 창과 다른 중복된 내용은 생략하였습니다.</p> +<h4 id=".EC.B2.B4.ED.81.AC_.EB.B0.95.EC.8A.A4.EA.B0.80_.EC.9E.88.EB.8A.94_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EC.B2.B4.ED.81.AC_.EB.B0.95.EC.8A.A4.EA.B0.80_.EC.9E.88.EB.8A.94_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">체크 박스가 있는 대화상자</h4> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">View</a></p> +<div class="float-right"> + <img alt="Image:htmlelem-ex1.png"></div> +<pre><html:p> + Click the box below to remember this decision. + <html:p> + <html:input id="rtd" type="checkbox"/> + <html:label for="rtd">Remember This Decision</html:label> + </html:p> +</html:p> +</pre> +<p>위 예제에서는 하나의 <code>p</code> 태그는 텍스트를 감싸고 있고, 다른 <code>p</code> 태그는 여러 줄로 텍스트를 분리하기 위해 사용되고 있습니다.</p> +<h4 id="HTML_.EB.B8.94.EB.9F.AD_.EB.B0.94.EA.B9.A5.EC.AA.BD.EC.97.90_.EC.9E.88.EB.8A.94_.ED.85.8D.EC.8A.A4.ED.8A.B8" name="HTML_.EB.B8.94.EB.9F.AD_.EB.B0.94.EA.B9.A5.EC.AA.BD.EC.97.90_.EC.9E.88.EB.8A.94_.ED.85.8D.EC.8A.A4.ED.8A.B8">HTML 블럭 바깥쪽에 있는 텍스트</h4> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">View</a></p> +<div class="float-right"> + <img alt="Image:htmlelem-ex2.png"></div> +<pre><html:div> + Would you like to save the following documents? + <html:hr/> +</html:div> +Expense Report 1 +What I Did Last Summer +<button id="yes" label="Yes"/> +<button id="no" label="No"/> +</pre> +<p>그림에서 보듯이, <code>div</code> 태그 안에 있는 텍스트는 출력되지만 바깥쪽에 있는 텍스트(Expense Report 1과 What I Did Last Summer)는 출력되지 않습니다. 이것은 텍스트를 출력하기 위해 감싸고 있는 HTML 혹은 XUL 요소가 없기 때문입니다. 이 텍스트를 출력하기 위해서는 <code>div</code> 태그나 <code>description</code> 태그 내로 들어가야 합니다.</p> +<h4 id=".EC.9E.98.EB.AA.BB.EB.90.9C_HTML_.EC.9A.94.EC.86.8C" name=".EC.9E.98.EB.AA.BB.EB.90.9C_HTML_.EC.9A.94.EC.86.8C">잘못된 HTML 요소</h4> +<pre><html:po>Case 1</html:po> +<div>Case 2</div> +<html:description value="Case 3"/> +</pre> +<p>위의 세 가지 경우는 모두, 서로 다른 이유 때문에 출력되지 않습니다.</p> +<dl> + <dt> + Case 1 </dt> + <dd> + <code>po</code>는 유효한 HTML 태그가 아니며, Mozilla는 어떻게 처리해야 할지에 대해 알지 못합니다.</dd> + <dt> + Case 2 </dt> + <dd> + <code>div</code>는 HTML에서만 유효합니다. 제대로 동작하려면 <code>html:</code>한정사를 추가해야 합니다.</dd> + <dt> + Case 3 </dt> + <dd> + A <code>description</code>는 XUL에서만 유효한 요소입니다. <code>html:</code> 한정사가 없어야 합니다.</dd> +</dl> +<p>다음번에는 <a href="ko/XUL_Tutorial/Using_Spacers">요소들 간에 공백(spacer) 주기</a>에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Using_Spacers">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html new file mode 100644 index 0000000000..0d4391877b --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html @@ -0,0 +1,65 @@ +--- +title: Adding Labels and Images +slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Labels_and_Images +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Input_Controls">다음 »</a></p> +</div><p></p> +<p>이 절은 창에 label과 image를 추가하는 법을 기술합니다. 게다가, 그룹에 요소를 포함하는 법을 살펴봅니다.</p> +<h3 id="Text_.EC.9A.94.EC.86.8C" name="Text_.EC.9A.94.EC.86.8C">Text 요소</h3> +<p>여러분은 태그 없이는 XUL 파일에 바로 텍스트를 끼워 넣고 표시되기를 기대할 수 없습니다. 여러분을 이런 목적을 위해 XUL 요소 둘을 쓸 수 있습니다.</p> +<h4 id="Label_.EC.9A.94.EC.86.8C" name="Label_.EC.9A.94.EC.86.8C">Label 요소</h4> +<p>창에 텍스트를 포함하는 가장 기본 방법은 <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 요소를 쓰는 겁니다. 예제를 아래에 보입니다.</p> +<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">View</a></p> +<pre><label value="This is some text"/> +</pre> +<p><code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성(attribute)은 여러분이 표시되길 바라는 텍스트를 지정하는 데 쓸 수 있습니다. 텍스트는 넘겨지지(wrap) 않아서 오직 한 줄에 보입니다. 이는 짧은 텍스트 절에 어울립니다.</p> +<h4 id="Description_.EC.9A.94.EC.86.8C" name="Description_.EC.9A.94.EC.86.8C">Description 요소</h4> +<p>더 긴 텍스트를 위해, 여러분은 열고 닫는 <code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code> 태그 안에 content를 둘 수 있습니다. <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 요소와 <code>value</code> 속성으로 지정된 텍스트와는 달리, child 텍스트는 필요하다면 여러 줄로 넘겨집니다. 넘겨짐(wrapping)을 보기 위해 창 크기를 조정해 보세요. HTML처럼, 줄바꿈(line break)과 여분 공백(whitespace)은 space 하나로 축약됩니다. 우리가 더 쉽게 넘겨짐을 볼 수 있도록 <a href="ko/XUL_Tutorial/Element_Positioning">나중에 요소의 너비를 강제하는 법을 알아봅니다</a>.</p> +<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">View</a></p> +<pre><description> + This longer section of text is displayed. +</description> +</pre> +<p>내부에서, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소 둘은 같습니다. 이는 label은 여러분이 태그 안에 둔 텍스트가 넘겨질 수 있고 description은 <code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성이 있을 수 있음을 뜻합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소 text field와 같은 컨트롤(control)의 label을 위한 목적입니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code> 상자의 상단에 informative text와 같은 other descriptive text를 위한 목적입니다. 관례에 따라, 여러분은 이 지침을 따르면 좋습니다.</p> +<h4 id="Control_.EC.86.8D.EC.84.B1" name="Control_.EC.86.8D.EC.84.B1">Control 속성</h4> +<p>여러분은 to set which control the label is associated with <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성을 쓸 수 있습니다. 사용자가 label을 클릭할 때, 그 컨트롤이 focus를 받습니다. <code>control</code> 속성값을 focus 받을 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>로 설정하세요.</p> +<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">View</a></p> +<pre><label value="Click here:" control="open-button"/> +<button id="open-button" label="Open"/> +</pre> +<p>위 예제에서, label을 클릭하면 button이 focus를 받게 됩니다.</p> +<h3 id="Image" name="Image">Image</h3> +<p>HTML처럼, XUL은 창 안에 image를 표시하는 요소가 있습니다. 이 요소는 어울리게 <code><a href="/ko/docs/Mozilla/Tech/XUL/image" title="image">image</a></code>로 이름 지었습니다. 태그 이름이 HTML( + <i> + img</i> + 대신 + <i> + image</i> + )과 다름을 유념하세요. 여러분은 image 파일의 URL을 지정하기 위해 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 쓸 수 있습니다. 아래 예제는 이를 보입니다.</p> +<pre><image src="images/banner.jpg"/> +</pre> +<p>비록 여러분이 이 구문을 쓸 수 있을지라도, image URL을 설정하기 위해 스타일시트를 쓰는 것이 더 낫습니다. 더 나중 절에서 <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일시트 쓰는</a> 법을 설명하지만 예제는 완결함을 위해 여기에 보입니다. 여러분은 image URL을 설정하기 위해 <code><a href="ko/CSS/list-style-image">list-style-image</a></code> CSS 프로퍼티를 쓸 수 있습니다. 여기 예제가 있습니다.</p> +<pre class="eval"><b>XUL:</b> + <image id="image1"/> + <image id="search"/> +</pre> +<pre class="eval"><b>Style Sheet:</b> + #image1 { + list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/banner.jpg</a>"); + } + + #search { + list-style-image: url("<span class="nowiki">http://example.com/images/search.png</span>"); + } +</pre> +<p>이 이미지들은 findfile 꾸러미(package)용 skin의 chrome 디렉토리에서 났습니다. image가 skin에 따라 바뀌기 때문에, 여러분은 보통 skin 디렉토리에 image를 둘 겁니다.</p> +<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Input_Controls">창에 입력 컨트롤을 추가</a>하는 법을 배웁니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Input_Controls">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html new file mode 100644 index 0000000000..c801fbfbba --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html @@ -0,0 +1,87 @@ +--- +title: Adding More Elements +slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_More_Elements +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks">다음 »</a></p> +</div><p></p> +<p>파일 찾기 대화창에 몇 가지 상자를 추가하면서 상자에 대한 논의를 마무리 하겠습니다.</p> +<div class="highlight"> + <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.AA.87.EA.B0.80.EC.A7.80_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.AA.87.EA.B0.80.EC.A7.80_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">우리의 파일 찾기 예제에 몇가지 요소 추가하기</h3> + <p>이제 파일 찾기 대화창에 몇 가지 요소를 추가하겠습니다. 먼저 파일크기 및 날짜와 같은 정보를 검색할 수 있는 기능을 추가할 것입니다.</p> + <pre class="eval"><hbox> + <span class="highlightred"><menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/></span> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> +</pre> + <div class="float-right"> + <img alt="Image:boxfinal1.png"></div> + <p>2 개의 <a href="ko/XUL_Tutorial/List_Controls#_Drop-down_Lists">드롭 다운 상자</a>가 대화창에 추가되었습니다. 이들을 구분짓기 위해서 각 요소 사이에 <a href="ko/XUL_Tutorial/Using_Spacers">spacer</a>가 추가되어 있습니다. 이들 spacer는 각각 10픽셀 너비가 주어졌습니다. 창 크기가 바뀌면, 글상자는 커지지만 다른 구성요소는 그대로 있는 것을 보실 수 있습니다. 또한 라벨이 제거된 것을 보실 수 있습니다.</p> + <p>세로 방향의 창 크기를 바꾸더라도, 해당 요소들의 크기는 변하지 않습니다. 이것은 해당 요소가 가로상자 내부에 있기 때문입니다. 만일 찾기(Find)와 취소(Cancel) 버튼이 항상 창 하단에 있게되면 보기가 더 좋을 것입니다. 이것은 2개의 가로상자 사이에 spacer를 추가해서 간단하게 처리할 수 있습니다.</p> + <pre class="eval"><span class="highlightred"><spacer style="height: 10px"/></span> +<hbox> + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> + +<span class="highlightred"><spacer style="height: 10px" flex="1"/></span> + +<hbox> +</pre> + <p>이제 대화창 크기가 바뀌면, 2개의 버튼은 항상 대화창 하단에 있도록 움직이게 됩니다. 첫번째 <code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code>는 제목 라벨과 검색 기준 요소 사이에 여백을 추가한 것입니다.</p> + <p>검색 기준 둘레에 선이 있다면 더 보기 좋을 것입니다. 이를 처리할 수 있는 방법에는 두 가지가 있습니다. CSS의 <code>border</code> 속성을 사용하거나 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> 요소를 사용할 수 있습니다. 첫 번째 방식은 상자 자체에 스타일 속성을 사용하면 됩니다. 우리는 후자의 방식을 사용할 것입니다. <a href="ko/XUL_Tutorial/Groupboxes">groupbox</a>는 현재의 테마에 어울리는 보기 좋은 둥근 테두리를 가진 상자를 그려주는 장점이 있습니다.</p> + <p><code>groupbox</code>로 상자를 변경해 보겠습니다.</p> + <pre class="eval"><span class="highlightred"><groupbox orient="horizontal"></span> + <span class="highlightred"><span class="nowiki"><caption label="Search Criteria"/></span></span> + <menulist id="searchtype"> + . + . + . + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +<span class="highlightred"></groupbox></span> +</pre> + <div class="float-right"> + <img alt="Image:boxfinal2.png"></div> + <p>마찬가지로 다른 표면적인 문제가 있습니다. groupbox가 상자 하단 세로방향으로 확장되도록 groupbox를 늘릴 수도 있습니다. 또한 해당 요소가 잘 위치되도록 여백의 일부를 수정할 수도 있습니다.</p> + <p>본 자습서를 통해 요소들을 추가하면서 상자 모델과 그것들의 몇 가지 기능들에 대한 기능들에 대한 더 많은 예제를 보게 될 것입니다..</p> + <p>지금까지의 파일 찾기 예제 <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">View</a></p> +</div> +<p>다음에는 <a href="ko/XUL_Tutorial/Stacks_and_Decks">스택을 작성하는 방법</a>에 대해 알아 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html new file mode 100644 index 0000000000..64633c5d1d --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html @@ -0,0 +1,99 @@ +--- +title: Box Model Details +slug: Mozilla/Tech/XUL/XUL_Tutorial/Box_Model_Details +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Groupboxes">다음 »</a></p> +</div><p></p> +<p>지금까지 우리는 상자모델의 많은 기능을 살펴 보았습니다. 여기서는 몇 가지 예제를 가지고 좀 더 세부적인 내용을 알아보겠습니다.</p> +<h3 id=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.EC.97.90_.EB.8C.80.ED.95.9C_.EC.B6.94.EA.B0.80_.EB.82.B4.EC.9A.A9" name=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.EC.97.90_.EB.8C.80.ED.95.9C_.EC.B6.94.EA.B0.80_.EB.82.B4.EC.9A.A9">레이아웃에 대한 추가 내용</h3> +<p><code>min-width</code>와 <code>max-height</code>같은 스타일 속성은 어떤 요소에든 적용할 수 있습니다. 지금까지는 이 속성들을 버튼과 글상자에만 적용했지만, 여백이나 상자 요소에도 적용할 수 있습니다. 게다가, <code>flex</code> 속성은 어떤 요소에든 적용할 수 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul">View</a></p> +<pre><hbox flex="1"> + <button label="Left" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Right" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<p>위의 예제에서, 3개 요소는 유연하기 때문에 스스로 크기가 조절됩니다. 2개의 버튼은 최소 넓이를 100픽셀로 하고 있습니다. 버튼은 이 크기 이하로 절대 작아지지 않지만 더 늘어날 수는 있습니다. 여기서 해당 창은 대략 200픽셀 정도의 넓이가 될 것입니다. 이는 두개의 버튼이 들어가기에 충분한 공간입니다. 3개 요소 모두가 유연하기 때문에, 더 많은 공간을 필요로 하지 않으며 flex 속성에 의해 빈 공간이 생기지 않습니다.</p> +<div class="float-right"> + <img alt="Image:boxdet1.png"></div> +<p>그림에서처럼, 두 개의 버튼은 이들을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>에 맞도록 수직 방향으로도 늘어나는 것을 볼 수 있습니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 가로상자에서 이러한 동작을 제어하는데 사용됩니다. 또한 여러분은 요소나 상자에 최대 높이를 지정해서 늘어나지 못하게도 할 수 있습니다. 어떤 상자가 최대 높이값을 가지면, 상자내에 있는 요소들은 이것에 의해 제약을 받게 된다. 그러나 여기에도 문제가 있는데, 사전에 해당 요소가 얼마나 커야 할지 알아야 한다는 것입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul">View</a></p> +<pre><hbox flex="1" align="top"> + <button label="Left" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Right" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> +<h4 id=".EC.83.81.EC.9E.90_.EB.AA.A8.EB.8D.B8_.EC.A0.95.EB.A6.AC" name=".EC.83.81.EC.9E.90_.EB.AA.A8.EB.8D.B8_.EC.A0.95.EB.A6.AC">상자 모델 정리</h4> +<p>복잡한 레이아웃을 만드려면, 일반적으로 중첩된 상자를 추가하고 일부 요소에 최대 최소 크기를 지정해주고, 어떤 요소가 flex 속성을 가지도록 해야 합니다. 가장 좋은 인터페이스는 다양한 크기에서도 문제없이 표시될 수 있는 것입니다. 여러분 스스로 여러 경우를 시험해 보지 않으면 상자 모델을 이해하기 어려우실 겁니다.</p> +<p>다음은 두 가지 상자 형식의 기본적인 내용을 설명하고 있습니다.</p> +<p><b>가로상자</b></p> +<ol> + <li>서로 이웃하는 요소를 가로 방향으로 배치합니다.</li> + <li>유연한 요소(flex 속성을 가진 요소)는 가로로 크기를 조절합니다.</li> + <li>pack 속성은 자식 요소의 가로 방향 위치를 제어합니다.</li> + <li>align 속성은 요소의 행이 어떻게 세로로 정렬될 지를 제어합니다.</li> +</ol> +<p><b>세로상자</b></p> +<ol> + <li>세로 방향으로 요소들을 배치합니다.</li> + <li>유연한 요소(flex 속성을 가진 요소)는 세로로 크기를 조절합니다.</li> + <li>pack 속성은 자식 요소의 세로 방향 위치를 제어합니다.</li> + <li>align 속성은 자식 요소의 가로 정렬 방식을 제어합니다.</li> +</ol> +<p>상자는 테이블과 같은 HTML 요소 내부를 포함해서 XUL 어디에든 사용할 수 있습니다. 그러나 그러한 레이아웃은 일부 HTML 요소에 의해 제어되게 됩니다. 이는 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 여러분이 원하는 대로 작동하지 않을 수도 있다는 것을 의미합니다. flex 속성은 상자 또는 상자 타입 요소 바로 안에 있는 요소들에 대해서만 적용된다는 점을 기억하세요.</p> +<h3 id=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.98.88.EC.A0.9C" name=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.98.88.EC.A0.9C">레이아웃 예제</h3> +<h4 id=".EC.97.AC.EB.B0.B1_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.97.AC.EB.B0.B1_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">여백 사용하기</h4> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul">View</a></p> +<pre><hbox> + <button label="One"/> + <spacer style="width: 5px"/> + <button label="Two"/> +</hbox> +</pre> +<p>여기서, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> 요소는 두개의 버튼 사이의 구분자로 사용되고 있으며, 정확하게 5픽셀로 설정되어 있습니다. 여러분은 CSS의 <code>margin</code> 속성을 사용해서 여백을 설정할 수도 있습니다.</p> +<h4 id=".EB.B2.84.ED.8A.BC_.EC.A4.91.EC.95.99.EC.A0.95.EB.A0.AC" name=".EB.B2.84.ED.8A.BC_.EC.A4.91.EC.95.99.EC.A0.95.EB.A0.AC">버튼 중앙정렬</h4> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul">View</a></p> +<pre><hbox pack="center" align="center" flex="1"> + <button label="Look at Me!"/> + <button label="Push Me!"/> +</hbox> +</pre> +<p>이 예제는 2개의 버튼을 포함하고 flex 속성이 지정된 가로 상자입니다. 해당 상자는 버튼들을 가로 중앙 정렬하기 위해 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성을 사용합니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 버튼들을 세로로 정렬하고 있습니다. 결과적으로 상자 내 버튼들은 양방향에서 중앙에 위치하게 됩니다. 이 예제는 세로상자에도 마찬가지로 적용되는데, 다른점은 2번째 버튼이 우측이 아니라 아래에 놓이게 된다는 것입니다.</p> +<h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD">파일 찾기 대화창</h4> +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul">View</a></p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="findtext" title="Find Text" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox flex="3"> + <label control="t1" value="Search Text:"/> + <textbox id="t1" style="min-width: 100px;" flex="1"/> + </vbox> + + <vbox style="min-width: 150px;" flex="1" align="start"> + <checkbox id="c1" label="Ignore Case"/> + <spacer flex="1" style="max-height: 30px;"/> + <button label="Find"/> + </vbox> + +</window> +</pre> +<div class="float-right"> + <img alt="Image:boxdet-ex3.jpg"></div> +<p>여기서 2개의 세로상자가 만들어 지는데, 하나는 글상자를 포함하고 다른 하나는 체크상자와 버튼을 포함합니다. 좌측 상자는 우측보다 3배 큰 유연성을 가지고 있어(flex값이 3배 큼) 창의 크기가 커지면 추가 공간도 그만큼 커지게 된다. 오른쪽 상자는 최소 넓이를 150픽셀로 제한하고 있습니다.</p> +<p>글상자는 flex 속성을 가지고 있기 때문에 창 크기가 바뀌면 따라서 바뀌게 됩니다. 글상자 또한 최소넓이를 100픽셀로 제한하고 있습니다. 오른쪽 상자에는 라벨이 있는 체크상자가 있습니다. 체크상자 바로 아래에는 여백(spacer) 요소가 있습니다. 여백(spacer)은 커지거나 줄어들게 되지만 30픽셀보다 커지지는 않습니다. 결과적으로 체크상자와 찾기(Find) 버튼은 30픽셀 보다 크지는 않을 공간으로 서로 떨어져 나타나게 됩니다.</p> +<p>2번째 상자는 <code>start</code>라는 정렬 속성을 가지고 있습니다. 이 속성은 자식요소를 좌측 끝에 정렬시킵니다. 이를 지정하지 않았다면, 기본값은 <code>stretch</code>가 되는데, 자식요소를 가로으로 주욱 펼치게 되었을 것입니다. 찾기(Find) 버튼의 크기가 변하지 않게 하기 위해서는 정렬 속성을 지정해야 합니다.</p> +<p>다음에는 좀 더 특별한 유형의 상자인 <a href="ko/XUL_Tutorial/Groupboxes">the groupbox</a>에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Groupboxes">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html new file mode 100644 index 0000000000..d255a5fa4e --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html @@ -0,0 +1,55 @@ +--- +title: Content Panels +slug: Mozilla/Tech/XUL/XUL_Tutorial/Content_Panels +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Grids" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Splitters">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 HTML 페이지 혹은 외부 XUL 파일을 표시할 수 있는 패널을 추가하는 방법에 대해 알아보겠습니다.</p> +<h3 id=".EC.9E.90.EC.8B.9D_.ED.8C.A8.EB.84.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9E.90.EC.8B.9D_.ED.8C.A8.EB.84.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">자식 패널 추가하기</h3> +<p>여러분은 다른 페이지의 문서 일부분을 가져오고자 할 때가 있을 것입니다. 때로는 창의 일부분만을 수정하고자 할 때도 있을 것입니다. 단계별로 진행되는 마법사 대화창이 좋은 예입니다. 마법사 대화창은 여러개의 화면을 통해 단계적으로 질문을 하고 답변을 하도록 안내해줍니다. 사용자가 다음 버튼을 클릭할 때마다 마법사의 다음 화면이 표시됩니다.</p> +<p>마법사를 만들 때 각 화면별로 다른 창이 열리도록 인터페이스를 구성할 수도 있을 것입니다. 하지만 이 방법에는 다음의 세 가지 문제점이 있습니다. 첫 번째는 각 창이 다른 위치에 나타날 수 있다는 점입니다(해결책이 있기는 합니다). 두 번째는 '뒤로'나 '다음' 버튼 등의 요소는 인터페이스 전반에 걸쳐 공통적으로 사용되기 때문에 마법사의 내용 영역만 바뀌도록 구성하는 것이 좋다는 점입니다. 세 번째는 여러 개의 창을 이용하면 스크립트를 효율적으로 사용할 수 없다는 점입니다.</p> +<p>XUL에는 마법사 인터페이스를 만들기 위한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> 요소가 존재한다는 점을 알고 계십시요. 이에 대해서는 <a href="ko/XUL_Tutorial/Creating_a_Wizard">이후 단원</a>에서 설명할 것입니다.</p> +<p>또 다른 방법은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> 요소를 사용하는 것인데, 같은 이름의 HTML 요소와 아주 비슷하게 동작합니다. iframe은 하나의 창 내에 서로 다른 문서를 만들 수 있게 해 줍니다. 또한 iframe은 창의 어느 곳에나 위치할 수 있고 다른 파일에서 내용을 불러올 수 있다는 장점이 있습니다. iframe에서는 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 사용하여 프레임에 표시될 URL을 지정합니다. URL이 가리킬 수 있는 파일 종류에는 제한이 없지만, 보통 HTML이나 XUL 파일을 사용합니다. 스크립트를 사용하면 창에 영향을 주지 않고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>의 내용을 바꿀 수도 있습니다.</p> +<p>Mozilla 브라우저 창에서 웹 문서가 표시되는 영역이 바로 <code>iframe</code>으로 만들어진 것입니다. 사용자가 URL을 입력하거나 문서의 링크를 클릭하면 이 프레임의 소스가 변경되는 것입니다.</p> +<h5 id="iframe_.EC.98.88.EC.A0.9C" name="iframe_.EC.98.88.EC.A0.9C"><code>iframe</code> 예제</h5> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul">View</a></p> +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Back"/> + <toolbarbutton label="Forward"/> + <textbox id="urlfield"/> + </toolbar> +</toolbox> + +<iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1"/> +</pre> +<p>위 예제는 웹 브라우저로 사용할 수 있는 아주 간단한 인터페이스를 만들어 보았습니다. 상자에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> 요소를 포함합니다. 툴바에는 "뒤로 가기" 버튼과 "앞으로 가기" 버튼, URL 입력란이 포함되어 있습니다(툴바에 대해서는 <a href="ko/XUL_Tutorial/Toolbars">이후 단원</a>에서 배울것입니다). 웹 문서는 <code>iframe</code> 안에 표시되는데, 예제에서는 기본적으로 welcome.html 파일이 표시됩니다.</p> +<p>이 예제는 완전한 기능을 제공하지는 않습니다. 나중에 사용자가 Enter 키를 누르는 것과 같은 특정 시점에 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 변경하는 스크립트를 추가할 것입니다.</p> +<h3 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80" name=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80">브라우저</h3> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 태그를 사용하는 두 번째 유형의 내용 패널이 있습니다. 이 패널은 브라우저처럼 내용을 출력하는 프레임을 생성하고자 할 때 사용할 수 있습니다. 사실 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>도 이러한 것을 할 수 있지만, 브라우저는 좀 더 다양한 기능을 제공합니다. 예를 들어, 브라우저는 '뒤로'나 '다음' 버튼을 사용할 수 있도록 페이지 기록을 관리합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 요소는 해당 내용의 참조자와 다른 플래그들을 가지고 페이지를 로드할 수 있습니다. 당연히, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 태그는 브라우저와 같은 인터페이스를 만들고자 할 때 사용되어야 하지만, 간단한 패널이 필요할 때 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>을 사용할 수도 있습니다.</p> +<p>이와 비슷한 요소인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>의 모든 기능을 제공하면서 여러 페이지들간에 이동할 수 있는 탭바를 제공합니다. 이는 Mozilla 브라우저에서 탭브라우징 인터페이스를 제공하기 위해 사용되는 위젯입니다. 사실 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code> 요소는 여러개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>를 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>로 구현되어 있습니다. 두 가지 형태의 브라우저 모두 출력되는 페이지들을 제어하기 위한 비슷한 방법을 제공합니다.</p> +<h5 id="browser_.EC.98.88.EC.A0.9C" name="browser_.EC.98.88.EC.A0.9C"><code>browser</code> 예제</h5> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">View</a></p> +<pre><browser src="http://www.mozilla.org" flex="1"/> +</pre> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>과 같이 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code>속성을 사용하여 브라우저에 url을 지정할 수 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>에서는 위와 같이 직접 url을 지정할 수 없는데 이는 이 요소가 단지 하나의 url만 출력하는 것이 아니기 때문입니다. 대신 스크립트를 사용해서 <code>loadURI</code> 함수를 호출해야만 합니다.</p> +<p>브라우저는 출력하고자 하는 내용에 따라 3가지의 유형이 있습니다. 이 유형은 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 이용하여 지정합니다.</p> +<p>첫 번째 유형은 기본값이며 <code>type</code> 속성이 명시되지 않았을 때 사용됩니다. 이 경우 브라우저내에 로드되는 내용은 내용을 로드하는 응용 프로그램의 일부로 취급되어 외부 창에 접근할 수 있는 방법을 가지게 됩니다. 이것은 브라우저 내에 로드된 스크립트가 최상위 창을 얻으려고 시도하면, 그것은 외부의 XUL 창을 얻게 된다는 것을 의미합니다.</p> +<p>이러한 유형은 응용 프로그램의 일부인 자식 XUL 패널에서는 적당하지만, 웹 페이지를 로드하는 브라우저에서는 원치 않는 것입니다. 대신 여러분은 웹 페이지가 웹 페이지의 내용에만 접근할 수 있도록 제한하기를 원할 것입니다. 여러분은 Mozilla 브라우저 창이 메인 영역을 구성하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>와 함께 툴바와 상태바 등과 같은 XUL 콘텐츠를 가진다는 것을 알고 있을 것입니다. 이러한 내부 영역은 웹 페이지를 출력하지만, 웹 페이지는 이들 주위의 XUL에는 접근할 수 없습니다. 이것은 브라우저가 두 번째 유형을 사용하기 때문인데, 이 유형에서는 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성에 <code>content</code>값을 지정합니다. 이렇게 지정하면 내용이 XUL window에 접근하지 못하도록 막아줍니다. 다음은 이에 대한 예제입니다.</p> +<pre><browser src="http://www.mozilla.org" type="content" flex="1"/> +</pre> +<div class="note"> + <b>중요</b>: 여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 요소내에 원격지 웹사이트를 출력하기 위해서는 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 정확히 지정해야 합니다.</div> +<p><code>tabbrowser</code>는 자기가 생성한 모든 탭 브라우저에 대해 자동으로 유형을 지정합니다. 그렇기 때문에 탭 브라우저의 경우 명시적으로 지정할 필요가 없습니다.</p> +<p>세 번째 유형은 다른 내용을 출력하기 위해 사이드바를 사용하는 것과 같이 창에 다중 브라우저 요소를 포함할때 사용됩니다. 메인 <code>browser</code> 요소의 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 <code>content-primary</code>로 지정하면 이것은 창에서 주 내용이라는 것을 나타냅니다. 이것은 창 내부의 내용이 XUL 창의 'content' 속성을 이용하여 접근할 수 있다는 점만 제외하면 <code>content</code> 값과 유사하게 동작합니다. 이것은 스크립트를 사용하여 주 브라우저의 내용에 접근하기 쉽게 해 줍니다. <code>tabbrowser</code>는 자동으로 현재 보이는 브라우저에 대해 <code>type</code> 속성을 <code>content-primary</code>로 지정하며, 이것은 여러분이 현재 보이는 내용에 대해 항상 접근할 수 있다는 것을 의미합니다.</p> +<p>다음에는 <a href="ko/XUL_Tutorial/Splitters">분할자(splitter)를 작성</a>하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Grids" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Splitters">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html new file mode 100644 index 0000000000..3152f51638 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html @@ -0,0 +1,113 @@ +--- +title: Creating a Window +slug: Mozilla/Tech/XUL/XUL_Tutorial/Creating_a_Window +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Buttons">다음 »</a></p> +</div><p></p> + +<div class="highlight"> +<p>우리는 이 입문서를 통해 간단한 파일 찾기(find files) 유틸리티를 만들어 볼 작정입니다.</p> +</div> + +<p>하지만, 먼저 XUL 파일의 기본 구문을 살펴보겠습니다.</p> + +<h3 id="XUL_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="XUL_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0">XUL 파일 만들기</h3> + +<p>XUL 파일은 어떤 이름도 줄 수 있지만 사실 확장자는 .xul입니다. 가장 간단한 XUL 파일의 구조는 다음과 같습니다.</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<!-- Other elements go here --> +</window> +</pre> + +<p>이 창은 아무런 UI 요소를 담고 있지 않기 때문에 아무것도 하지 않습니다. UI 요소는 다음 절(section)에서 추가합니다. 여기서는 위 코드를 한줄한줄 설명합니다.</p> + +<ol> + <li><strong><?xml version="1.0"?></strong><br> + 이 줄은 이 파일이 XML 파일임을 간단히 선언합니다. 보통 HTML 파일 상단에 HTML 태그를 놓는 것과 같이 이 줄을 각 xul 파일 상단에 추가합니다.</li> + <li><strong><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></strong><br> + 이 줄은 파일에 쓸 스타일 시트를 지정하는 데 씁니다. 이는 XML 파일이 스타일 시트를 가져오는(import) 데 쓰는 구문입니다. 이 경우에, 우리는 스킨 꾸러미(package)의 전역(global) 부분에 있는 스타일을 가져옵니다. 우리가 특정 파일을 지정하지 않기에 Mozilla가 디렉토리에서 어떤 파일을 쓸 지 결정합니다. 위 경우에, 가장 중요한 global.css 파일이 선택됩니다. 이 파일은 모든 XUL 요소를 위한 기본 선언 전부를 담고 있습니다. XML은 요소가 표시되는 법에 관한 아무런 지식이 없기 때문에, 그 파일은 방법을 나타냅니다. 보통, 모든 XUL 파일 상단에 이 줄을 놓습니다. 또한 비슷한 구문을 써서 다른 스타일 시트를 가져오기도 합니다. 보통은 자신의 스타일 시트 파일 안에서 전역 스타일 시트를 가져옴을 유념하세요.</li> + <li><strong><window</strong><br> + 이 줄은 창(<code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>)을 기술함을 선언합니다. 각 사용자 인터페이스 창은 개별 파일에서 기술합니다. 이 태그는 대체로 HTML에서 전체 내용(content)을 둘러싸는 BODY 태그와 같습니다. <a href="ko/XUL/window#Attributes">여러 속성</a>이 <code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 태그에 놓일 수 있습니다 -- 이 경우에는 넷입니다. 예제에서, 각 속성은 각 줄에 놓이지만 그래야만 하는 건 아닙니다.</li> + <li><strong>id="findfile-window"</strong><br> + <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성은 창이 스크립트에 의해 참조될 수 있도록 식별자(identifier)로 쓰입니다. 여러분은 보통 모든 요소에 <code>id</code> 속성을 놓습니다. 이름은 여러분이 원하는 아무거나 될 수 있지만 뭔가 관련이 있으면 좋습니다.</li> + <li><strong>title="Find Files"</strong><br> + <code><code id="a-title"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></code> 속성은 창이 표시될 때 제목 표시줄에 나타나는 텍스트를 기술합니다. 이번 경우에는 '파일 찾기' 텍스트가 나타납니다.</li> + <li><strong>orient="horizontal"</strong><br> + <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성은 창의 항목 배열을 지정합니다. <code>horizontal</code>값은 항목이 창을 가로질러 가로로 놓임음 나타냅니다. 여러분은 또한 항목이 세로로 놓임을 뜻하는 <code>vertical</code>값을 써도 됩니다. 이 값이 기본값이므로, 혹시 여러분이 세로 방향이길 바라면 속성을 아주 빼도 됩니다.</li> + <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"></strong><br> + 이 줄은 여러분이 창 요소의 자식 모두가 XUL임을 나타내기 위해 창 요소에 놓는 XUL용 이름공간(namespace)을 선언합니다. 이 URL은 실제로 결코 내려받지 않음을 유념하세요. Mozilla는 이 URL을 내부로 인지합니다.</li> + <li><strong><span class="nowiki"><!-- Other elements go here --></span></strong><br> + 이 주석 블록을 창에 나타내기 위해 다른 요소(버튼, 메뉴, 다른 사용자 인터페이스 컴포넌트)로 바꾸세요. 우리는 이 가운데 일부를 다음 여러 절에서 추가합니다.</li> + <li><strong></window></strong><br> + 그리고 끝으로, 파일 끝에서 <code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 태그를 닫을 필요가 있습니다.</li> +</ol> + +<h3 id=".EC.B0.BD_.EC.97.B4.EA.B8.B0" name=".EC.B0.BD_.EC.97.B4.EA.B8.B0">창 열기</h3> + +<p>XUL 창을 열기 위해, 쓸 수 있는 여러 방법이 있습니다. 혹시 여러분이 단지 개발 단계에 있다면, 그냥 Mozilla 브라우저 창 주소 표시줄에 URL(chrome:, file:이든 다른 URL 형이든)을 입력할 수 있습니다. 여러분은 또한 파일 관리자에서 Mozilla와 관련된 XUL 파일로 생각하는 파일을 두 번 클릭할 수 있습니다. XUL 창은 새 창이 아닌 브라우저 창에 나타나지만 이는 개발 초기 단계 동안은 대개 충분합니다.</p> + +<p>물론 옳은 방법은 JavaScript를 써서 창을 여는 겁니다. <a href="ko/HTML">HTML</a> 문서를 위해 할 수 있는 것처럼 <a href="ko/DOM/window.open">window.open()</a> 함수를 쓰는 것 같은 새 구문이 필요하지 않습니다. 그러나, 'chrome'으로 불리는 추가 flag 하나가 이것이 여는 <a href="ko/DOM/window.open#Window_functionality_features">chrome</a> 문서임을 브라우저에 나타내기 위해 필요합니다. 이는 보통 브라우저 창에 있는 도구 표시줄, 메뉴 등이 없이 창을 엽니다. 구문은 아래에 기술합니다:</p> + +<pre>window.open(url,windowname,flags); + +where the flags contains the flag "chrome" as in this example + +window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); +</pre> + +<div class="highlight"> +<h5 id="findfile.xul_.EC.98.88.EC.A0.9C" name="findfile.xul_.EC.98.88.EC.A0.9C">findfile.xul 예제</h5> + +<p>파일 찾기 대화상자를 위한 기본 파일을 만들면서 시작하죠. findfile.xul 파일을 만들어 findfile.manifest 파일(우리가 이전 절에서 만들었슴)에 지정된 content 디렉토리에 넣으세요. 이 페이지 상단에 보이는 XUL 템플릿을 파일에 추가하고 저장하세요.</p> +</div> + +<p>여러분은 Mozilla가 시작할 때 XUL 파일을 지정하기 위해 명령줄 매개변수 '-chrome'을 쓸 수 있습니다. 지정하지 않으면, 기본 창 열기가 열립니다(보통은 브라우저 창). 예를 들어, 우리는 다음 가운데 어느 쪽으로도 파일 찾기 대화상자를 엽니다.</p> + +<pre>mozilla -chrome chrome://findfile/content/findfile.xul + +mozilla -chrome resource:/chrome/findfile/content/findfile.xul +</pre> + +<p>여러분이 명령줄(여러분의 플랫폼에 있다고 가정)에서 이 명령을 실행하면, 파일 찾기 대화상자를 Mozilla 브라우저 창 대신에 기본값으로 엽니다. 물론, 우리가 창에 아무런 UI 요소도 넣지 않았기 때문에, 나타난 창을 볼 수 없습니다. 다음 절에서 일부 요소를 추가합니다.</p> + +<p>효과를 보기 위해, 다음은 북마크 관리자 창을 엽니다.</p> + +<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> + +<span class="highlightred">혹시 Firefox를 쓴다면, 아래로 해보세요.</span> +firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> +</pre> + +<p>'-chrome' 인수는 파일에 아무런 추가 특권(privilege)을 주지 않습니다. 대신, 주소 표시줄이나 메뉴와 같은 브라우저 chrome 없이 최상위 창으로 지정된 파일을 열게 합니다. 오직 chrome URL에 추가 특권이 있습니다.</p> + +<div class="note"><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a>은 여러분이 XUL 코드를 쳐 넣고 Mozilla 안에서 실시간으로 결과를 보게 하는 XUL 편집기를 담고 있습니다!</div> + +<h3 id=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0.ED.95.98.EA.B8.B0">문제 해결하기</h3> + +<ul> + <li>혹시 XUL 창을 데스크탑에 보이지는 않지만 데스크탑 도구 표시줄에 아이콘이 있다면, xml-stylesheet 선언을 점검하세요. 여러분이 스타일시트를 바르게 포함했는지 확인하세요.</li> +</ul> + +<pre class="eval"> <?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +</pre> + +<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Adding_Buttons">창에 버튼 몇 개를 추가</a>합니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Buttons">다음 »</a></p> +</div><p></p> + +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html new file mode 100644 index 0000000000..18ae26938a --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html @@ -0,0 +1,79 @@ +--- +title: Cross Package Overlays +slug: Mozilla/Tech/XUL/XUL_Tutorial/Cross_Package_Overlays +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Overlays" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_an_Installer">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 오버레이를 임포트(import)하지 않는 파일에 오버레이를 적용하는 방법에 대해 알아보겠습니다.</p> +<h3 id=".EB.8B.A4.EB.A5.B8_.EA.BE.B8.EB.9F.AC.EB.AF.B8.EC.97.90_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.A0.81.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EB.8B.A4.EB.A5.B8_.EA.BE.B8.EB.9F.AC.EB.AF.B8.EC.97.90_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.A0.81.EC.9A.A9.ED.95.98.EA.B8.B0">다른 꾸러미에 오버레이 적용하기</h3> +<div class="note"> + 알림: 이번 단원에서는 content.rdf를 통해 오버레이를 적용하는 방법에 대해 설명하며, <a href="ko/Gecko">Gecko</a> 1.8 (Firefox 1.5) 부터는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일(manifest file)</a>을 사용하는 것으로 변경되었습니다.</div> +<p>오버레이는 또 다른 유용한 기능을 제공합니다. <a href="ko/XUL_Tutorial/Overlays">앞 단원</a> 예제에서는 오버레이가 창에 의해 임포트(import)되었습니다. 여러분은 다른 방법으로 오버레이 스스로 적용할 대상 창을 명시하게도 할 수 있습니다. 여러분은 꾸러미 내에 있는 contents.rdf 파일을 수정해서 이를 지정할 수 있습니다. 이렇게 하면 오버레이를 적용하고자 하는 꾸러미를 수정하지 않고도 해당 꾸러미의 사용자 인터페이스를 변경할 수 있기 때문에 아주 유용합니다. 예를 들어 여러분은 Mozilla 브라우저 창에 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴 항목</a>이나 <a href="ko/XUL_Tutorial/Toolbars">툴바</a>를 추가할 수 있습니다.</p> +<p>우리는 이 기능을 이용해서 Mozilla 브라우저 창에 툴바를 추가할 것입니다. Mozilla Mail 응용프로그램은 브라우저 창에 내용을 넣기 위해 오버레이를 사용합니다. 예를 들어 Mail이 설치되어 있지 않다면 새 메시지(New Message) 명령이 없지만, 설치되어 있다면 오버레이가 메뉴에 적용되어 새 메시지(New Message) 명령이 추가됩니다. 아래에서는 파일 찾기 툴바를 브라우저에 추가할 것입니다. 이 기능이 유용한 것은 아니지만 어쨌든 이렇게 하겠습니다.</p> +<p>Mozilla는 chrom 꾸러미, 스킨, 로케일 목록을 작성하는데 사용되는 contents.rdf 파일에 오버레이 목록을 추가할 수 있게 해 줍니다. 만일 오버레이를 작성하면 이것을 contents.rdf 파일에 추가할 수 있습니다. 그리고 오버레이를 적용하고자 하는 각 창 하나씩 항목을 추가합니다.</p> +<div class="highlight"> + <h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h4> + <p>먼저 간단한 오버레이를 만들겠습니다. 여기에는 검색할 파일이름과 디렉토리를 입력할 수 있는 요소들만 들어 있습니다. 이 파일을 findfile.xul 파일이 있는 findfile 디렉토리에 foverlay.xul이라는 이름으로 저장하세요.</p> + <h4 id="foverlay.xul_.EC.98.88.EC.A0.9C" name="foverlay.xul_.EC.98.88.EC.A0.9C">foverlay.xul 예제</h4> + <p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_crosspov_1.xul.txt">Source</a></p> + <pre><?xml version="1.0"?> + +<overlay + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<toolbox id="navigator-toolbox"> + <toolbar id="findfile_toolbar"> + <label control="findfile_filename" value="Search for files named:"/> + <textbox id="findfile_filename"/> + <label control="findfile_dir" value="Directory:"/> + <textbox id="findfile_dir"/> + <button label="Browse..."/> + </toolbar> +</toolbox> + +</overlay> +</pre> + <p>위 파일에서 overlay를 window로 바꾸면 내용을 볼 수 있습니다. 여기서 특별하다고 할만한 것은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>에 사용된 <code>id</code>입니다. 이 값(<code>navigator-toolbox</code>)은 브라우저 창(navigator.xul)에 있는 toolbox의 id와 동일합니다. 이는 브라우저 창의 toolbox에 오버레이가 적용되고 별도의 툴바에 내용이 추가된다는 것을 의미합니다.</p> + <p>이 오버레이를 선언 파일에 적용하기 위해서는 두 가지 리소스(resource)를 추가해야 합니다. 먼저, 오버레이를 적용할 각각의 창을 하나씩 추가합니다. 아래의 코드는 contents.rdf 파일의 닫는 RDF 태그 앞에 들어가야 합니다.</p> + <pre><RDF:Seq about="urn:mozilla:overlays"> + <RDF:li resource="chrome://navigator/content/navigator.xul"/> +</RDF:Seq> +</pre> + <p>이 코드는 오버레이 창을 루트(root) 오버레이 노드(urn:mozilla:overlay)의 자식에 넣는다는 것을 선언합니다. 여러분은 오버레이를 적용하고자 하는 창에 해당하는 <code>li</code> 노드를 추가해서 다른 노드를 추가할 수 있습니다.</p> + <p>다음은 창에 적용할 각 오버레이를 위한 노드를 추가합니다. 이번 경우에는 하나만 있지만 다른것도 추가할 수 있습니다. 이 줄을 위의 코드 다음 줄에 추가하세요.</p> + <pre><RDF:Seq about="chrome://navigator/content/navigator.xul"> + <RDF:li>chrome://findfile/content/foverlay.xul</RDF:li> +</RDF:Seq> +</pre> +</div> +<div class="float-right"> + <img alt="Image:crosspov1.jpg"></div> +<p>Mozilla는 이 정보를 읽은 후 다른 창에 적용되는 오버레이 목록을 만듭니다. 이 정보는 chrome/overlayinfo 디렉토리에 저장됩니다. 이 디렉토리에 있는 파일들을 직접 수정할 필요는 없습니다. 이 파일들은 Mozilla가 처음 실행되거나 새로운 꾸러미가 설치되면 자동으로 생성되고 수정됩니다. 그러나 이 디렉토리와 chrome.rdf 파일을 삭제해서 강제로 이 데이터들이 재작성되도록 할 수 있습니다.</p> +<p>여러분은 이러한 기법을 추가 스타일시트를 적용하는데 사용할 수 있습니다. 다음 예는 이러한 것을 보여줍니다.</p> +<pre><RDF:Seq about="urn:mozilla:stylesheets"> + <RDF:li resource="chrome://messenger/content/messenger.xul"/> +</RDF:Seq> + +<RDF:Seq about="chrome://messenger/content/messenger.xul"> + <RDF:li>chrome://blueswayedshoes/skin/myskinfile.css</RDF:li> +</RDF:Seq> +</pre> +<p> </p> +<div class="note"> + 여기서부터는 <a href="ko/Gecko">Gecko</a> 1.8 (Firefox 1.5)에서부터 사용하는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일</a>을 통해 오버레이를 적용하는 방법입니다.</div> +<div class="highlight"> + <p>Gecko 1.8 (Firefox 1.5) 이후부터는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일</a>을 이용하여 다른 꾸러미에 오버레이를 적용합니다. 파일 찾기 대화창을 위한 선언 파일인 <code>findfile.manifest</code>에 다음을 추가하면 됩니다.</p> + <pre>overlay chrome://browser/content/browser.xul chrome://findfile/content/foverlay.xul +</pre> +</div> +<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Creating_an_Installer">XUL 응용프로그램을 위한 인스톨러(installer) 작성</a> 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Overlays" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_an_Installer">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html new file mode 100644 index 0000000000..ce1d1c2c83 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html @@ -0,0 +1,259 @@ +--- +title: Element Positioning +slug: Mozilla/Tech/XUL/XUL_Tutorial/Element_Positioning +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Box_Model_Details">다음 »</a></p> +</div><p></p> + +<p>이번에는 XUL 요소의 크기와 위치를 지정하는 방법을 알아 보겠습니다.</p> + +<h2 id="Box_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95" name="Box_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95">Box 요소의 위치 지정</h2> + +<p>지금까지 상자 속의 요소들을 가로나 세로로 정렬하는 방법을 배웠습니다. 우리는 상자 속 요소의 크기와 위치를 제어할 필요가 있으며, 이를 위해 먼저 상자가 작동하는 원리에 대해 좀 더 알아볼 필요가 있습니다.</p> + +<p>XUL에서는 배치 방식(layout style)에 따라 내부 요소들의 위치가 결정됩니다. 예를 들어 가로 상자에 버튼을 추가하면 만약 추가된 버튼의 앞에 다른 요소가 있다면, 앞 버튼의 오른쪽에 위치하게 됩니다. 요소의 크기는 그 요소가 필요로 하는 크기와 사용자가 지시한 크기, 두 가지 요인에 의해 결정됩니다. 요소가 필요로 하는 크기는 그 요소 안에 무엇이 있느냐에 따라 달라집니다. 예를 들어 버튼의 너비는 버튼에 표시되는 문자열의 길이에 의해 결정됩니다.</p> + +<p>일반적으로 요소의 크기는 내부의 것들을 표시하기에 딱 알맞은 크기로 결정됩니다. 글상자(textbox) 같은 몇몇 요소들에는 기본 크기가 지정되어 있습니다. 일반 상자는 그 내부의 요소들을 모두 포함할 수 있을 만큼 충분한 크기를 가지게 됩니다. 예를 들어 세 개의 버튼을 포함하는 가로 상자의 너비는 세 개의 버튼과 약간의 여백을 포함할 정도의 넓어집니다.</p> + +<div class="float-right"><img alt="Image:boxstyle1n.png"></div> + +<p>그림에서 앞의 두 버튼은 문자열을 표시하기에 알맞은 크기로 되어 있습니다. 세 번째 버튼은 글자가 더 많기 때문에 크기가 더 큽니다. 버튼을 포함하고 있는 상자의 너비는 세 버튼의 너비와 버튼들 간의 사이 공간을 더한 전체 너비가 됩니다. 버튼의 높이도 글씨의 크기에 맞춰져 있습니다.</p> + +<h3 id="Width.EC.99.80_height_.EC.86.8D.EC.84.B1" name="Width.EC.99.80_height_.EC.86.8D.EC.84.B1">Width와 height 속성</h3> + +<p>여러분은 아마 창 내의 요소 크기를 좀 더 세밀히 제어할 필요가 있을 것입니다. 그래서 XUL은 요소의 크기를 조정할 수 있는 다양한 기능을 제공합니다. 그 중에서 가장 쉬운 방법은, HTML의 <code>img</code>에 너비와 높이를 주는 방식과 아주 비슷하게, 해당 요소에 <code><code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code>와 <code><code id="a-height"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> 속성을 사용하는 것입니다. 다음은 이러한 예를 보여주고 있습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">View</a></p> + +<pre><button label="OK" width="100" height="40"/> +</pre> + +<p>하지만 이러한 방법은 사용 환경이나 테마에 따라 문제가 발생할 수 있기 때문에 그렇게 추천할 만한 방법이 아닙니다. 더 나은 방법은 style 속성을 이용하는 것인데, 이는 HTML의 스타일 시트와 유사하게 작동합니다. 이 때는 다음의 CSS 속성을 사용할 수 있습니다.</p> + +<dl> + <dt><a href="/ko/docs/Web/CSS/width" title="width CSS 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다."><code>width</code></a> </dt> + <dd>요소의 너비를 지정합니다.</dd> + <dt><a href="/ko/docs/Web/CSS/height" title="height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정합니다."><code>height</code></a> </dt> + <dd>요소의 높이를 지정합니다.</dd> +</dl> + +<p>이 속성을 사용하면 지정된 너비와 높이를 가진 요소가 생성됩니다. 만약 하나의 값만 지정하면 나머지 값은자동으로 계산됩니다. 이러한 크기 스타일을 지정할 때는 수치와 단위를 함께 입력해야 합니다.</p> + +<h4 id=".EC.9C.A0.EC.97.B0.ED.95.9C_.EC.9A.94.EC.86.8C.EB.93.A4" name=".EC.9C.A0.EC.97.B0.ED.95.9C_.EC.9A.94.EC.86.8C.EB.93.A4">유연한 요소들</h4> + +<p>유연하지 않은(non-flexible) 요소의 크기는 쉽게 계산됩니다. 이런 요소들은 지정된 크기 그대로 화면에 나타나며, 만약 크기가 지정되지 않으면 내용을 표시하기에 알맞게 크기가 정해집니다. 하지만 유연한(flexible) 요소의 크기를 계산하는 것은 조금 까다롭습니다.</p> + +<p>유연한 요소란 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성의 값이 0보다 큰 요소입니다. 이들은 사용 가능한 공간에 맞추어 크기가 커지거나 줄어든다는 것을 이전 섹션에서 말씀드렸습니다. 이들의 처음 크기는 유연하지 않은(inflexible) 요소와 똑같이 계산됩니다. 다음의 예제는 앞서 말한 내용에 대해 보여줍니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">View</a></p> + +<pre><window orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<hbox> + <button label="Yes" flex="1"/> + <button label="No"/> + <button label="I really don't know one way or the other"/> +</hbox> + +</window> +</pre> + +<p>이 창을 열면 처음에는 위에서 본 그림처럼 나타날 것입니다. 앞의 두 버튼은 너비가 기본값과 같을 것이고 세 번째 버튼은 글자가 더 많기 때문에 너비가 더 클 것입니다. 첫번째 버튼은 유연하도록 설정되었으며 세 버튼 모두 상자에 포함되어 있습니다. 상자의 너비는 세 버튼의 총 너비(그림에서는 약 430 픽셀)로 맞춰질 것입니다.</p> + +<p>만일 창의 크기를 늘리면 XUL은 빈 공간을 매꾸기 위해서 유연한 요소들이 있는지 검사합니다. 위 예제에서첫번째 버튼이 유연한 요소이지만, 창을 늘려도 버튼의 크기가 변하지 않을 것입니다. 이는 버튼을 포함하는 상자가 유연하지 않기 때문입니다. 유연하지 않은 요소는 사용 가능한 공간이 늘어나도 크기가 변하지 않으며 따라서 버튼도 더 커질 수가 없는 것입니다.</p> + +<p>상자도 유연 요소로 만들면 문제가 해결됩니다. 그리고 나서 창을 늘리면 빈 공간이 생기고 이 빈 공간을 채우기 위해 상자의 크기도 변경됩니다. 상자가 더 커지면 상자 내부에 빈 공간이 생기고 그러면 상자 내부의 유연 요소인 버튼이 늘어나 빈 공간을 채우게 됩니다. 이러한 과정은 중첩된 상자에 대해 반복되어 처리됩니다.</p> + +<h2 id=".EC.B5.9C.EC.86.8C_.ED.81.AC.EA.B8.B0.EC.99.80_.EC.B5.9C.EB.8C.80_.ED.81.AC.EA.B8.B0_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EC.B5.9C.EC.86.8C_.ED.81.AC.EA.B8.B0.EC.99.80_.EC.B5.9C.EB.8C.80_.ED.81.AC.EA.B8.B0_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">최소 크기와 최대 크기 지정하기</h2> + +<p>여러분은 어떤 요소가 유연하면서도 특정 크기보다는 더 커지지 않도록 크기를 제한해야 할 때도 있을 수 있습니다. 또 그 반대로 최소 크기를 지정하고 싶을 때도 있을 것입니다. 이러한 제한들은 다음의 네 가지 속성을 사용해서 설정할 수 있습니다.</p> + +<dl> + <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> </dt> + <dd>요소의 최소 너비를 지정한다.</dd> + <dt><code id="a-minheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code> </dt> + <dd>요소의 최소 높이를 지정한다.</dd> + <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> </dt> + <dd>요소의 최대 너비를 지정한다.</dd> + <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code> </dt> + <dd>요소의 최대 높이를 지정한다.</dd> +</dl> + +<p>위의 모든 값은 픽셀로 계산됩니다. 그리고 위의 속성 대신 CSS의 <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, <code>max-height</code>를 이용해도 됩니다.</p> + +<p>이 속성들은 유연한 요소에만 적용됩니다. 예를 들어 최대 높이를 지정한 유연한 버튼은 지정된 높이만큼만 늘어날 수 있습니다. 최대 높이까지 늘어난 버튼은 창의 크기를 늘려도 더 이상 늘어나지 않습니다. 이 버튼을 포함하는 상자에 최대 높이를 지정하지 않으면 상자는 버튼과 상관 없이 계속해서 늘어날 것입니다.</p> + +<p>만약 두 버튼이 동일하게 유연하다면, 두 버튼이 빈 공간을 똑같이 나누어 가질 것이다. 이 때 한 버튼에 최대 너비가 지정되어 있다면 남은 하나의 버튼이 남은 공간을 차지하게 됩니다.</p> + +<p>만약 상자에 최대 너비나 높이가 지정되어 있다면 상자 내의 요소들은 그 이상 커질 수가 없습니다. 마찬가지로 상자에 최소 너비나 높이가 지정되어 있으면 상자 내의 요소들은 그 이하로 줄어들 수가 없습니다.</p> + +<h5 id=".EB.84.88.EB.B9.84.EC.99.80_.EB.86.92.EC.9D.B4.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.9C_.EC.98.88.EC.A0.9C.EB.93.A4" name=".EB.84.88.EB.B9.84.EC.99.80_.EB.86.92.EC.9D.B4.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.9C_.EC.98.88.EC.A0.9C.EB.93.A4">너비와 높이를 지정한 예제들</h5> + +<pre><button label="1" style="width: 100px;"/> +<button label="2" style="width: 100em; height: 10px;"/> +<button label="3" flex="1" style="min-width: 50px;"/> +<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> +<textbox flex="1" style="max-width: 10em;"/> +<description style="max-width: 50px">This is some boring but simple +wrapping text.</description> +</pre> + +<dl> + <dt>예제 1</dt> + <dd>첫 번째 버튼은 너비가 100픽셀(px는 픽셀을 의미)이 될 것입니다. 만약 단위를 입력하지 않으면 너비가 적용되지 않을 것입니다.</dd> + <dt>예제 2</dt> + <dd>두 번째 버튼은 높이가 10px, 너비가 100em(em은 사용하고 있는 글꼴의 한 글자 크기)으로 표시될 것입니다.</dd> + <dt>예제 3</dt> + <dd>세 번째 버튼은 유연한 요소이므로 버튼을 포함하는 상자의 크기에 따라 크기가 변경될 것입니다. 하지만 이 버튼은 50px 이하로는 줄어들지 않을 것입니다. 이 때는 다른 유연한 요소들이 유동비(flex값의 비율)와 상관 없이 남은 공간을 채울 것입니다.</dd> + <dt>예제 4</dt> + <dd>네 번째 버튼은 유연하지만 높이가 2ex(ex는 사용하고 있는 글꼴의 x의 크기) 이하로 줄어들지 않고, 100px 이상으로 늘어나지도 않을 것입니다.</dd> + <dt>예제 5</dt> + <dd>글상자는 유연하지만 크기가 10em 이상으로 늘어나지 않을 것입니다. 글자와 관련된 크기를 정할 때는 주로 em을 사용합니다. 글꼴이 변경되면서 글자의 크기가 변할 수 있지만 글상자의 크기를 em으로 지정하면 언제나 글꼴에 맞추어서 크기가 정해지기 때문에 매우 유용합니다.</dd> + <dt>예제 6</dt> + <dd><code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소의 최대 너비가 50픽셀로 지정되어 있습니다. 글자가 50픽셀을 넘으면 나머지 글자는 다음 줄에 표시될 것입니다.</dd> +</dl> + +<div class="highlight"> +<h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD">우리의 파일 찾기 대화창</h5> + +<p>위에서 본 스타일들 중 몇 가지를 파일 찾기 대화창에 추가해 보도록 하겠습니다. 우리는 글상자의 크기가 창의 크기에 맞추어 변하도록 만들어 볼 것입니다.</p> + +<pre><textbox id="find-text" flex="1" style="min-width: 15em;"/> +</pre> + +<div class="float-right"><img alt="Image:boxstyle1.png"></div> + +<p>위에서 글상자를 유연하게 만들었습니다. 이제 사용자가 대화창의 크기를 변경하면 글상자도 함께 늘어날 것입니다. 이는 사용자가 긴 문자열을 입력하고자 할 때 유용합니다. 또 최소 너비가 15em이기 때문에 글상자는 항상 적어도 15글자를 표시할 수 있게 되었습니다. 사용자가 창을 아주 작은 크기로 줄여도 글상자는 15em 이하로는 줄어들지 않을 것입니다. 이 때는 글상자가 마치 대화창의 경계를 벗어난 것처럼 그려질 것입니다. 그림에서와 같이 글상자가 창의 크기에 딱 맞추어져 있습니다.</p> +</div> + +<h2 id=".EC.83.81.EC.9E.90_.EB.AC.B6.EA.B8.B0" name=".EC.83.81.EC.9E.90_.EB.AC.B6.EA.B8.B0">상자 묶기</h2> + +<p>유연한 상자가 두 개의 자녀 요소를 갖고 있는데, 둘 다 유연하지 않다면 어떻게 될까요? 아래의 예를 보겠습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">View</a></p> + +<pre><box flex="1"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>창의 크기가 변경되면 상자의 크기도 이에 맞추어 변경됩니다. 하지만 두 개의 버튼은 크기가 고정되어 있기 때문에 변하지 않을 것입니다. 따라서 상자의 내부에 빈 공간이 생겨 창의 오른쪽 부분에 빈 공간이 생긴 것처럼 보이게 됩니다. 하지만 아마 여러분은 왼쪽에 빈 공간이 생기고, 창의 오른쪽으로 버튼이 정렬되게끔 하고 싶을 때도 있을 것입니다.</p> + +<p>상자 안에 여백(<code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>)를 넣으면 되지만, 매번 그렇게 하는 것은 너무 성가실 것입니다. 더 좋은 방법은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>의 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성을 이용하는 것입니다. 이 속성은 상자내의 자식 속성을 어떻게 포장 할지를 나타내는 속성입니다. 수평 상자에서는 자식 요소들의 수평 위치를 제어하는데 사용되며, 수직 정렬 상자에서는 수직 위치를 제어하는데 사용됩니다. 이 속성에 사용할 수 있는 값은 다음의 세 가지입니다.</p> + +<dl> + <dt>start </dt> + <dd>자식 요소를 수평 상자에서는 왼쪽에, 수직 상자에서는 위쪽에 위치시키며 이것이 기본값입니다.</dd> + <dt>center </dt> + <dd>자식 요소를 상자의 중앙에 위치시킵니다.</dd> + <dt>end </dt> + <dd>자식 요소를 수평 상자에서는 오른쪽에, 수직 상자에서는 아래쪽에 위치시킵니다.</dd> +</dl> + +<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성은 자식 요소가 아니라 자식 요소를 포함하는 상자에 적용해야 합니다.</p> + +<p>앞의 예제를 자식 요소들이 중앙에 오도록 하려면 다음과 같이 수정할 수 있습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">View</a></p> + +<pre><box flex="1" pack="center"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>이제 창의 크기가 변경되면 버튼이 모두 가로 방향의 중앙에 위치합니다. 이를 앞의 예와 비교해 보세요.</p> + +<h2 id=".EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC" name=".EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC">상자 정렬</h2> + +<p>위의 Happy-Sad 예에서 창의 너비를 변경하면 상자의 너비도 함께 변경됩니다. 창의 높이를 변경하면 버튼의 높이도 변하는 것을 보실 것입니다. 이것은 다른 방향으로는 자동으로 크기 유연성이 지정되기 때문입니다.</p> + +<p>이러한 동작 방법은 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성을 이용하면 조정할 수 있습니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 수평 상자에서는 자식 요소의 수직 위치를, 수직 상자에서는 자식 요소의 수평 위치를 조정하는데 사용합니다. 사용할 수 있는 값은 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code>과 비슷합니다.</p> + +<dl> + <dt>start </dt> + <dd>자식 요소를 수평 상자의 윗부분에, 수직 상자의 왼쪽에 정렬합니다.</dd> + <dt>center </dt> + <dd>자식 요소를 상자의 중앙에 정렬합니다.</dd> + <dt>end </dt> + <dd>자식 요소를 수평 정렬 상자의 아래쪽에, 수직 정렬 상자의 오른쪽에 정렬합니다.</dd> + <dt>baseline </dt> + <dd>문자열이 위로 올라오도록 자식 요소를 정렬합니다. 이 속성은 수평 정렬 상자에만 적용됩니다.</dd> + <dt>stretch </dt> + <dd>이 속성의 기본값으로, 자식 요소들이 유연한 요소처럼 상자의 크기에 맞춰 늘어나도록 합니다. 단, 상자의 정렬 방향의 반대 방향에만 적용됩니다.</dd> +</dl> + +<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성과 마찬가지로 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성도 자식 요소가 아닌 자식 요소를 포함하는 상자에 적용해야 합니다.</p> + +<p>다음의 예제에서 첫 번째 상자는 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성이 지정되지 않았기 때문에 자식 요소들이 늘어나게 됩니다. 하지만 두 번째 상자는 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성에 따라 자식 요소들이 한 가운데에 정렬되는 것을 볼 수 있을 것입니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">View</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="yesno" title="Question" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <hbox> + <button label="Yes"/> + <button label="No"/> + </hbox> + <hbox align="center"> + <button label="Maybe"/> + <button label="Perhaps"/> + </hbox> + +</window> +</pre> + +<div class="float-right"><img alt="Image:boxstyle2-b.png"></div> + +<p>여러분은 pack과 align 속성 대신 style의 <code><a href="ko/CSS/-moz-box-pack">-moz-box-pack</a></code>과 <code><a href="ko/CSS/-moz-box-align">-moz-box-align</a></code>을 사용할 수 있습니다.</p> + +<div class="note">상자의 여러 가지 속성에 대해 직접 시험해 보시려면, <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">상자 정렬 예제</a>를 이용해 보시기 바랍니다.</div> + +<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4.EA.B3.BC_.EB.B2.84.ED.8A.BC_.EC.9E.90.EB.A5.B4.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4.EA.B3.BC_.EB.B2.84.ED.8A.BC_.EC.9E.90.EB.A5.B4.EA.B8.B0">문자열과 버튼 자르기</h2> + +<p>여러분은 아마 버튼의 최대 너비보다 긴 라벨을 가진 버튼 요소를 만들지도 모릅니다. 물론 문자열이 들어갈 만큼 버튼을 크게 만들면 되겠지만, 버튼(과 라벨을 가진 다른 요소)의 <code>crop</code> 속성을 이용하면 라벨이 너무 큰 경우 라벨이 잘려지는 방법을 제어할 수 있습니다.</p> + +<p>문자열이 잘리면 잘린 부분에 말줄임표(...)가 나타납니다. crop 속성에 사용할 수 있는 값은 아래의 네 가지입니다.</p> + +<dl> + <dt>start </dt> + <dd>문자열의 왼쪽이 잘립니다.</dd> + <dt>end </dt> + <dd>문자열의 오른쪽이 잘립니다.</dd> + <dt>center </dt> + <dd>문자열의 왼쪽과 오른쪽이 모두 잘립니다.</dd> + <dt>none </dt> + <dd>이 속성의 기본값으로 문자열이 잘리지 않습니다.</dd> +</dl> + +<p>이 속성은 대화창이 어떤 크기에서든 사용할 수 있도록 만들 때 정말로 유용합니다. <code>crop</code> 속성은 <code>label</code> 속성을 갖는 요소들에서 사용할 수 있습니다. 아래의 예는 crop 속성의 사용법을 보여줍니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_6"><a id="%EC%98%88%EC%A0%9C_6"></a><strong>예제 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">View</a></p> + +<div class="float-right"><img alt="Image:boxstyle2.png"></div> + +<pre><button label="Push Me Please!" crop="end" flex="1"/> +</pre> + +<p>창이 줄어들면 문자열의 오른쪽이 잘리는 것을 볼 수 있습니다.</p> + +<div class="highlight"> +<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">View</a></p> +</div> + +<p>다음에는 지금까지 살펴본 상자 모델에 대한 요약과 함께 <a href="ko/XUL_Tutorial/Box_Model_Details">박스 모델에 대한 추가적인 세부 사항</a>에 대해 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Box_Model_Details">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html new file mode 100644 index 0000000000..c2cc18a638 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html @@ -0,0 +1,132 @@ +--- +title: Focus and Selection +slug: Mozilla/Tech/XUL/XUL_Tutorial/Focus_and_Selection +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Commands">다음 »</a></p> +</div><p></p> +<p>본 단원에서는 요소의 포커스(focus)와 선택(selection)을 다루는 방법에 대해 알아보겠습니다.</p> +<h3 id=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EC.96.BB.EC.9D.80_.EC.9A.94.EC.86.8C" name=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EC.96.BB.EC.9D.80_.EC.9A.94.EC.86.8C">포커스를 얻은 요소</h3> +<p>포커스를 얻은 요소라는 것은 현재의 입력 이벤트를 받는 요소를 의미합니다. 만일 창에 세 개의 텍스트 상자가 있다면, 포커스를 가진 것이 사용자가 현재 텍스트를 입력할 수 있는 텍스트 상자가 됩니다. 창 별로 한번에 하나의 요소만이 포커스를 가질 수 있습니다.</p> +<p>사용자는 마우스로 요소를 클릭하거나 Tab 키를 눌러서 포커스를 변경할 수 있습니다. Tab 키가 눌러지면, 다음 요소가 포커스를 받습니다. 이전 요소가 포서스를 받게 하려면 Shift와 Tab 키를 누르면 됩니다.</p> +<h4 id=".ED.83.AD_.EC.88.9C.EC.84.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0" name=".ED.83.AD_.EC.88.9C.EC.84.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0">탭 순서 바꾸기</h4> +<p>사용자가 Tab 키를 눌렀을 때 포커스를 받는 요소의 순서를 바꾸기 위해서는 요소에 <code><code id="a-tabindex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 속성을 넣으면 됩니다. 이 속성은 숫자값으로 지정되어야 합니다. 사용자가 Tab을 누르면, 다음 번 <code>tabindex</code> 값을 가진 요소로 이동합니다. 이것은 요소의 인덱스값을 순서대로 지정해서 요소의 순서를 지정할 수 있다는 것을 의미합니다. 일반적으로는 <code><code id="a-tabindex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 속성을 지정하지 않을 것입니다. 이럴 경우에는 Tab을 누르면 다음에 출력된 요소로 포커스가 이동할 것입니다. 여러분은 순서를 바꾸고 싶을 때만 탭 인덱스를 지정하면 됩니다. 예제는 다음과 같습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">View</a></p> +<pre><button label="Button 1" tabindex="2"/> +<button label="Button 2" tabindex="1"/> +<button label="Button 3" tabindex="3"/> +</pre> +<h4 id="focus_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name="focus_.EC.9D.B4.EB.B2.A4.ED.8A.B8">focus 이벤트</h4> +<p><code>focus</code> 이벤트는 어떤 요소가 포커스를 받았을 때 반응하기 위해 사용됩니다. <code>blur</code> 이벤트는 요소에서 포커스가 벗어났을 때 반응하기 위해 사용됩니다. 여러분은 code><a href="ko/DOM/element.onfocus">onfocus</a></code>나 <code><a href="ko/DOM/element.onblur">onblur</a></code> 속성을 요소에 붙여 포커스의 변화에 반응할 수 있습니다. 이 속성들은 HTML에 있는 해당 속성과 아주 비슷합니다. 이 이벤트 핸들러들은 요소를 강조(highlight)하거나 상태바에 텍스트를 출력하고자 할 때 보통 사용됩니다. 다음 예제는 포커스 이벤트를 처리하는 함수를 적용한 것을 보여주고 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">View</a></p> +<pre><script> + +function displayFocus(){ + var elem=document.getElementById('sbar'); + elem.setAttribute('value','Enter your phone number.'); +} + +</script> + +<textbox id="tbox1"/> +<textbox id="tbox2" onfocus="displayFocus();"/> +<description id="sbar" value=""/> +</pre> +<p>예제에서 focus 이벤트가 발생하면 <code>displayFocus</code> 함수가 호출될 것입니다. 이 함수는 텍스트 라벨의 값을 변경합니다. 우리는 이 예제를 확장해서 blur 이벤트가 발생할 때 텍스트가 제거되도록 만들수도 있을 것입니다. 일반적으로 사용자가 요소를 선택함에 따라 인터페이스의 일부분을 변경하기 위해 focus와 blur 이벤트를 사용합니다. 예를 들어 여러분은 사용자가 필드에 값을 입력함에 따라 합계를 갱신하거나 값의 유효성을 검증하는데 focus 이벤트를 사용할 수 있습니다. focus나 blur 이벤트에서 alert 창을 띄우지 마세요. 이렇게 하는 것은 사용자를 혼란스럽게 만들며, 아주 나쁜 사용자 인터페이스 디자인입니다.</p> +<p>또한 DOM 함수인 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 사용해서 이벤트 핸들러를 동적으로 등록할 수 있습니다. 이 함수는 어떤 요소나 이벤트에도 사용할 수 있습니다. 여기에는 3개의 인자가 있는데 이들은 이벤트 유형, 이벤트가 발생했을 때 실행할 함수, 이벤트 캡쳐를 수행할지를 여부를 나타내는 불린값(boolean) 입니다.</p> +<h4 id=".ED.98.84.EC.9E.AC_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.84_.EC.9A.94.EC.86.8C_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0" name=".ED.98.84.EC.9E.AC_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.84_.EC.9A.94.EC.86.8C_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0">현재 포커스를 가진 요소 가져오기</h4> +<p>현재 포커스를 가진 요소는 명령 발송자(command dispatcher)라고 불리는 객체에 저장되며, 이 객체는 창에 하나만 존재합니다. 명령 발송자는 사용자가 인터페이스를 사용함에 따라 포커스를 가진 요소의 변화를 추적하는 역활을 수행합니다. 명령 발송자는 또 다른 역활도 수행하는데 이에 대해서는 <a href="ko/XUL_Tutorial/Commands">다음 단원</a>에서 자세히 알아 보겠습니다. 지금은 명령 발송자가 가진 기능들 중 포커스와 관련된 것들에 대해서만 알아보겠습니다.</p> +<p>여러분은 <code>document</code>의 <code>commandDispatcher</code> 속성을 이용해서 창의 명령 발송자 객체를 얻을 수 있습니다. 이곳에서 발송자의 <code>focusedElement</code> 속성으로부터 포커스를 가진 요소를 얻을 수 있습니다( <code>document.commandDispatcher.focusedElement</code>).</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">View</a></p> +<pre><window id="focus-example" title="Focus Example" + onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init(){ + addEventListener("focus",setFocusedElement,true); +} + +function setFocusedElement(){ + var focused = document.commandDispatcher.focusedElement; + document.getElementById("focused").value = focused.tagName; +} +</script> + +<hbox> + <label control="username" value="User Name:"/> + <textbox id="username"/> +</hbox> + +<button label="Hello"/> +<checkbox label="Remember This Decision"/> + +<label id="focused" value="-No focus-"/> + +</window> +</pre> +<p>예제에서 창에 <code>focus</code> 이벤트 핸들러를 부착하였습니다. 우리는 캡처 이벤트 핸들러를 사용하려고 하기 때문에 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code> 메소드를 사용하였습니다. 이 메소드를 이용해 창에 캡처 이벤트 핸들러를 등록하고 <code>setFocusedElement</code> 메소드가 호출되도록 하였습니다. 이 메소드는 명령 발송자로부터 포커스를 가진 요소를 가져와서 이 요소의 태그 이름을 라벨에 출력하게 됩니다. 포커스를 가진 요소가 바뀌면, 라벨도 해당 요소의 태그 이름으로 변경됩니다.</p> +<p>여기서 몇 가지 확인해야 할 점이 있습니다.</p> +<ul> + <li>첫번째로, textbox에 포커스가 가면, 태그 이름이 우리의 예상과 달리 'textbox'가 아니라 'html:input'으로 출력됩니다. 이것은 XUL 텍스트 상자가 HTML input 위젯으로 구현되어 있기 때문이며, 따라서 focus 이벤트는 이 요소가 받게 됩니다.</li> + <li>두번째로, 텍스트 상자의 라벨을 클릭하면 포커스가 텍스트 상자로 갑니다. 이것은 라벨의 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 텍스트 상자의 id를 가리키고 있기 때문입니다.</li> + <li>마지막으로, 태그 이름을 출력하는 라벨은 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 없으며, 따라서 이를 클릭하더라도 포커스에 영향을 주지 않습니다. 포커스를 가질 수 있는 요소만이 포커스를 가질 수 있습니다.</li> +</ul> +<h4 id=".EB.9D.BC.EB.B2.A8.EC.9D.B4_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.88_.EC.88.98_.EC.9E.88.EA.B2.8C_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.9D.BC.EB.B2.A8.EC.9D.B4_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.88_.EC.88.98_.EC.9E.88.EA.B2.8C_.EB.A7.8C.EB.93.A4.EA.B8.B0">라벨이 포커스를 가질 수 있게 만들기</h4> +<p>만일 <a href="ko/XUL_Tutorial/Introduction_to_XBL">사용자 정의 요소(XBL)</a>를 만들어 봤다면, 어떤 요소가 포커스를 가질 수 있는지의 여부를 수정할 필요가 있었을 것입니다. 이를 위해, <code>-moz-user-focus</code>라는 특별한 스타일 속성을 사용할 수 있습니다. 이 속성은 요소가 포커스를 받을 수 있는지의 여부를 제어합니다. 예를 들어, 다음 예제와 같이 라벨이 포커스를 가질 수 있게도 할 수 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">View</a></p> +<pre><label id="focused" style="-moz-user-focus: normal;" + onkeypress="alert('Label Focused');" value="Focus Me"/> +</pre> +<p>해당 스타일 속성이 <code>normal</code>로 지정되었습니다. 여러분은 요소가 포커스를 가질 수 없게 하기 위해 <code>ignore</code>값을 지정할 수도 있습니다. 이 값은 요소를 사용 불가능한 상태로 만들기 위해 사용해서는 안되며 대신 <code>disabled</code> 속성을 사용하는 것이 좋습니다. 왜냐하면 이 속성이 이런 목적을 위해 존재하는 것이기 때문입니다. 일단 예제의 라벨에 포커스가 주어지면 키 입력에 응답할 수 있습니다. 원래 라벨은 일반적으로 포커스를 받지 않도록 되어 있기 때문에 포커스가 주어져도 어떤 표시도 나타나지는 않습니다.</p> +<h4 id=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EB.B0.94.EA.BE.B8.EA.B8.B0" name=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EB.B0.94.EA.BE.B8.EA.B8.B0">포커스를 바꾸기</h4> +<p>현재 포커스를 가진 요소를 바꾸는 몇 가지 방법이 있습니다. 가장 간단한 방법은 포커스를 지정하고자 하는 XUL 요소의 <code><a href="ko/DOM/element.focus">focus</a></code> 메소드를 호출하는 것입니다. 요소에서 포커스를 제거하려면 <code><a href="ko/DOM/element.blur">blur</a></code> 메소드를 호출하면 됩니다. 다음은 이러한 내용의 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">View</a></p> +<pre><textbox id="addr"/> + +<button label="Focus" oncommand="document.getElementById('addr').focus()"/> +</pre> +<p>또는 명령 발송자 객체의 <code>advanceFocus</code>나 <code>rewindFocus</code> 메소드를 호출할 수도 있습니다. 이 메소드들은 포커스를 순서대로 다음 요소나 이전 요소로 옮깁니다. 이것은 사용자가 Tab이나 Shift+Tab 키를 눌렀을때와 동일한 것입니다.</p> +<p>텍스트 상자는 포커스를 받을때마다 <code>focused</code>라는 특별한 속성이 추가됩니다. 스크립트나 스타일시트에서 텍스트 상자가 포커스를 가지고 있는지 검사하려면 이 속성이 존재하는지 검사하면 됩니다. 만일 텍스트 상자가 포커스를 가지고 있다면 이 속성은 <code>true</code>값을 가지고, 포커스가 없다면 속성이 존재하지 않습니다.</p> +<p>여러분이 포커스를 다음 요소로 옮기고 싶다고 가정해 봅시다. 사용자는 보통 Tab 키를 눌러 포커스를 옮깁니다. XUL 브라우저에서는 다음과 같이 아무데서나 할 수 있습니다.</p> +<pre> document.commandDispatcher.advanceFocus(); +</pre> +<p>사실 <code>commandDispatcher</code>는 <a href="ko/Interfaces">nsIDOMXULCommandDispatcher interface</a>를 구현한 것입니다. 포커스를 처리하는 방법과 관련해 다른 많은 함수들이 존재합니다.</p> +<h4 id=".ED.94.8C.EB.9E.AB.ED.8F.BC.EC.97.90_.EB.94.B0.EB.A5.B8_.EB.8F.99.EC.9E.91" name=".ED.94.8C.EB.9E.AB.ED.8F.BC.EC.97.90_.EB.94.B0.EB.A5.B8_.EB.8F.99.EC.9E.91">플랫폼에 따른 동작</h4> +<dl> + <dt> + Mac OS X</dt> + <dd> + "Full Keyboard Access" (FKA)라는 설정이 존재합니다. XUL은 이 값에 충실하다는 것을 알아두세요. 이것은 FKA 설정이 off로 되어 있으면 텍스트 상자와 리스트/트리만이 키보드 또는 <code>focus()</code>를 사용한 코드로 포커스를 가질 수 있습니다.</dd> +</dl> +<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EB.B3.80.EA.B2.BD_.EC.B2.98.EB.A6.AC" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EB.B3.80.EA.B2.BD_.EC.B2.98.EB.A6.AC">텍스트 변경 처리</h3> +<p>사용자가 텍스트 상자의 값을 변경할 때와 관련된 2가지 이벤트가 있습니다. 당연히 이 이벤트들은 포커스를 가진 텍스트 상자로만 전송됩니다.</p> +<ul> + <li>input 이벤트는 텍스트가 수정될때마다 발생합니다. 새로운 값은 기존 값과 틀릴것입니다. 여러분은 key 이벤트 대신 이 이벤트를 사용하려고 할텐데, Shift 키와 같은 몇가지 키들은 값을 변경하지 않기 때문입니다. 또한 input 이벤트는 문자키가 눌러졌지만 텍스트상자의 최대 입력 가능 문자의 개수를 초과한 경우에는 발생하지 않습니다.</li> + <li>change 이벤트는 필드가 변경될때만 발생한다는 점에서 input 이벤트와 비슷합니다. 그러나 이 이벤트는 텍스트 상자가 포커스를 잃을때만 발생하며, 따라서 한번의 변경만이 존재하게 됩니다.</li> +</ul> +<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.84.A0.ED.83.9D" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.84.A0.ED.83.9D">텍스트 선택</h3> +<p>텍스트 상자로 작업할 경우 입력된 전체 텍스트가 아닌 사용자가 선택한 것만을 가져오길 원할때가 있을 것입니다. 또는 현재 선택한 텍스트를 변경하고자 할 때도 있을 것입니다.</p> +<p>XUL 텍스트상자는 선택을 가져오거나 수정하는 방법을 제공합니다. 가장 단순한 것은 텍스트상자에 있는 모든 텍스트를 선택하는 것입니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>의 <code><span id="m-select"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/select">select</a></code></span></code> 메소드를 이용해서 이를 수행합니다.</p> +<pre>tbox.select(); +</pre> +<p>그러나 텍스트의 일부분만 선택하고자 할 수도 있습니다. 이를 위해서는 <code><span id="m-setSelectionRange"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/setSelectionRange">setSelectionRange</a></code></span></code> 함수를 사용할 수 있습니다. 이 함수는 두개의 인자를 가지며, 첫번째 인자는 시작 문자의 위치이고 두번째는 선택하고자 하는 텍스트의 마지막 문자 위치입니다. 이 값들은 0 기반으로 첫번째 문자는 0이고 두번째는 1과 같이 진행됩니다.</p> +<pre>tbox.setSelectionRange(4,8); +</pre> +<p>예제는 다섯번째 부터 여덟번째 문자까지를 선택합니다. 만일 필드에 여섯개의 문자만 입력되어 있다면, 다섯번째와 여섯번째 문자만 선택되고 오류가 발생하지는 않습니다.</p> +<p>만일 두 인자에 동일한 값을 사용하면, 선택의 시작과 끝이 같이 위치가 됩니다. 이는 텍스트상자에서 커서의 위치를 변하게 할 뿐입니다. 예를 들어 아래는 커서를 텍스트의 처음으로 이동하게 하기 위해 사용될 수 있습니다.</p> +<pre>tbox.setSelectionRange(0,0); +</pre> +<p>여러분은 또한 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/selectionStart">selectionStart</a></span></code></code>와 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code></code> 속성을 이용해서 현재 선택된 위치를 가져올 수 있습니다. 이 속성들은 현재 선택된 것의 시작과 끝 위치를 나타냅니다. 만일 둘다 동일한 값으로 설정되어 있으면 아무런 텍스트도 선택되어 있지 않다는 것이며, 커서는 해당 위치로 이동합니다. 만일 시작과 끝 위치를 안다면, 전체 텍스트 중 일부 문자열을 뽑아낼 수 있습니다.</p> +<p>텍스트 상자의 내용을 수정하거나 가져오려면 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/value">value</a></span></code></code> 속성을 사용하면 됩니다.</p> +<p>텍스트 상자의 또 한가지 유용한 속성은 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/textLength">textLength</a></span></code></code>로 입력된 문자의 개수를 담고 있습니다.</p> +<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Commands">commands</a>를 사용하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Commands">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html new file mode 100644 index 0000000000..473c269406 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html @@ -0,0 +1,156 @@ +--- +title: Grids +slug: Mozilla/Tech/XUL/XUL_Tutorial/Grids +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Grids +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Tabboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Content_Panels">다음 »</a></p> +</div><p></p> +<p>XUL에는 표 형식의 격자를 만들기 위한 요소들이 있습니다.</p> +<h3 id="XUL_.ED.91.9C_.ED.98.95.EC.8B.9D.EC.9D.98_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83" name="XUL_.ED.91.9C_.ED.98.95.EC.8B.9D.EC.9D.98_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83">XUL 표 형식의 레이아웃</h3> +<p>XUL에는 표와 같은 방식으로 배치하기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 및 관련 요소들을 사용합니다. 이것은 HTML의 <code>table</code> 태그와 약간 비슷합니다. Grid는 자체만으로는 아무것도 출력되지 않으며, 단지 행과 열을 가진 표 형식으로 요소들을 배치시키기 위해서만 사용합니다.</p> +<p>Grid에는 table처럼 행으로 정렬되는 요소가 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 내부에는 사용되는 행과 열을 선언합니다. HTML의 table 처럼, 행 안에 라벨이나 버튼과 같은 내용을 넣을 수 있습니다. 그러나 grid는 행 또는 열 기반의 구조로 작성할 수 있어, 행이나 열 아무쪽에 내용을 포함할 수 있습니다. Table과 같이 행 기반으로 사용하는 것이 가장 일반적입니다. 행 기반으로 사용하더라도 격자 내 열의 크기와 모양을 설정하기 위해 열을 사용할 수 있습니다. 다른 방법으로는 열에 내용을 넣고, 모양은 행에서 설정할 수도 있습니다.</p> +<h4 id="Grid_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name="Grid_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">Grid 선언하기</h4> +<p>행 묶음을 선언하기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code></code> 태그를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>의 자식 요소로 사용해야 합니다. 이 요소 내부에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소를 추가해야 하며, 이는 각 행을 표현하기 위해 사용합니다. 행 내부에 넣고자 하는 내용은 row 요소 내에 두면 됩니다.</p> +<p>비슷하게 열 묶음은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code></code> 요소로 선언하고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>를 자식요소로 두어야 합니다. 이 요소 내에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소가 들어가게 되고, 각 요소는 격자 내의 각 열에 해당하게 됩니다.</p> +<p>예제를 통해 여태까지의 내용을 쉽게 이해하실 수 있을 것입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:grids1.png"></div> +<pre><grid flex="1"> + + <columns> + <column flex="2"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <button label="Rabbit"/> + <button label="Elephant"/> + </row> + <row> + <button label="Koala"/> + <button label="Gorilla"/> + </row> + </rows> + +</grid> +</pre> +<p>예제에는 격자에 2개의 행과 열이 추가되어 있습니다. 각각의 열은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 태그로 선언되어 있고 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 주어져 있습니다. 각 행은 두 개의 버튼 요소를 포함하고 있습니다. 각각의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소에 있는 첫 번째 버튼은 격자의 첫 번째 열에 위치하고 두 번째 버튼은 두 번째 열에 위치합니다. XUL의 grid에서는 방(cell)을 정의하는 요소가 존재하지 않습니다. 이는 HTML의 <code>td</code>와 같은 요소가 없다는 것을 의미합니다. 대신 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소에 내용을 직접 넣으면 됩니다.</p> +<h4 id=".EC.97.AC.EB.9F.AC.EA.B0.9C.EC.9D.98_.EC.9A.94.EC.86.8C.EB.A5.BC_.EA.B0.80.EC.A7.80.EB.8A.94_.EA.B2.A9.EC.9E.90" name=".EC.97.AC.EB.9F.AC.EA.B0.9C.EC.9D.98_.EC.9A.94.EC.86.8C.EB.A5.BC_.EA.B0.80.EC.A7.80.EB.8A.94_.EA.B2.A9.EC.9E.90">여러개의 요소를 가지는 격자</h4> +<p>당연히, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소의 위치에는 어떤 요소든 사용할 수 있습니다. 만일 특정 방에 여러개의 요소들을 넣고자 한다면, 중첩된 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>나 다른 상자 요소를 사용하면 됩니다. <code>hbox</code>는 단일 요소지만 내부에 원하는 만큼의 요소를 넣을 수 있습니다. 다음은 이러한 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul">View</a></p> +<pre><grid flex="1"> + + <columns> + <column/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label control="doctitle" value="Document Title:"/> + <textbox id="doctitle" flex="1"/> + </row> + <row> + <label control="docpath" value="Path:"/> + <hbox flex="1"> + <textbox id="docpath" flex="1"/> + <button label="Browse..."/> + </hbox> + </row> + </rows> + +</grid> +</pre> +<div class="float-right"> + <img alt="Image:grids2.png"></div> +<p>그림에서 라벨 요소를 포함하는 첫 번째 열에는 각 행별로 한개 요소씩만 있는 것을 볼 수 있습니다. 두 번째 열, 두 번째 행은 상자를 포함하며, 상자에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 두 가지 요소를 포함하고 있습니다. 여러분은 하나의 방안에 중첩된 상자나 다른 격자도 추가할 수 있습니다.</p> +<p>예제에서 창의 크기를 조절하면, 다른 요소들은 그대로이지만 글상자들의 크기만 변하는 것을 볼 수 있습니다. 이것은 글상자들과 두 번째 column 요소에 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 설정되어 있기 때문입니다. 라벨은 크기를 조절할 필요가 없기 때문에, 첫 번째 열에는 flex 속성을 지정할 필요가 없습니다.</p> +<p>열의 초기 넓이는 열에 있는 요소들 중 가장 큰 것에 의해 결정됩니다. 마찬가지로 행의 높이는 행에 있는 요소들의 크기에 의해 결정됩니다. 여러분은 격자의 크기를 좀 더 자세히 정의하기 위해 <code><code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code></code>와 <code><code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code></code>, 그리고 관련 속성을 사용할 수 있습니다.</p> +<h4 id=".EC.97.B4_.EA.B8.B0.EB.B0.98_.EA.B5.AC.EC.A1.B0" name=".EC.97.B4_.EA.B8.B0.EB.B0.98_.EA.B5.AC.EC.A1.B0">열 기반 구조</h4> +<p>행 대신에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소 내에 요소를 넣을 수 있습니다. 이렇게 할 경우, rows는 단지 행의 개수를 지정하기 위해서만 사용됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul">View</a></p> +<pre><grid> + <rows> + <row/> + <row/> + <row/> + </rows> + + <columns> + <column> + <label control="first" value="First Name:"/> + <label control="middle" value="Middle Name:"/> + <label control="last" value="Last Name:"/> + </column> + <column> + <textbox id="first"/> + <textbox id="middle"/> + <textbox id="last"/> + </column> + </columns> + +</grid> +</pre> +<p>이 격자는 3개의 행과 2개의 열을 가집니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소는 행이 필요로하는 공간을 확보하기 위해서 사용한 것입니다. 여러분은 행이 유연하게 동작하도록 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 추가할 수 있습니다. 내용은 각 열에 위치합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소 내에 있는 첫 번째 요소는 첫 번째 행에, 그리고 두 번째 요소는 두 번째 행에 그리고 세 번째 요소는 세 번째 행에 위치합니다.</p> +<p>만일 column과 row 양쪽 모두에 내용을 넣는다면, 동일한 위치에 있는 내용들은 중첩되어 출력됩니다. 이렇게 하면 격자 내에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 요소를 포함하는 것처럼 보입니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 태그 내 요소들의 순서는 어떤 것이 위에 출력되고 어떤 것이 아래에 놓이는지를 결정합니다. 만일 <code>rows</code> 요소가 <code>columns</code> 요소 다음에 위치하면, rows 안에 있는 내용이 상위에 표시되고, <code>columns</code> 요소가 <code>rows</code> 요소 다음에 오면, columns 내의 내용이 상위에 표시됩니다. 마찬가지로, 마우스 버튼과 키누름과 같은 이벤트는 맨 위에 있는 요소들에게만 전달됩니다. 이런 이유로 위의 예제에서는 행이 먼저 오고 다음에 열이 선언되었습니다. 만약 columns가 먼저 위치했다면, rows가 이벤트를 잡아채기 때문에 입력란에 아무것도 입력할 수 없게 됩니다.</p> +<h4 id=".EA.B2.A9.EC.9E.90.EC.9D.98_.EC.9C.A0.EC.97.B0.EC.84.B1" name=".EA.B2.A9.EC.9E.90.EC.9D.98_.EC.9C.A0.EC.97.B0.EC.84.B1">격자의 유연성</h4> +<p>중첩된 상자 대신 격자를 사용하면 수직, 수평 모두 유연한 공간을 만들 수 있는 장점이 있습니다. 이렇게 하기 위해서는 행과 열 모두에 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 설정하면 됩니다. 다음은 이러한 효과를 보여주는 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul">View</a></p> +<pre><grid flex="1"> + <columns> + <column flex="5"/> + <column/> + <column/> + </columns> + <rows> + <row flex="10"> + <button label="Cherry"/> + <button label="Lemon"/> + <button label="Grape"/> + </row> + <row flex="1"> + <button label="Strawberry"/> + <button label="Raspberry"/> + <button label="Peach"/> + </row> + </rows> +</grid> +</pre> +<p>예제에서 첫 번째 열과 두 개의 행이 유연하게 작성되었습니다. 이것은 첫 번째 열에 있는 모든 방이 가로 방향의 유연성을 가진다는 것을 의미합니다. 또한, 모든 행이 유연하도록 설정되어 모든 방은 세로 방향의 유연성을 가집니다. 첫 번째 행과 열에 해당하는 방(Cherry 버튼)은 가로 방향으로는 5만큼, 세로 방향으로는 10의 유연성을 가지며, 그 다음 방(Lemon 버튼)은 세로 방향으로만 유동적입니다.</p> +<p>또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 요소에도 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 설정되어 있기 때문에 전체 격자가 유연하며, 이렇지 않을 경우는 한 방향으로만 늘어나게 됩니다.</p> +<h3 id=".EC.97.B4_.EA.B1.B8.EC.B9.A8.28column_spanning.29" name=".EC.97.B4_.EA.B1.B8.EC.B9.A8.28column_spanning.29">열 걸침(column spanning)</h3> +<p>격자에는 몇 개의 행 또는 열을 병합한 방을 만들 수 있는 방법이 없습니다(<a> Discussion</a>에서 동일한 효과를 내기 위한 여러가지 방법을 볼 수 있습니다). 그러나 격자의 전체 높이나 너비 만큼에 걸치는 행이나 열을 만들 수는 있습니다. 이렇게 하기 위해서는 <code>row</code> 요소에 내용을 넣지 말고 그냥 <code>rows</code>요소에 내용을 넣으면 됩니다. 예를 들어 상자 타입의 요소를 사용할 수 있으며, 여러개의 요소들을 포함시키려면 상자 내에 다른 요소들을 넣으면 됩니다. 다음은 이러한 내용에 대한 간단한 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">View</a></p> +<pre><grid> + <columns> + <column flex="1"/> + <column flex="1"/> + </columns> + + <rows> + <row> + <label value="Northwest"/> + <label value="Northeast"/> + </row> + <button label="Equator"/> + <row> + <label value="Southwest"/> + <label value="Southeast"/> + </row> + </rows> +</grid> +</pre> +<p>버튼은 하나의 행에 포함되지 않아서 격자 전체 너비에 맞게 늘어날 것입니다. 여러분은 동일한 기법을 열에도 적용할 수 있습니다. 이 경우에는 격자의 전체 높이에 맞게 늘어나게 됩니다. 또한 만일 원한다면 행과 열 모두에도 사용할 수 있습니다.</p> +<p>다음에는 <a href="ko/XUL_Tutorial/Content_Panels">내용 패널</a>을 추가하는 것에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Tabboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Content_Panels">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html new file mode 100644 index 0000000000..02a3067646 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html @@ -0,0 +1,74 @@ +--- +title: Groupboxes +slug: Mozilla/Tech/XUL/XUL_Tutorial/Groupboxes +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements">다음 »</a></p> +</div><p></p> +<p>이 단원에서는 요소들을 그룹에 포함하는 방법에 대해 알아 보겠습니다.</p> +<h3 id=".EA.B7.B8.EB.A3.B9.EC.83.81.EC.9E.90" name=".EA.B7.B8.EB.A3.B9.EC.83.81.EC.9E.90">그룹상자</h3> +<p>HTML에서는 여러 가지 요소를 그룹핑하기 위한 목적으로 사용할 수 있는 <code>fieldset</code> 요소를 제공합니다. 이 때 요소들을 둘러 싸는 테두리가 생기기 때문에 각 요소가 서로 연관되어 있음을 알 수 있게 됩니다. 체크박스의 그룹이 하나의 예가 될 수 있습니다. XUL은 비슷한 기능을 위해 사용될 수 있는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> 요소를 제공합니다.</p> +<p>이름에서 알 수 있듯이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>는 상자의 한 형태입니다. 따라서 groupbox 내부의 요소들은 상자에 적용되는 규칙에 따라 정렬됩니다. 하지만 groupbox와 일반 상자 사이에는 다음의 두 가지 차이점이 있습니다.</p> +<ul> + <li>기본적으로 groupbox에는 둥근 사각형 테두리가 그려지며, CSS를 이용해서 이를 변경할 수 있습니다.</li> + <li>groupbox는 테두리의 위쪽에 제목(caption)을 넣을 수 있습니다.</li> +</ul> +<p>groupbox도 상자의 한 유형이기 때문에 상자에서 사용하는 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code>나 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>같은 속성을 사용할 수 있습니다. groupbox에는 어떤 요소들도 넣을 수 있지만, 보통 서로 관련된 요소들만 넣습니다.</p> +<p>groupbox의 위쪽 제목은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 요소를 사용해서 생성할 수 있습니다. caption은 HTML의 <code>legend</code> 요소와 비슷한 기능을 합니다. 제목을 넣을 때는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code>을 첫 번째 자녀 요소로 넣어 주면 됩니다.</p> +<h4 id=".EA.B0.84.EB.8B.A8.ED.95.9C_groupbox_.EC.98.88.EC.A0.9C" name=".EA.B0.84.EB.8B.A8.ED.95.9C_groupbox_.EC.98.88.EC.A0.9C">간단한 groupbox 예제</h4> +<p>아래는 간단한 groupbox 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:titledbox1.png"></div> +<pre><groupbox> + <caption label="Answer"/> + <description value="Banana"/> + <description value="Tangerine"/> + <description value="Phone Booth"/> + <description value="Kiwi"/> +</groupbox> +</pre> +<p>이 예제를 실행하면 네 개의 문자열을 둘러 싸는 + <i> + Answer</i> + 라는 제목을 가진 상자가 표시됩니다. groupbox의 정렬 속성은 세로 정렬이 기본이기 때문에 문자열이 세로로 차곡차곡 쌓이게 됩니다.</p> +<h4 id=".EC.A2.80_.EB.8D.94_.EB.B3.B5.EC.9E.A1.ED.95.9C_.EC.A0.9C.EB.AA.A9" name=".EC.A2.80_.EB.8D.94_.EB.B3.B5.EC.9E.A1.ED.95.9C_.EC.A0.9C.EB.AA.A9">좀 더 복잡한 제목</h4> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 요소에 자식 요소를 넣으면 더 다양한 기능을 구현할 수 있습니다. 예를 들어 모질라의 글꼴 설정 판넬은 펼침 메뉴(drop-down menu)를 제목으로 사용하고 있습니다. 자식 요소는 무엇이든 쓸 수 있지만 보통 체크박스나 펼침 메뉴가 사용됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul">View</a></p> +<div class="float-right"> + <img alt="Image:groupbox2.png"></div> +<pre><groupbox flex="1"> + <caption> + <checkbox label="Enable Backups"/> + </caption> + <hbox> + <label control="dir" value="Directory:"/> + <textbox id="dir" flex="1"/> + </hbox> + <checkbox label="Compress archived files"/> +</groupbox> +</pre> +<p>이 예제에서는 <a href="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">checkbox</a>가 제목으로 사용되었습니다. 스크립트를 사용하면 <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>의 선택 여부에 따라 groupbox의 내용을 사용 가능/불가로 전환할 수 있습니다. 이 groupbox는 수평 <code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> 하나를 갖고 있는데 그 안에는 <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>과 <code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>가 포함되어 있습니다. 글상자와 groupbox 둘 다 flex 속성이 적용되었기 때문에 창이 늘어나면 글상자도 함께 늘어납니다. 그 다음의 체크박스는 글상자의 아래에 표시되는데 이는 groupbox의 정렬 방식이 세로 정렬이기 때문입니다. 다음 단원에서는 파일 찾기 대화창에 groupbox를 넣어 보도록 하겠습니다.</p> +<h3 id=".EB.9D.BC.EB.94.94.EC.98.A4_.EA.B7.B8.EB.A3.B9" name=".EB.9D.BC.EB.94.94.EC.98.A4_.EA.B7.B8.EB.A3.B9">라디오 그룹</h3> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소를 사용하면 여러 개의 라디오 버튼을 하나로 묶을 수 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code>도 상자의 일종입니다. radiogroup은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 버튼을 다룰 수 있는 특수 기능 외에는 다른 상자와 다를 게 없기 때문에 안에 어떠한 요소를 넣어도 상관 없습니다.</p> +<p>radiogroup 안에 있는 라디오 버튼들은 그것들이 중첩된 상자내에 있더라도 모두 하나의 그룹이 됩니다. 이는 아래의 예제처럼 라디오 버튼으로 이루어진 구조에 다른 요소를 넣을 때 유용하게 사용될 수 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul">View</a></p> +<pre><radiogroup> + <radio id="no" value="no" label="No Number"/> + <radio id="random" value="random" label="Random Number"/> + <hbox> + <radio id="specify" value="specify" label="Specify Number:"/> + <textbox id="specificnumber"/> + </hbox> +</radiogroup> +</pre> +<p>한 가지 유의할 점은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소는 테두리가 생기지 않는다는 것입니다. 만약 테두리와 제목이 필요하다면 radiogroup을 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>에 포함시켜 사용하시면 됩니다.</p> +<p>다음에는, 지금까지 배워온 내용을 이용해서 <a href="ko/XUL_Tutorial/Adding_More_Elements">몇 가지 요소들을 파일 찾기 대화창에 추가해</a> 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/index.html new file mode 100644 index 0000000000..b069c217a0 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/index.html @@ -0,0 +1,132 @@ +--- +title: XUL Tutorial +slug: Mozilla/Tech/XUL/XUL_Tutorial +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +<p>이 튜토리얼은 XML 유저 인터페이스 언어(XML User-Interface Language)인 XUL 을 설명합니다. 이 언어는 모질라 응용프로그램(Application)을 만드는데 사용되며 특히 유저 인터페이스를 기술하는데 사용됩니다. +</p> +<div class="note"> +<p>본 XUL 튜토리얼 한국어 번역본은 <a class="external" href="http://softwant.com/cgi-bin/kimsboard/bbs.php3?table=xul">김재용, 김고명</a>님에 의해 최초로 작성되었으며 그는 고맙게도 본 튜토리얼을 <a>MDC 한국 프로젝트</a>의 일부로 사용할 수 있도록 허락해 주었습니다. 두 분의 최초 한국 번역본은 XULPlanet의 Neil Deakin 허락하에 번역되었습니다. +</p> +</div> +<h5 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94"> 개요 </h5> +<ul><li> <a href="ko/XUL_Tutorial/Introduction">개요</a> +</li><li> <a href="ko/XUL_Tutorial/XUL_Structure">XUL의 구조</a> +</li><li> <a href="ko/XUL_Tutorial/The_Chrome_URL">The Chrome URL</a> +</li><li> <a href="ko/XUL_Tutorial/Manifest_Files">Manifest Files</a> +</li></ul> +<h5 id=".EB.8B.A8.EC.88.9C_.EC.9A.94.EC.86.8C.EB.93.A4.28Simple_Elements.29" name=".EB.8B.A8.EC.88.9C_.EC.9A.94.EC.86.8C.EB.93.A4.28Simple_Elements.29"> 단순 요소들(Simple Elements) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Creating_a_Window">윈도우 만들기</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_Buttons">버튼 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_Labels_and_Images">레이블과 이미지 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Input_Controls">입력 컨트롤</a> +</li><li> <a href="ko/XUL_Tutorial/List_Controls">리스트 컨트롤</a> +</li><li> <a href="ko/XUL_Tutorial/Progress_Meters">진행 지시자(Progress Meters)</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_HTML_Elements">HTML 요소 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Using_Spacers">여백(Spacer) 사용하기</a> +</li><li> <a href="ko/XUL_Tutorial/More_Button_Features">그외의 버튼 기능들</a> +</li></ul> +<h5 id=".EB.B0.95.EC.8A.A4_.EB.AA.A8.EB.8D.B8.28The_Box_Model.29" name=".EB.B0.95.EC.8A.A4_.EB.AA.A8.EB.8D.B8.28The_Box_Model.29"> 박스 모델(The Box Model) </h5> +<ul><li> <a href="ko/XUL_Tutorial/The_Box_Model">박스 모델</a> +</li><li> <a href="ko/XUL_Tutorial/Element_Positioning">Element Positioning</a> +</li><li> <a href="ko/XUL_Tutorial/Box_Model_Details">박스 모델의 세부항목</a> +</li><li> <a href="ko/XUL_Tutorial/Groupboxes">그룹 박스(Groupboxes)</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_More_Elements">그외의 요소들 추가하기</a> +</li></ul> +<h5 id=".EB.8D.94.EC.9A.B1_.EB.8B.A4.EC.96.91.ED.95.9C_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.9A.94.EC.86.8C.EB.93.A4.28More_Layout_Elements.29" name=".EB.8D.94.EC.9A.B1_.EB.8B.A4.EC.96.91.ED.95.9C_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.9A.94.EC.86.8C.EB.93.A4.28More_Layout_Elements.29"> 더욱 다양한 레이아웃 요소들(More Layout Elements) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Stacks_and_Decks">스택과 덱(Stacks and Decks)</a> +</li><li> <a href="ko/XUL_Tutorial/Stack_Positioning">스택 포지셔닝(Stack Positioning)</a> +</li><li> <a href="ko/XUL_Tutorial/Tabboxes">탭박스(Tabboxes)</a> +</li><li> <a href="ko/XUL_Tutorial/Grids">그리드(Grids)</a> +</li><li> <a href="ko/XUL_Tutorial/Content_Panels">컨텐츠 패널(Content Panels)</a> +</li><li> <a href="ko/XUL_Tutorial/Splitters">스플릿터(Splitters)</a> +</li><li> <a href="ko/XUL_Tutorial/Scroll_Bars">스크롤바(Scroll Bars)</a> +</li></ul> +<h5 id=".ED.88.B4.EB.B0.94.EC.99.80_.EB.A9.94.EB.89.B4.28Toolbars_and_Menus.29" name=".ED.88.B4.EB.B0.94.EC.99.80_.EB.A9.94.EB.89.B4.28Toolbars_and_Menus.29"> 툴바와 메뉴(Toolbars and Menus) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Toolbars">툴바(Toolbars)</a> +</li><li> <a href="ko/XUL_Tutorial/Simple_Menu_Bars">단순 메뉴바(Simple Menu Bars)</a> +</li><li> <a href="ko/XUL_Tutorial/More_Menu_Features">다양한 메뉴 기능들</a> +</li><li> <a href="ko/XUL_Tutorial/Popup_Menus">팝업 메뉴(Popup Menus)</a> +</li><li> <a href="ko/XUL_Tutorial/Scrolling_Menus">스크롤링 메뉴(Scrolling Menus)</a> +</li></ul> +<h5 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.99.80_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28Events_and_Scripts.29" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.99.80_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28Events_and_Scripts.29"> 이벤트와 스크립트(Events and Scripts) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Adding_Event_Handlers">이벤트 핸들러 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/More_Event_Handlers">더욱 다양한 이벤트 핸들러</a> +</li><li> <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">단축키(Keyboard Shortcuts)</a> +</li><li> <a href="ko/XUL_Tutorial/Focus_and_Selection">포커스(Forcus)와 선택(Selection)</a> +</li><li> <a href="ko/XUL_Tutorial/Commands">Commands</a> +</li><li> <a href="ko/XUL_Tutorial/Updating_Commands">Updating Commands</a> +</li><li> <a href="ko/XUL_Tutorial/Broadcasters_and_Observers">Broadcasters and Observers</a> +</li></ul> +<h5 id=".EB.AC.B8.EC.84.9C_.EA.B0.9D.EC.B2.B4_.EB.AA.A8.EB.8D.B8.28Document_Object_Model.29" name=".EB.AC.B8.EC.84.9C_.EA.B0.9D.EC.B2.B4_.EB.AA.A8.EB.8D.B8.28Document_Object_Model.29"> 문서 객체 모델(Document Object Model) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Document_Object_Model">문서 객체 모델(Document Object Model)</a> +</li><li> <a href="ko/XUL_Tutorial/Modifying_a_XUL_Interface">XUL 인터페이스 수정하기</a> +</li><li> <a href="ko/XUL_Tutorial/Manipulating_Lists">리스트 다루기</a> +</li><li> <a href="ko/XUL_Tutorial/Box_Objects">박스 객체(Box Objects)</a> +</li><li> <a href="ko/XUL_Tutorial/XPCOM_Interfaces">XPCOM 인터페이스</a> +</li><li> <a href="ko/XUL_Tutorial/XPCOM_Examples">XPCOM 예제</a> +</li></ul> +<h5 id=".ED.8A.B8.EB.A6.AC.28Trees.29" name=".ED.8A.B8.EB.A6.AC.28Trees.29"> 트리(Trees) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Trees">트리(Trees)</a> +</li><li> <a href="ko/XUL_Tutorial/More_Tree_Features">더욱 많은 트리기능들</a> +</li><li> <a href="ko/XUL_Tutorial/Tree_Selection">Tree Selection</a> +</li><li> <a href="ko/XUL_Tutorial/Custom_Tree_Views">사용자 트리뷰(Custom Tree Views)</a> +</li><li> <a href="ko/XUL_Tutorial/Tree_View_Details">트리뷰의 세부사항</a> +</li><li> <a href="ko/XUL_Tutorial/Tree_Box_Objects">트리 박스 객체(Tree Box Objects)</a> +</li></ul> +<h5 id="RDF_.EC.99.80_.ED.85.9C.ED.94.8C.EB.A6.BF.28Templates.29" name="RDF_.EC.99.80_.ED.85.9C.ED.94.8C.EB.A6.BF.28Templates.29"> RDF 와 템플릿(Templates) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Introduction_to_RDF">RFD의 개요</a> +</li><li> <a href="ko/XUL_Tutorial/Templates">템플릿(Templates)</a> +</li><li> <a href="ko/XUL_Tutorial/Trees_and_Templates">트리와 템플릿(Trees and Templates)</a> +</li><li> <a href="ko/XUL_Tutorial/RDF_Datasources">RDF 데이터소스(RDF Datasources)</a> +</li><li> <a href="ko/XUL_Tutorial/Advanced_Rules">고급 규칙(Advanced Rules)</a> +</li><li> <a href="ko/XUL_Tutorial/Persistent_Data">영속 데이터(Persistent Data)</a> +</li></ul> +<h5 id=".EC.8A.A4.ED.82.A8.EA.B3.BC_.EC.A7.80.EC.97.AD.ED.99.94.28Skins_and_Locales.29" name=".EC.8A.A4.ED.82.A8.EA.B3.BC_.EC.A7.80.EC.97.AD.ED.99.94.28Skins_and_Locales.29"> 스킨과 지역화(Skins and Locales) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일 시트 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Styling_a_Tree">트리 꾸미기</a> +</li><li> <a href="ko/XUL_Tutorial/Modifying_the_Default_Skin">기본 스킨 고치기</a> +</li><li> <a href="ko/XUL_Tutorial/Creating_a_Skin">스킨 만들기</a> +</li><li> <a href="ko/XUL_Tutorial/Localization">지역화</a> +</li><li> <a href="ko/XUL_Tutorial/Property_Files">설정 파일</a> +</li></ul> +<h5 id="Bindings" name="Bindings"> Bindings </h5> +<ul><li> <a href="ko/XUL_Tutorial/Introduction_to_XBL">XBL의 개요</a> +</li><li> <a href="ko/XUL_Tutorial/Anonymous_Content">익명 컨텐츠(Anonymous Content)</a> +</li><li> <a href="ko/XUL_Tutorial/XBL_Attribute_Inheritance">XBL 속성 상속</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_Properties_to_XBL-defined_Elements">속성 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_Methods_to_XBL-defined_Elements">메소드 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">이벤트 핸들러 추가하기</a> +</li><li> <a href="ko/XUL_Tutorial/XBL_Inheritance">XBL 상속</a> +</li><li> <a href="ko/XUL_Tutorial/XBL_Example">XBL 예제</a> +</li></ul> +<h5 id="Specialized_Window_Types" name="Specialized_Window_Types"> Specialized Window Types </h5> +<ul><li> <a href="ko/XUL_Tutorial/Features_of_a_Window">Features of a Window</a> +</li><li> <a href="ko/XUL_Tutorial/Creating_Dialogs">다이얼로그 만들기</a> +</li><li> <a href="ko/XUL_Tutorial/Open_and_Save_Dialogs">Open and Save Dialogs</a> +</li><li> <a href="ko/XUL_Tutorial/Creating_a_Wizard">Creating a Wizard</a> +</li><li> <a href="ko/XUL_Tutorial/More_Wizards">More Wizards</a> +</li><li> <a href="ko/XUL_Tutorial/Overlays">Overlays</a> +</li><li> <a href="ko/XUL_Tutorial/Cross_Package_Overlays">Cross Package Overlays</a> +</li></ul> +<h5 id=".EC.84.A4.EC.B9.98.28Installation.29" name=".EC.84.A4.EC.B9.98.28Installation.29"> 설치(Installation) </h5> +<ul><li> <a href="ko/XUL_Tutorial/Creating_an_Installer">인스톨러 생성하기</a> +</li><li> <a href="ko/XUL_Tutorial/Install_Scripts">설치 스크립트</a> +</li><li> <a href="ko/XUL_Tutorial/Additional_Install_Features">추가적인 설치 기능들</a> +</li></ul> +<div class="note"> +<p>본 XUL 튜토리얼은 본래 <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>에 의해 작성되었으며 그는 고맙게도 본 튜토리얼을 <a>MDC</a>의 일부로 사용할 수 있도록 허락해 주었습니다. +</p> +</div> +<div class="originaldocinfo"> +<h5 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4"> 원본 문서 정보 </h5> +<ul><li> 저자: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a> +</li><li> 최종 업데이트: 2005년 6월 3일 +</li><li> 저작권 정보 : © 1999-2005 XULPlanet.com +</li></ul> +</div> +<p><span class="comment">Interwiki Language Links</span> +</p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html new file mode 100644 index 0000000000..df96b700f3 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html @@ -0,0 +1,110 @@ +--- +title: Input Controls +slug: Mozilla/Tech/XUL/XUL_Tutorial/Input_Controls +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:List_Controls">다음 »</a></p> +</div><p></p> +<p>XUL은 HTML의 <a href="ko/DOM/form">form</a> 컨트롤과 비슷한 요소들을 가지고 있습니다.</p> +<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.9E.85.EB.A0.A5_.EC.BB.A8.ED.8A.B8.EB.A1.A4" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.9E.85.EB.A0.A5_.EC.BB.A8.ED.8A.B8.EB.A1.A4">텍스트 입력 컨트롤</h3> +<p>HTML은 텍스트 입력 컨트롤로 사용할 수 있는 input 요소를 가집니다. XUL 또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>라고 하는 텍스트를 입력하는데 사용되는 비슷한 요소를 가지고 있습니다. 아무런 속성이 지정되어 있지 않으면 <code>textbox</code> 요소는 사용자가 텍스트를 입력할 수 있는 상자를 만들어 냅니다. Textbox는 HTML의 input 컨트롤과 많은 동일한 속성을 사용할 수 있습니다. 다음은 속성들의 일부입니다.</p> +<dl> + <dt> + <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> + <dd> + Textbox를 실별하는데 사용할 수 있는 유일식별자(unique identifier) 입니다.</dd> + <dt> + <code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt> + <dd> + Textbox의 스타일 클래스 입니다.</dd> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt> + <dd> + Textbox의 기본 텍스트를 지정하고 싶으면, 이 속성값에 적용하면 됩니다.</dd> + <dt> + <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> + <dd> + 입력을 할 수 없게 하려면 이 속성을 <code>true</code>로 지정합니다.</dd> + <dt> + <code id="a-type"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> </dt> + <dd> + 입력한 텍스트를 숨기는 textbox를 만드려면 이 속성을 <code>password</code>라는 특별한 값으로 지정할 수 있습니다.</dd> + <dt> + <code id="a-maxlength"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code> </dt> + <dd> + Textbox에 입력할 수 있는 최대 문자수를 지정합니다.</dd> +</dl> +<p>HTML에서는 <code>input</code> 요소로 다양한 종류의 컨트롤 타입을 만들 수 있지만, XUL에서는 각 타입에 대응되는 별도의 요소가 있습니다.</p> +<p>다음은 몇 가지 textbox 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul">View</a></p> +<pre><label control="some-text" value="Enter some text"/> +<textbox id="some-text"/> +<label control="some-password" value="Enter a password"/> +<textbox id="some-password" type="password" maxlength="8"/> +</pre> +<h4 id=".EC.97.AC.EB.9F.AC.EC.A4.84.28multiline.29_textbox" name=".EC.97.AC.EB.9F.AC.EC.A4.84.28multiline.29_textbox">여러줄(multiline) textbox</h4> +<p>위의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 예제는 한줄짜리 텍스트만 입력하는데 사용할 수 있는 입력 컨트롤을 생성합니다. HTML에서는 더 많은 텍스트 입력 영역이 있는 <code>textarea</code> 요소가 존재합니다. XUL에서는 <code>textbox</code> 요소를 이러한 목적으로 사용할 수 있늡니다(서로 다른 두개 요소는 필요 없습니다). <code><code id="a-multiline"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></code>속성을 true로 지정하면 텍스트 입력 필드는 다중 행을 표시합니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">View</a></p> +<pre><textbox multiline="true" + value="This is some text that could wrap onto multiple lines."/> +</pre> +<p>HTML의 <code>textarea</code>처럼, 크기를 지정하기 위해 <code>rows</code>와 <code>cols</code>를 사용할 수 있습니다. 이 속성들은 출력될 문자의 행과 열수를 지정합니다.</p> +<div class="highlight"> + <h4 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h4> + <p>이제 파일 찾기 대화상자에 검색을 위한 입력 필드를 추가합니다. <code>Textbox</code> 요소를 사용할 것입니다.</p> + <pre class="eval"><span class="highlightred"><label value="Search for:" control="find-text"/></span> +<span class="highlightred"><textbox id="find-text"/></span> + +<button id="find-button" label="Find"/> +</pre> + <div class="float-right"> + <img alt="Image:inputs1.png"></div> + <p>앞선 섹션에서 만든 버튼 앞 부분에 위의 코드를 추가하세요. 창을 열면, 이미지와 같이 보일 것입니다.</p> + <p>라벨과 텍스트 input 필드가 윈도우에 출력됩니다. 텍스트박스는 완전히 작동하며 텍스트를 입력하거나 선택할 수 있습니다. 예제에서 라벨의 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 사용되어서 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>이 클릭되면 텍스트 박스가 선택됩니다.</p> +</div> +<h3 id=".EC.B2.B4.ED.81.AC.EB.B0.95.EC.8A.A4.EC.99.80_.EB.9D.BC.EB.94.94.EC.98.A4_.EB.B2.84.ED.8A.BC" name=".EC.B2.B4.ED.81.AC.EB.B0.95.EC.8A.A4.EC.99.80_.EB.9D.BC.EB.94.94.EC.98.A4_.EB.B2.84.ED.8A.BC">체크박스와 라디오 버튼</h3> +<p>체크박스와 라디오 버튼을 만들기 위해서는 두 개의 추가적인 요소를 사용합니다. 이것들은 버튼의 일종입니다. 체크박스 요소는 가능 또는 불가능될 수 있는 옵션을 위해 사용할 수 있습니다. 라디오 버튼은 비슷한 목적으로 사용할 수 있는 것으로 여러개의 항목 중 하나만 선택할 수 있을 때 사용합니다.</p> +<p>체크박스와 라디오 버튼은 버튼과 대부분 동일한 속성을 사용합니다. 아래 예제는 간단한 체크박스와 라디오 버튼을 보여줍니다.</p> +<pre><checkbox id="case-sensitive" checked="true" label="Case sensitive"/> +<radio id="orange" label="Orange"/> +<radio id="violet" selected="true" label="Violet"/> +<radio id="yellow" label="Yellow"/> +</pre> +<p>첫번째 줄에서는 간단한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code>를 생성합니다. 사용자가 체크박스를 클릭하면 선택 또는 선택되지 않은 상태를 교환합니다. <code><code id="a-checked"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 속성은 처음 상태를 나타내기 위해 사용할 수 있습니다. 이것은 <code>true</code>또는 <code>false</code>로 지정되어야 합니다. <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성은 체크박스 옆에 출력될 라벨을 지정하기 위해 사용합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 버튼에서는 <code><code id="a-checked"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 속성 대신 <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code>를 사용해야 합니다. 라디오 버튼이 처음 선택된 상태로 마들기 위해서는 <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code>을 <code>true</code>로 설정하세요.</p> +<h4 id=".EB.9D.BC.EB.94.94.EC.98.A4.EA.B7.B8.EB.A3.B9_.EC.9A.94.EC.86.8C" name=".EB.9D.BC.EB.94.94.EC.98.A4.EA.B7.B8.EB.A3.B9_.EC.9A.94.EC.86.8C">라디오그룹 요소</h4> +<p>라디오 버튼들을 그룹짖기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소를 사용할 필요가 있습니다. 라디오 그룹내에 있는 라디오 버튼들 중 하나만 선택할 수 있습니다. 하나를 선택하면 같은 그룹 내의 다른 것들은 모두 꺼지게 됩니다. 다음 예제는 이러한 내용을 보여줍니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">View</a></p> +<pre><radiogroup> + <radio id="orange" label="Orange"/> + <radio id="violet" selected="true" label="Violet"/> + <radio id="yellow" label="Yellow"/> +</radiogroup> +</pre> +<h4 id=".EC.86.8D.EC.84.B1" name=".EC.86.8D.EC.84.B1">속성</h4> +<p>버튼처럼, 체크박스와 라디오 버튼들도 라벨과 이미지로 구성되며, 버튼들이 눌러졌을 때체크된 상태와 체크되지 않은 상태의 이미지가 바뀌어집니다. 체크 박스는 버튼과 많은 동일한 속성을 가집니다.</p> +<dl> + <dt> + <code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt> + <dd> + 체크 박스나 라디오 버튼의 라벨를 설정합니다.</dd> + <dt> + <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt> + <dd> + 체크 박스나 라디오 버튼을 가능 또는 불가능 하게 하기 위해서 본 속성을 <code>true</code>나 <code>false</code>로 설정하세요.</dd> + <dt> + <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt> + <dd> + 요소를 선택할 때 사용하는 단축키입니다. 여기에 지정된 문자는 보통 라벨에 아랫줄을 그어 출력합니다.</dd> +</dl> +<div class="highlight"> + <p><span id="%EC%97%AC%EA%B8%B0%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%97%AC%EA%B8%B0%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>여기까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">View</a></p> +</div> +<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/List_Controls">리스트 박스 만들기</a>를 위한 몇 가지 요소들에 대해 알아볼 것입니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:List_Controls">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html new file mode 100644 index 0000000000..50308acfc9 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html @@ -0,0 +1,38 @@ +--- +title: Introduction +slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure">다음 »</a></p> +</div><p></p> +<p>이 설명서는 <abbr title="XML User Interface Language">XUL</abbr>(XML 사용자 인터페이스 언어)를 배우는 데 도움을 주기 위한 것입니다. XUL은 응용 프로그램의 사용자 인터페이스를 작성하는 데 쓰이는 크로스 플랫폼 언어입니다.</p> +<p>이 설명서는 매킨토시의 셜록이나 윈도우의 검색 대화상자처럼 파일 찾기 기능을 갖춘 간단한 사용자 인터페이스를 만드는 방법을 설명해나갈 것입니다. 하지만 다루는 내용은 사용자 인터페이스를 만들고 몇 가지 기능을 추가하는 것으로 제한할 것입니다. 실제로 파일을 찾는 기능에 대한 설명은 제공되지 않습니다. 문서 왼쪽에 파란선이 나타나는 문단은 파일 찾기 대화상자가 수정되는 부분입니다. 이러한 문단을 따라가면 우리가 원하는 사용자 인터페이스가 완성됩니다.</p> +<h3 id="XUL.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B4.EB.A9.B0_.EC.99.9C_.EB.A7.8C.EB.93.A4.EC.96.B4.EC.A1.8C.EB.8A.94.EA.B0.80.3F" name="XUL.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B4.EB.A9.B0_.EC.99.9C_.EB.A7.8C.EB.93.A4.EC.96.B4.EC.A1.8C.EB.8A.94.EA.B0.80.3F">XUL은 무엇이며 왜 만들어졌는가?</h3> +<p>XUL(cool의 리듬으로 줄(zool)이라고 발음합니다)은 더 쉽고 빠르게 모질라 브라우저 개발을 하기 위해 만들어졌습니다. <abbr title="Extensible Markup Language">XML</abbr> 언어이기 때문에 XML에서 사용할 수 있는 모든 기능은 XUL에서도 사용할 수 있습니다.</p> +<p>응용 프로그램을 개발할 때 특정 플랫폼의 기능을 사용해야 하는 경우가 많기 때문에 크로스 플랫폼 소프트웨어를 만드는 데는 많은 시간과 비용이 필요합니다. 그래서 오래 전부터 크로스 플랫폼 개발 도구가 개발되고 있습니다. 예를 들어, 자바는 이식성을 가장 큰 장점으로 내세우고 있습니다. XUL도 이식 가능한 사용자 인터페이스를 만들기 위해 고안된 언어입니다. 한 플랫폼에 맞추어 응용 프로그램을 개발하는 데에도 많은 시간이 걸립니다. 컴파일을 하고 디버그를 하는 과정이 매우 길어질 수도 있습니다. 하지만, XUL을 사용하면 빠르고 쉽게 인터페이스를 만들고 수정할 수 있습니다.</p> +<p>XUL은 다른 XML 언어의 장점을 모두 갖추고 있습니다. 예를 들어 XHTML이나 <abbr title="Math Markup Language">MathML</abbr>, <abbr title="Scalable Vector Graphics">SVG</abbr> 같은 XML 언어를 XUL 안에 삽입할 수 있습니다. 그리고 XUL에 사용된 문구는 쉽게 현지화할 수 있기 때문에 번역 작업이 수월합니다.</p> +<h3 id="XUL.EB.A1.9C_.EB.A7.8C.EB.93.A4_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="XUL.EB.A1.9C_.EB.A7.8C.EB.93.A4_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">XUL로 만들 수 있는 사용자 인터페이스는 무엇인가?</h3> +<p>XUL은 다양한 기능을 제공하여 세련된 그래픽 인터페이스를 만들 수 있게 해줍니다. 예를 들어 아래와 같은 엘리먼트를 만들 수 있습니다.</p> +<ul> <li>텍스트박스, 체크박스 같은 입력 컨트롤</li> <li>버튼 등의 기능을 갖춘 도구막대</li> <li>메뉴 막대나 팝업 메뉴에 사용되는 메뉴 항목</li> <li>탭으로 이루어진 대화상자</li> <li>상하 관계나 표를 나타내는 트리</li> <li>키보드 단축글쇠</li> +</ul> +<p>화면에 표시되는 내용은 XUL 파일 내부의 내용이나 데이터소스에 있는 자료를 이용하여 만들어집니다. 모질라에서는 사용자의 편지함, 북마크, 검색 결과 등도 데이터소스로 사용할 수 있습니다. 메뉴나 트리 같은 엘리먼트에 내용을 넣을 때에는 이런 자료뿐만 아니라 원하는 내용을 직접 <abbr title="Resource Description Framework">RDF</abbr> 파일로 작성하여 사용할 수도 있습니다.</p> +<p>XUL은 다음과 같이 사용할 수 있습니다.</p> +<ul> <li>파이어폭스 확장 기능 -- 확장 기능은 브라우저에 새로운 기능을 넣는 프로그램입니다. 확장 기능은 도구 막대나 상황 메뉴에 새로운 도구를 넣기도 하고 브라우저의 사용자 인터페이스를 변화시키기도 합니다. 이러한 작업은 XUL이 제공하는 오버레이 기능을 통해 이루어지는데, 이렇게 하면 확장 기능에 제시된 사용자 인터페이스를 파이어폭스 브라우저의 사용자 인터페이스와 합칠 수 있습니다. 확장 기능은 썬더버드 등 다른 모질라 제품에도 적용될 수 있습니다.</li> <li>독립된 XULRunner 응용 프로그램 -- XULRunner는 모질라 플랫폼을 패키지화한 것으로, 이를 이용하면 독립된 XUL 응용 프로그램을 만들 수 있습니다. 이렇게 만들어진 프로그램은 실행 파일을 갖고 있기 때문에 브라우저가 없이도 실행할 수 있습니다.</li> <li>XUL 꾸러미 -- 확장 기능과 XULRunner 응용 프로그램의 중간에 위치한 단계입니다. 확장 기능처럼 만들어지지만 독립된 창에서 실행되어 독립된 응용 프로그램처럼 작동합니다. 대용량의 XULRunner를 포함하지 않는대신, 사용자가 필요에 따라 모질라 브라우저를 설치해야 합니다.</li> <li>원격 XUL 응용 프로그램 -- XUL 코드를 웹 서버에 저장하여 브라우저에서 열게 하면 일반 웹 문서처럼 작동합니다. 하지만 다른 창을 여는 등 일부 기능은 보안과 관련된 문제 때문에 사용할 수 없습니다.</li> +</ul> +<p>앞의 세 가지는 실행하기 전에 사용자의 컴퓨터에 설치를 해야 합니다. 하지만, 이들은 보안과 관련된 제약이 없기 때문에 하드디스크의 파일에 접근하거나 사용자의 환경 설정을 읽고 바꾸는 것과 같은 작업도 할 수 있습니다. 확장 기능은 XUL 파일을 비롯한 스크립트, 그림 파일 등이 하나의 파일로 압축되어 제공되는데 사용자는 이를 내려 받아 설치할 수 있습니다. 파이어폭스 등의 모질라 응용 프로그램은 사용자가 손쉽게 확장 기능을 설치할 수 있도록 확장 기능 관리자를 제공합니다.</p> +<p>XUL 파일을 하드 디스크나 웹 사이트에서 바로 열 수도 있습니다. 하지만, 이 경우에는 사용할 수 있는 기능에 제약이 있고 XUL의 일부 기능이 바르게 작동하지 않을 수 있습니다. XUL로 작성된 프로그램이 웹 사이트를 통해 열리게 하려면, 웹 서버가 XUL 파일을 "application/vnd.mozilla.xul+xml" 컨텐트 타입으로 전송하도록 설정하여야 합니다. XUL은 보통 확장자가 <code>.xul</code>인 파일에 저장됩니다. 모질라에서는 다른 파일을 열 때처럼 파일 메뉴 아래의 파일 열기를 이용하거나 주소 막대에 직접 URL을 입력하여서도 XUL 파일을 열 수 있습니다.</p> +<h3 id=".EC.9D.B4_.EC.84.A4.EB.AA.85.EC.84.9C.EB.A5.BC_.EC.9D.BD.EA.B8.B0_.EC.9C.84.ED.95.B4_.EC.95.8C.EC.95.84.EC.95.BC.ED.95.A0_.EA.B2.83.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name=".EC.9D.B4_.EC.84.A4.EB.AA.85.EC.84.9C.EB.A5.BC_.EC.9D.BD.EA.B8.B0_.EC.9C.84.ED.95.B4_.EC.95.8C.EC.95.84.EC.95.BC.ED.95.A0_.EA.B2.83.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">이 설명서를 읽기 위해 알아야할 것은 무엇인가?</h3> +<p><abbr title="HyperText Markup Language">HTML</abbr>과 XML, <abbr title="Cascading Style Sheets">CSS</abbr>에 대한 기본적인 지식이 필요합니다. 다음 사항을 항상 기억하시기 바랍니다.</p> +<ul> <li>XUL 엘리먼트와 속성은 반드시 소문자로 입력해야 합니다. 왜냐하면 XML은 대소문자를 구분하기 때문입니다. (HTML은 그렇지 않습니다.)</li> <li>속성값은 반드시 인용 부호 안에 입력해야 합니다. 숫자도 예외가 아닙니다.</li> <li>XUL 파일은 보통 네 파일로 나뉘어지는데, 각각 레이아웃과 엘리먼트를 정의한 파일, 스타일을 선언한 파일, 현지화에 사용되는 엔티티를 선언한 파일, 스크립트 파일입니다. 여기에 그림 파일이나 특정 플랫폼을 위한 자료가 추가될 수 있습니다.</li> +</ul> +<p>XUL은 모질라와 그에 바탕한 브라우저(네스케이프 6 이상 그리고 모질라 Firefox)에서 지원됩니다. XUL 구문은 오랜 시간동안 여러 변화가 있었기 때문에, 올바르게 작동할 수 있는 최신의 사례를 보았으면 할 것입니다. 대부분의 사례는 모질라 1.0 이상에서 작동합니다.</p> +<p>파이어폭스 등의 브라우저에서 작동하는 XUL도 이와 매우 비슷하지만, 도구 막대 편집 기능 등 각 브라우저에 특화된 기능을 갖추고 있습니다.</p> +<p>이 설명서는 XUL의 다양한 기능을 설명할 것이지만 모든 기능을 다루지는 않을 것입니다. XUL에 어느 정도 익숙해진 후에 특정 엘리먼트가 지원하는 기능들을 살펴보고 싶으면 <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL Reference</a>를 이용하시기 바랍니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html new file mode 100644 index 0000000000..c584671798 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html @@ -0,0 +1,74 @@ +--- +title: Introduction to RDF +slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction_to_RDF +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF +--- +<p>이 장에서는 RDF ( Resource Description Framework )에 대해 살펴봅니다.</p> +<h3 id="Resource_Description_Framework" name="Resource_Description_Framework">Resource Description Framework</h3> +<p>북마크나 메일 메세지등과 같은 데이터의 집합을 표시하는 목적으로 트리 요소를 사용할 수 있습니다. 그렇지만, XUL 파일에 직접 데이터를 넣는것은 귀찮은 일입니다. 북마크가 직접 XUL 파일에 쓰여져 있다고 한다면 그 변경은 어려운 것이 됩니다. 그래서 이것을 해결하는 방법은 RDF 데이터소스를 이용하는 것입니다.</p> +<p>RDF ( Resource Description Framework )란 북마크나 메일등의 리소스를 저장하기 위한 형식입니다. 다른 방법으로서 다른 형식의 데이터를 이용해 그 파일로부터 RDF 데이터를 생성하는 코드가 쓰여져 있는 경우도 있습니다. 이것이 Mozilla 가 북마크나 히스토리, 메일 메세지등의 데이터를 읽어들일 때 가고 있는 방법입니다. 개발자에게 편의를 도모하기 위해서 Mozilla 는 이러한 공통되어 이용되는 데이터를 위한 데이터소스를 제공합니다.</p> +<p>Mozilla 가 제공하고 있는 어느 RDF 데이터 소스도 데이터로부터의 트리 생성에 이용할 수 있거나 데이터를 포함한 XML 로서 보존하고 있는 RDF 파일을 참조할 수도 있습니다. 이것에 의해 여러 줄이 있는 트리의 표시가 매우 편해집니다. RDF 는 리스트 박스나 메뉴등이 같은 다른 요소에 있어서의 생성에도 이용할 수 있습니다. 이것에 대해서는 다음 절에서 다룹니다.</p> +<p>여기에서는 RDF 에 대해 아주 대략적으로 설명합니다. RDF 에 대한 자세한 안내는 RDF 모델 입문을 읽어 바랍니다. RDF 에 처음으로 접한다면 이 안내를 읽는 것을 추천합니다. RDF/XML 파일의 몇개의 예는 Mozilla 가 제공하고 있는 것을 보면 좋을 것입니다. RDF/XML 파일의 확장자(extension)는 rdf 입니다.</p> +<p>RDF 는 그래프 구조로 표현되는 데이터의 모델로부터 됩니다. RDF/XML 는 RDF 데이터를 표현하기 위해서 이용되는 XML 언어입니다. 그것은 필요 충분한 단순한 요소로 설정 됩니다. 아래에 간단한 RDF 의 구조를 나타냅니다.</p> +<pre><? xml version="1.0"? > +<RDF:RDF + xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + ... +</RDF:RDF> +</pre> +<p>이것은 XUL 의 헤더와 닮아 있습니다. window 요소 대신에 RDF 요소가 이용되고 있습니다. RDF 의 요소가 올바르게 인식되도록하기 위해서 RDF 의 네임스페이스가 선언되고 있는 것이 알 수 있네요. RDF 요소의 안쪽에 데이터를 기술합니다.</p> +<p>여기에서는 RDF 에 대해 매우 간단하게 설명합니다. 보다 자세한 것은 RDF 사양을 참조해 주세요. 예로 RDF 로부터 생성되는 북마크의 리스트에 대해 보겠습니다. 북마크의 리스트는 레코드의 집합을 포함하고 있어 각각에는 URL, 타이틀, 방문일등의 일련의 데이터가 주어지고 있습니다.</p> +<p>북마크는 얼마든지의 필드로부터 되는 거대한 테이블로서 보존되고 있는 데이타베이스의 일종이라고 생각합니다. 다만, RDF 에서는 리스트는 동시에 계층적으로도 될 수 있습니다. 이것은 북마크를 폴더 마다 정리하거나 종류별 정리하기 위해서 필요한 일입니다. RDF 데이타베이스내의 각 필드는 첨부이름의 리소스입니다. 이름은 URI 로 기술됩니다.</p> +<p>예를 들면, Mozilla 의 북마크 리스트에 있어서의 필드의 몇개인가는 아래에 URI 로 기술되고 있습니다.</p> +<pre>Name http://home.netscape.com/NC-rdf#Name 북마크명 +URL http://home.netscape.com/NC-rdf#URL 링크 URL +Description http://home.netscape.com/NC-rdf#Description 북마크의 설명 +Last Visited http://home.netscape.com/WEB-rdf#LastVisitDate 최종 방문일 +</pre> +<p>이것들은 네임스페이스명으로 얘기되는 필드명으로부터 생성됩니다. 다음 절에서는 이것들을 사용해 필드의 값을 자동 생성시키는 방식에 대해 보고 갑니다. 최종 방문일은 다른 3개의 필드와 조금 다른 네임스페이스가 되어 있는 것에 주의해 주세요.</p> +<p>아래에 3개의 레코드와 3개의 필드를 가지는 RDF/XML 의 예를 나타냅니다.</p> +<pre><RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"> + + <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"> + <ANIMALS:name>Lion</ANIMALS:name> + <ANIMALS:species>Panthera leo</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> + <ANIMALS:name>Tarantula</ANIMALS:name> + <ANIMALS:species>Avicularia avicularia</ANIMALS:species> + <ANIMALS:class>Arachnid</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> + <ANIMALS:name>Hippopotamus</ANIMALS:name> + <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + </RDF:Seq> +</RDF:RDF> +</pre> +<p>여기에서는 각 동물( animal )에 대응해 3개의 레코드가 선언되고 있습니다. 각 RDF:Description 태그가 하나의 레코드를 나타냅니다. 각각의 레코드의 내부에는 3개의 필드： name, species, class 가 기술되고 있습니다. 모든 레코드가 같은 필드에서 구성되어 있지 않으면 안 되는 것은 아닙니다만, 그렇게 하는 편이 보다 자연스럽습니다.</p> +<p>3개의 필드 각각 네임스페이스로서 ANIMALS 가 주어지고 있어 ANIMALS 의 URL 는 RDF 태그내에서 선언되고 있습니다. 이름은 이유가 적당하게 선택한 것만으로 있지만 무엇이든 다른 이름이라도 괜찮습니다. 네임스페이스의 이용은 class 필드가 스타일의 필드와 충돌하지 않게 하는 것에 도움이 되고 있습니다.</p> +<p>Seq 요소와 li 요소는 레코드의 리스트를 지정하기 위해서 이용하는 것입니다. 이것은 HTML 의 리스트의 선언과 잘 닮은 것입니다. Seq 요소는 요소가 순서로 나타내질 수 있는 것을 나타냅니다. 순서를 가지지 않는 경우는 Seq 요소 대신에 Bag 요소를 이용합니다. Alt 요소를 이용하면 데이터의 각 레코드가(미러 URL 등의) 대체값을 지정하고 있는 것을 지시할 수가 있습니다.</p> +<p>네임스페이스 URL 와 거기에 계속되는 필드명에 의해 XUL 파일내의 리소스를 참조할 수가 있습니다. 위의 예에서는 다음에 특정 필드의 참조에 이용할 수 있는 URI 가 생성됩니다.</p> +<pre>Name http://www.some-fictitious-zoo.com/rdf#name +Species http://www.some-fictitious-zoo.com/rdf#species +Class http://www.some-fictitious-zoo.com/rdf#class + +</pre> +<p>다음 절에서는 RDF 를 사용한 XUL 요소의 생성 방법에 대해 살펴봅니다.</p> +<p><br> + </p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Templates">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html new file mode 100644 index 0000000000..f6e3ddde65 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html @@ -0,0 +1,82 @@ +--- +title: Introduction to XBL +slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction_to_XBL +tags: + - XBL + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Property_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Anonymous_Content">다음 »</a></p> +</div><p></p> +<p><a href="ko/XUL">XUL</a>은 자매(sister) 언어 <a href="ko/XBL">XBL</a> (eXtensible Bindings Language)이 있습니다. 이 언어는 XUL 위젯의 behavior를 선언하는데 쓰입니다.</p> +<h3 id=".EB.B0.94.EC.9D.B8.EB.94.A9" name=".EB.B0.94.EC.9D.B8.EB.94.A9">바인딩</h3> +<p>어플리케이션 사용자 인터페이스의 레이아웃을 정의하기 위해 XUL을 쓸 수 있습니다. 요소에 <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일을 적용하여</a> 입맛대로 모양(look)을 바꿀 수 있습니다. 또한 스타일을 바꿔 <a href="ko/XUL_Tutorial/Creating_a_Skin">새 스킨을 만들</a> 수 있습니다.</p> +<p><a href="ko/XUL_Tutorial/Scroll_Bars">스크롤 바</a>와 <a href="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">체크 박스</a> 같은 요소 모두의 기본 겉모양은 스타일 조정(adjust)이나 요소에 속성을 주어 수정해도 좋습니다. 그러나, XUL은 요소가 작동하는 법을 바꿀 수 있는 수단은 제공하지 않습니다. 예를 들면, 스크롤 바 막대가 기능하는 법을 바꾸고 싶을지도 모릅니다. 이를 이해서는, <a href="ko/XBL">XBL</a>이 필요합니다.</p> +<p>XBL 파일은 바인딩 집합을 포함합니다. 각 바인딩은 XUL 위젯의 behavior를 기술합니다. 예를 들면, 바인딩은 스크롤 바에 부착될지도 모릅니다. behavior는 스크롤 바를 만드는 XUL 요소 기술뿐만 아니라 속성(property)과 메소드도 기술합니다.</p> +<p>XUL처럼 XBL도 XML 언어입니다. 그래서 비슷한 구문 규칙이 있습니다. 다음 예는 XBL 파일의 기본 뼈대(skeleton)를 보입니다.</p> +<pre><?xml version="1.0"?> +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="binding1"> + <!-- content, property, method and event descriptions go here --> + </binding> + <binding id="binding2"> + <!-- content, property, method and event descriptions go here --> + </binding> +</bindings> +</pre> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> 요소는 XBL 파일의 루트 요소고 하나 이상의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code> 요소를 포함합니다. 각 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code> 요소는 단일 바인딩으로 선언합니다. <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성은 위 보기처럼 바인딩을 식별하기 위해 쓰일 수 있습니다. 템플릿에는 두 바인딩이 있습니다. 하나는 <code>binding1</code>으로 부르고 다른 하나는 <code>binding2</code>입니다. 하나는 스크롤 바에 다른 하나는 메뉴에 부착될지도 모릅니다. 바인딩은 어떤 XUL 요소에도 부착할 수 있습니다. CSS 클래스를 쓰면, 필요에 따라 많은 다양한 바인딩을 쓸 수 있습니다. 이것은 XBL 구문을 써서 선언합니다.</p> +<p>바인딩 파일의 URL에 CSS 속성(property) <code><a href="ko/CSS/-moz-binding">-moz-binding</a></code>을 주어 요소에 바인딩을 할당합니다. 예를 들면,</p> +<pre>scrollbar { + -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); +} +</pre> +<p>URL은 파일 '<a class="external" rel="freelink">chrome://findfile/content/findfile.xml</a>' 안 id가 'binding1'인 바인딩을 가리킵니다.</p> +<p>'#binding1' 구문은 HTML 파일에서 앵커(anchor)를 가리키는 것처럼 특정 바인딩을 가리키는데 쓰입니다. 보통 파일 하나에 바인딩을 전부 둘 겁니다. 이 예에서 결과는 모든 스크롤바 요소가 바인딩 'binding1'에 기술한 behavior를 지닐 겁니다.</p> +<p>바인딩은 선언하는 다섯 가지 종류가 있습니다.</p> +<ol> + <li>컨텐트: 바인딩이 바운드되는 요소에 더하는 자식 요소.</li> + <li>속성: 요소에 더하는 속성. 스크립트로 접근할 수 있습니다.</li> + <li>메소드: 요소에 더하는 메소드. 스크립트에서 호출할 수 있습니다.</li> + <li>이벤트: 요소가 반응할 마우스 클릭과 키누름 같은 이벤트. 바인딩은 기본 처리(handling)를 제공하는 스크립트를 더할 수 있습니다. 게다가 새 이벤트를 정의할 수도 있습니다.</li> + <li>스타일: XBL이 정의한 요소의 사용자 정의 스타일 속성.</li> +</ol> +<h3 id=".EB.B0.94.EC.9D.B8.EB.94.A9_.EC.98.88.EC.A0.9C" name=".EB.B0.94.EC.9D.B8.EB.94.A9_.EC.98.88.EC.A0.9C">바인딩 예제</h3> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>는 사용자 정의 위젯을 만드는데 쓸 수 있을 만큼 충분히 일반적(generic)입니다(비록 어떤 요소라도 쓸 수 있지만). <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 태그에 <code>class</code>를 할당하여 바인딩을 오직 그 클래스에 속하는 상자에 관련지을 수 있습니다. 다음 예가 이를 보입니다.</p> +<pre class="eval"><b>XUL (example.xul):</b> + +<?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://example/skin/example.css</a>" type="text/css"?> + +<window xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <box class="okcancelbuttons"/> +</window> + +<b>CSS (example.css):</b> + +box.okcancelbuttons { + -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#okcancel'</a>); +} + +<b>XBL (example.xml):</b> + +<?xml version="1.0"?> +<bindings xmlns="<span class="nowiki">http://www.mozilla.org/xbl</span>" + xmlns:xul="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <binding id="okcancel"> + <content> + <xul:button label="OK"/> + <xul:button label="Cancel"/> + </content> + </binding> +</bindings> +</pre> +<p>이 예는 상자 하나가 있는 창을 만듭니다. 상자는 <code>okcancelbuttons</code>의 <code>class</code>가 있게 선언되었습니다. 파일과 관련 있는 스타일 시트는 <code>okcancelbuttons</code> 클래스가 있는 상자가 XBL 파일에 정의한 특수 바인딩을 갖는다고 말합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 말고도 다른 요소, 심지어 사용자 정의 테그를 쓸지도 모릅니다.</p> +<p>다음 절에서 XBL의 세부 부분을 더 살펴보겠습니다. 그러나, 간략히 말하면 상자 안에 자동으로 버튼 2개(확인 버튼과 취소 버튼)를 더하게 합니다.</p> +<p>다음 절에서는, <a href="ko/XUL_Tutorial/Anonymous_Content">XBL로 컨텐트 만들기</a>를 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Property_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Anonymous_Content">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..2b383d0c88 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html @@ -0,0 +1,384 @@ +--- +title: Keyboard Shortcuts +slug: Mozilla/Tech/XUL/XUL_Tutorial/Keyboard_Shortcuts +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Focus_and_Selection">다음 »</a></p> +</div><p></p> + +<p>여러분은 키보드에 응답하는 키보드 이벤트 핸들러를 사용할 수 있습니다. 그러나 모든 버튼과 메뉴 항목에 이벤트 핸들러를 사용하는 것은 정말 번거로운 일일 것입니다.</p> + +<h3 id=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EB.A7.8C.EB.93.A4.EA.B8.B0">키보드 단축키 만들기</h3> + +<p>XUL에서는 키보드 단축키를 정의할 수 있는 방법을 제공합니다. 우리는 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴 단원</a>에서 <code>accesskey</code> 속성에 대해 알아 보았습니다. 이 속성은 메뉴나 메뉴 항목을 활성화하기 위해 사용자가 누를 수 있는 키를 명시하는데 사용됩니다. 아래 예제에서는 Alt와 F(어떤 플랫폼에서는 다른 키 조합) 키를 눌러 File 메뉴를 선택할 수 있는 것을 보여주고 있습니다. File 메뉴가 열리면 Close 메뉴 항목은 C 키를 눌러 선택할 수 있습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">View</a></p> + +<pre><menubar id="sample-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem id="close-command" label="Close" accesskey="c"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>여러분은 버튼에도 <code><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 속성을 사용할 수 있습니다. 버튼에 이 속성을 사용하고 키를 누르면 버튼이 선택(클릭)됩니다.</p> + +<p>그러나 여러분은 아마 좀 더 일반적인 방법으로 키보드 단축키를 설정하고 싶어할 것입니다. 예를 들어 클립보드로 텍스트를 복사하기 위해 Control+C를 누르는 것과 같은 것 말입니다. 이와 같은 단축키를 항상 사용할 수 있는 것은 아니지만 창이 열려있는 동안에는 대부분 동작할 것입니다. 보통 키보드 단축키는 아무때나 사용할 수 있고 스크립트를 사용해 무엇인지를 수행할지 여부를 검사할 수 있습니다. 예를 들어 텍스트가 선택되었을 때만 클립보드로 텍스트를 복사하는 것이 가능하도록 하게 검사할 수 있습니다.</p> + +<h4 id="key_.EC.9A.94.EC.86.8C" name="key_.EC.9A.94.EC.86.8C">key 요소</h4> + +<p>XUL에서는 하나의 창에서 사용할 키보드 단축키를 정의할 수 있게 해주는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소를 제공합니다. 이 요소에는 누를 키와 같이 눌러야 하는 변경키(modifier key, Shift나 Control)를 명시할 수 있는 속성이 있습니다. 예제는 다음과 같습니다.</p> + +<pre><keyset> + <key id="sample-key" modifiers="shift" key="R"/> +</keyset> +</pre> + +<p>위의 예제는 Shift와 R 키를 누를 때 활성화되는 단축키를 정의하고 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 속성(요소 이름과 동일합니다)은 어떤 키를 눌러야 할지를 나타내기 위해 사용되며 예제에서는 R 키입니다. 이 속성에는 눌러야하는 키에 해당하는 어떤 문자도 넣을 수 있습니다. 변경자는 항상 같이 눌러야 하는 키를 의미하며 <code><code id="a-modifiers"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/modifiers">modifiers</a></code></code> 속성으로 지정합니다. 이 속성은 공백으로 분리된 변경자 키 목록으로 입력하며, 아래의 값을 가질 수 있습니다.</p> + +<dl> + <dt>alt </dt> + <dd>사용자는 항상 Alt 키를 눌러야 합니다. Mac에서는 Option 키에 해당합니다.</dd> + <dt>control </dt> + <dd>사용자는 항상 Control 키를 눌러야 합니다.</dd> + <dt>meta </dt> + <dd>사용자는 항상 Meta 키를 눌러야 합니다. Mac에서는 Command 키에 해당합니다.</dd> + <dt>shift </dt> + <dd>사용자는 항상 Shift 키를 눌러야 합니다.</dd> + <dt>accel </dt> + <dd>사용자는 항상 특별한 가속키(accelerator key)를 눌러야 합니다. 여기에 사용되는 키는 사용자의 플랫폼에 따라 달라집니다. 보통 이 값을 사용하게 될 것입니다.</dd> +</dl> + +<p>여러분의 키보드에서 이러한 모든 키를 제공하지 않을 것이며, 이 경우 키보드에 있는 변경키 중 하나와 연결될 것입니다.</p> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code></code> 요소 내부에 위치해야 합니다. 이 요소는 <code>key</code> 요소를 포함하기 위해 고안된 것으로, 파일내 한 곳에서 모든 키 정의를 묶는 용도로 사용됩니다. <code>keyset</code> 요소 밖에 있는 <code>key</code> 요소는 동작하지 않습니다.</p> + +<p>일반적으로 각각의 플랫폼은 단축키를 위해 서로 다른 키를 사용합니다. 예를 들어, Windows는 Control 키를 사용하며, Mac에서는 Command 키를 사용합니다. 이렇게 플랫폼별로 서로 다른 <code>key</code> 요소를 정의하는 것은 불편할 것입니다. 운 좋게 해결책이 있습니다. <code>accel</code> 변경자는 플랫폼별로 단축키로 사용되는 특수 키를 나타냅니다. 이것은 다른 변경키와 동일하게 작동하면서도 각 플랫폼별로 동일하지 않을 수 있습니다.</p> + +<p>여기에 몇 가지 추가 예제가 있습니다.</p> + +<pre><keyset> + <key id="copy-key" modifiers="control" key="C"/> + <key id="explore-key" modifiers="control alt" key="E"/> + <key id="paste-key" modifiers="accel" key="V"/> +</keyset> +</pre> + +<h4 id="keycode_.EC.86.8D.EC.84.B1" name="keycode_.EC.86.8D.EC.84.B1">keycode 속성</h4> + +<p><code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성은 눌러야 하는 키를 지정하기 위해 사용됩니다. 그러나 문자로 나타낼 수 없는 키(Enter키나 기능키)를 지정하고 싶을 때도 있을 것입니다. <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성은 출력 가능한 문자에 대해서만 사용할 수 있습니다. 출력할 수 없는 문자는 <code><code id="a-keycode"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code>라는 또 다른 속성을 이용해서 지정할 수 있습니다.</p> + +<p><code><code id="a-keycode"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code> 속성에는 키를 나타내는 특별한 코드를 설정해야 합니다. 키 목록은 다음 표와 같습니다. 모든 키가 키보드 상에 있는 것은 아닙니다.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>VK_CANCEL</td> + <td>VK_BACK</td> + <td>VK_TAB</td> + <td>VK_CLEAR</td> + </tr> + <tr> + <td>VK_RETURN</td> + <td>VK_ENTER</td> + <td>VK_SHIFT</td> + <td>VK_CONTROL</td> + </tr> + <tr> + <td>VK_ALT</td> + <td>VK_PAUSE</td> + <td>VK_CAPS_LOCK</td> + <td>VK_ESCAPE</td> + </tr> + <tr> + <td>VK_SPACE</td> + <td>VK_PAGE_UP</td> + <td>VK_PAGE_DOWN</td> + <td>VK_END</td> + </tr> + <tr> + <td>VK_HOME</td> + <td>VK_LEFT</td> + <td>VK_UP</td> + <td>VK_RIGHT</td> + </tr> + <tr> + <td>VK_DOWN</td> + <td>VK_PRINTSCREEN</td> + <td>VK_INSERT</td> + <td>VK_DELETE</td> + </tr> + <tr> + <td>VK_0</td> + <td>VK_1</td> + <td>VK_2</td> + <td>VK_3</td> + </tr> + <tr> + <td>VK_4</td> + <td>VK_5</td> + <td>VK_6</td> + <td>VK_7</td> + </tr> + <tr> + <td>VK_8</td> + <td>VK_9</td> + <td>VK_SEMICOLON</td> + <td>VK_EQUALS</td> + </tr> + <tr> + <td>VK_A</td> + <td>VK_B</td> + <td>VK_C</td> + <td>VK_D</td> + </tr> + <tr> + <td>VK_E</td> + <td>VK_F</td> + <td>VK_G</td> + <td>VK_H</td> + </tr> + <tr> + <td>VK_I</td> + <td>VK_J</td> + <td>VK_K</td> + <td>VK_L</td> + </tr> + <tr> + <td>VK_M</td> + <td>VK_N</td> + <td>VK_O</td> + <td>VK_P</td> + </tr> + <tr> + <td>VK_Q</td> + <td>VK_R</td> + <td>VK_S</td> + <td>VK_T</td> + </tr> + <tr> + <td>VK_U</td> + <td>VK_V</td> + <td>VK_W</td> + <td>VK_X</td> + </tr> + <tr> + <td>VK_Y</td> + <td>VK_Z</td> + <td>VK_NUMPAD0</td> + <td>VK_NUMPAD1</td> + </tr> + <tr> + <td>VK_NUMPAD2</td> + <td>VK_NUMPAD3</td> + <td>VK_NUMPAD4</td> + <td>VK_NUMPAD5</td> + </tr> + <tr> + <td>VK_NUMPAD6</td> + <td>VK_NUMPAD7</td> + <td>VK_NUMPAD8</td> + <td>VK_NUMPAD9</td> + </tr> + <tr> + <td>VK_MULTIPLY</td> + <td>VK_ADD</td> + <td>VK_SEPARATOR</td> + <td>VK_SUBTRACT</td> + </tr> + <tr> + <td>VK_DECIMAL</td> + <td>VK_DIVIDE</td> + <td>VK_F1</td> + <td>VK_F2</td> + </tr> + <tr> + <td>VK_F3</td> + <td>VK_F4</td> + <td>VK_F5</td> + <td>VK_F6</td> + </tr> + <tr> + <td>VK_F7</td> + <td>VK_F8</td> + <td>VK_F9</td> + <td>VK_F10</td> + </tr> + <tr> + <td>VK_F11</td> + <td>VK_F12</td> + <td>VK_F13</td> + <td>VK_F14</td> + </tr> + <tr> + <td>VK_F15</td> + <td>VK_F16</td> + <td>VK_F17</td> + <td>VK_F18</td> + </tr> + <tr> + <td>VK_F19</td> + <td>VK_F20</td> + <td>VK_F21</td> + <td>VK_F22</td> + </tr> + <tr> + <td>VK_F23</td> + <td>VK_F24</td> + <td>VK_NUM_LOCK</td> + <td>VK_SCROLL_LOCK</td> + </tr> + <tr> + <td>VK_COMMA</td> + <td>VK_PERIOD</td> + <td>VK_SLASH</td> + <td>VK_BACK_QUOTE</td> + </tr> + <tr> + <td>VK_OPEN_BRACKET</td> + <td>VK_BACK_SLASH</td> + <td>VK_CLOSE_BRACKET</td> + <td>VK_QUOTE</td> + </tr> + <tr> + <td>VK_HELP</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p>예를 들어, 사용자가 Alt와 F5를 눌렀을 때 활성화되는 단축키를 만드려면 다음과 같이 하세요.</p> + +<pre><keyset> + <key id="test-key" modifiers="alt" keycode="VK_F5"/> +</keyset> +</pre> + +<p>아래 예제는 좀 더 많은 단축키를 보여줍니다.</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C"/> + <key id="find-key" keycode="VK_F3"/> + <key id="switch-key" modifiers="control alt" key="1"/> +</keyset> +</pre> + +<p>첫 번째 키는 사용자가 사용하는 플랫폼에 해당하는 단축키와 C를 눌렀을 때 호출됩니다. 두번째는 F3을 눌렀을 때 호출됩니다. 세 번째는 Control키와 Alt키 그리고 1을 눌렀을 때 호출됩니다. 만일 키보드의 메인 영역에 있는 키와 숫자 패드에 있는 키를 구분하기 위해서는 VK_NUMPAD 키(VK_NUMPAD1과 같은 것)를 사용하세요.</p> + +<div class="note"> +<p>응용 프로그램에서 사용할 단축키의 선택과 관련된 더 많은 정보는 <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Planning FAQ and Cross Reference</a>를 참조하세요.</p> +</div> + +<h3 id=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">키보드 단축키 사용하기</h3> + +<p>어떻게 키보드 단축키를 정의하는지를 알았으니까, 이제는 사용 방법에 대해 알아보겠습니다. 두 가지 방법이 있습니다. 첫 번째는 가장 간단한 방법으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소에서 키입력(keypress) 이벤트 핸들러를 사용하는 방법입니다. 사용자가 키를 누르면 스크립트가 호출됩니다. 예제는 다음과 같습니다.</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/> +</keyset> +</pre> + +<p><code>DoCopy</code> 함수는 사용자가 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소에서 명시한 키를 눌렀을때 호출됩니다. 위 예제에서는 클립보드에 복사하는 키(Control+C)입니다. 이 단축키는 창이 열려있는 동안은 계속 동작합니다. <code>DoCopy</code> 함수는 텍스트가 선택되어 있는지 검사한 후 클립보드에 선택한 텍스트를 복사할 것입니다. 텍스트상자는 원래 클립보드와 관련된 단축키가 있으므로 구현할 필요는 없다는 것을 기억하세요.</p> + +<h4 id=".EB.A9.94.EB.89.B4.EC.97.90_.ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EB.A9.94.EB.89.B4.EC.97.90_.ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">메뉴에 키보드 단축키 지정하기</h4> + +<p>메뉴에 있는 명령에 대한 키보드 단축키를 지정할 경우에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소와 메뉴 명령을 직접 연결할 수 있습니다. 이를 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소에 <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성을 추가하면 됩니다. 이 속성에는 사용할 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>값을 지정하면 됩니다. 예제는 다음과 같습니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">View</a></p> + +<div class="float-right"><img alt="Image:keyshort1.jpg"></div> + +<pre><keyset> + <key id="paste-key" modifiers="accel" key="V" + oncommand="alert('Paste invoked')"/> +</keyset> + +<menubar id="sample-menubar"> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem id="paste-command" + accesskey="p" key="paste-key" + label="Paste" oncommand="alert('Paste invoked')"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p>위 예제에서 메뉴 항목의 <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성값은 <code>paste-key</code>로 앞에서 정의된 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소의 <code>id</code>와 동일한 값입니다. 여러분은 이 값을 여러개의 메뉴 항목에 대한 키보드 단축키로 여러번 사용할 수 있습니다.</p> + +<p>여러분은 그림에서 보듯이 Paste 메뉴 옆에 Control과 V키 텍스트가 위치하는 것을 볼 수 있으며, 이는 이 메뉴를 호출하기 위해 이 키 조합을 누르면 된다는 것을 나타냅니다. 이것은 <code>key</code> 요소에 있는 <code>modifier</code> 속성에 따라 자동으로 추가됩니다. 메뉴에 연결되는 키보드 단축키는 메뉴가 열리지 않은 상태에서도 동작합니다.</p> + +<p>키 정의의 또 다른 기능은 쉽게 사용 불가능한 상태로 만들 수 있다는 것입니다. 이를 위해서는 <code>key</code> 요소에 <code><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 속성을 추가하고 <code>true</code>값으로 설정하면 됩니다. 이렇게 지정하면 해당 키보드 단축키는 사용 불가능한 상태이면 따라서 키를 누르더라도 호출되지 않습니다. 스크립트를 이용해 <code>disabled</code> 속성을 변경는 것은 유용한 기능입니다.</p> + +<div class="highlight"> +<h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h4> + +<p>파일 찾기 대화창을 위한 키보드 단축키를 추가해 보겠습니다. 4개의 단축키를 넣을 것인데, Cut, Copy, Paste 명령에 각각 하나씩과 ESC를 눌렀을 경우 사용할 Close 명령에 하나를 추가할 것입니다.</p> + +<pre class="eval"><span class="highlightred"><keyset> + <key id="cut_cmd" modifiers="accel" key="X"/> + <key id="copy_cmd" modifiers="accel" key="C"/> + <key id="paste_cmd" modifiers="accel" key="V"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset></span> + +<vbox flex="1"> + <toolbox> + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Open Search..." accesskey="o"/> + <menuitem label="Save Search..." accesskey="s"/> + <menuseparator/> + <menuitem label="Close" accesskey="c" <span class="highlightred">key="close_cmd"</span> + oncommand="window.close();"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cut" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/> + <menuitem label="Copy" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/> + <menuitem label="Paste" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/> + </menupopup> + </menu> +</pre> + +<p>이제 우리는 명령을 실행하기 위해 단축키를 사용할 수 있습니다. 물론 아직 클립보드와 관련된 스크립트를 작성하지 않았기 때문에 아무것도 수행되지는 않을 것입니다.</p> +</div> + +<h3 id=".ED.82.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".ED.82.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8">키 이벤트</h3> + +<p>위에서 언급한 키와 관련된 기능이 적당하지 않은 경우에 사용할 수 있는 세 가지 키보드 이벤트가 있습니다. 이 이벤트는 다음과 같습니다.</p> + +<dl> + <dt>keypress </dt> + <dd>포커스를 가진 요소에 키가 눌러졌다가 때어질때 호출됩니다. 입력필드에 특정 문자만 입력 가능 하도록 하고자 할 때 사용할 수 있습니다.</dd> + <dt>keydown </dt> + <dd>포커스를 가진 요소에 키가 눌러졌을 때 호출됩니다. 이 이벤트는 키를 누른 후 때지 않더라도 발생합니다.</dd> + <dt>keyup </dt> + <dd>포커스를 가진 요소에 눌러진 키가 떨어질 때 호출됩니다.</dd> +</dl> + +<p>키 이벤트는 포커스를 가진 요소로만 전달됩니다. 일반적으로 텍스트상자, 버튼, 체크박스 등이 이에 해당합니다. 포커스를 가진 요소가 아무것도 없다면 XUL 문서가 이벤트의 대상이 됩니다. 이 경우, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그에 이벤트 리스너를 추가할 수 있습니다. 그렇지만 일반적으로 전역적인 키에 응답하는 경우에는 앞에서 언급한 키보드 단축키를 사용합니다.</p> + +<p>키의 <a href="ko/DOM/event">이벤트 객체</a>는 눌러진 키에 대한 정보를 담고 있는 두 가지 속성이 있습니다. <code><a href="ko/DOM/event.keyCode">keyCode</a></code> 속성은 키 코드를 가지고 있으며 앞 절에서 본 키 테이블에 있는 상수들 중 하나와 비교될 수 있습니다. <code><a href="ko/DOM/event.charCode">charCode</a></code> 속성은 출력 가능한 문자로 눌러진 키에 해당하는 문자 코드를 담고 있습니다.</p> + +<div class="highlight"><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul">View</a></div> + +<p>다음 절에서는 <a href="ko/XUL_Tutorial/Focus_and_Selection">포커스와 선택을 처리</a>하는 방법에 대해 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Focus_and_Selection">다음 »</a></p> +</div><p></p> + +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html new file mode 100644 index 0000000000..de4f6124da --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html @@ -0,0 +1,133 @@ +--- +title: List Controls +slug: Mozilla/Tech/XUL/XUL_Tutorial/List_Controls +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Progress_Meters">다음 »</a></p> +</div><p></p> +<p>XUL은 목록 상자를 생성하는 여러 요소의 형식을 가지고 있습니다.</p> +<h3 id=".EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90" name=".EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90">목록 상자</h3> +<p>목록 상자는 목록에서 여러 항목을 표시하는 데 사용됩니다. 사용자는 리스트에서 어떤 항목을 선택할 수 있습니다.</p> +<p>XUL은 목록을 생성하기 위해 두 가지 요소 타입을 제공하는데, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> 요소는 다중 행 목록 상자를, 그리고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>요소는 드롭다운 목록 상자를 생성합니다. 이들은 HTML <code>select</code> 요소와 유사한 방식으로 작업을 하면서, 두 가지 기능 모두 수행하지만, XUL의 요소는 추가적인 기능을 가지고 있습니다.</p> +<p>가장 단순한 목록 상자는 상자 자체에 대해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>를 사용하고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 요소는 각 항목으로 사용합니다. 예제를 보면, 이 목록 상자는 4개의 행을 가지면서, 각 항목마다 하나씩입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:lists1.png"></div> +<pre><listbox> + <listitem label="Butter Pecan"/> + <listitem label="Chocolate Chip"/> + <listitem label="Raspberry Ripple"/> + <listitem label="Squash Swirl"/> +</listbox> +</pre> +<p>HTML의 <code>option</code> 요소가 가진 것과 마찬가지로, 사용자는 <code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성을 사용해서 각 항목에 대해 값을 할당할 수 있습니다. 그리고 나서 스크립트로 해당 값을 사용할 수 있습니다. 목록 상자는 적당한 크기를 기본으로 설정하지만, <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> 속성으로 크기를 제어할 수 있습니다. 목록 상자에 출력될 행 수를 지정하기 위해 값을 설정하세요. <code>rows</code> 값 보다 더 많은 행이 있으면 이를 표시할 수 있는 스크롤바가 나타납니다.</p> +<p>다음의 예제는 이러한 추가 기능을 설명합니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">View</a></p> +<pre><listbox rows="3"> + <listitem label="Butter Pecan" value="bpecan"/> + <listitem label="Chocolate Chip" value="chocchip"/> + <listitem label="Raspberry Ripple" value="raspripple"/> + <listitem label="Squash Swirl" value="squash"/> +</listbox> +</pre> +<p>이 예제는 한번에 단 3개 행만을 표시하도록 변경된 것입니다. 또한 목록에 있는 각 항목에 값이 추가되었습니다. 목록 상자는 더 많은 기능을 제공하며, 다음에서 설명하고 있습니다.</p> +<h3 id=".EB.8B.A4.EC.A4.91.EC.97.B4_.EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90" name=".EB.8B.A4.EC.A4.91.EC.97.B4_.EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90">다중열 목록 상자</h3> +<p>목록 상자는 다중열을 지원합니다. 셀에는 보통 텍스트가 쓰이지만 어떤 컨텐츠도 포함할 수 있습니다. 사용자가 목록에서 항목을 선택하면 행 전체가 선택되며, 하나의 셀만 선택되도록 할 수는 없습니다.</p> +<p>목록 상자에 열을 명시하기 위해서는 2개의 태그가 사용됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code></code> 요소는 열의 정보를 담기 위해 사용되며, 각 열에 대한 정보는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>요소를 사용해 명시합니다. 목록 상자의 각 열별로 하나의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code> 요소가 필요합니다.</p> +<p>행에 포함되는 각 셀은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소를 사용해 표현합니다. 3개의 열을 표현하려면, 각각의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 내부에 3개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>을 넣어야 합니다. 셀의 텍스트 컨텐츠를 명시하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 사용합니다. 하나의 열만 있는 단순한 경우에는 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 요소에 직접 넣을 수 있으며, 이럴 경우에는 앞서 보았던 목록 상자 예제처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소가 전혀 필요 없습니다.</p> +<p>다음은 두 개의 열과 세개의 행을 가진 목록 박스 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul">View</a></p> +<pre><listbox> + <listcols> + <listcol/> + <listcol/> + </listcols> + <listitem> + <listcell label="George"/> + <listcell label="House Painter"/> + </listitem> + <listitem> + <listcell label="Mary Ellen"/> + <listcell label="Candle Maker"/> + </listitem> + <listitem> + <listcell label="Roger"/> + <listcell label="Swashbuckler"/> + </listitem> +</listbox> +</pre> +<h3 id=".EB.A8.B8.EB.A6.AC_.ED.96.89" name=".EB.A8.B8.EB.A6.AC_.ED.96.89">머리 행</h3> +<p>목록 상자에서는 특별한 머리 행을 사용할 수 있습니다. 이것은 일반적인 행과 비슷하지만 다른 모양으로 출력됩니다. 이것은 열 머리를 만들기 위해 사용할 수 있으며, 두 개의 새로운 요소가 사용됩니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>가 보통 행에 사용되는 것처럼, 머리 행을 위해 사용합니다. 머리 행은 보통 행이 아니라서, 스크립트를 이용해 목록 상자의 첫번째 행을 얻으려고 할 경우 무시됩니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code></code> 요소는 머리 행의 각 셀에 사용됩니다. 머리 셀의 라벨을 지정하기 위해서는 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 사용하세요.</p> +<p>다음은 예제 3에 머리 행을 추가한 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul">View</a></p> +<div class="float-right"> + <img alt="Image:morelists1.png"></div> +<pre><listbox> + + <listhead> + <listheader label="Name"/> + <listheader label="Occupation"/> + </listhead> + + <listcols> + <listcol/> + <listcol flex="1"/> + </listcols> + + <listitem> + <listcell label="George"/> + <listcell label="House Painter"/> + </listitem> + <listitem> + <listcell label="Mary Ellen"/> + <listcell label="Candle Maker"/> + </listitem> + <listitem> + <listcell label="Roger"/> + <listcell label="Swashbuckler"/> + </listitem> + +</listbox> +</pre> +<p>위 예제에서는 열을 유연하게 만들기 위해 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 사용하였습니다. 이 속성은 다음 절에서 설명하겠지만, 여기서는 열이 남은 공간을 모두 채우도록 하는데 사용하고 있습니다. 여러분이 창의 크기를 변경하면 열이 창만큼 늘어나는 것을 볼 수 있을 것입니다. 창의 크기가 줄어들면, 셀안에 있는 라벨이 자동으로 잘려 지고 생략부호가 출력됩니다. 생략부호가 출력되지 않도록 하기 위해서는 셀이나 아이템에 <code><code id="a-crop"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></code> 속성을 <code>none</code>으로 설정하면 됩니다.</p> +<h3 id=".EB.93.9C.EB.A1.AD.EB.8B.A4.EC.9A.B4_.EB.AA.A9.EB.A1.9D" name=".EB.93.9C.EB.A1.AD.EB.8B.A4.EC.9A.B4_.EB.AA.A9.EB.A1.9D">드롭다운 목록</h3> +<p>드롭다운 목록은 <code>select</code> 요소를 사용하여 HTML에서 생성할 수 있습니다. 사용자는 텍스트상자에서 하나만 선택된 것을 볼 수도 그리고 화살표를 클릭하거나 다른 선택을 하기 위해 텍스트상자 옆에 있는 유사한 버튼을 클릭할 수도 있습니다. 다른 선택사항은 팝업창에 나타날 것입니다. XUL은 이런 목적에 사용할 수 잇는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소를 가지고 있습니다. 이것은 텍스트상자와 그 옆에 있는 버튼으로 이루어집니다. 이름이 선택된 것은 내부에서 선택된 메뉴로 띄워졌기 때문입니다.</p> +<p>드롭다운 상자를 기술하기 위해서는 세 가지 요소가 필요합니다. 첫번째는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소로 버튼을 가진 텍스트상자를 생성합니다. 두번째는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>으로 버튼을 클릭했을 때 나타나는 팝업창을 생성합니다. 세번재는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>으로 개별 선택 항목을 생성합니다.</p> +<p>다음의 예제는 이런한 점을 잘 설명하고 있는 구문입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">View</a></p> +<div class="float-right"> + <img alt="Image:inputs2.png"></div> +<pre><menulist label="Bus"> + <menupopup> + <menuitem label="Car"/> + <menuitem label="Taxi"/> + <menuitem label="Bus" selected="true"/> + <menuitem label="Train"/> + </menupopup> +</menulist> +</pre> +<p>위의 menulist는 4가지 선택 항목을 담고있는 데, 각각은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소에 해당 합니다. 선택 항목을 보이도록 하려면 menulist에서 화살 버튼(▼)을 클릭합니다. 하나를 선택하면, menulist에서 선택된 것이 나타납니다. <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 속성은 기본적으로 선택된 값을 지정하는 데 사용됩니다.</p> +<h4 id=".ED.8E.B8.EC.A7.91_.EA.B0.80.EB.8A.A5.ED.95.9C_.EB.A9.94.EB.89.B4.EB.AA.A9.EB.A1.9D" name=".ED.8E.B8.EC.A7.91_.EA.B0.80.EB.8A.A5.ED.95.9C_.EB.A9.94.EB.89.B4.EB.AA.A9.EB.A1.9D">편집 가능한 메뉴목록</h4> +<p>기본적으로 사용자는 목록에서 선택항목을 선택할 수만 있습니다. 여러분은 직접 타이핑해서 입력 할 수는 없습니다. 또 다른 종류의 menulist은 필드에서 텍스트 편집을 허용합니다. 예를 들면, 브라우저의 URL 필드 이전에 타이핑한 URL 선택을 위한 드롭다운 메뉴가 있는 데, 거기에 입력할 수도 있습니다.</p> +<p>편집가능한 menulist를 만들려면, 다음과 같은 <code><code id="a-editable"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code></code> 속성을 추가하면 됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_6"><a id="%EC%98%88%EC%A0%9C_6"></a><strong>예제 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">View</a></p> +<pre><menulist editable="true"> + <menupopup> + <menuitem label="www.mozilla.org"/> + <menuitem label="www.xulplanet.com"/> + <menuitem label="www.dmoz.org"/> + </menupopup> +</menulist> +</pre> +<p>생성된 URL 필드는 사용자가 선택할 수 있는 이미 설정된 선택 항목을 가지고 있으면서 또한 필드에다 사용자 자신이 타이핑할 수도 있습니다. 사용자가 입력한 텍스트는 새로운 선택항목으로 추가되지는 않습니다. <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성은 이 예제에선 사용되지 않았기 때문에, 기본 값은 공백으로 처리되게 됩니다.</p> +<p>다음 장에서는 <a href="ko/XUL_Tutorial/Progress_Meters">진행 지시자 만들기</a>를 익혀 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Progress_Meters">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html new file mode 100644 index 0000000000..7ca10f7172 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html @@ -0,0 +1,279 @@ +--- +title: Localization +slug: Mozilla/Tech/XUL/XUL_Tutorial/Localization +tags: + - Localization + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Localization +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Property_Files">다음 »</a></p> +</div><p></p> +<p>XUL과 XML은 지역화를 허락하는 편리한 방법인 엔티티(entity)를 제공합니다.</p> +<h3 id=".EC.97.94.ED.8B.B0.ED.8B.B0" name=".EC.97.94.ED.8B.B0.ED.8B.B0">엔티티</h3> +<p>많은 응용프로그램은 될 수 있는 대로 인터페이스를 다른 언어로 옮기기 간단하게 만듭니다. 보통은, 각 언어를 위해 문자열 표를 만듭니다. 응용프로그램에 직접 하드코딩한 텍스트 대신, 각 언어별 텍스트는 오직 문자열 표로 만든 참조입니다. <a href="ko/XML">XML</a>은 비슷한 목적으로 쓸 수 있는 엔티티를 제공합니다.</p> +<p>여러분이 <a href="ko/HTML">HTML</a>를 써 봤다면 엔티티와는 벌써 친숙할 겁니다. 코드 <code>&lt;</code>와 <code>&gt;</code>는 텍스트에 less than(~보다 적은)과 greater than(~보다 큰) 기호로 놓고 쓸 수 있는 엔티티 예입니다. XML에는 사용자 정의 엔티티를 선언하게 하는 문법이 있습니다. 여러분은 엔티티가 그 값(하나로 이어진 텍스트일 수 있는)으로 치환되도록 사용자 정의 엔티티를 쓸 수 있습니다. 엔티티가 속성값을 포함하는 텍스트마다 쓰일 지도 모릅니다. 아래 예는 버튼에 쓰이는 엔티티를 실제로 보입니다.</p> +<pre><button label="&findLabel;"/> +</pre> +<p>label에 나타날 텍스트는 엔티티 <code>&findLabel;</code>의 값입니다. 파일은 지원하는 각 언어를 위한 엔티티 선언을 포함하여 만듭니다. 영어에서, <code>&findLabel;</code> 엔티티는 아마도 "Find" 텍스트 값으로 선언될 겁니다.</p> +<h3 id="DTD_.ED.8C.8C.EC.9D.BC" name="DTD_.ED.8C.8C.EC.9D.BC">DTD 파일</h3> +<p>엔티티는 DTD ( + <i> + 문서 형 선언</i> + ) 파일에 선언합니다. 이 형의 파일은 보통 특정 XML 파일의 문법과 의미를 선언하는데 쓰지만 또한 엔티티 선언에 씁니다. Mozilla chrome 시스템에서, <tt>locales</tt> 하위디렉토리에 있는 DTD 파일을 발견할 겁니다. 보통 XUL 파일당 DTD 파일(확장자가 <tt>.dtd</tt>) 하나입니다.</p> +<p>chome 디렉토리를 들여다보면, 당신 언어를 위한 압축(archive) 파일이 보입니다. (<tt>en-US.jar</tt>는 영어 기본값입니다.) 여러 언어 locale 파일이 있을 지도 모릅니다. 예를 들어, 미국 영어(en-US)와 프랑스어(fr). 이 압축 파일 안에서, 각 창을 위한 지역화 텍스트를 담은 파일을 발견할 겁니다. 압축 파일의 구조는 <a href="ko/XUL_Tutorial/Creating_a_Skin">스킨</a>에 쓰는 디렉토리 구조와 매우 비슷합니다.</p> +<p>압축 파일 안에, 엔티티를 선언한 DTD 파일을 둡니다. 대체로, 각 XUL 파일에 DTD 파일 하나이고 보통은 <tt>.dtd</tt> 확장자를 빼면 같은 파일명입니다. 그래서 파일 찾기(find files) 대화상자는 findfile.dtd로 이름 붙인 파일이 필요합니다.</p> +<p>설치하지 않은 chrome 파일을 위해서는, 그냥 XUL 파일과 같은 디렉토리에 DTD 파일을 둘 수 있습니다.</p> +<div class="note"> + <b>주의:</b> 아스키가 아닌 문자를 위해 DTD 파일을 UTF-8N으로 인코드해야 합니다.</div> +<p>한 번 XUL에 DTD 파일을 만들면, XUL 파일에 쓰고 싶은 DTD 파일을 나타내는 줄이 XUL 파일에 필요합니다. 그렇지 않으면, 엔티티를 찾을 수 없을 거라는 에러가 발생합니다. 이를 위해, XUL 파일 위쪽쯤에 다음 꼴로 한 줄을 추가하세요.</p> +<pre><!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"> +</pre> +<p>이 줄은 나타낸 URL이 파일을 위한 DTD로 쓰임을 지정합니다. 이 경우에, 우리는 <tt>findfile.dtd</tt> 파일을 쓰기 원한다고 선언했습니다. 이 줄은 보통 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 요소 바로 앞에 둡니다.</p> +<h3 id=".EC.97.94.ED.8B.B0.ED.8B.B0_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name=".EC.97.94.ED.8B.B0.ED.8B.B0_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">엔티티 선언하기</h3> +<p>엔티티는 아래 보는 대로 간단한 문법을 써서 선언합니다.</p> +<pre><!ENTITY findLabel "Find"> +</pre> +<p>이 예는 이름이 <code>findLabel</code>이고 값이 "Find"인 엔티티를 만듭니다. 이는 텍스트 "&findLabel;"가 XUL 파일에 나타날 때마다, 텍스트 "Find"로 바꿈을 뜻합니다. 엔티티 선언은 선언 끝에 끌리는(trailing) 빗금(/)이 없음을 유념하세요. 다른 언어를 위한 DTD 파일에서는, 그 언어를 위한 텍스트가 대신 쓰입니다.</p> +<pre class="eval"><b>for Korean:</b> +<!ENTITY findLabel "찾기"> +</pre> +<p>예를 들면, 다음 텍스트는</p> +<pre><description value="&findLabel;"/> +</pre> +<p>아래처럼 옮깁니다.</p> +<pre class="eval"><b>English version:</b> +<description value="Find"/> + +<b>Korean version:</b> +<description value="찾기"/> +</pre> +<p>여러분은 인터페이스에 쓸 라벨이나 텍스트 문자열을 위한 엔티티를 선언합니다. XUL 파일에 직접 표시할 텍스트가 전혀 없어도 좋습니다.</p> +<p>텍스트 라벨를 위한 엔티티 사용 외에도, 엔티티를 다른 언어에서는 서로 다른 아무 값에 써도 좋습니다. 예를 들면, <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">키보드 단축키</a></p> +<pre class="eval"> <b>XUL</b> + <menuitem label="&undo.label;" accesskey="&undo.key;"/> + <b>DTD</b> + <!ENTITY undo.label "Undo"> + <!ENTITY undo.key "u"> +</pre> +<p>위 예는 엔티티 둘을 씁니다. 실행 취소 메뉴 항목 라벨에 하나 그리고 단축키를 위해 하나.</p> +<p> </p> +<div class="highlight"> + <h3 id="Find_Files_.EC.98.88.EC.A0.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0" name="Find_Files_.EC.98.88.EC.A0.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0">Find Files 예제 바꾸기</h3> + <p>모든 텍스트 문자열을 위해 DTD 파일을 쓰도록 find files 대화상자를 수정하여 어떻게 이 모두를 함께 놓는지 살펴봅시다. 전체 XUL 파일은 빨간색으로 쓴 바뀐 부분과 함께 아래에 보입니다.</p> + <pre class="eval"><?xml version="1.0"?> + +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="findfile.css" type="text/css"?> + +<span class="highlightred"><!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"></span> + +<window + id="findfile-window" + title="<span class="highlightred">&findWindow.title;</span>" + persist="screenX screenY width height" + orient="horizontal" + onload="initSearchList()" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + +<script src="findfile.js"/> + +<popupset> + <popup id="editpopup"> + <menuitem label="Cut" accesskey="<span class="highlightred">&cutCmd.accesskey;</span>"/> + <menuitem label="Copy" accesskey="<span class="highlightred">&copyCmd.accesskey;</span>"/> + <menuitem label="Paste" accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" disabled="true"/> + </popup> +</popupset> + +<keyset> + <key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&cutCmd.commandkey;</span>"/> + <key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&copyCmd.commandkey;</span>"/> + <key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&pasteCmd.commandkey;</span>"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset> + +<vbox flex="1"> + + <toolbox> + + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="<span class="highlightred">&fileMenu.label;</span>" + accesskey="<span class="highlightred">&fileMenu.accesskey;</span>"> + <menupopup id="file-popup"> + <menuitem label="<span class="highlightred">&openCmd.label;</span>" + accesskey="<span class="highlightred">&openCmd.accesskey;</span>"/> + <menuitem label="<span class="highlightred">&saveCmd.label;</span>" + accesskey="<span class="highlightred">&saveCmd.accesskey;</span>"/> + <menuseparator/> + <menuitem label="<span class="highlightred">&closeCmd.label;</span>" + accesskey="<span class="highlightred">&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/> + </menupopup> + </menu> + <menu id="edit-menu" label="<span class="highlightred">&editMenu.label;</span>" + accesskey="<span class="highlightred">&editMenu.accesskey;</span>"> + <menupopup id="edit-popup"> + <menuitem label="<span class="highlightred">&cutCmd.label;</span>" + accesskey="<span class="highlightred">&cutCmd.accesskey;</span>" key="cut_cmd"/> + <menuitem label="<span class="highlightred">&copyCmd.label;</span>" + accesskey="<span class="highlightred">&copyCmd.accesskey;</span>" key="copy_cmd"/> + <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" + accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/> + </menupopup> + </menu> + </menubar> + + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="<span class="highlightred">&openCmdToolbar.label;</span>"/> + <toolbarbutton id="savesearch" label="<span class="highlightred">&saveCmdToolbar.label;</span>"/> + </toolbar> + </toolbox> + + <tabbox> + <tabs> + <tab label="<span class="highlightred">&searchTab;</span>" selected="true"/> + <tab label="<span class="highlightred">&optionsTab;</span>"/> + </tabs> + + <tabpanels> + + <tabpanel id="searchpanel" orient="vertical" context="editpopup"> + + <description> + <span class="highlightred">&findDescription;</span> + </description> + + <spacer class="titlespace"/> + + <groupbox orient="horizontal"> + <caption label="<span class="highlightred">&findCriteria;</span>"/> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="<span class="highlightred">&type.name;</span>"/> + <menuitem label="<span class="highlightred">&type.size;</span>"/> + <menuitem label="<span class="highlightred">&type.date;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="<span class="highlightred">&mode.is;</span>"/> + <menuitem label="<span class="highlightred">&mode.isnot;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + + <menulist id="find-text" flex="1" + editable="true" + datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>" + ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"> + <template> + <menupopup> + <menuitem label="<span class="nowiki">rdf:http://www.xulplanet.com/rdf/recent#Label</span>" uri="rdf:*"/> + </menupopup> + </template> + </menulist> + + </groupbox> + + </tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="<span class="highlightred">&casesensitive;</span>"/> + <checkbox id="wordscheck" label="<span class="highlightred">&matchfilename;</span>"/> + </tabpanel> + + </tabpanels> + </tabbox> + + <tree id="results" style="display: none;" flex="1"> + <treecols> + <treecol id="name" label="<span class="highlightred">&results.filename;</span>" flex="1"/> + <treecol id="location" label="<span class="highlightred">&results.location;</span>" flex="2"/> + <treecol id="size" label="<span class="highlightred">&results.size;</span>" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="<span class="highlightred">&bytes.before;</span>2520<span class="highlightred">&bytes.after;</span>"/> + </treerow> + </treeitem> + </treechildren> + </tree> + + <splitter id="splitbar" resizeafter="grow" style="display: none;"/> + + <spacer class="titlespace"/> + + <hbox> + <progressmeter id="progmeter" value="50%" style="display: none;"/> + <spacer flex="1"/> + <button id="find-button" label="<span class="highlightred">&button.find;</span>" + oncommand="doFind()"/> + <button id="cancel-button" label="<span class="highlightred">&button.cancel;</span>" + oncommand="window.close();"/> + </hbox> +</vbox> + +</window> +</pre> + <p>각 텍스트 문자열은 엔티티 참조로 바뀝니다. DTD 파일은 XUL 파일의 시작 부분쯤에 포함됩니다. 추가될 각 엔티티는 DTD 파일에 선언하면 좋습니다. 창은 XUL 파일에서 찾은 엔티티가 선언되지 않았으면 표시되지 않습니다.</p> + <p>엔티티 이름은 중요하지 않음을 유념하세요. 위 예제에서, 엔티티에 쓰인 단어는 마침표로 구분됐습니다. 여러분은 이렇게 하지 않아도 됩니다. 여기 엔티티 이름은 Mozilla 코드 나머지와 비슷한 관례(convention)를 따릅니다.</p> + <p>여러분이 텍스트 '2520 bytes'는 두 엔티티로 바뀌었음에 알아챌지도 모릅니다. 이는 구(phrase) 구조가 딴 locale에서 다를 지도 모르기 때문입니다. 예를 들면, 숫자는 대응하는 'bytes' 뒤 말고 앞에 나올 필요가 있을지도 모릅니다. 물론, 이는 필요에 따라 KB나 MB 표시를 위해 더 복잡할 지도 모릅니다.</p> + <p>단축키(access key와 keyboard shortcut)도 아마 딴 locale에서 다를 지도 모르기 때문에 또한 엔티티로 번역됩니다.</p> + <p>다음은, DTD 파일(findfile.dtd)입니다.</p> + <pre><!ENTITY findWindow.title "Find Files"> +<!ENTITY fileMenu.label "File"> +<!ENTITY editMenu.label "Edit"> +<!ENTITY fileMenu.accesskey "f"> +<!ENTITY editMenu.accesskey "e"> +<!ENTITY openCmd.label "Open Search..."> +<!ENTITY saveCmd.label "Save Search..."> +<!ENTITY closeCmd.label "Close"> +<!ENTITY openCmd.accesskey "o"> +<!ENTITY saveCmd.accesskey "s"> +<!ENTITY closeCmd.accesskey "c"> +<!ENTITY cutCmd.label "Cut"> +<!ENTITY copyCmd.label "Copy"> +<!ENTITY pasteCmd.label "Paste"> +<!ENTITY cutCmd.accesskey "t"> +<!ENTITY copyCmd.accesskey "c"> +<!ENTITY pasteCmd.accesskey "p"> +<!ENTITY cutCmd.commandkey "X"> +<!ENTITY copyCmd.commandkey "C"> +<!ENTITY pasteCmd.commandkey "V"> +<!ENTITY openCmdToolbar.label "Open"> +<!ENTITY saveCmdToolbar.label "Save"> +<!ENTITY searchTab "Search"> +<!ENTITY optionsTab "Options"> +<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."> +<!ENTITY findCriteria "Search Criteria"> +<!ENTITY type.name "Name"> +<!ENTITY type.size "Size"> +<!ENTITY type.date "Date Modified"> +<!ENTITY mode.is "Is"> +<!ENTITY mode.isnot "Is Not"> +<!ENTITY casesensitive "Case Sensitive Search"> +<!ENTITY matchfilename "Match Entire Filename"> +<!ENTITY results.filename "Filename"> +<!ENTITY results.location "Location"> +<!ENTITY results.size "Size"> +<!ENTITY bytes.before ""> +<!ENTITY bytes.after "bytes"> +<!ENTITY button.find "Find"> +<!ENTITY button.cancel "Cancel"> +</pre> + <p>이제, 새 언어를 위한 텍스트를 추가하기 위해 필요한 모든 것은 다른 DTD 파일을 만드는 겁니다. 딴 locale에 DTD 파일을 추가하기 위해 chrome 시스템을 써서, 같은 XUL 파일을 다른 언어에 쓸 수 있습니다.</p> + <p>지금까지 Find files 예제: <a href="https://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt">Source</a></p> +</div> +<p><br> + 다음은, <a href="ko/XUL_Tutorial/Property_Files">프로퍼티 파일</a>을 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Property_Files">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html new file mode 100644 index 0000000000..bf2e970432 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html @@ -0,0 +1,118 @@ +--- +title: Manifest Files +slug: Mozilla/Tech/XUL/XUL_Tutorial/Manifest_Files +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_a_Window">다음 »</a></p> +</div><p></p> +<p><br> + 이번 섹션에서는 꾸러미에 chrome과 XUL 파일을 넣는 방법과 꾸러미를 위한 선언 파일(manifest file)을 생성하는 방법에 대해 알아 보겠습니다.</p> +<h3 id=".EA.BE.B8.EB.9F.AC.EB.AF.B8" name=".EA.BE.B8.EB.9F.AC.EB.AF.B8">꾸러미</h3> +<p>꾸러미는 사용자 인터페이스의 기능을 정의하는 XUL 파일과 스크립트의 집합입니다. 꾸러미는 모질라에 설치될 수 있으며, chrome URL로 참조될 수도 있습니다. 꾸러미는 어떤 종류의 파일도 포함할 수 있고, 필요한 경우에는 꾸러미의 여러 부분을 하위 디렉토리에 나누어 담을 수도 있습니다. 꾸러미는 디렉토리나 JAR 아카이브로 저장될 수 있습니다.</p> +<h3 id=".EC.84.A0.EC.96.B8_.ED.8C.8C.EC.9D.BC" name=".EC.84.A0.EC.96.B8_.ED.8C.8C.EC.9D.BC">선언 파일</h3> +<p>선언 파일은 꾸러미를 설명하고 꾸러미의 디스크에서의 위치와 chrome URL을 연결하는데 사용됩니다. Mozilla 응용 프로그램이 시작될 때 어떤 꾸러미들이 설치되어 있는지 확인하기 위해 chrome 디렉토리에 있는 선언 파일을 검사합니다. 이것은 새로운 꾸러미를 설치하기 위해 여러분이 해야 할 작업은 새로운 선언 파일을 어플리케이션 chrome 디렉토리나 사용자 chrome 디렉토리에 추가하는 것 뿐이라는 것을 의미합니다. 후자의 chrome 디렉토리는 보통 어플리케이션 디렉토리에 쓰기 권한이 없을 수 있기 때문에 사용되는 방법입니다.</p> +<p>만일 여러분이 권한이 있는 XUL 코드를 Firefox 브라우저에서 테스트 하려고 한다며, 다음의 절차와 같이 한줄만 있는 선언 파일을 가지고 쉽게 할 수 있습니다.</p> +<ol> + <li>어딘가에 새로운 디렉토리를 생성하세요. 예를 들어, Windows일 경우 C:\testfiles일 수 있겠습니다.</li> + <li>Chrome 디렉토리에 test.manifest라는 이름을 가진 새로운 <b>ASCII</b><sup>1</sup> 파일을 만드세요. 파일은 .manifest라는 확장자를 가지기만 하면 어떤 이름이든 상관 없습니다. <sup>(1. BOM을 가진 UTF-8은 작동하지 않습니다.)</sup></li> + <li>선언 파일에 다음 라인을 추가하세요.</li> +</ol> +<pre class="eval"> content tests <a class="external" rel="freelink">file:///C:/testfiles/</a> +</pre> +<p>위 라인상의 파일 경로는 앞서 생성한 디렉토리를 가리켜야 합니다. 파일 경로를 정확히 모를 경우에는 브라우저에서 해당 경로를 열고 주소 영역에서 URL을 복사하세요.</p> +<p>이게 답니다! 이제 여러분이 새로운 디렉토리에 몇 가지 XUL 파일들을 추가만 하면, <a class="external" rel="freelink">chrome://tests/content/</a><filename> 형식으로 chrom URL을 입력하여 해당 파일을을 로드할 수 있을 것입니다. 물론 변경된 내용을 반영하기 위해서는 브라우저를 재시작 해야 합니다. 만일 파일이 로드되지 않는다면, 파일 경로가 정확한지 확인하세요.</p> +<p>내용(content) 꾸러미를 위한 선언 파일 라인의 기본 구문은 다음과 같습니다.</p> +<p>'content <packagename> <filepath>'</p> +<p>첫 번째 필드인 'content'는 내용(content) 꾸러미라는 것을 나타냅니다. 테마일 경우에는 'skin'을 쓰고, 로케일인 경우에는 'locale'을 사용합니다. 위 예제에서 packagename은 'tests'이고, 이것은 <a class="external" rel="freelink">chrome://tests/content/sample.xul의</a> chrome URL 첫번째 필드가 'tests'라는 것을 의미합니다. 만일 꾸러미 이름이 'browser'였다면 chrom URL은 <a class="external" rel="freelink">chrome://browser/content/가</a> 될 수 있습니다. 마지막 필드는 파일들이 위치한 경로 입니다. 이것은 파일 URL을 사용한 로컬 파일 경로이거나 jar URL을 사용한 JAR 아카이브(archive) 일 수 있습니다. JAR 아카이브에 대해서는 잠시 후에 설명할 것입니다. 선언 파일에 또 다른 라인을 포함하여 여러개의 꾸러미를 명시할 수도 있습니다.</p> +<p>Firefox에서 사용하는 browser.manifest 파일은 다음과 같습니다.</p> +<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes +content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes +overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul +</pre> +<p>여기에는 'branding'과 'browser' 두 개의 꾸러미가 나열되어 있습니다. 또 세 개의 overlays가 명시되어 있는데, 이는 다른 꾸러미의 내용(content)이 함께 조합될 수 있게 해 줍니다. 확장기능들은 대부분 브라우저의 UI와 확장기능의 UI가 병합(merge)되기 때문에 overlays를 사용하게 됩니다.</p> +<p>branding과 browser 꾸러미의 파일 경로는 content가 아카이브로 꾸려져 있기 때문에 jar URL을 사용하고 있습니다. JAR 아카이브는 ZIP 유틸리티를 이용해 생성할 수 있습니다. Chrome 디렉토리에 위치한 JAR 파일인 경우에는 다음과 같이 아주 간단합니다.</p> +<p>jar:<filename.jar>!/<path_in_archive></p> +<p>browser 꾸러미에서 아카이브는 browser.jar이며 chrome 디렉토리에 선언 파일과 함께 위치합니다. 'content/browser' 경로는 XUL 파일이 위치한 아카이브 내의 경로를 나타냅니다. 만일 아카이브 내에 어떤 경로도 존재하지 않을 경우에는 경로를 명시할 필요가 없습니다. 여기서는 하나의 아카이브에 branding 꾸러미가 다른 경로로 저장되어 있으므로 명시되어 있습니다.</p> +<p>위에서 생성한 'tests' 꾸러미의 경우, 아카이브로 파일을 꾸리지 않았기 때문에 파일 경로가 직접 사용되었습니다. 개발시에는 변경이 발생할 때마다 매번 모든 파일을 꾸릴 필요가 없기 때문에, 이렇게 하는 것이 좋습니다. 그러나 응용프로그램이나 확장기능으로 배포할 경우에는 조그만 다수의 파일을 설치해야 하는 번거로움을 피하기 위해 하나의 아카이브로 묶길 원할 것입니다.</p> +<p>선언 파일의 라인 끝에 있는 xpcnativewrappers=yes 부분은 선택적으로 사용되는 플래그입니다. 자바스크립트에서는 웹 페이상에서 있는 코드가 내장(built-in) 함수를 재정의(override) 할 수 있습니다. 만일 xpcnativewrappers 플래그(flag)가 명시되어 있다면, 권한이 부여된 컨텍스트(privileged context)에서 실행되는 스크립트는 재정의된 함수가 아닌 원래의 내장 함수를 호출한다는 것을 의미합니다. 플래그 없이 확장기능이 수정된 버전의 함수를 호출하려고 하면 제대로 작동하지 않을 수도 있고, 더욱이 보안 구멍이 생겨날 수 있습니다. 이 플래그는 이러한 문제점을 방지하기 위해 추가되었으며, 새로운 확장 기능들에서는 항상 사용하는게 좋습니다. 그러나 이러한 변화에 호환되지 않는 오래된 학장기능들에서는 무시됩니다. 이 기능에 대한 자세한 정보는 <a href="ko/XPCNativeWrapper">XPCNativeWrapper</a>를 참조하세요.</p> +<h3 id=".ED.85.8C.EB.A7.88.EC.99.80_.EB.A1.9C.EC.BC.80.EC.9D.BC" name=".ED.85.8C.EB.A7.88.EC.99.80_.EB.A1.9C.EC.BC.80.EC.9D.BC">테마와 로케일</h3> +<p>테마와 로케일에서의 구문은 내용 꾸러미와 유사하지만, 여러분은 테마나 로케일을 제공할 내용 꾸러미를 명시해야 할 필요가 있습니다.</p> +<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/ +locale browser en-US jar:en-US.jar!/locale/browser/ +</pre> +<p>위의 예에서 browser에 스킨과 로케일을 적용한다는 것을 나타내기 위한 특별한 필드가 추가되었습니다. 스킨 이름은 'classic/1.0'입니다. 이 경우에 테마 이름의 일부분으로 버전 번호가 사용되었지만, 여러분의 테마를 만들 경우에는 선택적인 사항입니다. Mozilla는 버전 번호를 특별한 방법으로 처리하지 않습니다. 위의 경우 버전 번호는 그냥 테마 이름의 일부분일 뿐입니다. 로케일은 'en-US'입니다. 이것들을 연결하는 chrome URL은 <a class="external" rel="freelink">chrome://browser/skin과</a> <a class="external" rel="freelink">chrome://browser/locale일</a> 수 있습니다. 여러분의 테마나 로케일을 작성할 경우에는 위의 두 줄중 하나를 가진 선언 파일을 생성하고 테마나 로케일에 맞게 수정하기만 하면 됩니다.</p> +<p>테마에 대한 자세한 정보는 <a href="ko/Themes">Themes</a>를 참조하시고 로케일에 대한 자세한 정보는 <a href="ko/Localization">Localization</a>을 참조하세요.</p> +<div class="highlight"> + <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">우리의 파일 찾기 대화상자 예제</h3> + <p>이제 우리가 작성하려고 하는 파일 찾가 대화 상자를 위한 선언 파일을 만들어 보도록 하겠습니다. 원한다면 세 가지 타입을 하나의 파일에 넣을 수 있습니다. 모든 부분(content, skin, locale)이 하나의 파일에 포함되는 확장 기능을 작성할 때 보통 이렇게 합니다. 파일 찾기 대화상자에서는 이러한 방법을 사용할 것입니다. Chrome 디렉토리에 findfile.manifest 파일을 생성하고 다음의 내용을 추가하세요.</p> + <pre>content findfile file:///findfile/content/ +skin findfile classic/1.0 file:///findfile/skin/ +locale findfile en-US file:///findfile/locale/ +</pre> + <p>위에서 열거된 새로운 디렉토리들을 생성하세요. 디렉토리를 어디에 생성하는지에는 상관이 없지만 선언 파일에서 명시한 파일 경로는 반드시 해당 디렉토리를 가리켜야 합니다. 당연히 여러분의 시스템에 맞는 디렉토리 경로를 사용하면 됩니다. 만일 꾸러미를 배포할 경우에는 JAR 파일로 묶길 원할 수도 있고 그렇게 되면 경로를 수정해야 합니다. 이번 경우에는 선언 파일에 대해 설명하고 다음 섹션에서 볼 예제를 위한 디렉토리를 준비할 목적으로 생성할 것입니다.</p> + <p>스킨과 로케일 줄의 두번째 필드가 'findfile'로 명시되었다는 것을 확인하세요. 이것은 스킨과 로케일이 첫 번째 줄에서 명시한 findfile 꾸러미를 수정한다는 것을 의미합니다. 위의 세 가지 경로는 각 부분을 위한 하위 디렉토리를 명시합니다. 여러분은 각 부분에 해당하는 파일을 분리하여 관리하기 위해 하위 디렉토리를 작성하길 원할 것입니다.</p> +</div> +<h3 id=".EA.BE.B8.EB.9F.AC.EB.AF.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EA.BE.B8.EB.9F.AC.EB.AF.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">꾸러미 설치하기</h3> +<p>응용 프로그램을 설치하기 위해서는 설치 프로그램을 만들거나 다른 응용 프로그램에 포함시킬 필요가 있습니다. 어떤 방법을 사용할 것인지는 여러분이 작성하는 응용 프로그램의 종류에 따라 달라집니다. 확장 기능일 경우에는 설치 파일인 <a href="ko/Install_Manifests">install.rdf</a>를 작성해야 하는데, 이는 어떤 것들을 설치할 것인지, 확장기능의 제작자가 누구인지, 호환되는 브라우저 버전이나 응용프로그램 등과 같은 내용을 포함하고 있습니다. 또한 확장 기능은 파일이 설치되는 장소에 제약이 있으므로 <a href="ko/Bundles">고유의 디렉토리 구조</a>를 필요로 합니다. 확장 기능은 <a href="ko/XPI">XPI</a> 파일로 꾸려지게 됩니다. XPI는 <a href="ko/XPInstall">XPInstall</a>의 약자로 Mozilla에서 컴포넌트를 설치할 때 사용됩니다. JAR 파일과 마찬가지로 XPI 파일도 확장자만 다른 ZIP 파일 이기 때문에 ZIP 유틸리티로 보거나 생성할 수 있습니다.</p> +<p>Firefox의 확장 기능 관리자는 XPI 파일로 꾸려져 있는 확장 기능의 설치를 자동으로 처리해 줍니다. 작성한 확장 기능은 사용자들이 설치를 위해 위치할 수 있는 <a class="link-https" href="https://addons.mozilla.org/">Mozilla Add-ons site</a>로 업로드 할 것을 권장합니다. 어떤 사이트에서나 설치할 수는 있지만, 특정 사이트는 기본적으로 설치가 허가되지 않도록 되어 있을 수 있습니다.</p> +<p>파일들을 설치하기 위해서는 JavaScript로 작성된 스크립트를 이용할 수도 있습니다. 이러한 방법은 아무 위치에나 파일을 복사할 수 있으며, 다른 방법의 파일 관리 작업을 수행할 수 있게 해 줍니다. 그러나 스크립트로 설치된 응용프로그램은 확장 기능 관리자에 표시되지 않을 것이고, 따라서 자동화된 설치 해제 방법이 존재하지 않습니다. 이런 이유로 설치 스크립트는 잘 사용되지 않습니다.</p> +<p>독립형 응용 프로그램일 경우에는 XULRunner를 사용하여 꾸려질 수 있습니다. 이렇게 하면 별도의 실행 파일이 가능하며, 브라우저와는 독립적으로 응용 프로그램을 배포할 수 있습니다.</p> +<p>확장기능을 작성하는 좀 더 자세한 정보는 <a href="ko/Extensions">Extensions</a>을 참조하시고, XULRunner에 대한 상세한 정보는 <a href="ko/XULRunner">XULRunner</a>를 참조하세요.</p> +<h3 id=".EC.98.A4.EB.9E.98.EB.90.9C_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98" name=".EC.98.A4.EB.9E.98.EB.90.9C_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98">오래된 어플리케이션</h3> +<p>만일 Mozilla 소프트웨어의 옛 버전(Firefox 1.5나 Mozilla 1.8 이전 버전)을 위한 응용 프로그램을 작성할 경우에는 좀 더 많은 단계가 추가됩니다. 다음은 옛 버전을 위한 꾸러미를 설정하는 방법에 대해 설명합니다. 여러분이 새로운 확장기능이나 XUL 응용 프로그램을 작성할 경우에는 본 섹션을 건너 뛰어도 됩니다.</p> +<div class="note"> + <b>주의</b>: 언급되는 예전 절차는 새로운 SeaMonkey 1.0에도 적용됩니다. SeaMonkey 1.0의 코드베이스는 아직 "선언" 포맷을 채택하지 않고 있습니다.</div> +<pre class="eval"><?xml version="1.0"?> + +<RDF:RDF xmlns:RDF="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>" + xmlns:chrome="<span class="nowiki">http://www.mozilla.org/rdf/chrome#</span>"> + + <RDF:Seq about="urn:mozilla:package:root"> + <RDF:li resource="urn:mozilla:package:<span class="highlightred">myapplication</span>"/> + </RDF:Seq> + + <RDF:Description about="urn:mozilla:package:<span class="highlightred">myapplication</span>" + chrome:displayName="<span class="highlightblue">Application Title</span>" + chrome:author="<span class="highlightblue">Author Name</span>" + chrome:name="<span class="highlightred">myapplication</span>" + chrome:extension="true"/> + +</RDF:RDF> +</pre> +<pre class="eval">content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span> +</pre> +<ol> + <li>Create a directory somewhere on your disk. Many people put this as a subdirectory inside Mozilla's chrome directory, but this isn't necessary. The directory could be anywhere and on any disk. Put your XUL files in this directory.</li> + <li>Create a file called contents.rdf and place it in this directory. Copy the text in the box below into the new contents.rdf file. This file is used to identify the application id, its name, author, version and so on.</li> + <li>Change the highlighted parts of the file above to your own information. The red text 'myapplication' should be the ID of your application. You make this up, but typically, the ID is similar to your application's name. Replace the blue highlighted text above with your application's title and author.</li> + <li>If the 'chrome:extension' field is true, the application is a Mozilla Firefox Extension and it will show up in the Extensions window of the browser. If false, it will not appear.</li> + <li>Save the contents.rdf and make sure it is in the directory you created in step 1.</li> + <li>Open the file <mozilla-directory>/chrome/installed-chrome.txt, where <mozilla-directory> is the directory where Mozilla is installed. Exit Mozilla before you do this.</li> + <li>Next, you are going to register the new application with Mozilla so it will know where to find it. Add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1. Change the highlighted text to the file URL below of the directory. Make sure that it URL ends with a slash and that you press enter at the end of the line. If you aren't sure what the URL is, open the directory created in step 1 into a Mozilla browser and copy the URL from the location field. Note that the reference should always be a directory, not a file.</li> + <li>Delete the file <mozilla-directory>/chrome/chrome.rdf.</li> + <li>Start Mozilla. You should be able to view any XUL files you put into the directory using a URL of the form: <b><a class="external" rel="freelink">chrome://</a><span class="highlightred">applicationid</span>/content/file.xul</b> where file.xul is the filename. Your main XUL file should be applicationid.xul which you can load using the shortcut URL <b><a class="external" rel="freelink">chrome://</a><span class="highlightred">applicationid</span>/content/</b>.</li> +</ol> +<p>If you are creating skin and/or locale portions, repeat the steps above, except that the format of the contents.rdf file is slightly different. Look at the contents.rdf files in other applications for details.</p> +<h3 id=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0" name=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0">문제 해결</h3> +<p>Chrome 꾸러미를 작성하는 것은 종종 꼼수가 필요하고, 문제 발생의 원인을 찾기가 어려울 수 있습니다. 여기에서는 여러분들이 작업을 시작하는데 있어서의 몇 가지 팁을 제공하고자 합니다.</p> +<ul> + <li><mozilla 디렉토리>/chrome/chrome.rdf 파일을 열어보세요. 아마 여러분의 어플리케이션 ID에 대한 참조를 찾을 수 있을 것입니다. 발견할 수 없을 경우에는 등록이 잘못된 것입니다. 만약 참조를 발견하셨다면 아마도 파일을 로드할 때 chrome URL을 잘못 사용했을 것입니다.</li> + <li><mozilla 디렉토리>/chrom/chrome.rdf 파일을 삭제해 보세요. 그 파일은 다시 생성됩니다. 또한 만약 overlays를 사용한다면 <mozilla 디렉토리>/chrome/overlayinfo/ 디렉토리 전체를 삭제해 보세요.</li> + <li>Make sure that the URL in the line you added to installed-chrome.txt ends with a slash and the file itself ends with a blank line.</li> + <li>윈도우즈에서는 파일 URL이 <a class="external" rel="freelink">file://C/files/app/</a> 형식이어야 하며, 여기서 C는 드라이브 문자입니다.</li> + <li>contents.rdf 파일이 올바른 디렉토리에 존재하며 바른 형태(well-formed)인지를 확인 하십시요. Mozilla에서 contents.rdf 파일을 열어, 바른 형태의 XML로 구문 분석되는지 보세요. 그렇지 않다면 노란 배경에 오류가 보일것입니다.</li> + <li>여러분이 Mozilla 디버그 빌드(debug build)를 사용하고 있다면, 시작시에 어떤 chrome 어플리케이션이 검사되는지를 나타내는 몇 가지 정보가 터미널에 출력될 것입니다. 여러분이 작성한 어플리케이션이 목록상에 나타나는지 확인하세요.</li> + <li>XUL 파일 내 "XML Parsing Error: undefined entity"라는 오류 메시지는 선언 파일의 오류이거나 선언 파일에서 참조하는 jar 파일상의 오류에 의해 발생할 수 있습니다. 예를 들어 <!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://fireclipse/locale/fireclipse.dtd</a>">에서의 dtd 파일은 반드시 존재해야 하고 디렉토리도 "로케일" 선언 파일에서 정확히 언급되어 있어야만 하며, 만일 그렇지 않다면 XML 구문분석이 실패할 것입니다.</li> +</ul> +<p>선언 파일에 대한 좀더 자세한 정보는 <a href="ko/Chrome_Registration">Chrome Registration</a>를 참조하세요.</p> +<p>다음 섹션에서는 XUL 언어에 대해 좀 더 자세히 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_a_Window">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html new file mode 100644 index 0000000000..a34556a984 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html @@ -0,0 +1,69 @@ +--- +title: More Button Features +slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Button_Features +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Box_Model">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 버튼의 부가적인 기능들에 대해 알아 보겠습니다.</p> +<h3 id=".EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0" name=".EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0">그림 넣기</h3> +<p>버튼에 그림을 넣을 때는 <code><code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code> 속성에 URL을 지정해 주면 됩니다. 그림은 상대든 절대 URL이든 상관없이 로드되며, 읽어온 그림을 버튼에 표시합니다.</p> +<p>아래의 버튼은 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>과 <code><code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code>(happy.png)을 모두 포함하고 있습니다. 그림은 라벨의 왼쪽에 표시되는데 다른 두 가지 속성을 이용하여 그림의 위치를 바꿀 수 있습니다. 이에 대해서는 잠시 후에 설명하겠습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">View</a></p> +<pre><button label="Help" image="happy.png"/> +</pre> +<h4 id="CSS.EB.A1.9C_.EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0" name="CSS.EB.A1.9C_.EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0">CSS로 그림 넣기</h4> +<p>이미지를 지정하는 또 다른 방법은 버튼에 CSS의 <code>list-style-image</code> 스타일 속성을 이용하는 것입니다. 이 방법은 XUL 파일을 바꾸지 않고도 '스킨'(이 경우는 그림)을 변경할 수 있도록 고안된 것입니다. 예제는 아래와 같습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">View</a></p> +<pre><button id="find-button" + label="Find" style="list-style-image: url('happy.png')"/> +</pre> +<p>위의 예에서도 'happy.png'라는 그림이 버튼에 표시됩니다. <code><code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 속성은 HTML에서의 style 속성과 비슷하게 동작합니다. 일반적으로, style 속성은 모든 XUL 요소에 사용할 수 있습니다. 스타일 선언은 별도의 스타일 시트에 넣는 것이 좋다는 점을 명심하세요.</p> +<h3 id=".EA.B7.B8.EB.A6.BC_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EA.B7.B8.EB.A6.BC_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">그림 위치 지정하기</h3> +<p>기본적으로 버튼의 그림은 글씨의 왼쪽에 표시됩니다. 그림의 위치를 지정하기 위해서는 두 가지의 속성을 사용할 수 있습니다.</p> +<p><code><code id="a-dir"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 속성은 그림과 글씨의 방향을 제어합니다. dir 속성값을 <code>reverse</code>로 지정하면 그림이 글씨의 오른쪽에 출력됩니다. 반대로 <code>normal</code>을 사용하거나 값을 지정하지 않으면 그림은 글씨의 왼쪽에 나타납니다.</p> +<p><code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성을 사용하면 그림과 글씨의 상하 관계를 조정할 수 있습니다. 기본값은 <code>horizontal</code>로 그림이 글자의 왼쪽이나 오른쪽에 표시되도록 합니다. 이 값을 <code>vertical</code>로 지정하면 그림이 글자의 위나 아래에 나타나게 됩니다. 이 때는 <code>dir</code> 속성은 위, 아래의 방향을 지정하기 위해 사용할 수 있는데 <code>normal</code>일 때는 그림이 글씨 위에, <code>reverse</code>일 때는 그림이 글씨 아래에 표시됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">View</a></p> +<div class="float-right"> + <img alt="Image:advbtns1.png"></div> +<pre><button label="Left" image="happy.png"/> +<button label="Right" image="happy.png" dir="reverse"/> +<button label="Above" image="happy.png" orient="vertical"/> +<button label="Below" image="happy.png" orient="vertical" dir="reverse"/> +</pre> +<p>위의 예제는 앞에서 말한 네 가지 정렬 방식이 모두 사용되었습니다. 기본값을 사용할 때는 위와 같이 속성값을 지정하지 않아도 됩니다.</p> +<h3 id=".ED.8A.B9.EB.B3.84.ED.95.9C_.EB.82.B4.EC.9A.A9.EC.9D.84_.EA.B0.80.EC.A7.80.EB.8A.94_.EB.B2.84.ED.8A.BC" name=".ED.8A.B9.EB.B3.84.ED.95.9C_.EB.82.B4.EC.9A.A9.EC.9D.84_.EA.B0.80.EC.A7.80.EB.8A.94_.EB.B2.84.ED.8A.BC">특별한 내용을 가지는 버튼</h3> +<p>버튼 내부에는 임의의 마크업을 포함할 수 있으며 이런것들은 버튼의 안쪽에 표시됩니다. 이 기능을 자주 사용하지는 않겠지만, XUL이 제공하지 않는 사용자 정의 요소(custom element)를 만들 때 유용하게 쓰일 수 있습니다.</p> +<p>아래는 두 단어가 빨간색인 버튼을 만드는 예입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">View</a></p> +<pre><button> + <description value="This is a"/> + <description value="rather strange" style="color: red;"/> + <description value="button"/> +</button> +</pre> +<p>어떠한 XUL 요소도 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>에 삽입될 수 있습니다. 하지만 HTML 요소들은 무시되기 때문에, 대신 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>을 사용해야 합니다. 그리고 버튼에 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값을 지정하면 버튼 내부의 모든 내용이 사라진다는 것에 유념하세요.</p> +<h4 id="Menupopup.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.B2.84.ED.8A.BC" name="Menupopup.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.B2.84.ED.8A.BC">Menupopup이 있는 버튼</h4> +<p>여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>처럼 버튼을 눌렀을때 드롭 다운 메뉴가 나오도록 하기 위해, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 버튼 내부에 넣을 수 있습니다. 이 때 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성을 반드시 <code>menu</code>로 지정해야 합니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">View</a></p> +<div class="float-right"> + <img alt="Image:advbtns2.png"></div> +<pre><button type="menu" label="Device"> + <menupopup> + <menuitem label="Printer"/> + <menuitem label="Mouse"/> + <menuitem label="Keyboard"/> + </menupopup> +</button> +</pre> +<p>위의 예를 실행시키고 버튼을 클릭하면 세 가지 항목이 있는 메뉴가 펼쳐집니다. 하지만 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>와 달리 항목을 선택해도 버튼의 라벨은 변하지 않습니다. 이런 종류의 버튼은 각 항목마다 스크립트를 지정하여 작업을 수행하게 함으로써 메뉴처럼 사용할 수 있습니다. 메뉴에 대한 더 자세한 내용은 나중에 알아보겠습니다.</p> +<p>여러분은 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성을 <code>menu-button</code>으로 지정하여 메뉴가 있는 버튼을 만들 수 있는데, 이렇게 만들어진 버튼은 위의 버튼과는 모양이 다릅니다. 위 그림의 왼쪽은 'menu'이고 두번째는 'menu-button'을 사용한 것입니다. 둘 다 메뉴를 가리키는 화살표를 가지고 있습니다. 하지만 'menu'를 사용한 버튼은 사용자가 버튼의 아무 곳이나 클릭하면 메뉴가 나타나는 반면 'menu-button'을 사용한 버튼은 사용자가 화살표를 눌러야 메뉴가 나타납니다.</p> +<p>다음에서는 <a href="ko/XUL_Tutorial/The_Box_Model">XUL 요소가 창내에 배치되는 방법</a>에 대해 좀 더 자세히 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Box_Model">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html new file mode 100644 index 0000000000..17f4af786a --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html @@ -0,0 +1,140 @@ +--- +title: More Event Handlers +slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Event_Handlers +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 이벤트 객체에 대해 검토해보고, 추가적인 이벤트들에 대해 설명하겠습니다.</p> +<h3 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EA.B0.9D.EC.B2.B4" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EA.B0.9D.EC.B2.B4">이벤트 객체</h3> +<p>각 이벤트 핸들러는 <a href="ko/DOM/event">event</a> 객체가 저장된 하나의 인자를 가집니다. 속성 형식의 이벤트 리스너에서의 이벤트 객체는 명시하지 않더라도 스크립트 코드에서 'event'라는 이름으로 참조할 수 있습니다. <a href="ko/DOM/element.addEventListener">addEventListener</a> 형태일 경우에는 리스너 함수의 첫 번째 인자가 이벤트 객체가 됩니다. 이벤트 객체에는 이벤트가 처리되는 동안 사용할 수 있는 많은 속성이 있습니다. 전체 목록은 <a class="external" href="http://xulplanet.com/references/objref/Event.html">XULPlanet object reference</a>에서 보실 수 있습니다.</p> +<p>우리는 지난 단원에서 이벤트의 <code><a href="ko/DOM/event.target">target</a></code> 속성에 대해 알아 보았습니다. 이 속성은 이벤트가 발생한 대상 요소에 대한 참조를 가지고 있습니다. 이와 유사한 <code><a href="ko/DOM/event.currentTarget">currentTarget</a></code> 속성은 현재 이벤트 리스너가 처리하고 있는 대상 요소에 대한 참조를 가집니다. 아래 예제에서 <code><a href="ko/DOM/event.target">target</a></code> 속성은 활성화된 버튼이나 체크박스 중 하나에 대한 참조인 반면 <code><a href="ko/DOM/event.currentTarget">currentTarget</a></code> 속성은 항상 vbox가 됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">View</a></p> +<pre><vbox oncommand="alert(event.currentTarget.tagName);"> + <button label="OK"/> + <checkbox label="Show images"/> +</vbox> +</pre> +<h4 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.A0.84.ED.8C.8C_.EC.A4.91.EC.A7.80" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.A0.84.ED.8C.8C_.EC.A4.91.EC.A7.80">이벤트 전파 중지</h4> +<p>일단 이벤트를 처리하였으면, 이벤트의 전파 단계 중 어디에 있는지에 상관없이, 이벤트의 버블링이나 캡처 단계를 중지하여 다른 요소들로 이벤트가 전파되는 것을 막고자 할때가 있을 것입니다. 이는 이벤트 핸들러를 대상 요소에 어떻게 부착했는지에 따라 그 방법이 달라집니다.</p> +<p>캡처 단계는 버블링 단계 이전에 발생한다고 했던 것을 기억하세요. 그렇게 때문에 캡처 단계에서 실행되는 리스너는 버블 단계의 리스너보다 먼저 실행됩니다. 만일 캡처 단계에서 이벤트 전파가 중지된다면, 이후에 발생할 수 있는 캡처 리스너나 버블링 리스너는 해당 이벤트에 대해 아무런 알림도 받지 못하게 됩니다. 이벤트 전파를 막기 위해서는 다음 예제와 같이 이벤트 객체의 <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드를 호출하면 됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">View</a></p> +<pre><hbox id="outerbox"> + <button id="okbutton" label="OK"/> +</hbox> + +<script> +function buttonPressed(event){ + alert('Button was pressed!'); +} + +function boxPressed(event){ + alert('Box was pressed!'); + event.stopPropagation(); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command',buttonPressed,true); + +var outerbox = document.getElementById("outerbox"); +outerbox.addEventListener('command',boxPressed,true); +</script> +</pre> +<p>예제에서, 한 이벤트 리스너는 버튼에 또 다른 이벤트 리스너는 상자에 추가되었습니다. <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드는 상자의 리스너에서 호출되므로, 버튼의 리스너는 절대 호출되지 않습니다. 만일 이 메소드가 제거되면 모든 리스너가 호출되고 2개의 알림창(alert)이 나타날 것입니다.</p> +<h4 id=".EA.B8.B0.EB.B3.B8_.ED.96.89.EC.9C.84_.EB.A7.89.EA.B8.B0" name=".EA.B8.B0.EB.B3.B8_.ED.96.89.EC.9C.84_.EB.A7.89.EA.B8.B0">기본 행위 막기</h4> +<p>어떤 요소에 아무런 이벤트 핸들러도 등록되어 있지 않다면, 캡처와 버블링 단계가 다 끝난후에 내장된(default) 방법으로 이벤트가 처리됩니다. 이 내장된 방법은 이벤트와 대상 요소의 종류에 따라 다릅니다. 예를 들어 'popupshowing' 이벤트는 팝업이 출력되기 전에 전달받는 이벤트이며, 기본(default) 동작은 팝업을 출력하는 것입니다. 만일 기본 동작이 일어나지 않도록 하면, 팝업은 출력되지 않을 것입니다. 기본 동작은 이벤트 객체의 <code><a href="ko/DOM/event.preventDefault">preventDefault</a></code> 메소드로 막을 수 있으며, 아래의 예제와 같습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">View</a></p> +<pre><button label="Types" type="menu"> + <menupopup onpopupshowing="event.preventDefault();"> + <menuitem label="Glass"/> + <menuitem label="Plastic"/> + </menupopup> +</button> +</pre> +<p>속성 형태로 작성된 이벤트 리스너에서는 해당 코드에서 false값을 반환하도록 해서 기본 행위를 막을 수 있는 방법도 있습니다. 기본 동작을 막는 것은 <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드로 이벤트 전파를 막는 것과는 다르다는 사실을 알아두세요. 기본 행위가 막혀 있더라도, 이벤트는 계속 진행됩니다. 마찬가지로, <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드를 호출한다고 해서 기본 동작이 실행되지 않는 것은 아닙니다. 여러분은 두 동작을 모두 실행되지 않게 하기 위해서는 두 메소드 모두 호출해야 합니다.</p> +<p>일단 이벤트 전파나 기본 동작을 막았다면 다음 이벤트에서도 동일하게 동작할 것입니다.</p> +<p>다음 단원의 내용은 자주 사용되는 몇가지 이벤트 목록입니다. 전체 목록은 <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">XULPlanet event reference</a>를 참조하세요.</p> +<h3 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8">마우스 이벤트</h3> +<p>마우스만의 동작을 처리하는데 사용되는 여러가지 이벤트가 있으며, 간략한 설명은 아래와 같습니다.</p> +<dl> + <dt> + click </dt> + <dd> + 마우스로 대상 요소를 클릭했을때(버튼을 눌렀다 땔때) 호출됩니다.</dd> +</dl> +<dl> + <dt> + dblclick </dt> + <dd> + 마우스 버튼을 더블클릭했을때 호출됩니다.</dd> +</dl> +<dl> + <dt> + mousedown </dt> + <dd> + 마우스 버튼이 대상 요소에 눌러졌을때 호출됩니다. 이벤트 핸들러는 마우스 버튼이 눌러지면 떨어지지 않더라도 호출됩니다.</dd> +</dl> +<dl> + <dt> + mouseup </dt> + <dd> + 마우스 버튼이 떨어질때 호출됩니다.</dd> +</dl> +<dl> + <dt> + mouseover </dt> + <dd> + 마우스 포인터가 요소위로 움직이면 호출됩니다. 이 이벤트는 요소를 강조(highlight)하기 위해서 사용할 수 있지만, CSS에서 이런 것을 자동으로 처리하므로 이벤트로 처리할 필요는 없습니다. 그래도 상태바에 몇 가지 도움말을 제공하고자 할 때 사용할 수 있습니다.</dd> +</dl> +<dl> + <dt> + mousemove </dt> + <dd> + 마우스 포인터가 요소 위에서 움직이면 호출됩니다. 이 이벤트는 마우스를 움직임에 따라 자주 호출될 수 있기 때문에 긴 시간이 걸리는 작업을 이 핸들러에서 수행하도록 하는 것은 바람직하지 않습니다.</dd> +</dl> +<dl> + <dt> + mouseout </dt> + <dd> + 마우스 포인터가 대상 요소의 밖으로 나갈 때 호출됩니다. 강조된 대상 요소를 원래데로 바꾸거나 상태바의 텍스트를 제거할 때 사용할 수 있습니다.</dd> +</dl> +<p>이것들 외에도 드래그와 관련된 이벤트들이 있으며 이는 사용자가 마우스 버튼을 누른 상태에서 주위로 끌 때 발생합니다. 이러한 이벤트들에 대해서는 <a href="ko/Drag_and_Drop">Drag and Drop</a>에서 설명하겠습니다.</p> +<h4 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EB.B2.84.ED.8A.BC_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EB.B2.84.ED.8A.BC_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1">마우스 버튼 이벤트 속성</h4> +<p>마우스 버튼 이벤트가 발생하면, 어떤 마우스 버튼이 눌러졌는지와 마우스 포인터의 위치가 어디인지를 확인할 수 있는 속성을 사용할 수 있습니다. 이벤트의 <code><a href="ko/DOM/event.button">button</a></code> 속성은 어떤 버튼이 눌러졌는지를 나타내는 속성으로, 왼쪽 버튼은 0, 오른쪽 버튼은 1, 가운데 버튼은 2의 값을 가집니다. 마우스의 버튼이 다르게 설정되었다면 값이 달라질 수 있습니다.</p> +<p><code><a href="ko/DOM/event.detail">detail</a></code> 속성은 버튼이 빠른 시간 내 순차적으로 클릭된 횟수를 저장합니다. 이 속성을 이용해서 한번 클릭인지, 더블 클릭인지 혹은 3회 클릭인지를 확인할 수 있습니다. 물론 더블 클릭만 확인하고자 하면 dblclick 이벤트를 사용할 수 있습니다. click 이벤트가 첫 번째 클릭에 의해 발생하고 두번째 클릭, 세번째 클릭 각각에 대해 이벤트가 발생하지만 dblclick 이벤트는 더블 클릭시 한번만 발생합니다.</p> +<p><code><a href="ko/DOM/event.button">button</a></code>과 <code><a href="ko/DOM/event.detail">detail</a></code> 속성은 마우스 버튼과 관련된 이벤트에만 해당됩니다. 마우스의 움직임과 관련된 이벤트에서는 해당 속성값이 0으로 설정될 것입니다.</p> +<h4 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9C.84.EC.B9.98_.EA.B4.80.EB.A0.A8_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9C.84.EC.B9.98_.EA.B4.80.EB.A0.A8_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1">마우스 위치 관련 이벤트 속성</h4> +<p>그러나 모든 마우스 이벤트에는 이벤트가 발생한 마우스 위치 좌표를 저장하는 속성이 있습니다. 이 속성에는 두 가지 종류의 좌표가 있습니다. 첫 번째는 <code><a href="ko/DOM/event.screenX">screenX</a></code>와 <code><a href="ko/DOM/event.screenY">screenY</a></code> 속성으로 화면의 좌상단에 상대적인 좌표입니다. 두 번째는 <code><a href="ko/DOM/event.clientX">clientX</a></code>와 <code><a href="ko/DOM/event.clientY">clientY</a></code>로 문서의 좌상단에 상대적인 좌표입니다. 다음은 현재의 마우스 좌표를 출력하는 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">View</a></p> +<pre><script> + +function updateMouseCoordinates(event){ + var text = "X:" + event.clientX + " Y:" + event.clientY; + document.getElementById("xy").value = text; +} +</script> + +<label id="xy"/> +<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/> +</pre> +<p>예제에서는 상자의 크기를 명시적으로 지정했기 때문에 효과를 좀더 쉽게 볼 수 있습니다. 이벤트 핸들러는 <code><a href="ko/DOM/event.clientX">clientX</a></code>와 <code><a href="ko/DOM/event.clientY">clientY</a></code> 속성값을 얻어 문자열을 만들었습니다. 그리고 이 문자열을 라벨의 value 속성에 할당했습니다. <code>updateMouseCoordinates</code> 함수의 인자로 event가 넘어오는 것을 기억하세요. 만일 상자의 경계을 넘어 빠르게 마우스가 이동한다면, 아마 마우스 좌표가 400에 정확히 멈추지 않는 것을 알게 될것입니다. 이것은 mousemove 이벤트가 일정한 간격으로 발생하며, 다음 이벤트가 발생하기 전에 마우스의 위치가 밖으로 빠져나갔기 때문입니다. 당연히 마우스가 움직이는 매 픽셀마다 mousemove 이벤트가 전송된다면 너무 비효율적일 것입니다.</p> +<h4 id=".EC.9A.94.EC.86.8C.EC.97.90_.EC.83.81.EB.8C.80.EC.A0.81.EC.9D.B8_.EC.A2.8C.ED.91.9C" name=".EC.9A.94.EC.86.8C.EC.97.90_.EC.83.81.EB.8C.80.EC.A0.81.EC.9D.B8_.EC.A2.8C.ED.91.9C">요소에 상대적인 좌표</h4> +<p>여러분은 전체 창이 아닌 이벤트가 발생한 요소에 상대적인 좌표(요소 내에서의 좌표)를 얻고자 할때가 있을 것입니다. 이는 이벤트의 위치에서 요소의 위치를 빼주면 얻을 수 있으며 코드는 다음과 같습니다.</p> +<pre>var element = event.target; +var elementX = event.clientX - element.boxObject.x; +var elementY = event.clientY - element.boxObject.y; +</pre> +<p>XUL 요소들에는 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/boxObject">boxObject</a></span></code></code>라는 속성을 사용해서 얻을 수 있는 상자 객체가 있습니다. 상자 객체에 대해서는 <a href="ko/XUL_Tutorial/Box_Objects">이후 단원</a>에서 배우겠지만, 간단히 말해서 이 객체는 요소가 출력되는 방법에 대한 정보(요소의 x, y 좌표등)를 가지고 있다고 보면 됩니다. 예제 코드에서는 요소 기준의 이벤트 좌표를 얻기 위해 이벤트 좌표에서 상자 객체의 좌표를 뺐습니다.</p> +<h3 id=".EB.A1.9C.EB.93.9C.28load.29_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".EB.A1.9C.EB.93.9C.28load.29_.EC.9D.B4.EB.B2.A4.ED.8A.B8">로드(load) 이벤트</h3> +<p>로드 이벤트는 XUL 파일의 로딩이 완료되고 내용이 출력되기 직전에 문서(<code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그)로 전송됩니다. 이 이벤트는 일반적으로 변수들을 초기화하고 사용자가 창을 사용할 수 있기 전에 해야 할 일들을 처리하는데 사용됩니다. 여러분은 이러한 초기화 작업을 함수 외부의 최상위 레벨 스크립트로 처리하는 것보다는 로드 이벤트를 사용하는 것이 좋습니다. 이것은 XUL 요소들이 로드되지 않았거나 초기화되지 않았을수도 있기 때문이며, 따라서 어떤 것들은 원하는데로 동작하지 않을 수 있습니다. 로드 이벤트를 사용하려면 window 태그에 onload 속성을 넣으면 됩니다. 초기화를 필요로 하는 것들은 로드 이벤트 핸들러에서 호출하세요.</p> +<p>또한 창이 닫힐 때 혹은 브라우저의 관점에서는 페이지가 다른 URL로 넘어갈 때 발생하는 언로드(unload) 이벤트가 있습니다. 이 이벤트는 창이 닫히기 전 변경된 정보를 저장하는 것과 같은 용도로 사용할 수 있습니다.</p> +<p>다음에는 <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">단축키</a>를 추가하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html new file mode 100644 index 0000000000..897dbaa148 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html @@ -0,0 +1,109 @@ +--- +title: More Menu Features +slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Menu_Features +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Popup_Menus">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 하위 메뉴와 체크 메뉴를 만드는 방법을 알아 보겠습니다.</p> +<h3 id=".ED.95.98.EC.9C.84_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.95.98.EC.9C.84_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">하위 메뉴 만들기</h3> +<p>여러분은 기존에 있는 요소들을 사용하여 다른 메뉴 내에 있는 서브메뉴(중첩 메뉴)를 만들 수 있습니다. <code>menupopup</code>안에는 어떤 요소든 넣을 수 있다는 것을 기억해보세요. 지난 단원에서는 <code>menupopup</code>안에 <code>menuitem</code>과 <code>menuseparator</code>를 넣는 방법을 알아 보았습니다. 그러나 여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소내에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>를 넣기만 하면 하위 메뉴를 만들 수 있습니다. 이것은 <code>menu</code> 요소가 꼭 메뉴바의 바로 아래에 있지 않더라도 유효한 것이기 때문에 동작하게 됩니다. 아래는 File 메뉴내에 간단한 하위 메뉴가 존재하는 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:menubar-ex3.png"></div> +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="File"> + <menupopup id="file-popup"> + <menu id="new-menu" label="New"> + <menupopup id="new-popup"> + <menuitem label="Window"/> + <menuitem label="Message"/> + </menupopup> + </menu> + <menuitem label="Open"/> + <menuitem label="Save"/> + <menuseparator/> + <menuitem label="Exit"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<div class="highlight"> + <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.A9.94.EB.89.B4_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.A9.94.EB.89.B4_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">우리의 파일 찾기 예제에 메뉴 추가하기</h3> + <p>이제 파일 찾기 대화창에 메뉴를 넣어 봅시다. 우리는 File 메뉴와 Edit 메뉴에 간단한 명령 몇 가지를 넣을 것입니다. 이 방법은 위의 예제와 비슷합니다.</p> + <pre class="eval"><toolbox> + + <span class="highlightred"><menubar id="findfiles-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Open Search..." accesskey="o"/> + <menuitem label="Save Search..." accesskey="s"/> + <menuseparator/> + <menuitem label="Close" accesskey="c"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cut" accesskey="t"/> + <menuitem label="Copy" accesskey="c"/> + <menuitem label="Paste" accesskey="p" disabled="true"/> + </menupopup> + </menu> + </menubar></span> + +<toolbar id="findfiles-toolbar> +</pre> + <div class="float-right"> + <img alt="Image:menubar1.png"></div> + <p>여기서 여러개의 명령을 가진 두 개의 메뉴를 만들었습니다. 툴박스 내에 어떻게 메뉴바가 추가되었는지를 유심히 보세요. Open Search와 Save Search 뒤에 불은 세 개의 점은 사용자가 해당 명령을 선택할 때 대화창이 열릴것이라는 것을 알려주는 일반적인 방법입니다. 각 메뉴와 메뉴 항목에는 접근글쇠(Access key)가 지정되어 있습니다. 그림을 보면 지정된 글자가 메뉴 제목에 밑줄로 표시된 것을 알 수 있습니다. 또 붙이기(Paste) 명령은 현재 사용불가 상태입니다. 우리는 아무 것도 붙일 것이 없다고 가정할 것입니다.</p> + <p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">View</a></p> +</div> +<h3 id=".EB.A9.94.EB.89.B4.EC.97.90_.EC.B2.B4.ED.81.AC_.ED.91.9C.EC.8B.9C_.EB.84.A3.EA.B8.B0" name=".EB.A9.94.EB.89.B4.EC.97.90_.EC.B2.B4.ED.81.AC_.ED.91.9C.EC.8B.9C_.EB.84.A3.EA.B8.B0">메뉴에 체크 표시 넣기</h3> +<p>많은 프로그램들에서는 체크할 수 있는 메뉴를 사용합니다. 예를 들어 현재 사용하고 있는 기능은 명령 옆에 체크가 있고 그렇지 않은 기능은 체크가 없는 메뉴 같은 것입니다. 사용자가 메뉴를 선택하면 체크 상태가 바뀝니다. 또 메뉴 항목에 라디오 버튼을 넣고 싶을 때도 있을 것입니다.</p> +<p>체크 메뉴를 만드는 방법은 <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>와 <code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>를 만드는 방법과 비슷합니다. 이를 위해서는 두 개의 속성이 필요한데, <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성은 체크의 형식을 지정할 때, <code><a href="ko/XUL/Attribute/menuitem.name">name</a></code> 속성은 관련된 명령을 하나로 묶을 때 사용합니다. 아래는 체크 항목을 가진 메뉴를 만드는 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">View</a></p> +<pre><toolbox> + <menubar id="options-menubar"> + <menu id="options_menu" label="Options"> + <menupopup> + <menuitem label="Make Backups" type="checkbox"/> + <menuitem label="Email Administrator" type="checkbox" checked="true"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>메뉴 항목이 체크될 수 있도록 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성이 추가되었습니다. 해당 속성값을 <code>checkbox</code>로 설정하면 메뉴 항목을 클릭할 때마다 체크가 설정/해제됩니다.</p> +<h4 id=".EB.9D.BC.EB.94.94.EC.98.A4.EB.B2.84.ED.8A.BC.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.A9.94.EB.89.B4" name=".EB.9D.BC.EB.94.94.EC.98.A4.EB.B2.84.ED.8A.BC.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.A9.94.EB.89.B4">라디오버튼이 있는 메뉴</h4> +<p>일반 체크 외에도 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성의 값을 <code>radio</code>로 지정하면 라디오 형식의 체크를 만들 수 있습니다. 라디오 체크는 한 그룹의 메뉴 항목 중 하나만 선택할 수 있도록 만들 때 사용됩니다. 예를 들면 한번에 하나의 글꼴만 선택할 수 있는 글꼴 메뉴 같은 것입니다. 이 때 다른 항목이 선택되면 이전에 선택되었던 항목은 체크가 해제됩니다.</p> +<p>여러 개의 메뉴 항목을 하나의 그룹으로 묶을 때는 각 메뉴 항목의 <code><a href="ko/XUL/Attribute/menuitem.name">name</a></code> 속성을 같은 값으로 지정하면 됩니다. 아래 예제를 보겠습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">View</a></p> +<pre><toolbox> + <menubar id="planets-menubar"> + <menu id="planet-menu" label="Planet"> + <menupopup> + <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/> + <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/> + <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/> + <menuseparator/> + <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/> + <menuitem id="moon" label="Moon" type="radio" name="inhabited"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>예제를 실행시키면, 처음 세 개의 메뉴 항목 중 한 가지만 선택할 수 있다는 것을 알게 될 것입니다. 이 메뉴 항목들은 모두 동일한 <code>name</code> 속성값을 가지고 있기 때문에 하나의 그룹으로 엮인 것입니다. 마지막 메뉴 항목인 Earth는 라디오 메뉴이지만 <code>name</code> 속성값이 다르기 때문에 그 무리에 속하지 않습니다.</p> +<p>물론 하나의 그룹 항목들은 모두 동일한 메뉴 안에 있어야 합니다. 꼭 붙어 있어야 할 필요는 없지만, 상식적으로 생각할 때 서로 붙어 있는 것이 좋을 것입니다.</p> +<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Popup_Menus">팝업 메뉴</a>를 작성하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Popup_Menus">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html new file mode 100644 index 0000000000..a3062b42d7 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html @@ -0,0 +1,190 @@ +--- +title: Popup Menus +slug: Mozilla/Tech/XUL/XUL_Tutorial/Popup_Menus +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus">다음 »</a></p> +</div><p></p> +<p>이전 단원에서는 메뉴바에 들어가는 메뉴를 만드는 방법에 대해 알아보았습니다. XUL은 팝업 메뉴를 만들 수 있는 능력도 가지고 있습니다. 팝업 메뉴는 대개 오른쪽 마우스 버튼을 누를 때 표시됩니다.</p> +<h3 id=".ED.8C.9D.EC.97.85_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.8C.9D.EC.97.85_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">팝업 메뉴 만들기</h3> +<p>XUL은 아래에서 설명하는 3가지 다른 형태의 팝업이 있습니다. 주된 차이는 표시되는 방식에 있습니다.</p> +<dl> + <dt> + 일반 팝업(Plain Popups)</dt> + <dd> + 일반 팝업은 대상 요소에 마우스 왼쪽 버튼을 클릭하였을 때 나타나는 팝업창입니다. 일반 팝업은 어디에나 위치할 수 있으며, 어떤 내용이든 담을 수 있다는 점을 제외하고 메뉴바에 있는 메뉴와 아주 비슷합니다. 브라우저 창에서 뒤로와 앞으로 가기 버튼 옆에 있는 조그만 아래방향 화살표를 눌렀을 때 나타나는 드롭 다운 메뉴가 이의 좋은 예입니다.</dd> +</dl> +<dl> + <dt> + 문맥 팝업(Context Popups)</dt> + <dd> + 문맥 팝업은 사용자가 문맥 메뉴 버튼(대개 마우스 오른쪽 버튼)을 누를 때 나타나는 팝업창입니다. 일부 플랫폼에서는 다른 버튼일 수도 있지만, 이것은 항상 문맥전용 메뉴를 호출하는 버튼 또는 키와 마우스의 조합입니다. 예를 들어 맥킨토시에서는 사용자가 제어키(Ctrl)를 누르고 마우스 버튼을 클릭하거나, 잠깐 동안 마우스 버튼을 누르고 있어야 합니다.</dd> +</dl> +<dl> + <dt> + 툴팁(Tooltips)</dt> + <dd> + 툴팁 팝업창은 사용자가 어떤 요소위에 마우스를 올렸을 때 나타납니다. 이런 유형의 팝업은 보통 버튼 자체에서 제공되는 것보다 좀더 구체적인 버튼에 대한 설명을 제공하는 데 사용됩니다.</dd> +</dl> +<p>이들 세 가지 유형의 팝업은 사용자가 이것들을 호출하는 방식이 서로 다릅니다. 그래서 팝업 유형은 팝업을 호출하는 요소에 의해 결정됩니다.</p> +<h4 id=".ED.8C.9D.EC.97.85_.EB.82.B4.EC.9A.A9_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name=".ED.8C.9D.EC.97.85_.EB.82.B4.EC.9A.A9_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">팝업 내용 선언하기</h4> +<p>팝업은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 사용하여 선언됩니다. 이는 특별한 속성이 없는 상자의 한 유형입니다. 팝업이 호출되면, 여러분이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 넣은 모든 요소를 포함하는 창이 화면에 출력될 것입니다. 여러분은 <code>menupopup</code>에 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성을 항상 넣어주어야 합니다. 이것은 이 속성이 팝업과 특정 요소를 연결하는데 사용되기 때문인데, 이 의미에 대해서는 곧 알게될 것입니다. 먼저, 예제를 보겠습니다.</p> +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cut"/> + <menuitem label="Copy"/> + <menuitem label="Paste"/> + </menupopup> +</popupset> +</pre> +<p>여기서 볼 수 있듯이, 3개의 메뉴가 있는 단순 팝업메뉴가 만들어졌습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소는 3개 메뉴 항목을 둘러싸고 있습니다. 여러분은 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성이 <code>menupopup</code> 요소 자체에 설정된 것을 볼 수 있습니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> 요소는 전체 팝업메뉴 선언부를 둘러싸고 있습니다. 이 요소는 팝업의 일반적인 컨테이너로 선택사항입니다. 이 요소는 화면에 나타나지는 않지만 사용할 모든 팝업들을 선언할 위치 역할로 사용됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>이라는 이름이 의미하듯, 내부에 여러개의 팝업을 선언할 수 있습니다. 첫 번째 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> 요소 다음에 그냥 추가하기만 하면 됩니다. 하나의 파일에 여러개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>을 둘 수도 있지만, 대개는 하나만 존재할 것입니다.</p> +<h4 id=".EC.9A.94.EC.86.8C.EC.99.80_.ED.8C.9D.EC.97.85.EC.9D.84_.EC.97.B0.EA.B2.B0.ED.95.98.EA.B8.B0" name=".EC.9A.94.EC.86.8C.EC.99.80_.ED.8C.9D.EC.97.85.EC.9D.84_.EC.97.B0.EA.B2.B0.ED.95.98.EA.B8.B0">요소와 팝업을 연결하기</h4> +<p>이제 팝업을 만들었으니 팝업이 나타나도록 해야할 시간입니다. 이를 위해 팝업과 팝업이 나타날 요소를 연결시켜야 합니다. 이렇게 하는 것은 사용자가 창의 어떤 영역을 클릭했을 때만 팝업이 나타나야 하기 때문입니다. 대개, 이 요소는 특정 버튼이거나 상자가 됩니다.</p> +<p>팝업을 요소와 연결시키려면 3가지 속성 중 하나를 해당 요소에 추가하면 됩니다. 추가할 요소는 만들고자 하는 팝업의 종류에 따라 달라집니다. 일반 팝업의 경우에는 해당 요소에 <code><code id="a-popup"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></code> 속성을 사용하고, 문맥 팝업은 <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성을 사용합니다. 마지막으로 툴팁 팝업은 <code><code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 속성을 사용합니다.</p> +<p>위의 속성에는 출력하고자 하는 <code>menupopup</code>의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성값을 지정해야 합니다. 보통 하나의 파일이 여러개의 팝업을 포함하는 이유가 이 때문입니다.</p> +<p>위의 예제를 이용해 문맥 팝업을 만들고자 합니다. 이것은 <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성을 사용해야 하며, 연결하고자 하는 팝업의 <code>id</code> 속성값을 이 속성값으로 지정해야 한다는 것을 의미합니다. 아래 예제는 이러한 사항을 어떻게 처리할 수 있는 지를 보여주고 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:popups-ex1.png"></div> +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cut"/> + <menuitem label="Copy"/> + <menuitem label="Paste"/> + </menupopup> +</popupset> + +<box context="clipmenu"> + <label value="Context click for menu"/> +</box> +</pre> +<p>여기서 팝업은 상자와 연결되었습니다. 상자 어디서든 문맥 클릭(context-click, 오른쪽 클릭)을 하면 팝업메뉴가 나타날 것입니다. 또한 상자의 자식 요소를 클릭할 때도 팝업이 나타나기 때문에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소를 클릭해도 동일하게 동작할 것입니다. <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성은 상자와 해당 id를 가진 팝업을 연결하기 위해 사용되었습니다. 이 경우, <code>id</code>가 <code>clipmenu</code>인 팝업이 나타날 것입니다. 이런 식으로 수많은 팝업을 가질 수 있으며, 이들을 다른 요소와 연결할 수 있습니다.</p> +<p>여러분은 하나의 요소에 다른 종류의 팝업 속성을 설정하여 여러개의 팝업과 연결할 수 있습니다. 또 하나의 팝업을 여러개의 요소에도 연결할 수 있는데 이는 XUL의 팝업 구문이 가진 장점 중 하나입니다. 팝업은 XUL 요소에만 연결할 수 있으며, HTML 요소와는 연결할 수 없습니다.</p> +<h3 id=".ED.88.B4.ED.8C.81" name=".ED.88.B4.ED.8C.81">툴팁</h3> +<p>여기서는 툴팁을 만드는 단순한 방법을 살펴보겠습니다. 툴팁을 만드는데는 두 가지 방법이 있습니다. 일반적으로 사용되는 가장 단순한 방법은 툴팁을 적용하고자 하는 요소에 <code><code id="a-tooltiptext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code></code> 속성을 추가하는 것입니다.</p> +<p>두 번째 방법은 툴팁의 내용을 담고 있는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 요소를 사용하는 것입니다. 이 방법은 각각의 툴팁 내용을 포함하는 별도의 블록 또는 내용을 설정하는 스크립트의 작성을 필요로 합니다. 그러나 이러한 방법을 이용하면 툴팁에 텍스트 외에도 어떠한 내용도 사용할 수 있는 장점이 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">View</a></p> +<pre><button label="Save" tooltiptext="Click here to save your stuff"/> + +<popupset> + <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"> + <description value="Click here to see more information"/> + <description value="Really!" style="color: red;"/> + </tooltip> +</popupset> + +<button label="More" tooltip="moretip"/> +</pre> +<p>이 2개의 버튼은 각각 툴팁을 가지고 있습니다. 첫 번째는 기본 툴팁 방식을, 두 번째는 다른 배경색과 서식이 적용된 텍스트로 구성된 커스텀 툴팁을 사용하고 있습니다. 툴팁은 More 버튼과 연결되어 있으며, 이를 위해 버튼의 <code><code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 속성에 해당 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성값이 설정되어 있습니다. 여기서 <code>tooltip</code> 요소는 다른 팝업 유형처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> 내부에 위치하고 있다는 점에 유의하세요.</p> +<h3 id=".ED.8C.9D.EC.97.85_.EC.A0.95.EB.A0.AC" name=".ED.8C.9D.EC.97.85_.EC.A0.95.EB.A0.AC">팝업 정렬</h3> +<p>기본적으로, 팝업과 문맥 창은 마우스 포인터가 위치한 곳에 나타납니다. 툴팁은 해당 요소의 약간 아래 위치하는데, 이는 마우스 포인터가 이를 가리지 않게 하기 위해서 입니다. 그렇다 하더라, 팝업이 나타날 위치를 좀 더 상세히 지정하고 싶은 경우가 있을 것입니다. 예를 들어, 브라우저의 뒤로 가기 버튼을 클릭했을 때 나타나는 팝업 메뉴는 마우스 포인터가 있는 곳이 아닌, 뒤로 가기 버튼 바로 아래 나타나도록 하는 것이 좋을 것입니다.</p> +<p>팝업 위치를 변경하기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> 요소에 <code><code id="a-position"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></code>이라는 또 다른 속성을 사용할 수 있습니다. 또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소에도 이를 추가할 수 있습니다. 이 속성은 팝업을 발생시키는 요소에 상대적인 팝업 위치를 지시하는 데 사용됩니다. 여러가지 값을 설정할 수 있으며, 각각을 간단히 설명하면 아래와 같습니다.</p> +<dl> + <dt> + after_start</dt> + <dd> + 팝업은 요소의 아래에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 아래). 해당 팝업창이 요소보다 큰 경우, 오른쪽으로 확장됩니다. 이것은 브라우저의 뒤로와 앞으로 가기 버튼과 연결된 드롭다운 메뉴에 사용되는 값입니다.</dd> +</dl> +<dl> + <dt> + after_end</dt> + <dd> + 팝업창은 요소의 아래에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 아래).</dd> +</dl> +<dl> + <dt> + before_start</dt> + <dd> + 팝업창은 요소의 위쪽에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 위).</dd> +</dl> +<dl> + <dt> + before_end</dt> + <dd> + 팝업창은 요소의 위쪽에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 위).</dd> +</dl> +<dl> + <dt> + end_after</dt> + <dd> + 팝업은 요소의 오른쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 아래).</dd> +</dl> +<dl> + <dt> + end_before</dt> + <dd> + 팝업은 요소의 오른쪽에 위쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 위).</dd> +</dl> +<dl> + <dt> + start_after</dt> + <dd> + 팝업은 요소의 왼쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 아래).</dd> +</dl> +<dl> + <dt> + start_before</dt> + <dd> + 팝업은 요소의 왼쪽에 위쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 위).</dd> +</dl> +<dl> + <dt> + overlap</dt> + <dd> + 팝업은 요소의 위에 나타납니다(요소의 왼쪽 위 = 팝업의 왼쪽 위).</dd> +</dl> +<dl> + <dt> + at_pointer</dt> + <dd> + 팝업은 마우스 포인터 위치에 나타납니다.</dd> +</dl> +<dl> + <dt> + after_pointer</dt> + <dd> + 팝업은 마우스 포인터와 가로 위치는 같으면서 세로 위치는 마우스 포인터 아래 부분에 나타납니다. 이것은 툴팁이 나타나는 방식입니다.</dd> +</dl> +<p>팝업 요소에 <code>position</code> 속성을 추가함으로써 팝업이 나타날 위치를 정확하게 지정할 수 있습니다. 그러나 정확한 픽셀 위치를 지정할 수는 없습니다. 아마도 툴팁 요소에 대한 이 속성값은 변경하려고 하지 않겠지만, <code>position</code> 속성은 세 가지 팝업 유형 모두에 사용될 수 있습니다. 아래 예제는 팝업 메뉴를 가진 뒤로가기 버튼을 만드는 것을 보여주는 것입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">View</a></p> +<pre><popupset> + <menupopup id="backpopup" position="after_start"> + <menuitem label="Page 1"/> + <menuitem label="Page 2"/> + </menupopup> +</popupset> + +<button label="Pop Me Up" popup="backpopup"/> +</pre> +<div class="highlight"> + <h3 id="Our_find_files_example" name="Our_find_files_example">Our find files example</h3> + <p>파일 찾기 대화창에 간단한 팝업 메뉴를 추가해 보겠습니다. 단순하게 하기 위해, Edit 메뉴의 내용을 그냥 복사했습니다. 첫 번째 탭 패널위에서 클릭했을 때 팝업이 나타나도록 해 봅시다.</p> + <pre class="eval"><span class="highlightred"><popupset> + <menupopup id="editpopup"> + <menuitem label="Cut" accesskey="t"/> + <menuitem label="Copy" accesskey="c"/> + <menuitem label="Paste" accesskey="p" disabled="true"/> + </menupopup> +</popupset></span> + +<vbox flex="1"> +. +. +. + +<span class="highlightred"><tabpanel id="searchpanel" orient="vertical" context="editpopup"></span> +</pre> + <p>여기에 있는 eidt 메뉴와 유사한 단순 팝업이 첫 번째 탭패널에 추가되었습니다. 첫 번째 패널 어디서든 마우스 오른쪽 버튼을 클릭하면(맥킨토시에서는 Ctrl-클릭), 팝업이 나타날 것입니다. 그러나 해당 팝업은 그 이외 장소에서 클릭하면 나타나지 않을 것입니다. 주의할 사항은 글상자의 경우 자체 내장 팝업메뉴가 있어서 우리가 지정한 팝업 메뉴가 나타나지 않을 것입니다.</p> + <p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">View</a></p> +</div> +<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Scrolling_Menus">스크롤 메뉴</a>를 작성하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html new file mode 100644 index 0000000000..2593628bfa --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html @@ -0,0 +1,59 @@ +--- +title: Progress Meters +slug: Mozilla/Tech/XUL/XUL_Tutorial/Progress_Meters +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:List_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements">다음 »</a></p> +</div><p></p> +<p>본 섹션에서는 진행 지시자를 생성하는 방법에 대해 알아보겠습니다.</p> +<h3 id=".EC.A7.84.ED.96.89_.EC.A7.80.EC.8B.9C.EC.9E.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.A7.84.ED.96.89_.EC.A7.80.EC.8B.9C.EC.9E.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">진행 지시자 추가하기</h3> +<p>진행 지시자는 작업이 얼마나 진행되었는지를 나타내는 막대입니다. 여러분은 보통 파일을 다운로드 받을때나 시간이 긴 작업이 진행될 때 보실 수 있습니다. XUL에서는 이러한 진행 지시자를 생성하기 위해 <code><a href="/ko/docs/Mozilla/Tech/XUL/progressmeter" title="progressmeter">progressmeter</a></code> 요소를 사용합니다. 진행 지시자에는 결정(determinate)과 미결정(undeterminate)의 두가지 종류가 있습니다.</p> +<p>결정 진행 지시자는 어떠한 작업이 수행될 전체 시간의 길이를 알고 있을 때 사용합니다. 진행 지시자는 점점 차게 되고 다 차게 되면 작업이 완료되었음을 나타냅니다. 이러한 진행 지시자는 파일의 크기를 알고 있는 다운로드 대화상자의 경우에 사용할 수 있습니다.</p> +<p>미결정 진행 지시자는 작업이 수행될 전체 시간 길이를 모를때 사용합니다. 진행 지시자는 사용중인 플랫폼이나 테마에 따라, 회전하는 이발소 간판(barbaer pole)이나 미끄러지는 상자와 같은 에니메이션으로 표시됩니다.</p> +<p>결정 진행 지시자: <img alt="Image:prog-det.png"></p> +<p>미결정 진행 지시자: <img alt="Image:prog-udet.png"></p> +<p>진행 지시자는 다음과 같은 구문으로 표현됩니다.:</p> +<pre><progressmeter + id="identifier" + mode="determined" + value="50%"/> +</pre> +<p>속성은 다음과 같습니다.</p> +<dl> + <dt> + <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt> + <dd> + 진행 지시자의 유일 식별자 입니다.</dd> + <dt> + <a href="ko/XUL/Attribute/progressmeter.mode">mode</a></dt> + <dd> + 진행 지시자의 유형을 나타냅니다. 만일 <code>determined</code>로 지정하면 결정 진행 지시자를 의미하는 것으로 작업이 진행됨에 따라 채워지게 됩니다. 만일 <code>undetermined</code>로 지정하면 미결정 진행 지시자를 나타내는 것으로 작업이 진행될 시간을 모르는 경우에 사용됩니다. 본 속성을 지정하지 않은 경우에는 <code>determined</code>가 기본값입니다.</dd> + <dt> + <code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt> + <dd> + 진행 지시자의 현재값을 나타내며, 결정 진행 지시자일 경우에만 사용할 수 있습니다. 값은 0에서 100사이의 백분률(퍼센트)로 입력해야 합니다. 보통은 작업이 진행됨에 따라 스크립트로 변경하게 됩니다.</dd> +</dl> +<div class="highlight"> + <h5 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h5> + <p>우리의 파일 찾기 대화상자에 진행 지시자를 추가해 보겠습니다. 파일 찾기에서는 얼마나 많은 파일이 검색될지, 검색 시간이 얼마나 걸릴지 모르기 때문에 보통 미결정 진행 지시자를 사용합니다. 그러나 개발단계에서는 좀 혼란스러울 수 있으므로, 여기서는 결정 진행 지시자를 추가하겠습니다. 진행 지시자는 보통 검색이 진행중인 때만 나타납니다. 진행 지시자를 켜고 끄기 위한 스크립트는 나중에 추가하겠습니다.</p> + <pre class="eval"><hbox> + + <span class="highlightred"><progressmeter value="50%" style="margin: 4px;"/></span> + + <spacer flex="1"/> +</hbox> +</pre> + <p>창에서 계기값을 볼 수 있도록 value를 50%로 설정하였습니다. 창의 가장자리와 구분하기 위해 지시자의 여백을 4픽셀로 설정하였습니다. 앞서 말씀드린 바와 같이, 우리는 검색이 수행될 동안만 진행 바가 표시되기를 원합니다. 필요에 따라 스크립트가 보이거나 숨길 것입니다.</p> + <p>여태까지의 예제입니다. <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul">View</a></p> + <p><img alt="Image:progress1.png"></p> + <p> </p> +</div> +<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/Adding_HTML_Elements">HTML을 사용하여 창에 더 많은 요소를 추가하는 방법</a>에 대해 배울 것입니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:List_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html new file mode 100644 index 0000000000..7c99944148 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html @@ -0,0 +1,64 @@ +--- +title: Property Files +slug: Mozilla/Tech/XUL/XUL_Tutorial/Property_Files +tags: + - Localization + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Localization" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Introduction_to_XBL">다음 »</a></p> +</div><p></p> +<p>스크립트에서는, 엔티티를 쓸 수 없습니다. 대신 프로퍼티(property) 파일을 씁니다.</p> +<h3 id=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0" name=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0">프로퍼티</h3> +<p>DTD 파일은 XUL 파일에 텍스트가 있을 때 적당합니다. 그러나, 스크립트는 for 엔티티 분석되지 않습니다. 게다가, 예를 들어 혹시 여러분이 표시되는 텍스트를 정확히 모를 경우 스크립트에서 생성된 메시지를 표시하고 싶을지도 모릅니다. 이런 목적에, 프로퍼티 파일을 쓸 수 있습니다.</p> +<p>프로퍼티 파일에는 문자열 집합이 담깁니다. DTD 파일과 함께 확장자가 .properties인 프로퍼티 파일이 있습니다. 이 파일에서 프로퍼티는 이름=값 구문으로 선언합니다. 예를 아래에 보입니다:</p> +<pre>notFoundAlert=No files were found matching the criteria. +deleteAlert=Click OK to have all your files deleted. +resultMessage=%2$S files found in the %1$S directory. +</pre> +<p>이 프로퍼티 파일은 세 프로퍼티를 담고 있습니다. 스크립트로 이 프로퍼티를 읽고 사용자에게 표시됩니다.</p> +<h3 id="Stringbundle" name="Stringbundle">Stringbundle</h3> +<p>여러분이 직접 프로퍼티를 읽는 코드를 작성할 수 있으나 XUL이 여러분을 위해 이 일을 하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 요소(element)를 제공합니다. 요소에는 프로퍼티 파일에서 문자열를 얻고 다른 locale 정보를 얻는데 쓸 수 있는 많은 함수가 있습니다. 이 요소는 프로퍼티 파일의 content를 읽어들이고 여러분을 위해 프로퍼티 목록을 만듭니다. 그러면 여러분은 이름으로 특정 프로퍼티를 찾아볼 수 있습니다.</p> +<pre><stringbundleset id="strbundles"> +<stringbundle id="strings" src="strings.properties"/> +</stringbundleset> +</pre> +<p>이 요소를 포함하면 XUL 파일과 같은 디렉토리의 'strings.properties' 파일에서 프로퍼티를 읽습니다. locale에서 파일을 읽으려면 chrome URL을 쓰세요. 다른 비표시 요소처럼, 여러분은 stringbundle을 모두 한데 모으기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundleset" title="stringbundleset">stringbundleset</a></code></code> 요소 안에 여러분의 stringbundle 모두를 선언해야 합니다.</p> +<h4 id="Bundle.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.96.BB.EA.B8.B0" name="Bundle.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.96.BB.EA.B8.B0">Bundle에서 문자열 얻기</h4> +<p>이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 요소에는 많은 프로퍼티가 있습니다. 처음은 bundle에서 문자열을 읽기 위해 스크립트에 쓰일 수 있는 <code>getString</code>입니다.</p> +<pre>var strbundle = document.getElementById("strings"); +var nofilesfound=strbundle.getString("notFoundAlert"); + +alert(nofilesfound); +</pre> +<ul> + <li>이 예제는 먼저 <code>id</code>를 써서 bundle 참조(reference)를 얻습니다</li> + <li>그리고 나서, 프로퍼티 파일에서 'notFoundAlert' 문자열을 찾아봅니다. 함수 <code>getString()</code>은 문자열 값이나 문자열이 없으면 null을 돌려줍니다.</li> + <li>끝으로, 문자열이 경고 대화 상자에 표시됩니다.</li> +</ul> +<h4 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8F.AC.EB.A7.B7.ED.8C.85" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8F.AC.EB.A7.B7.ED.8C.85">텍스트 포맷팅</h4> +<p>다음 메소드는 <code>getFormattedString()</code>입니다. 이 메소드 또한 bundle에서 주어진 키 이름으로 문자열을 얻습니다. 게다가, 포맷팅 코드(예컨대, <code>%S</code>)가 나올 때마다 주어진 배열의 연속하는 각 요소로 바뀝니다.</p> +<pre>var dir = "/usr/local/document"; +var count = 10; + +var strbundle = document.getElementById("strings"); +var result = strbundle.getFormattedString("resultMessage", [ dir, count ]); + +alert(result); +</pre> +<p>이 예제는 다음 메시지를 경고 대화 상자에 표시합니다.</p> +<pre>10 files found in the /usr/local/document directory. +</pre> +<p>여러분은 포맷팅 코드 <code>%1$S</code>와 <code>%2$S</code>가 쓰이고 배열에서 다른 순서로 바뀜을 알아챌 겁니다. 포맷팅 코드 % + <i> + n</i> + $S는 직접 대응하는 매개변수(parameter)의 위치를 지정합니다. 비록 낱말 순서가 모든 언어에서 같지 않더라도, <code>getFormattedString()</code>을 써서 지정한 순서로 프로퍼티 파일을 작성할 수 있습니다.</p> +<h3 id=".EB.B9.84.EC.95.84.EC.8A.A4.ED.82.A4_.EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84" name=".EB.B9.84.EC.95.84.EC.8A.A4.ED.82.A4_.EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84">비아스키 문자 이스케이프</h3> +<p>비록 많은 언어에서 비ASCII 문자가 필요하더라도, 프로퍼티 파일은 오직 ASCII 문자를 써서 작성해야 합니다. 그러나, 프로퍼티 파일은 XXXX가 문자 코드인 <code>\uXXXX</code> 형식 이스케이프 시퀀스를 써서 다른 문자를 지원합니다. 그러므로, 혹시 여러분의 프로퍼티 파일이 비ASCII 문자를 담고 있으면, 여러분은 이를 'escaped-unicode' 형식으로 변환해야 합니다. 이를 위해, 여러분은 Sun사의 Java Development Kit (JDK)와 같이 묶인 native2ascii 명령줄 유틸리티를 쓸 수 있습니다.</p> +<p>다음 절에서는, <a href="ko/XUL_Tutorial/Introduction_to_XBL">요소의 behavior</a>를 정의하는 데 쓸 수 있는 XBL을 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Localization" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Introduction_to_XBL">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html new file mode 100644 index 0000000000..583447186e --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html @@ -0,0 +1,71 @@ +--- +title: Scroll Bars +slug: Mozilla/Tech/XUL/XUL_Tutorial/Scroll_Bars +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Splitters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Toolbars">다음 »</a></p> +</div><p></p> +<p>이제, 창에 스크롤바를 추가해 보도록 하겠습니다.</p> +<h3 id=".EC.8A.A4.ED.81.AC.EB.A1.A4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.8A.A4.ED.81.AC.EB.A1.A4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">스크롤바 추가하기</h3> +<p>스크롤바는 대개 사용자가 긴 문서를 이동하기 위해 사용됩니다. 또한 어떤 범위에 해당하는 값을 선택하기 위해서도 사용될 수 있습니다. 스크롤바는 여러 방식으로 생성될 수 있는데, XUL에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code> 태그를 이용해서 만들어 집니다. 글상자와 같은 일부 요소는 내용이 너무 긴 경우와 같이, 필요에 따라 스크롤바를 추가할 수 있습니다.</p> +<p>이 단원에서는 독립적인 스크롤바의 생성 방법에 대해 다룰 것입니다. 사용자는 스크롤바를 조정하여 값을 설정하게 될 것입니다. 여러분은 그리 많이 사용할 일이 없을 것입니다. 스크롤바는 주요 부분인 조정 가능한 스크롤상자(thumb)와 양 끝단에 있는 2개의 화살표 버튼들로 구성됩니다. 스크롤바는 이러한 모든 요소들을 자동으로 생성합니다.</p> +<p><img alt="Image:scroll1.png"></p> +<p>스크롤바의 구문은 다음과 같습니다.</p> +<pre><scrollbar + id="identifier" + orient="horizontal" + curpos="20" + maxpos="100" + increment="1" + pageincrement="10"/> +</pre> +<p>속성은 다음과 같습니다.</p> +<dl> + <dt> + <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd> + 스크롤바의 유일 식별자.</dd> +</dl> +<dl> + <dt> + <code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt> + <dd> + 이 속성은 스크롤바의 방향을 지정합니다. 기본값은 <code>horizontal</code>로, 좌측에서 우측으로 늘어나는 스크롤바를 만듭니다. <code>vertical</code>이라는 속성을 지정할 수도 있는데, 이는 상단에서 하단으로 늘어나는 스크롤바를 만듭니다.</dd> +</dl> +<dl> + <dt> + <code id="a-curpos"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code></dt> + <dd> + 이 속성은 스크롤상자(여러분이 스크롤바에서 앞뒤로 움직일 수 있는 막대)의 현재 위치를 나타냅니다. 이 속성값은 0부터 <code>maxpos</code> 속성에 지정한 값의 범위를 가집니다. 이 속성값은 단위를 필요로 하지 않으며, 기본값은 0입니다.</dd> +</dl> +<dl> + <dt> + <code id="a-maxpos"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code></dt> + <dd> + 이것은 스크롤상자의 최대 위치를 가리킵니다. 숫자로 나타내며 단위는 없습니다. 기본값은 100입니다.</dd> +</dl> +<dl> + <dt> + <code id="a-increment"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></dt> + <dd> + 여기에 명시한 값은 사용자가 스크롤바에 있는 화살표 버튼을 클릭했을 때 <code>curpos</code> 값을 얼마나 변경할 지 지정합니다. 기본값은 1입니다.</dd> +</dl> +<dl> + <dt> + <code id="a-pageincrement"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pageincrement">pageincrement</a></code></dt> + <dd> + 여기에 명시한 값은 사용자가 스크롤바의 구간의 쪽를 클릭했을 때, 즉 스크롤상자와 화살표 사이의 영역을 클릭할 때 얼만큼의 <code>curpos</code>값이 변경될지를 지정합니다. 기본값은 10입니다.</dd> +</dl> +<p>위에 있는 구문 예제는 0부터 100까지의 범위를 가지는 스크롤바를 생성할 것입니다. 100이라는 값은 목록에 있는 줄 수 일수 있지만, 여러분이 원하는 어떤 것일 수도 있습니다. 이 예제에서 초기값은 20입니다. 스크롤바의 화살표 중 하나를 클릭하면, 값은 위나 아래로 1씩 바뀌게 됩니다. 스크롤바의 페이지 영역(스크롤박스와 화살표 버튼 사이 영역)을 클릭하면 10만큼 바뀌게 됩니다.</p> +<p>사용자가 스크롤바 화살표를 클릭하면 스크롤상자는 <code>increment</code>값에 지정한 양만큼 이동하게 됩니다. 이 속성값을 증가시키면 클릭할 때마다 더 멀리 이동하게 됩니다. 스크롤바의 좌측단 또는 최상단 위치는 0값을 가지며 우측단과 최하단 위치는 <code>maxpos</code>에 지정된 값을 가집니다.</p> +<p>스크롤바의 값을 조정함으로써, 스크롤상자 부분을 원하는 곳에 위치시키고 화살표를 클릭했을 때 이동범위를 변경할 수 있습니다.</p> +<p>다음에는 <a href="ko/XUL_Tutorial/Toolbars">툴바</a>를 만드는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Splitters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Toolbars">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html new file mode 100644 index 0000000000..bf2600329a --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html @@ -0,0 +1,46 @@ +--- +title: Scrolling Menus +slug: Mozilla/Tech/XUL/XUL_Tutorial/Scrolling_Menus +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers">다음 »</a></p> +</div><p></p> +<p>이번 단원에서는 스크롤 메뉴와 스크롤 기능의 사용 방법에 대해 알아보겠습니다.</p> +<h3 id=".ED.81.B0_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.81.B0_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">큰 메뉴 만들기</h3> +<p>화면에 다 넣을수 없을만큼 많은 명령을 가진 메뉴를 작성하면 어떻게 될지 궁금하실 것입니다. Mozilla에서는 이런 경우를 위해 항목이 스크롤되는 기능을 제공합니다.</p> +<div class="float-right"> + <img alt="Image:menuscroll1.png"></div> +<p>만약 사용할 수 있는 공간이 모자라면 메뉴의 양 끝에 화살표가 나타납니다. 이 때 마우스를 화살표 위에 갖다 대면 메뉴가 위, 아래로 스크롤됩니다. 공간이 충분하다면 화살표는 나타나지 않습니다. 이 때 주의할 것은 스크롤의 작동 방식은 테마에 따라 다르다는 것입니다.</p> +<p>스크롤 기능은 자동으로 실행됩니다. 따라서 스크롤 메뉴를 만들기 위해 다른 것을 건드릴 필요는 없습니다. 스크롤 기능은 <code>menubar</code>, <code>popup</code>, <code>menulist</code>에 있는 메뉴에 적용됩니다. 이 기능은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소를 이용하여 구현됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 화살표가 있는 스크롤 상자를 만들 때도 사용할 수 있습니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 일반 상자가 사용될 수 있는 곳 어디서나 사용될 수 있습니다. 꼭 메뉴에만 사용해야 하는 것은 아닙니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 항상 세로 상자이며 어떤 요소든 포함할 수 있습니다. 여러분은 드롭다운이 아닌 목록을 구현하기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소를 사용할 수도 있습니다.</p> +<h4 id=".EC.98.88.EC.A0.9C_-_.EC.8A.A4.ED.81.AC.EB.A1.A4.EB.90.98.EB.8A.94_.EB.B2.84.ED.8A.BC_.EB.AA.A9.EB.A1.9D" name=".EC.98.88.EC.A0.9C_-_.EC.8A.A4.ED.81.AC.EB.A1.A4.EB.90.98.EB.8A.94_.EB.B2.84.ED.8A.BC_.EB.AA.A9.EB.A1.9D">예제 - 스크롤되는 버튼 목록</h4> +<p>아래는 스크롤할 수 있는 버튼 목록을 만드는 방법을 보여주는 예제입니다(화살표를 보려면 창을 줄여야 할것입니다).</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">View</a></p> +<pre><arrowscrollbox orient="vertical" flex="1"> + <button label="Red"/> + <button label="Blue"/> + <button label="Green"/> + <button label="Yellow"/> + <button label="Orange"/> + <button label="Silver"/> + <button label="Lavender"/> + <button label="Gold"/> + <button label="Turquoise"/> + <button label="Peach"/> + <button label="Maroon"/> + <button label="Black"/> +</arrowscrollbox> +</pre> +<p>예제를 실행하면 전체 화면으로 표시될 것입니다. 하지만 창의 높이를 줄이면, 스크롤 화살표가 나타날 것입니다. 다시 창을 키우면 화살표가 사라질 것입니다.</p> +<p>항상 화살표가 보이도록 하고 싶다면 <code>arrowscrollbox</code>에 CSS의 <code>max-height</code> 속성을 사용하여 크기를 제한하면 됩니다.</p> +<p><code>arrowscrollbox</code>는 주로 메뉴와 팝업에서 유용하게 사용됩니다.</p> +<p>다음에는 XUL 요소에 <a href="ko/XUL_Tutorial/Adding_Event_Handlers">이벤트 핸들러</a>를 지정하는 방법에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html new file mode 100644 index 0000000000..2ba8d57bcf --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html @@ -0,0 +1,160 @@ +--- +title: Simple Menu Bars +slug: Mozilla/Tech/XUL/XUL_Tutorial/Simple_Menu_Bars +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Toolbars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Menu_Features">다음 »</a></p> +</div><p></p> + +<p>이번 단원에서는 메뉴를 포함하는 메뉴바의 작성 방법에 대해 알아보겠습니다.</p> + +<h3 id=".EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">메뉴 만들기</h3> + +<p>XUL에는 메뉴를 만들 수 있는 여러가지 다양한 방법이 있습니다. 가장 기본적인 방식은 많은 응용프로그램이 그러하듯이 메뉴들을 포함하는 메뉴바를 추가하는 방법이며, 또한 팝업 메뉴도 만들 수 있습니다. XUL의 메뉴 기능은 메뉴바나 팝업 메뉴를 만들 수 있는 여러가지 요소들로 구성되어 있습니다. 메뉴에 있는 항목들은 쉽게 커스터마이징 할 수 있습니다. 우리는 이미 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>를 사용해서 <a href="ko/XUL_Tutorial/List_Controls#Drop-down_Lists">메뉴를 만드는 방법</a>을 살펴보았습니다. 이 단원은 이 내용을 기반으로 진행될 것입니다.</p> + +<p>메뉴바는 대개 툴바와 비슷한 방법으로 작성됩니다. 메뉴바는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 요소 내부에 위치할 수 있으며, 메뉴바의 왼쪽에 이를 닫을 수 있는 그리피가 나타납니다(주의: Firefox에서는 더 이상 그리피를 지원하지 않습니다). 메뉴는 툴바와 작동방식도 비슷합니다. XUL은 메뉴에만 특별한 몇 가지 요소를 가지고 있습니다.</p> + +<p>메뉴바와 메뉴의 작성과 관련된 4가지 요소가 있으며, 여기서는 간략하게 다루고 진행하면서 자세히 다루겠습니다.</p> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></dt> + <dd>메뉴들의 컨테이너.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></dt> + <dd>이름과 달리, 실제로는 메뉴바에 있는 메뉴의 제목을 나타낼 뿐입니다. 이 요소는 메뉴바 내에 위치하거나 독립적으로 위치할 수 있습니다.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></dt> + <dd>메뉴 제목을 클릭하였을 때 나타나는 팝업 상자입니다. 이 상자는 메뉴 명령 목록을 포함합니다.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></dt> + <dd>메뉴의 개별 명령으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 위치합니다.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dt> + <dd>메뉴의 구분 막대로 <code>menupopup</code>에 위치합니다.</dd> +</dl> + +<div class="note"> +<p>맥킨토시를 제외한 모든 플랫폼에서 원하는 대로 메뉴바에 있는 메뉴를 변경할 수 있습니다. 이것은 메킨토시에는 시스템에 의해 화면 상단을 따라 자신만의 메뉴를 만들기 때문입니다. 여러분은 커스텀 메뉴를 만들 수는 있지만, 메뉴에 적용한 특별한 서식 규칙이나 비(非)-메뉴 요소는 적용되지 않을 수 있습니다. 메뉴를 만들 때 이 점을 염두에 두어야 합니다.</p> +</div> + +<h5 id=".EA.B0.84.EB.8B.A8.ED.95.9C_.EB.A9.94.EB.89.B4.EB.B0.94_.EC.98.88.EC.A0.9C" name=".EA.B0.84.EB.8B.A8.ED.95.9C_.EB.A9.94.EB.89.B4.EB.B0.94_.EC.98.88.EC.A0.9C">간단한 메뉴바 예제</h5> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul">View</a></p> + +<div class="float-right"><img alt="Image:menubar-ex1.png"></div> + +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="File"> + <menupopup id="file-popup"> + <menuitem label="New"/> + <menuitem label="Open"/> + <menuitem label="Save"/> + <menuseparator/> + <menuitem label="Exit"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit"> + <menupopup id="edit-popup"> + <menuitem label="Undo"/> + <menuitem label="Redo"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<p>위 예제에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 요소를 사용해서 간단한 메뉴바와 메뉴바에 위치한 메뉴들을 만들었습니다. 여기서는 File과 Edit 2개 메뉴가 작성되었습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소는 메뉴상단에 제목을 만들며, 메뉴바에 나타납니다. 팝업은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 사용하여 만들어집니다. 팝업은 사용자가 이의 부모 메뉴 제목을 클릭할 때 튀어나오게 됩니다. 팝업의 크기는 팝업에 포함된 명령에 맞게 충분히 크게 나타납니다. 명령 자체는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>를 사용해서 만들어집니다. 각 <code>menuitem</code>은 메뉴 팝업에서 하나의 명령을 나타냅니다.</p> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> 요소를 사용해서 메뉴에 구분자를 만들 수도 있습니다. 이것은 menuitem 그룹들을 나눌 때 사용됩니다.</p> + +<h4 id="menubar_.EC.9A.94.EC.86.8C" name="menubar_.EC.9A.94.EC.86.8C"><code>menubar</code> 요소</h4> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>는 메뉴를 담는 상자입니다. 메뉴바가 flex 속성을 갖는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 내부에 위치하고 있다는 점을 주의깊게 보시기 바랍니다. 메뉴바는 특별한 속성을 가지지는 않지만 상자 유형에 속합니다. 이것은 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성값을 <code>vertical</code>로 하면 세로 방향의 메뉴바를 만들 수 있다는 것을 의미합니다.</p> + +<h4 id="menu_.EC.9A.94.EC.86.8C" name="menu_.EC.9A.94.EC.86.8C"><code>menu</code> 요소</h4> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소와 비슷하게 동작합니다. <code>menu</code> 요소는 <code>button</code>과 몇 가지 동일한 속성을 가지며 그 외 추가적인 속성을 포함합니다.</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>메뉴의 유일 식별자.</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>File 또는 Edit와 같은 메뉴에 나타나는 텍스트.</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 할 수는 있지만, 전체 메뉴를 사용 중지할 필요는 극히 드뭅니다. 이 속성은 <code>true</code> 또는 <code>false</code> 중 한가지 값을 가집니다. 물론, 기본값은 후자입니다.</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd>이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴 제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정된 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다. 물론 여기에 지정한 문자가 라벨 텍스트에 없더라도 동작합니다.</dd> +</dl> + +<div class="float-right"><img alt="Image:menubar-ex2.png"></div> + +<p>꼭은 아니지만, <code>menu</code> 요소는 보통 <code>menubar</code>에 위치합니다. 만약 menubar에 포함되어 있지 않으면 다른 형태로 출력됩니다. 여기에 있는 그림은 메뉴바가 없는 경우 앞서의 예제가 어떤 모습이 되는지 보여주고 있습니다.</p> + +<h4 id="menupopup_.EC.9A.94.EC.86.8C" name="menupopup_.EC.9A.94.EC.86.8C"><code>menupopup</code> 요소</h4> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소는 메뉴 명령들을 포함하는 팝업창을 만듭니다. 이 요소는 세로 방향을 기본으로 하는 상자입니다. 원할 경우 가로 방향으로 바꿀 수 있으며, 그렇게 하면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>들은 행으로 위치하게 됩니다. 일반적으로 <code>menuitem</code>과 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>만 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 위치합니다. 여려분은 <code>menupopup</code>에 어떤 요소든 넣을 수 있지만, 앞서 말한바와 같이 맥킨토시에서는 무시될 것입니다.</p> + +<h4 id="menuitem_.EC.9A.94.EC.86.8C" name="menuitem_.EC.9A.94.EC.86.8C"><code>menuitem</code> 요소</h4> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소와 아주 비슷하며 일부 동일한 속성들을 가지고 있습니다.</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>메뉴 제목버튼의 유일 식별자.</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>Open 또는 Save같은 메뉴 항목에 나타날 텍스트.</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 이 속성은 <code>true</code> 또는 <code>false</code> 중에서 하나의 값으로 지정될 수 있으며 후자가 기본값입니다.</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd>이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정한 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다.</dd> +</dl> + +<dl> + <dt><code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt> + <dd>이것은 메뉴 명령글 옆에 표시될 단축키 텍스트를 지정합니다. 그렇다고 해당 단축키와 <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>을 바로 연결하는 것은 아닙니다(이 속성을 지정한다고 단축키를 눌렀을때 해당 메뉴가 실행되는 것은 아닙니다). 이 방법에 대해서는 <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">이후</a>에 다룰 것이다.</dd> +</dl> + +<h4 id="menuseparator_.EC.9A.94.EC.86.8C" name="menuseparator_.EC.9A.94.EC.86.8C"><code>menuseparator</code> 요소</h4> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>에는 특별한 속성이 없습니다. 단지 메뉴 항목들 사이에 가로막대를 만들 뿐입니다.</p> + +<p>다음 단원에서는 <a href="ko/XUL_Tutorial/More_Menu_Features">다양한 메뉴 기능들</a>에 대해 알아 보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Toolbars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Menu_Features">다음 »</a></p> +</div><p></p> + +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html new file mode 100644 index 0000000000..796b8fcb52 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html @@ -0,0 +1,139 @@ +--- +title: Splitters +slug: Mozilla/Tech/XUL/XUL_Tutorial/Splitters +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Splitters +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scroll_Bars">다음 »</a></p> +</div><p></p> + +<p>이번 단원에서는 splitter를 창에 추가하는 방법에 대해 알아보겠습니다.</p> + +<h2 id=".EC.83.81.EC.9E.90_.EB.82.98.EB.88.84.EA.B8.B0" name=".EC.83.81.EC.9E.90_.EB.82.98.EB.88.84.EA.B8.B0">상자 나누기</h2> + +<p>하나의 창 안에 사용자가 크기를 변경할 수 있는 2개 영역이 있었으면 할 때가 있습니다. Mozilla 브라우저 창이 이러한 예로, 브라우저 창에서는 메인 영역과 사이드바 패널 프레임 사이에 있는 막대를 드래그 해서 사이드바 패널의 크기를 조정할 수 있습니다. 또한 빗살대(notch)를 클릭해서 사이드바를 숨길 수도 있습니다.</p> + +<h3 id="Splitter_.EC.9A.94.EC.86.8C" name="Splitter_.EC.9A.94.EC.86.8C">Splitter 요소</h3> + +<p>이러한 기능은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code>라는 요소를 사용하여 구현할 수 있습니다. 이 요소는 2개 영역 사이에 좁은 막대를 만들어서 영역의 크기를 변경할 수 있게 해 줍니다. Splitter 요소는 넣고 싶은 곳 아무데서나 사용할 수 있으며, 동일한 상자 내에서 splitter 앞에 오는 요소와 다음에 오는 요소의 크기를 변경할 수 있습니다.</p> + +<p>Splitter가 가로상자 내부에 사용되면 가로 방향으로, 세로상자 내부에 사용되면 세로 방향으로 크기를 변경할 수 있게 해 줍니다.</p> + +<p>Splitter 구문은 다음과 같습니다:</p> + +<pre><splitter + id="identifier" + state="open" + collapse="before" + resizebefore="closest" + resizeafter="closest"> +</pre> + +<p>속성은 다음과 같습니다.</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>splitter 유일 식별자.</dd> +</dl> + +<dl> + <dt><code id="a-state"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/state">state</a></code></dt> + <dd>splitter의 상태를 나타냅니다. 기본값은 <code>open</code>으로 이값을 설정하면 기본적으로 열린 상태가 되며, <code>collapsed</code>로 설정하면 패널 중 하나는 닫힌 상태가 되어 다른 쪽이 나머지 공간을 차지하는 상태로 출력됩니다.</dd> +</dl> + +<dl> + <dt><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></dt> + <dd>이 속성은 splitter의 빗살대(또는 그리피(grippy))를 클릭하거나 닫힘 상태로 설정하였을 경우, 패널의 어느 면이 닫히게 될지를 지정합니다. 이 속성값을 <code>before</code>로 설정하면 splitter 앞에 오는 요소가 닫히게 되며, <code>after</code>로 설정하면 splitter 다음에 오는 요소가 닫히게 됩니다. 만일 기본값인 <code>none</code>으로 설정하면, 그리피를 클릭하더라도 패널은 닫히지 않습니다.</dd> +</dl> + +<dl> + <dt><code id="a-resizebefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></dt> + <dd>Splitter를 드래그하면, splitter의 왼쪽(혹은 위쪽)에 있는 요소들은 크기가 변하게 됩니다. 이 속성은 왼쪽(혹은 위쪽)에 있는 요소들 중 어떤 요소의 크기가 변하게 될지를 지정합니다. 이 속성값을 <code>closest</code>로 설정하면 splitter의 바로 왼쪽에 있는 요소의 크기가 변경됩니다. 반면, <code>farthest</code>로 설정하면 splitter의 왼쪽에 있는 요소들 중 가장 멀리있는 요소의 크기를 변경하게 됩니다(상자 내 첫번째 요소). 기본값은 <code>closest</code> 입니다.</dd> +</dl> + +<dl> + <dt><code id="a-resizeafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></dt> + <dd>Splitter를 드래그하면, splitter의 오른쪽(혹은 아래쪽)에 있는 요소들은 크기가 변하게 됩니다. 이 속성은 오른쪽(혹은 아래쪽)에 있는 요소들 중 어떤 요소의 크기가 변하게 될지를 지정합니다. 이 속성값을 <code>closest</code>로 설정하면 splitter의 바로 오른쪽에 있는 요소의 크기가 변경됩니다. 반면, <code>farthest</code>로 설정하면 splitter의 오른쪽에 있는 요소들 중 가장 멀리있는 요소의 크기를 변경하게 됩니다(상자 내 마지막 요소). 이 속성은 <code>grow</code>값을 가질 수도 있는데, 이것은 splitter를 드래그하더라도 오른쪽에 있는 요소들의 크기가 변경되지 않도록 하며, 대신 이들을 포함하는 전체 상자의 크기가 변경됩니다. 기본값은 <code>closest</code>입니다.</dd> +</dl> + +<p>Splitter에 <code><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 속성을 설정하였다면 사용자가 해당 요소를 닫을 수 있도록 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> 요소도 추가해 주는 것이 좋습니다. Firefox 브라우저에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> 요소를 지원하지 않습니다. 따라서 해당 요소를 splitter 요소에 넣더라도 출력되지 않으며, splitter를 클릭하더라도 한번에 닫히지 않습니다.</p> + +<h3 id="Splitter_.EC.98.88.EC.A0.9C" name="Splitter_.EC.98.88.EC.A0.9C">Splitter 예제</h3> + +<p>다음 예제를 보면 도움이 될 것입니다.</p> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">View</a></p> + +<pre><hbox flex="1"> + <iframe id="content-1" width="60" height="20" src="w1.html"/> + <splitter collapse="before" resizeafter="farthest"> + <grippy/> + </splitter> + <iframe id="content-2" width="60" height="20" src="w2.html"/> + <iframe id="content-3" width="60" height="20" src="w3.html"/> + <iframe id="content-4" width="60" height="20" src="w4.html"/> +</hbox> +</pre> + +<div class="float-right"><img alt="Image:splitter-ex1.jpg"></div> + +<p>예제에서는 4개의 iframe이 생성되어 있으며 splitter는 첫 번째와 두 번째 사이에 위치하고 있습니다. <code><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 속성에는 <code>before</code>값이 설정되어 있으며, 이것은 그리피를 클릭하면 첫 번째 프레임이 사라지고 나머지 프레임들이 왼쪽으로 이동하게 된다는 것을 의미합니다. 그리피는 splitter 내 중앙에 그려집니다.</p> + +<p>splitter의 <code><code id="a-resizeafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></code> 속성 값은 <code>farthest</code>로 설정되어 있습니다. 이것은 splitter를 드래그하면 splitter 다음에 위치한(그림에서는 오른쪽) 요소들 중 가장 멀리있는 요소의 크기가 변경된다는 것을 의미합니다. 이 경우 4번 프레임의 크기가 변경됩니다.</p> + +<p><code><code id="a-resizebefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></code> 속성의 값은 지정하지 않았기 때문에 기본값인 <code>closest</code>로 지정됩니다. 위의 예제에서는, splitter 앞에 하나의 프레임밖에 없기 때문에, 1번 프레임의 크기가 변하게 됩니다.</p> + +<p>2번과 3번 프레임은 4번 프레임이 최소크기가 될 때까지 드래그 한 이후에 크기가 변경됩니다.</p> + +<div class="float-right"><img alt="Image:splitter-ex2.jpg"></div> + +<p>그림은 splitter가 닫힌 상태인 4개 패널 모습입니다.</p> + +<div class="float-right"><img alt="Image:splitter-ex3.jpg"></div> + +<p>그림은 splitter가 오른쪽으로 크기를 변경한 상태의 패널 모습입니다. 주목해야할 점은 중간의 2개 패널은 크기가 변하지 않았다는 것입니다. 1번과 4번 패널만 크기가 바뀌었습니다. 4번째 패널을 보면 알 수 있습니다. splitter를 오른쪽으로 계속해서 드래그하면, 다른 2개의 패널이 오그라들게 됩니다.</p> + +<p>상자에서의 최소 또는 최대 너비를 지정하기 위해 iframe에 <code>min-width</code>, <code>max-height</code> 같은 스타일 속성을 사용할 수 있습니다. 그럴 경우, splitter가 이를 감지하여 최소와 최대크기를 넘어서 끌기할 수 없게 해 줍니다.</p> + +<p>예를 들어, 4번 패널에 최소 넓이를 30픽셀로 지정했다면, 그 이하 크기로 줄지않게 됩니다. 그 외 다른 2개 패널은 줄어들게 될 것입니다. 만약 1번 패널의 최소넓이를 50픽셀로 설정했다면, splitter를 오른쪽으로 10픽셀 드래그 할 수 있을 것입니다(왜냐하면 60픽셀 넓이로 시작했기 때문입니다). 그렇다 하더라도 여전히 splitter를 닫을 수는 있습니다.</p> + +<p>원할 경우 상자에 하나 이상의 splitter를 사용할 수도 있는데, 이 경우 splitter의 다른 부분을 닫을 수있습니다. 마찬가지로 iframe 뿐만 아니라 어떠한 요소든 닫을 수 있습니다.</p> + +<h2 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h2> + +<div class="highlight"> +<p>파일 찾기 대화창에 splitter를 사용하였을 경우 어떠한 모양이 될지 알아 봅시다. 한 가지는 대화창에 검색결과를 추가하려는 것입니다. 우리는 검색 조건과 아래의 버튼들 사이에 공간을 추가할 것입니다. 여러분은 splitter를 이용해 검색결과를 닫거나 감출 수 있을 것입니다.</p> + +<pre class="eval"></tabbox> + + <span class="highlightred"><iframe src="results.html"/> + <splitter resizeafter="grow"/></span> + + <hbox> +</pre> + +<p>여기에 보면, splitter와 iframe이 대화창에 추가되었습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 뒤에 있던 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>는 더 이상 필요없기 때문에 이를 삭제할 수 있습니다. 프레임의 내용은 '<tt>results.html</tt>'이라는 파일에 포함되어 있습니다. 지금은 이 파일을 만들어서 아무거나 입력을 하시면 됩니다. iframe은 결과 목록을 만드는 방법에 대해 알게되는 <a href="ko/XUL_Tutorial/Trees">시점에</a> 결과 목록으로 대체될 것입니다. 지금은 splitter를 설명하기 위한 목적으로만 사용하는 것입니다.</p> + +<p>splitter의 <code>collapse</code> 속성에는 splitter 앞에 오는 요소를 닫는다는 의미의 <code>before</code>값이 설정되어 있으며, 여기서는 iframe이 이에 해당됩니다. 아래 보이는 그림에서처럼 그리피를 클릭하면 iframe이 닫히고 버튼이 위로 움직이게 됩니다.</p> + +<p><code>resizeafter</code> 속성에는 <code>grow</code>값이 설정되어 있어 splitter 아래의 요소들은 splitter를 아래로 드래그 하면 아래로 밀려가게 됩니다. 결과적으로 프레임의 내용은 어떠한 방향으로든 커질 수 있는 것입니다. 주의할 점은 창의 크기가 자동으로 변경되지는 않는다는 것입니다. 그리고, 세로상자 안에 splitter가 포함되어 있어, 예제에서는 가로 방향 splitter가 된다는 것을 유념해 보기 바랍니다.</p> + +<p>일반 상태:</p> + +<p><img alt="Image:splitter1.png"></p> + +<p>닫힌 상태:</p> + +<p><img alt="Image:splitter2.png"></p> + +<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">View</a></p> +</div> + +<p>다음에는 <a href="ko/XUL_Tutorial/Scroll_Bars">스크롤바</a>를 만드는 방법에 대해 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scroll_Bars">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html new file mode 100644 index 0000000000..c237926ae8 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html @@ -0,0 +1,35 @@ +--- +title: Stack Positioning +slug: Mozilla/Tech/XUL/XUL_Tutorial/Stack_Positioning +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Tabboxes">다음 »</a></p> +</div><p></p> +<p>이 단원에서는 스택 내에 있는 요소들의 위치를 지정하는 방법에 대해 알아보겠습니다.</p> +<h3 id=".EC.8A.A4.ED.83.9D_.EB.82.B4_.EC.9E.90.EC.8B.9D_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98" name=".EC.8A.A4.ED.83.9D_.EB.82.B4_.EC.9E.90.EC.8B.9D_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98">스택 내 자식 요소의 위치</h3> +<p>일반적으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>의 자식 요소는 스택의 크기에 맞추어 늘어납니다. 그러나 여려분은 특정 좌표에 자식 요소를 배치할 수도 있습니다. 예를 들어, 스택에 두개의 자식 버튼이 있다면, 첫번째 버튼은 좌측에서 20픽셀 그리고 상단에서는 50픽셀 떨어진 곳에, 두번째 버튼은 좌측에서 100픽셀 그리고 상단에서 5픽셀 떨어진 곳에 위치시킬 수 있습니다.</p> +<p>자식 요소의 위치는 요소에 두 가지 속성을 사용해서 지정할 수 있습니다. 가로 위치의 경우 <code>left</code> 속성을 사용하고 세로위치는 <code>top</code>속성을 사용합니다. 스택의 자식에 이들 속성을 사용하지 않으며, 해당 자식들은 stack 크기에 맞쳐 늘어나게 됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:bulletins1.png"></div> +<pre><stack> + <button label="Goblins" left="5" top="5"/> + <button label="Trolls" left="60" top="20"/> + <button label="Vampires" left="10" top="60"/> +</stack> +</pre> +<p>여기서 <code>stack</code>은 3가지 요소를 포함하고 있는데, 각 요소들에 <code>left</code>와 <code>top</code> 속성이 지정되어 있어 그림과 같이 위치하고 있습니다. 예제에서 3가지 자식 요소가 모두 버튼이지만, 요소들이 모두 같은 형식일 필요는 없습니다. 그것은 상자와 다른 스택을 포함해서 어떤 요소든 될 수 있습니다.</p> +<p><code>stack</code>의 크기는 자식 요소의 위치에 의해 결정됩니다. 즉, 모든 자식 요소가 볼 수 있도록 항상 크기가 조정됩니다. 따라서 <code>left</code> 속성을 400으로 설정했으면, 스택은 해당 요소의 넓이에 400픽셀을 더한 정도의 너비를 가지게 됩니다. <code>width</code>와 <code>max-width</code> 같은 여러 스타일 속성을 사용해서 이 크기를 재정의할 수 있습니다.</p> +<p>여러분은 스크립트를 사용해서 <code>left</code>와 <code>top</code> 속성 값을 조정할 수 있으며, 요소를 이동하게 만들 수 있습니다. 스택은 절대위치값을 가지는 요소가 위치를 바꿀 때, 다른 요소의 위치에는 영향을 주지 않는다는 장점이 있습니다. 보통 상자에서는 요소의 위치를 옮기면, 다른 요소의 위치가 섞이게 됩니다.</p> +<p>자식 요소가 겹쳐질 수 있도록 하는 것 역시 가능합니다. 자식 요소들이 그려질 때는, <code>stack</code>에 나타난 순서대로 보이게 됩니다. 즉, <code>stack</code>의 첫 번째 자식이 맨 뒤에 나타나고, 다음 자식 요소는 그 위에 나타나고, 마지막 요소는 최상위에 오게 됩니다. 해당 요소의 순서를 옮기기 위해 DOM 함수를 이용할 수 있습니다.</p> +<p>마우스 이벤트에 응답하는 경우, 상위에 있는 요소가 해당 이벤트를 먼저 인식하게 됩니다. 이것은 두 개의 버튼이 겹쳐있을 경우, 다른 버튼을 덮고 있는 상위 버튼이 마우스 클릭을 인식하게 된다는 것을 의미합니다.</p> +<p>다음 섹션에서는 덱과 비슷하지만 고유한 네비게이션 방법을 제공하는 <a href="ko/XUL_Tutorial/Tabboxes">탭박스</a>에 대해 설명하겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Tabboxes">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html new file mode 100644 index 0000000000..76e39325c6 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html @@ -0,0 +1,61 @@ +--- +title: Stacks and Decks +slug: Mozilla/Tech/XUL/XUL_Tutorial/Stacks_and_Decks +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stack_Positioning">다음 »</a></p> +</div><p></p> +<p>여러분은 여러 요소를 카드를 쌓아 올리듯이 표시해야 할 때가 있을 수도 있습니다. 스택(stack)과 덱(deck) 요소를 이런 용도로 사용하실 수 있습니다.</p> +<h3 id=".EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.28containers.29" name=".EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.28containers.29">컨테이너(containers)</h3> +<p>XUL의 모든 상자 요소는 다른 요소를 포함할 수 있는 개체입니다. <a href="ko/XUL_Tutorial/Toolbars">툴바</a>나 <a href="ko/XUL_Tutorial/Tabboxes">탭패널</a>처럼 특수화된 상자도 여러 가지가 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 태그는 아무런 특징이 없는 가장 단순한 상자를 만듭니다. 하지만 특수화된 상자들은 일반 상자처럼 내부의 요소들을 <code id="a-배치"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/배치">배치</a></code>하는 것 외에 다른 기능들도 가지고 있습니다.</p> +<p>실제로 여러 가지 구성 요소들은 다른 요소를 포함할 수 있습니다. 우리는 앞에서 버튼이 다른 요소를 포함하는 것을 살펴 보았습니다. 스크롤바는 여러분이 지정하지 않아도 필요한 요소를 만드는 특수화된 상자입니다. 그리고 막대가 이동하는 것도 스스로 제어합니다.</p> +<p>앞으로 몇 단원에 걸쳐 다른 요소를 포함하는 요소들에 대해 알아 볼 것입니다. 그들은 모두 특수화된 상자로서 상자의 모든 속성을 사용할 수 있습니다.</p> +<h3 id=".EC.8A.A4.ED.83.9D.28stack.29" name=".EC.8A.A4.ED.83.9D.28stack.29">스택(stack)</h3> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/Stack" title="Stack">Stack</a></code></code> 요소는 단순한 상자입니다. 일반 상자와 똑같이 작동하지만 자식 요소를 아래에서부터 쌓는 특징을 가지고 있습니다. 첫 번째 자식 요소가 바닥에 표시되고, 두 번째 자식 요소가 그 위에, 그리고 세 번째 자식 요소가 그 위에 표시되는 방식입니다. 쌓아 올릴 수 있는 요소의 수에는 제한이 없습니다.</p> +<p>스택은 자식 요소가 나란히 표시되는 상자와 달리, 아래에서부터 위로 쌓이기 때문에 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/orient">orient</a></span></code></code> 속성의 의미가 없습니다. 스택의 크기는 가장 큰 자식 요소에 의해 결정되지만 스택과 그 자식 요소에 <code>width</code>, <code>height</code>, <code>min-width</code> 등의 CSS 속성을 사용할 수도 있습니다.</p> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 요소는 기존의 요소 위에 상태를 표시하는 개체를 표시하고 싶을 때 사용할 수도 있습니다. 예를 들어, 상태바를 막대와 그 위에 중첩된 라벨로 만들 수도 있습니다.</p> +<h4 id=".EC.8A.A4.ED.83.9D.EC.9D.84_.EC.9D.B4.EC.9A.A9.ED.95.B4.EC.84.9C_.EA.B7.B8.EB.A6.BC.EC.9E.90_.ED.9A.A8.EA.B3.BC_.EC.A3.BC.EA.B8.B0" name=".EC.8A.A4.ED.83.9D.EC.9D.84_.EC.9D.B4.EC.9A.A9.ED.95.B4.EC.84.9C_.EA.B7.B8.EB.A6.BC.EC.9E.90_.ED.9A.A8.EA.B3.BC_.EC.A3.BC.EA.B8.B0">스택을 이용해서 그림자 효과 주기</h4> +<p>또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>을 사용하여 손쉽게 많은 CSS 속성을 흉내낼 수 있습니다. 아래는 text-shadow 속성과 비슷한 효과를 내는 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul">View</a></p> +<pre><stack> + <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> + <description value="Shadowed" style="color: red; font-size: 15pt;"/> +</stack> +</pre> +<div class="float-right"> + <img alt="Image:stacks1.png"></div> +<p>두 개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>은 15포인트 크기의 문자열을 생성합니다. 하지만 첫 번째 것은 왼쪽과 위쪽에 여백을 주어 1픽셀씩 오른쪽과 아래쪽으로 밀려나게 하였습니다. 그래서 똑같이 'Shadowed'란 문자열을 표시하지만 두 번째 것과 조금 위치가 다릅니다. 두 번째 <code>description</code> 요소는 빨간색으로 표시되기 때문에 효과를 쉽게 알아 볼 수 있습니다.</p> +<p>이 방법이 <code>text-shadow</code>보다 좋은 이유는 그림자를 원하는 대로 꾸밀 수 있기 때문입니다. 예를 들어 그림자를 다른 글꼴과 크기로 표시하거나 밑줄을 그을 수도 있습니다. (깜빡이는 효과도 줄 수 있습니다). 게다가 아직까지 Mozilla는 CSS의 text-shadow를 지원하지 않고 있습니다. 단점은 그림자가 차지하는 공간 때문에 스택의 크기가 커진다는 것입니다. 그림자 효과는 사용 불가 버튼을 표시할 때 매우 유용합니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul">View</a></p> +<pre><stack style="background-color: #C0C0C0"> + <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> + <description value="Disabled" style="color: grey;"/> +</stack> +</pre> +<p>이렇게 하면 사용 불가능한 것처럼 보입니다.</p> +<p>한 가지 주의할 점은 마우스 클릭과 키 누름 같은 이벤트는 가장 위의 요소 즉, 스택의 마지막 요소에만 적용된다는 것입니다. 이는 버튼이 스택의 마지막 요소일때만 제대로 동작한다는 것을 의미합니다.</p> +<h3 id=".EB.8D.B1.28decks.29" name=".EB.8D.B1.28decks.29">덱(decks)</h3> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>처럼 자식 요소들을 쌓아 놓지만 한 번에 하나의 자식 요소만 표시하는 요소입니다. 덱은 유사한 여러 판넬이 순차적으로 표시되는 마법사 인터페이스를 만들 때 유용하게 사용할 수 있습니다. 개별 창을 만들고 각 창에 네비게이션 버튼을 만드는 것보다, 하나의 창에서 내용이 변하는 곳에 덱을 사용하는 것이 보다 편리합니다.</p> +<p>스택에서처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>의 바로 아래 자식 요소들은 덱의 한 쪽(page)이 됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>의 자식 요소가 세 개라면 덱은 세 쪽을 갖고 있는 셈입니다. 화면에 나타나는 쪽은 <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 속성을 이용하여 조절할 수 있습니다. 인덱스는 표시하고 싶은 쪽에 해당하는 번호입니다. 쪽의 번호는 0부터 시작하기 때문에 덱의 첫 번째 자녀 요소는 0, 두 번째는 1의 순서가 됩니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul">View</a></p> +<pre><deck selectedIndex="2"> + <description value="This is the first page"/> + <button label="This is the second page"/> + <box> + <description value="This is the third page"/> + <button label="This is also the third page"/> + </box> +</deck> +</pre> +<p>예제에는 세 쪽이 있는데 기본적으로 표시되는 것은 세 번째 쪽입니다. 세 번째 쪽은 두 개의 요소를 포함하는 상자입니다. 상자와 그 안의 요소들이 쪽을 구성합니다. 덱의 크기는 가장 큰 자식 요소의 크기와 같기 때문에 여기서는 세 번째 자식 요소의 크기가 덱의 크기가 됩니다.</p> +<p>여러분은 스크립트를 사용하여 <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code>의 값을 변경하면 표시되는 쪽을 바꿀 수 있습니다. 이에 대해서는 이벤트와 DOM에 대한 단원에서 좀더 알아 보도록 하겠습니다.</p> +<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/Stack_Positioning">자식 요소의 위치를 지장하기 위해</a> 어떻게 스택을 사용할 수 있는지에 대해 설명하겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stack_Positioning">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html new file mode 100644 index 0000000000..74de7d0cb8 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html @@ -0,0 +1,159 @@ +--- +title: Tabboxes +slug: Mozilla/Tech/XUL/XUL_Tutorial/Tabboxes +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Grids">다음 »</a></p> +</div><p></p> + +<p>환경설정 대화창은 탭을 사용하여 나타내는 것이 일반적입니다. 본 섹션에서는 탭 패널의 작성 방법에 대해 알아보겠습니다.</p> + +<h2 id=".ED.83.AD.EC.83.81.EC.9E.90" name=".ED.83.AD.EC.83.81.EC.9E.90">탭상자</h2> + +<p>탭상자는 환경설정 창에서 자주 사용됩니다. 일련의 탭들이 창의 상단부에 표시되며, 사용자는 서로 다른 선택사항들을 보기 위해 각각의 탭을 클릭할 수 있습니다. 이 기능은 선택 사항들을 한 화면에 다 담을 수 없을 때 유용하게 사용될 수 있습니다.</p> + +<p>XUL에서도 이러한 대화창을 구현할 수 있는 방법을 제공합니다. 이를 위해서는 다섯 개의 요소에 대해 먼저 알아야 하는데 여기서는 각 요소들에 대해 대략적으로 설명하고 상세한 내용은 아래에서 설명하도록 하겠습니다.</p> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></dt> + <dd>탭과 탭 페이지를 포함하는 외부 상자입니다.</dd> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></dt> + <dd>각 탭을 포함하는 내부 상자로 다시 말하면 탭을 포함하는 행을 나타냅니다.</dd> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></dt> + <dd>개별 탭을 나타내며 탭을 클릭하면 탭 페이지가 전면에 표시됩니다.</dd> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></dt> + <dd>여러 개의 탭 페이지를 포함하는 요소입니다.</dd> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></dt> + <dd>단일 탭 페이지를 나타내며 실제 내용들이 위치하게 됩니다. 첫 번째 tabpanel은 첫 번째 탭에 해당하고, 두 번째 tabpanel은 두 번째 탭에 해당하는 식입니다.</dd> +</dl> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>는 최외곽 요소로 탭을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>요소와 각 탭 페이지을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 요소로 구성됩니다.</p> + +<p>다음은 탭상자의 일반적인 구문입니다.</p> + +<pre><tabbox id="tablist"> + <tabs> + <!-- tab elements go here --> + </tabs> + <tabpanels> + <!-- tabpanel elements go here --> + </tabpanels> +</tabbox> +</pre> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 요소들은 일반 상자와 비슷한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소 안에 놓입니다. 그리고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소 자신은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 안에 놓이게 됩니다. 또한 <code>tabbox</code>는 <code>tabpanels</code> 요소를 포함하는데 이는 탭 상자의 수직 정렬 속성에 따라 탭의 아래에 표시됩니다.</p> + +<p>실제로 탭 상자는 일반 상자와 별반 다른 게 없습니다. 상자와 마찬가지로 탭 또한 어떤한 요소든 포함할 수 있습니다. 다른 점이 있다면 모양이 조금 다르고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>처럼 한번에 하나의 탭 패널 밖에 표시되지 않는다는 것입니다.</p> + +<p>각 탭 페이지의 내용은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code>에 포함됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code>에 포함된다고 생각하기 쉽지만, tab은 상단에 표시되는 탭의 내용을 포함하는 요소입니다.</p> + +<p>각 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 요소는 하나의 탭 페이지를 나타냅니다. 첫 번째 패널은 첫 번째 탭에, 두 번째 패널은 두 번째 탭에 대응됩니다. 따라서 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code>과 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 사이에는 일대일 대응 관계가 성립합니다.</p> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>의 크기는 가장 큰 탭 페이지의 크기에 의해 결정됩니다. 예를 들어 한 탭 페이지에 열 개의 글상자가 있고 다른 탭 페이지에는 하나의 글상자 밖에 없다고 하면, 탭 페이지의 크기는 가장 많은 공간을 차지하는 열 개의 글상자를 가진 탭 페이지의 크기에 맞춰진다는 것을 의미합니다. 사용자가 다른 탭을 선택해도 탭 영역의 크기는 변하지 않습니다.</p> + +<h3 id=".ED.83.AD.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".ED.83.AD.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">탭상자 예제</h3> + +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul">View</a></p> + +<div class="float-right"><img alt="Image:tabpanel1.png"></div> + +<pre><tabbox> + <tabs> + <tab label="Mail"/> + <tab label="News"/> + </tabs> + <tabpanels> + <tabpanel id="mailtab"> + <checkbox label="Automatically check for mail"/> + </tabpanel> + <tabpanel id="newstab"> + <button label="Clear News Buffer"/> + </tabpanel> + </tabpanels> +</tabbox> +</pre> + +<p>예제에는 두 개의 탭이 포함되어 있으며, 첫 번째 탭은 라벨이 'Mail'이고, 두 번째는 'News' 입니다. 사용자가 Mail 탭을 클릭하면 첫 번째 탭 페이지의 내용이 탭 아래에 표시됩니다. 이 경우, 'Automatically check for mail'이라는 라벨이 붙은 체크박스가 나타날 것입니다. 두 번째 탭을 클릭하면 'Clear News Buffer'라는 라벨을 가진 버튼을 포함하는 상자가 표시될 것입니다.</p> + +<p>기본적으로 선택된 탭페이지를 지정하기 위해서는 <code>tabbox</code>의 <code>selectedIndex</code> 속성을 설정하면 됩니다. 이 속성은 <code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code>과 마찬가지로 0에서 시작하며 <code>tabs</code>에 포함되어 있는 탭의 순서 번호를 입력할 수 있습니다. 해당 값에 0미만의 값을 입력하면 0을 입력한 것과 같이 첫번째 탭이 선택된 것으로 출력됩니다. 그리고, 탭의 갯수보다 큰 값을 입력하면 탭은 아무것도 선택되지 않은 것으로 출력되지만, 탭패널에는 첫번째 페이지가 출력될 것입니다.</p> + +<h3 id=".ED.83.AD.EC.9D.98_.EC.9C.84.EC.B9.98" name=".ED.83.AD.EC.9D.98_.EC.9C.84.EC.B9.98">탭의 위치</h3> + +<p>끝으로, 탭의 위치를 바꿔서 탭 페이지의 원하는 방향에 탭이 표시되도록 하는 방법을 알아 보겠습니다. 이러한 작업을 하기 위해 특별한 문법이 있는 것이 아니라 간단히 <code>orient</code>와 <code>dir</code> 속성 값을 설정하면 됩니다. 레이아웃에 관한한 탭 요소들은 일반 상자와 아주 유사하다는 점을 기억하세요. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>는 기본적으로 수직 정렬 방식인 일반 컨테이너 상자이고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소는 기본적으로 수평 정렬 방식인 일반 컨테이너 상자이라는 점을 알고 있으면 됩니다.</p> + +<p>예를 들어 탭을 왼쪽에 표시하려고 한다며, 탭들이 수직적으로 쌓이게 출력되도록 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>의 <code>orient</code> 속성을 <code>vertical</code>로 변경한 후 <code>tabbox</code>의 <code>orient</code> 속성을 <code>horizontal</code>로 설정하면 됩니다. 이렇게 하면 탭 페이지의 상단이 아닌 왼쪽에 탭이 수직방향으로 쌓이게 출력됩니다. 탭 페이지는 겹쳐 있기 때문에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 요소의 <code>orient</code> 속성을 바꾸는 것은 아무런 의미가 없습니다.</p> + +<p>여러분은 코드상에서 <code>tabpanels</code> 요소 다음으로 <code>tabs</code> 요소 위치를 옮겨서 오른쪽이나 아래쪽에 탭이 배치되도록 할 수 있습니다. 또 다른 방법으로는 <code>tabbox</code>의 <code>dir</code> 속성을 <code>reverse</code>로 지정하셔도 됩니다. 그러나 탭의 위치를 옮기면 특정 테마에서 보기가 좋지 않을 수 있기 때문에 그냥 상단에 두는게 좋을 것입니다.</p> + +<div class="highlight"> +<h2 id=".ED.8C.8C.EC.9D.BC.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD.EC.97.90_.ED.83.AD_.EB.84.A3.EA.B8.B0" name=".ED.8C.8C.EC.9D.BC.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD.EC.97.90_.ED.83.AD_.EB.84.A3.EA.B8.B0">파일찾기 대화창에 탭 넣기</h2> + +<p>파일찾기 대화창에 두 번째 패널을 넣어 보겠습니다. 우리는 검색과 관련된 설정을 포함할 Options 탭(기본적으로 선택되어 있도록 하겠습니다)을 만들 것입니다. 이렇게 하는 것이 그다지 좋은 인터페이스는 아니지만, 탭을 설명하기 위해 사용할 목적으로 이렇게 만들 것입니다. 위쪽의 라벨과 검색 상자는 첫 번째 탭에 넣어야 합니다. 두 번째 탭에는 몇가지 설정 사항을 넣겠습니다. 진행막대와 버튼은 탭 외부의 메인 대화창 위에 두도록 하겠습니다.</p> + +<pre class="eval"><vbox flex="1"> + +<span class="highlightred"><tabbox selectedIndex="1"> + <tabs> + <tab label="Search"/> + <tab label="Options"/> + </tabs> + + <tabpanels> + <tabpanel id="searchpanel" orient="vertical"></span> + + <description> + Enter your search criteria below and select the Find button to begin + the search. + </description> + + <spacer style="height: 10px"/> + + <groupbox orient="horizontal"> + <span class="nowiki"><caption label="Search Criteria"/></span> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + + <spacer style="height: 10px"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> + + </groupbox> + <span class="highlightred"></tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="Case Sensitive Search"/> + <checkbox id="wordscheck" label="Match Entire Filename"/> + </tabpanel> + + </tabpanels> +</tabbox></span> +</pre> + +<div class="float-right"><img alt="Image:tabpanel2.png"></div> + +<p>탭 요소들이 창의 중심부에 추가되었습니다. Search와 Options의 두 탭을 볼 수 있는데, 각 탭을 클릭하면 그에 맞는 탭 페이지가 표시됩니다. 그림에서 보듯이, 두 번째 탭에는 두 개의 선택 사항이 있으며, 첫 번째 탭은 상단에 탭이 있는 것을 제외하면 이전의 파일찾기 창과 차이가 없습니다.</p> + +<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul">View</a></p> +</div> + +<p>다음에는 <a href="ko/XUL_Tutorial/Grids">격자 형식의 컨텐츠를 작성하는 방법</a>에 대해 배워보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Grids">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html new file mode 100644 index 0000000000..dd1af0a361 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html @@ -0,0 +1,126 @@ +--- +title: Templates +slug: Mozilla/Tech/XUL/XUL_Tutorial/Templates +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +<h3 id=".ED.85.9C.ED.94.8C.EB.A6.BF" name=".ED.85.9C.ED.94.8C.EB.A6.BF">템플릿</h3> +<p>이 절에서는 데이터로부터 요소를 생성시키는 방법에 대해 살펴보고 갑니다.</p> +<h4 id=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1" name=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1">요소의 생성</h4> +<p>XUL 에는 RDF 파일 혹은 내부 데이터 소스에 의한 RDF 로부터 공급되는 데이터로부터 요소를 생성하는 기능이 있습니다. Mozilla 에서는 북마크나 히스토리 혹은 메일 메세지등의 여러 가지의 데이터 소스가 제공되고 있습니다. 이것들에 대한 자세한 것은 다음 절에 취급합니다.</p> +<p>보편적으로, 트리 항목(treeitem)이나 메뉴 항목(menuitem)등의 요소가 데이터로부터 생성되게 됩니다. 그렇지만, 필요하면 다른 요소에 이용하는 일도 가능합니다. 그렇게 말한 요소가 보다 유용이 되는 것은 특수한 상황에 있어야하지만 트리나 메뉴에는 긴 코드를 필요로 하므로 우선은 그러한 요소에 대하고 나서 시작합니다.</p> +<p>RDF 데이터에 근거한 요소의 생성을 가능하게 하기 위해서는, 생성되는 요소 마다 복제되는 것 같은 단순한 템플릿을 줄 필요가 있습니다. 요컨데, 최초의 요소만을 주어 두어 나머지의 요소는 그것을 바탕으로 구축시키는 것입니다.</p> +<p>템플릿은 template 요소에 의해 작성됩니다. 그 중에 구축되는 각 요소에 대해 이용하고 싶은 요소를 둡니다. template 요소는 구축되는 요소를 포함하게 되는 요소내에 둘 필요가 있습니다. 예를 들면 트리의 경우, template 요소를 tree 요소내에 둡니다.</p> +<p>예를 보는 편이 빠를 것입니다. 간단한 예로서 탑 레벨의 각 북마크에 대응하는 버튼을 작성해 봅시다. Mozilla 에는 북마크 데이터 소스가 있으므로 데이터의 취득에는 그것을 이용합니다. 이 예에서는 버튼을 작성하는 대상으로 탑 레벨의 북마크(혹은 북마크 폴더)만을 취득합니다. 아래층의 북마크에 대해서는 트리나 메뉴등의 계층을 표시하는 요소가 필요하게 됩니다.</p> +<p>내부의 RDF 데이터 소스를 참조하는 것 같은 이 예나 다른 것은 chrome URL 로부터 읽혔을 경우에 대해서만 유효합니다. 안전상의 이유로부터 Mozilla 에서는 다른 소스로부터 남을 수 있는 데이터 소스에의 액세스는 할 수 없게 되어 있습니다.</p> +<p>이 예를 실제로 보기 위해서(때문에)는, chrome 패키지를 작성해 파일을 거기로부터 읽어들이게 할 필요가 있습니다. chrome URL 를 브라우저의 URL 필드에 입력합니다.</p> +<p>Example 9.2. 1: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </template> +</vbox> +</pre> +<p>여기에서는, 각 탑 레벨의 북마크에 대응하는 버튼을 포함한 세로 줄의 박스가 작성됩니다만, 위에 보여지듯이, template 요소는 button 요소를 1개만 포함하고 있습니다. 이 버튼이 생성할 필요가 있는 모든 버튼의 바탕으로 됩니다. 화면으로부터 알듯이, 각 북마크에 대응하는 일련의 버튼이 작성되고 있습니다.</p> +<p>이 예의 윈도우를 연 채로 해서 브라우저로 북마크를 추가해 보세요. 일련의 버튼이 즉시 갱신되는 것을 알 수 있습니다.(다만, 윈도우에 한 번 포커스를 댈 필요가 있을지도 모릅니다).</p> +<p>템플릿 자체는 세로 줄의 박스내에 놓여져 있습니다. 박스에는 템플릿을 이용하기 위한 2개의 특별한 속성이 주어지고 있어 이용하는 데이터를 어디에서 얻는지를 지정하고 있습니다. 우선 datasources 속성입니다만, 이것은 RDF 데이터 소스를 요소 생성에 있어서의 데이터 공급원으로 하는 경우에 이용합니다. 이 경우 rdf:bookmarks 가 이용됩니다. 이것은 북마크 데이터 소스라고 짐작이 되겠지요. 이 데이터 소스는 Mozilla 가 제공하는 것입니다. 당신 자신에 의한 데이터 소스를 이용하고 싶은 경우는, 아래의 예에 나타나고 있듯이 datasources 속성에 RDF 파일의 URL 를 지정합니다.</p> +<pre><box datasources="chrome://zoo/content/animals.rdf" + ref="http://www.some-fictitious-zoo.com/all-animals"> + +</pre> +<p><br> + 공백 캐릭터로 나눠지는 것으로 한 번에 복수의 데이터 소스를 속성으로 지정할 수도 있습니다. 이것은 복수의 소스로부터의 데이터를 표시시키고 싶은 경우에 이용할 수 있습니다.</p> +<p>다음에 ref 속성에는 데이터 소스내의 어디에서 데이터를 취득하는지를 지정합니다. 위의 북마크의 경우, 북마크 계층에 있어서의 루트를 지시하는 값 NC:BookmarksRoot 가 이용되고 있습니다. 여기로 지정 가능한 값은 이용하는 데이터 소스에 의존합니다. 당신 자신에 의한 데이터 소스를 이용하는 경우, 지정하는 값은 RDF 의 Bag, Seq, Alt 몇개의 요소에 있어서의 about 속성의 값에 대응하는 것이 됩니다.</p> +<p>이것들 2개의 속성을 위의 박스에 나누어주는 것으로 템플릿으로부터의 요소의 생성이 가능하게 됩니다. 다만, 템플릿내의 요소는 다른 방법으로 선언될 필요가 있습니다. 위의 예로 보여지듯이, button 요소에는 uri 속성이 주어지고 있고 label 속성의 값이 통상과 다른 것이 되어 있습니다.</p> +<p>템플릿내에 있어서의 속성값은 데이터 소스로부터 값을 취득해야 하는 것을 지시하기 때문에 'rdf:'로 시작됩니다. 전의 예에서는 label 속성이 이것에 해당합니다. 속성값의 나머지의 부분은 데이터 소스내의 name 프롭퍼티를 참조합니다. [역주：The remainder of the value refers to the name property is the datasource. 문법적으로 이상한 느낌이지만, 문중의 'property is ...'는 'property in ...'의 오타라고 생각된다. ] 그것은 데이터 소스로 이용되고 있는 이름 공간 URL 에 프롭퍼티명을 부가한 것으로 구성되어 있습니다. 여기를 이해할 수 없는 경우는 전 장의 마지막 부분을 읽어 봐 주세요. 거기에 RDF 내의 리소스가 어떤 형태로 참조될지가 진술되고 있습니다. 여기에서는 북마크명 밖에 이용하지 않았습니다만, 그 밖에도 여러 가지의 필드를 이용할 수 있습니다.</p> +<p>버튼의 label에는 북마크명을 설정하고 싶었기 때문에, 버튼의 label 속성은 이 특별한 URI 로 설정되어 있습니다. URI 를 button 요소의 임의의 속성이나 다른 요소의 속성으로 설정할 수도 있었습니다. 이러한 속성의 값은 데이터 소스 - 여기에서는 북마크 데이터 소스 - 로부터 공급되는 데이터로 옮겨집니다. 그 결과, 버튼의 label는 북마크명이 되는 것입니다.</p> +<p>아래의 예에서는 데이터 소스를 이용해 버튼에 있어서의 다른 속성을 어떻게 설정 할 수 있는지를 나타내고 있습니다. 물론, 데이터 소스에는 적절한 리소스가 주어지고 있는 것으로 합니다. 만약 속성에 대응하는 리소스가 눈에 띄지 않는 경우, 그 속성의 값은 캐릭터 라인이 됩니다.</p> +<pre><button class="rdf:http://www.example.com/rdf#class" + uri="rdf:*" + label="rdf:http://www.example.com/rdf#name"/> + crop="rdf:http://www.example.com/rdf#crop"/> + +</pre> +<p><br> + 보듯이 다른 데이터 소스로부터 공급되는 속성을 이용해 동적으로 요소의 리스트를 생성시킬 수가 있습니다.</p> +<p>내용 생성을 시작하는 장소의 요소는 uri 속성으로 지정합니다. 보다 이전의 내용의 생성은 한 번 잘른 것인데 비해 내부의 내용은 각각의 리소스에 대해 생성됩니다. 이 점에 대해서는 트리에 대한 템플릿의 작성에 대해 말할 때에 자세하게 살펴보기로 하겠습니다.</p> +<p>이러한 기능을 템플릿을 포함한 컨테이너 - 여기에서는 박스 - 에 부가하는 것으로써, 외부의 데이터로부터 여러 가지의 흥미를 끄는 내용 리스트를 생성시킬 수가 있습니다. 물론, 템플릿내에는 복수의 요소를 두어도 어느 요소에도 고유의 RDF 참조를 줄 수가 있습니다. 아래에 그 예를 나타냅니다.</p> +<p>Example 9.2. 2: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <vbox uri="rdf:*"> + <button label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <label value="rdf:http://home.netscape.com/NC-rdf#URL"/> + </vbox> + </template> +</vbox> +</pre> +<p><br> + 이 예는 각 북마크에 대해 버튼과 label를 가지는 세로 줄의 박스를 생성합니다. 버튼은 북마크명, label는 URL 를 가지게 됩니다.</p> +<p>생성되는 새로운 요소는 XUL 내에 직접 기록된 요소와 기능적으로는 아무런 바뀔 것은 없습니다. 템플릿에 의해 생성되는 모든 요소에 대해 리소스를 특정하는 id 속성이 주어집니다. 이것을 이용해 리소스를 특정할 수 있습니다.</p> +<p>아래의 예와 같이 같은 속성에 복수의 리소스치를 공백 캐릭터로 단락지어 지정할 수도 있습니다. 리소스 구문의 상세입니다.</p> +<p>Example 9.2. 3: 소스</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" + flex="1"> + <template> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/> + </template> +</vbox> +</pre> +<h4 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95">템플릿 구축 방법</h4> +<p>요소가 데이터소스의 속성을 가질 때, 그 요소는 템플릿으로부터 구축되는 것을 의미합니다. 내용이 구축될지 어떨지는 template 태그는 아니고, datasources 속성으로 정해지는 것에 주의해 주세요. 이 속성이 존재할 때, 빌더로 불리는 오브젝트가 요소에 부가됩니다. 이 오브젝트가 템플릿으로부터의 내용 생성의 역할을 하게 됩니다. JavaScript 로부터는 builder 속성으로부터 빌더객체에 액세스 할 수가 있습니다. 통상, 내용 생성이 자동적으로 행해지지 않을 때에 빌더에 내용의 재생성을 실시하게 하고 싶은 경우를 제외하면, 이 필요성은 없을 것입니다.</p> +<p>빌더에는 2 종류가 있습니다. 1개는 대부분의 경우에 이용되는 내용 빌더로 불려지고 또 하나는 트리에 대해서만 이용되는 트리빌더입니다.</p> +<p>내용 빌더는 template 요소내의 내용을 꺼내 항목 마다 복제합니다. 예를 들면, 위의 예로 유저가 10 개의 북마크를 가지고 있는 경우, 10 개의 label 요소가 생성되어 vbox 요소의 아이 요소로서 추가되겠지요. 문서 트리의 주사에 DOM 함수를 사용하면, 이러한 요소를 찾아내 프롭퍼티를 조사할 수 있습니다. 이러한 요소는 표시되는 한편, template 요소 자체는 문서 트리내에는 존재하는 것의 표시는 되지 않습니다. 더욱, 각 label의 id 속성은 그 항목의 RDF 리소스로 설정됩니다.</p> +<p>내용 빌더는 항상 uri="rdf:*" 가 지정되었는데로부터 생성을 개시합니다. uri 속성이 요소 트리에 대해 하위의 요소에게 줄 수 있는 경우, 상위의 요소는 한 번 밖에 작성되지 않습니다. 아래의 예에서는 hbox 가 1개 작성되어 그 내용은 항목 마다 생성되는 label로 채워질 수 있게 됩니다.</p> +<pre><template> + <hbox> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/> + </hbox> +</template> +</pre> +<p>데이터소스 속성을 가지는 요소내에 존재하지만 템플릿의 외측에 있는 내용도 표시됩니다. 이와 같이, 템플릿에 대해 정적인 내용과 동적인 내용을 혼합할 수가 있습니다.</p> +<p>한편, 트리빌더는 항목 마다 DOM 요소를 생성할 것은 없습니다. 그 대신 필요가 생길 때에 RDF 데이터소스로부터 데이터를 직접 취득합니다. 트리는 몇천줄의 항목을 표시하는 것이 되고 있으므로 이 편이 효율적인 것입니다. 셀의 하나하나에 대해서 요소를 생성하는 것은 비용이 너무 비싸게 듭니다. 다만, 트리에서는 텍스트 밖에 표시할 수 없습니다. [역주：8.1 절 「트리」에서는 트리는 화상도 내용으로서 포함할 수 있다고 기록되고 있다. ] 더욱, 요소는 생성되지 않기 때문에 트리의 셀에 대한 스타일에 CSS 프롭퍼티를 이용하는 것은 통상의 방법에서는 할 수 없습니다.</p> +<p>트리빌더는 트리에 대해서만 이용됩니다. 다른 요소에서는 콘텐츠빌더만 이용됩니다만, 이것은 특히 문제가 되는 것이 아닙니다. 메뉴등의 다른 요소에는 그러한 다수의 항목을 표시하는 것은 상정되어 있지 않기 때문입니다. 내용빌더를 트리에 이용하는 일도 가능하여 treeitem 요소와 관련하는 요소가 항목 마다 작성됩니다.</p> +<h4 id=".EB.A3.B0" name=".EB.A3.B0">룰</h4> +<p>전에 언급한 예에 있어서 화상에서는 3번째의 버튼에는 하이픈만이 표시되고 있는 것을 알 것입니다. 이것은 북마크의 리스트에 있어서의 separator 입니다. 지금까지의 이용과 같이 RDF 북마크 데이터 소스도 마치 통상의 북마크와 같게 separator를 공급합니다. separator의 리소스에 대해서는 사실은 버튼의 대신에 작은 틈새를 두고 싶었습니다만. 즉, 통상의 북마크와 separator에 대해 다른 종류의 내용을 작성시키고 싶은 것입니다.</p> +<p>이것을 실시하려면 rule 요소를 이용합니다. 작성시키고 싶은 요소의 종류 마다 룰을 정의합니다. 여기의 예에서는 북마크에 대한 룰과 separator에 대한 룰이 필요하게 됩니다. 어느 룰을 어느 RDF 리소스에 적용할까는 rule 요소에 나누어주는 속성에 의해 정해집니다.</p> +<p>어느 룰을 데이터에 적용할까를 주시하는 과정에 대해서는 각 rule 요소에 대해 합치할지 어떨지가 차례로 조사할 수 있습니다. 즉, 룰을 정의하는 차례가 중요하게 됩니다. 먼저 정의되고 있는 룰이 다음에 정의되고 있는 룰보다 우선됩니다.</p> +<p>다음의 예는 이전의 예에 2개의 룰을 더한 것입니다.</p> +<p>Example 9.2. 4: 소스</p> +<pre><window + id="example-window" + title="Bookmarks List" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + + <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"> + <spacer uri="rdf:*" height="16"/> + </rule> + + <rule> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + + </template> + </vbox> + +</window> +</pre> +<p>2개의 룰을 이용하는 것으로써, 템플릿내의 내용은 선택적으로 생성되게 됩니다. 최초의 rule 요소에서는 rdf:type 속성으로 보여지도록, 북마크 separator가 선택됩니다. 후의 룰에서는 rule 요소에 어떤 속성도 나누어주어지지 않기 때문에, 모든 데이터가 일치합니다.</p> +<p>rule 태그에 놓여진 모든 속성이 일치 조건에 이용됩니다. 이 경우, 북마크 데이터 소스는 separator인가 어떤가를 구별할 수 있듯이 rdf:type 프롭퍼티를 공급하고 있습니다. 이 속성은, RDF 북마크 데이터 소스에 대해, separator에 대한 고유의 값으로 설정됩니다. 이것에 의해 separator가 아닌 것이라는 구별을 붙일 수 있게 됩니다. 동일한 기법은 RDF 의 Description 요소에게 줄 수 있고 있는 임의의 속성에 대해 적용할 수가 있습니다.</p> +<p>위의 예의 최초의 룰로 주어지고 있는 특별한 URL 값은 separator에게 이용되는 것입니다. 즉, separator에 대해서는 최초의 룰에 따라 16 픽셀의 틈새를 비우는 spacer 요소가 생성됩니다. separator가 아닌 모든 요소에 대해서는 최초의 룰에 일치하지 않고 후의 룰에 따르게 됩니다. 후의 룰에서는 속성이 일절 지정되어 있지 않기 때문에 모든 데이터에 일치하게 됩니다. 이것은 물론, 나머지의 데이터에 대해서 실시하고 싶었던 것입니다.</p> +<p>하나 더, RDF 네임스페이스( rdf:type )으로부터 속성을 꺼내고 싶었기 때문에 네임스페이스 선언을 window 태그에 부가할 필요가 있었던 것에 깨닫았을 것입니다. 이것을 해 두지 않으면 속성은 XUL 네임스페이스에 포함되는 것이라고 보여져 버립니다. 물론 거기에는 존재하지 않기 때문에, 룰은 합치하지 않게 됩니다. 자기 부담의 네임스페이스의 속성을 이용하는 경우도 룰에 일치시키기 위해서는 이름 공간 선언이 필요하게 됩니다.</p> +<p>2번째의 룰이 제거되었을 때에 무엇이 일어날까는 상상이 붙겠지요. 그 결과는 다만 separator 1개가 표시되는 것만으로 있어, 북마크는 합치하는 룰이 없기 때문에 표시되지 않습니다.</p> +<p>간단하게 말하면, rule 요소에 나누어주어진 모든 속성이 RDF 리소스의 대응하는 속성에 일치할 때 룰이 일치한다고 하는 것입니다. RDF 파일의 경우는 리소스는 Description 요소가 됩니다.</p> +<p>다만, 소수의 예외가 있습니다. 속성 id, rdf:property, rdf:instanceOf 에는 일치시킬 수가 없습니다. 어쨌든, 자기 부담의 속성을 자기 부담의 네임스페이스에서 준비하면 끝나는 것이므로, 문제가 되는 것은 없을 것입니다.</p> +<p>최초의 룰이 존재하지 않는 템플릿에 대해서는, 실제는 속성을 가지지 않는 다만 하나의 룰이 지정되고 있는 것이라고 되는 것에 주의해 주세요.</p> +<p>다음절에서는 트리에 대한 템플릿의 이용을 살펴보고 갑니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Introduction_to_RDF" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees_and_Templates">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html new file mode 100644 index 0000000000..c5c3d5fa1d --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html @@ -0,0 +1,118 @@ +--- +title: The Box Model +slug: Mozilla/Tech/XUL/XUL_Tutorial/The_Box_Model +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Element_Positioning">다음 »</a></p> +</div><p></p> +<p>이 단원에서는, XUL이 레이아웃을 어떻게 처리하는지에 대해 알아보겠습니다.</p> +<h3 id=".EC.83.81.EC.9E.90_.EC.86.8C.EA.B0.9C" name=".EC.83.81.EC.9E.90_.EC.86.8C.EA.B0.9C">상자 소개</h3> +<p>XUL에서 레이아웃의 주된 형식은 '상자모델'이라고 하는 것입니다. 이 모델은 창을 여러개의 상자로 분할 할 수 있도록 해 줍니다. 상자 내부의 요소는 가로 또는 세로 <code id="a-orient(방향)"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient(방향)">orient(방향)</a></code>을 가지게 됩니다. 여러개의 상자와 공백, <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>속성을 가진 요소들을 묶음으로써, 창의 레이아웃을 제어할 수 있습니다.</p> +<p>상자는 XUL의 요소들을 배치하기 위해 가장 중요한 부분이지만, 몇 가지 단순한 규칙만을 가집니다. 상자는 가로 또는 세로 두 방향 중 하나의 형태로 자식이 배치되도록 할 수 있습니다. 가로상자는 상자에 포함된 요소를 가로 방향으로 세로 상자는 세로 방향으로 정렬시킵니다. 여러분은 상자를 HTML 테이블의 행 또는 열로 생각하실 수 있습니다. CSS 스타일 속성과 더불어 자식 요소에 사용되는 여러 속성은 자식 요소의 위치와 크기를 정확하게 제어할 수 있게 해 줍니다.</p> +<h4 id=".EC.83.81.EC.9E.90_.EC.9A.94.EC.86.8C.EB.93.A4" name=".EC.83.81.EC.9E.90_.EC.9A.94.EC.86.8C.EB.93.A4">상자 요소들</h4> +<p>상자의 기본 구문은 다음과 같습니다.</p> +<pre><hbox> + <!-- horizontal elements --> +</hbox> + +<vbox> + <!-- vertical elements --> +</vbox> +</pre> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 요소는 가로 방향의 상자를 만드는 데 사용됩니다. <code>hbox</code>에 포함되는 요소들은 하나의 행 안에 수평적으로 배치됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 요소는 세로 방향의 상자를 만드는 데 사용됩니다. 상자에 추가되는 요소들은 아래쪽으로 배치됩니다.</p> +<p>또한 가로 방향을 기본으로 하는 기본적인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 요소가 존재하는데, 이것은 <code>hbox</code>와 같은 역할을 한다는 의미입니다. 그렇다 하더라도, 상자의 방향을 제어하기 위해서 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성을 사용할 수 있습니다. 이 속성을 이용하면 가로 상자를 만들기 위해서는 <code>horizontal</code>값을 세로 상자는 <code>vertical</code>값을 설정하면 됩니다.</p> +<p>따라서 다음의 두 줄은 동일한 것입니다.</p> +<pre><vbox></vbox> + +<box orient="vertical"></box> +</pre> +<p>다음의 예제는 3개의 버튼을 세로로 나타내는 방법을 보여주고 있습니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul">View</a></p> +<div class="float-right"> + <img alt="Image:boxes-ex1.png"></div> +<pre><vbox> + <button id="yes" label="Yes"/> + <button id="no" label="No"/> + <button id="maybe" label="Maybe"/> +</vbox> +</pre> +<p>여기에 있는 3개 버튼은 상자가 지시한 대로 세로 방향으로 배치되어 있습니다. 버튼을 가로 방향으로 배치되도록 하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code>를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>로 변경하기만 하면 됩니다.</p> +<h4 id=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">로그인 대화상자 예제</h4> +<p>여러분은 다른 상자를 포함해서 상자내에 원하는데로 많은 요소를 추가할 수 있습니다. 가로 상자의 경우에, 추가되는 요소는 이전 요소의 오른쪽에 놓이게 됩니다. 상자에 포함된 요소들은 다음 줄로 넘어가지 않기 때문에, 요소를 추가하면 창의 너비가 그 만큰 넓어지게 됩니다. 마찬가지로, 세로상자에 추가된 요소는 이전 요소의 아래에 놓이게 됩니다. 아래는 간단한 로그인 대화상자 예제입니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul">View</a></p> +<div class="float-right"> + <img alt="Image:boxes-ex2.png"></div> +<pre><vbox> + <hbox> + <label control="login" value="Login:"/> + <textbox id="login"/> + </hbox> + <hbox> + <label control="pass" value="Password:"/> + <textbox id="pass"/> + </hbox> + <button id="ok" label="OK"/> + <button id="cancel" label="Cancel"/> +</vbox> +</pre> +<p>위 예제에서는, 2개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 태그와 2개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소, 총 4개 요소가 세로 방향으로 배치되어 있습니다. 주의할 것은 상자의 바로 아래 자식 요소만 세로 방향으로 처리된다는 점입니다. 라벨과 글상자는 안쪽 <code>hbox</code> 요소 내부에 있기 때문에, 이들 상자의 방향인 가로 방향에 따라 배치되어 있습니다. 각 라벨과 글상자가 가로 방향으로 배치되어 있는 것을 그림에서 확인하실 수 있습니다.</p> +<h5 id=".EA.B8.80.EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC" name=".EA.B8.80.EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC">글상자 정렬</h5> +<p>로그인 대화상자의 그림을 자세히 보면, 2개의 글상자가 정렬되어 있지 않은 것을 볼 수 있습니다. 아마도 정렬되어 있다면 더 보기 좋을 것입니다. 이 작업을 위해서는 몇 가지 상자를 추가해 주어야 합니다.</p> +<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul">View</a></p> +<div class="float-right"> + <img alt="Image:boxes-ex3.png"></div> +<pre><vbox> + <hbox> + <vbox> + <label control="login" value="Login:"/> + <label control="pass" value="Password:"/> + </vbox> + <vbox> + <textbox id="login"/> + <textbox id="pass"/> + </vbox> + </hbox> + <button id="ok" label="OK"/> + <button id="cancel" label="Cancel"/> +</vbox> +</pre> +<p>이제 글상자가 어떻게 정렬되었는지 주의깊게 보시기 바랍니다. 이렇게 하기 위해 우리는 주 상자 내에 또 다른 상자를 추가해야 했습니다. 원래는 2개의 라벨과 글상자가 가로 상자 내부에 위치하고 있었습니다. 그런데 이번에는 라벨을 모두 하나의 수직 상자에, 글상자도 모두 하나의 수직 상자에 포함되어 있습니다. 여기서 사용한 수직 상자가 각 요소들을 수직으로 정렬시킵니다. 수평 상자는 라벨을 포함하는 수직 상자와 글상자를 포함하는 수직 상자를 수평적으로 배치하기 위해 사용되었습니다. 만일 이 수평 상자를 없애면 글상자는 모두 라벨의 아래에 위치하게 될 것입니다.</p> +<p>이제 남은 문제는 'Password' 라벨이 오른쪽에 있는 글상자에 비해 너무 높이 위치해 있다는 점입니다. 이 문제를 해결하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 라는 요소를 사용할 수 밖에 없는데, 이에 대해서는 <a href="ko/XUL_Tutorial/Grids">이후 단원</a>에서 배우게 될 것입니다.</p> +<div class="highlight"> + <h4 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD_.EC.98.88.EC.A0.9C">우리의 파일 찾기 대화창 예제</h4> + <p>파일 찾기 대화창에 몇 가지 상자를 추가해 보겠습니다. 모든 요소를 포함하도록 제일 바깥쪽에 세로 상자를 추가하고, 글상자와 버튼 주변에 가로상자를 추가하겠습니다. 이렇게 하면 버튼이 글상자 아래에 나타나게 될것입니다.</p> + <pre class="eval"><span class="highlightred"><vbox flex="1"> + + <description> + Enter your search criteria below and select the Find button to begin + the search. + </description> + + <hbox></span> + <label value="Search for:" control="find-text"/> + <textbox id="find-text"/> + <span class="highlightred"></hbox> + + <hbox> + <spacer flex="1"/></span> + + <button id="find-button" label="Find"/> + <button id="cancel-button" label="Cancel"/> + <span class="highlightred"></hbox> +</vbox></span> +</pre> + <div class="float-right"> + <img alt="Image:boxes1.png"></div> + <p><br> + 세로상자는 메인 텍스트와 글상자를 포함한 상자와 버튼을 포함한 상자를 세로 방향으로 배치되게 해 줍니다. 안쪽의 수평 상자들은 그들이 포함한 요소들을 수평적으로 배치되게 해 줍니다. 그림에서 보듯이, 라벨과 글상자는 나란히 놓여 있습니다. 공백요소와 2개의 버튼 또한 상자에서 가로로 배치되어 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> 요소가 flex 속성을 지정하고 있기 때문에, 버튼들이 오른쪽에 붙어있다는 점에 주목하세요.</p> + <p><span id="%EC%97%AC%ED%83%9C%EA%B9%8C%EC%A7%80%EC%9D%98_%EC%98%88%EC%A0%9C"><a id="%EC%97%AC%ED%83%9C%EA%B9%8C%EC%A7%80%EC%9D%98_%EC%98%88%EC%A0%9C"></a><strong>여태까지의 예제</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul">View</a></p> +</div> +<p>다음 섹션에서는, <a href="ko/XUL_Tutorial/Element_Positioning">요소들의 크기를 지정하고 크기에 제한을 주는 방법</a>에 대해 알아 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Element_Positioning">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html new file mode 100644 index 0000000000..51136bcd49 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html @@ -0,0 +1,45 @@ +--- +title: The Chrome URL +slug: Mozilla/Tech/XUL/XUL_Tutorial/The_Chrome_URL +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Manifest_Files">다음 »</a></p> +</div><p></p> +<p>이번 섹션에서는 XUL 문서와 다른 chrome 파일을 참조하는 방법을 설명합니다.</p> +<h3 id="Chrome_URL" name="Chrome_URL">Chrome URL</h3> +<p>XUL 파일은 HTML 파일처럼 일반적인 HTTP URL(또는 어떤 형태의 URL이든)로 참조될 수 있습니다. 그러나 Mozilla의 chrome 시스템에 설치된 꾸러미는 특별한 chrome URL로 참조될 수 있습니다. Mozilla에 포함된 꾸러미들은 미리 설치되어 있는 것들이지만 여러분은 여러분의 것을 등록할 수 있습니다.</p> +<p>설치된 꾸러미는 보안 제한사항에 구애받지 않는다는 장점을 가지는데, 이것은 많은 응용프로그램에 필요한 것입니다. 다른 URL 타입에 대한 또 다른 장점은 이것들이 다중 테마와 로케일을 자동으로 처리한다는 점입니다. 예를 들어 chrome URL은 여러분이 현재 사용중인 테마가 무엇인지 몰라도 테마에 포함된 이미지와 같은 파일을 참조하도록 해 줍니다. 각 테마내 파일 이름이 같다면 여러분은 chrome URL을 이용해서 파일을 참조할 수 있습니다. Mozilla는 파일이 어디에 위치하는지 결정하는데 신경 쓸 것이고 올바른 데이터를 반환할 것입니다. 이는 꾸러미가 이에 접근하기 위해 설치되어 있는 장소에 구애받지 않는다는 것을 의미합니다. Chrome URL은 파일들의 물리적인 위치에 독립적입니다. 이는 파일의 위치와 관련된 많은 부분을 신경 쓰지 않고도 다수의 파일을 가진 응용프로그램을 작성하기 쉽게 만들어 줍니다.</p> +<p>Chrome URL의 기본 구문은 다음과 같습니다.</p> +<pre class="eval"><a class="external" rel="freelink">chrome://</a><i><package name></i>/<i><part></i>/<i><file.xul></i> +</pre> +<p><package name>은 messenger나 editor와 같은 꾸러미 이름을 가리킵니다. <part>는 'content', 'skin', 'locale' 중에 하나가 될 수 있으며 여러분이 원하는 것에 따라 달라집니다. 'file.xul'은 그냥 파일 이름입니다.</p> +<p><b>Example</b>: <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p> +<p>위의 예제는 메신저 창을 가리킵니다. 여러분은 부분(part)에 해당하는 'content'를 'skin'으로 변경하고 파일명을 바꾸기만 하면 파일을 가리킬 수 있습니다. 비슷하게 'content' 대신 'locale'을 사용하면 로케인 부분의 파일을 가리킬 수 있습니다.</p> +<p>여러분이 chrome URL을 열면, Mozilla는 설치된 꾸러미 리스트를 조사하여 꾸러미 이름과 부분(part)이 일치하는 JAR 파일이나 디렉토리를 위치시키려고 합니다. Chrome URL과 JAR 파일들간의 연결은 chrome 디렉토리에 저장되어 있는 선언 파일에 명시되어 있습니다. 여러분이 messenger.jar 파일을 다른 곳으로 옮기더라도 선언 파일을 이에 맞게 수정한다면, Thunderbird는 특정 설치 위치에 의존하지 않기 때문에 정상적으로 동작합니다. Chrome URL을 사용함으로써 이와 같은 세부 사항은 Mozilla가 처리하도록 할 수 있습니다. 이와 유사하게, 사용자가 테마를 바꾸더라도 chrome URL의 'skin' 부분이 다른 파일들로 번역되고 따라서 XUL과 스크립트는 수정할 필요가 없게 됩니다.</p> +<p>아래 몇가지 예제가 있습니다. 어떠한 URL도 어떤 테마나 로케일을 사용하는지 명시하지 않았고 특정 디렉토리 또한 명시되지 않았음을 잘 보세요.</p> +<pre class="eval"><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a> +<a class="external" rel="freelink">chrome://messenger/content/attach.js</a> +<a class="external" rel="freelink">chrome://messenger/skin/icons/folder-inbox.gif</a> +<a class="external" rel="freelink">chrome://messenger/locale/messenger.dtd</a> +</pre> +<p>하위 디렉토리를 참조하기 위해서는 chrome URL의 끝에 하위 디렉토리를 붙여 주기만 하면 됩니다. 다음 URL들은 북마크 창을 참조하는 것으로 꾸러미 이름이 Mozilla Suite와 Firefox에서 서로 틀리기 때문에 모두 열거하였습니다.</p> +<pre class="eval"><a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> (Mozilla) +<a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> (Firefox) +</pre> +<p>여러분은 일반적인 URL이 사용되는 어디서나 chrome URL을 사용할 수 있습니다. 여러분은 Mozilla 브라우저 창의 URL 바에도 직접 입력할 수 있습니다. 만일 브라우저의 주소 영역에 위에서 언급한 URL 중의 하나를 입력하면, 웹 페이지가 출력되는 것과 같이 창이 출력되는 것을 보게 될 것이고, 별도의 창인 것처럼 대부분의 기능들이 동작합니다. 그러나 어떤 대화상자들은 올바로 작동하지 않을 수도 있는데 이는 그들이 열릴 때 윈도우에서 특정 인자(argument)를 제공해야 할 필요가 있기 때문일 수도 있습니다.</p> +<p>여러분은 다음과 같이 파일명을 명시하지 않은 chrome URL을 볼 수도 있습니다.</p> +<pre class="eval"><a class="external" rel="freelink">chrome://browser/content/</a> +</pre> +<p>이 경우에는 꾸러미 이름과 부분(part)만이 명시되어 있습니다. 이런 종류의 참조는 자동으로 올바른 디렉토리에서 적절한 파일이 선택됩니다. Content일 경우에는 꾸러미 이름과 동일한 이름인 xul 확장자를 가진 파일이 선택됩니다. 위의 예제에서는 browser.xul 파일이 선택됩니다. messenger일 경우에는 messenger.xul 파일이 선택될 것입니다. 여러분의 응용 프로그램을 만들 때는 짧은 형태를 사용하여 참조할 수 있도록 메인 윈도우에 해당하는 파일을 꾸러미 이름과 동일하게 만들고자 할 것입니다. 이렇게 하면 사용자는 꾸러미 이름만 알면 되므로 응용프로그램을 여는데 수월해 집니다. 물론, 확장 기능과 같이 브라우저의 인터페이스를 수정하는 경우에는 UI를 통해 자신을 표현하기 때문에 사용자가 URL을 꼭 알 필요가 없습니다.</p> +<p>스킨인 경우에는 <package name>.css 파일이 선택되고, 로케일에서는 <package name>.dtd가 선택됩니다.</p> +<p>Chrome URL은 디스크 상의 위치와 관련 없다는 것을 기억하세요. Chrome URL의 앞 두 부분은 꾸러미 이름과 부분(part)(content, skin, locale 중 하나)입니다. 컨텐츠 파일은 보통 'content'라는 디렉토리에 넣지만 이건 관습적인 것일 뿐이고, 이러한 파일들이 완전히 다른 구조에 위치해도 상관없습니다.</p> +<p>다음 섹션에서는 .manifest 파일과 꾸러미를 어떻게 만드는지 알아볼 것입니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Manifest_Files">다음 »</a></p> +</div><p></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html new file mode 100644 index 0000000000..157184118b --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html @@ -0,0 +1,107 @@ +--- +title: Toolbars +slug: Mozilla/Tech/XUL/XUL_Tutorial/Toolbars +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Scroll_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars">다음 »</a></p> +</div><p></p> + +<p>툴바(toolbar)는 보통 창의 상단에 위치하면서 일반적인 기능을 수행하는 여러 버튼을 포함합니다. XUL은 툴바를 만드는 방법을 제공합니다.</p> + +<h2 id=".ED.88.B4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".ED.88.B4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">툴바 추가하기</h2> + +<p>다른 요소들처럼 XUL 툴바도 상자 유형 중 하나입니다. 보통 툴바에는 <a href="ko/XUL_Tutorial/Adding_Buttons">버튼</a>들이 놓여지지만, 어떤 요소도 툴바에 놓을 수 있습니다. 예를 들어, Mozilla 브라우저에는 페이지 URL을 표시하는 <a href="ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields">글상자</a>를 포함한 툴바가 있습니다.</p> + +<p>툴바는 창내의 가로 혹은 세로 어떤 방향으로도 위치될 수 있습니다. 물론 글상자를 세로 툴바에 두지는 않을 것입니다. 사실 툴바는 그냥 상자이기 때문에 원하는 곳 어디든 위치할 수 있으며, 창의 중앙에도 배치할 수 있습니다. 그러나 대개 툴바들은 창의 상단에 나타나는게 보통입니다. 여러개의 툴바가 순서대로 위치하면, 보통 '툴박스(toolbox)'라고 불리는 것으로 묶게 됩니다.</p> + +<p>툴바의 좌측면에는 작은 무늬(notch)가 있는데, 이것을 클릭하면 툴바가 접혀지고 무늬만 보이게 됩니다. 무늬는 '그리피(grippy)'라고도 부릅니다. 여러개의 툴바가 하나의 툴박스 내에 있을때, 그리피들을 클릭하면 한 줄로 닫힙니다. 이렇게 해서 툴바가 사용하는 공간을 줄이게 됩니다. 세로 방향의 툴바는 상단 모서리에 그리피가 있습니다. 일반적으로, 사용자들은 메인 윈도우의 공간을 넓히기 위해 툴바를 닫습니다.</p> + +<h5 id="toolbox_.EC.95.88.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B0.84.EB.8B.A8.ED.95.9C_toolbar" name="toolbox_.EC.95.88.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B0.84.EB.8B.A8.ED.95.9C_toolbar"><code>toolbox</code> 안에 있는 간단한 <code>toolbar</code></h5> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul">View</a></p> + +<div class="float-right"><img alt="Image:toolbar1.jpg"></div> + +<pre class="brush: xml"><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Back"/> + <toolbarbutton label="Forward"/> + </toolbar> +</toolbox> +</pre> + +<p>이 예제는 뒤로가기(Back)와 앞으로가기(Forward) 버튼을 가진 툴바를 만듭니다. 하나의 툴바가 툴박스내에 위치하고 있습니다. 툴바와 관련하여 4가지 새로운 태그가 있는데 각 내용은 다음과 같습니다.</p> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dt> + <dd>툴바를 포함하는 상자.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></dt> + <dd>버튼과 같은 툴바 아이템을 포함하는 하나의 툴바. 툴바는 왼쪽 혹은 위쪽에 있는 그리피를 사용하여 접을 수 있습니다..</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code></dt> + <dd>툴바에 있는 버튼으로 일반 버튼과 동일한 기능을 가지고 있지만 조금 다르게 출력됩니다.</dd> +</dl> + +<dl> + <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code></dt> + <dd>이 요소는 툴바를 접거나 여는데 사용되는 무늬를 만듭니다. 자동으로 추가되기 때문에 직접 사용할 필요는 없습니다.</dd> +</dl> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>는 실제 툴바를 만드는 메인 요소입니다. 일반적으로 툴바에는 버튼들이 포함되는데 다른 요소들도 넣을 수 있습니다. 툴바는 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성을 가지는게 좋으며, 그렇지 않으면 접거나 펼칠 수 없게 될 수도 있습니다.</p> + +<p>위 예제에서는 단지 한개의 툴바만 작성되었습니다. 첫 번째 툴바 다음에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>요소를 더 추가해서 다중 툴바도 쉽게 만들 수 있습니다.</p> + +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>는 툴바의 컨테이너입니다. 일부 응용프로그램에서는 창의 상단에 여러개의 툴바가 있을 것입니다. 이들 모두를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 안에 넣을 수 있습니다.</p> + +<p>여러분은 <code>toolbar</code> 요소를 <code>toolbox</code> 안에 넣어야 하는 것은 아닙니다.</p> + +<h3 id=".ED.88.B4.EB.B0.95.EC.8A.A4.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B7.B8.EB.A6.AC.ED.94.BC" name=".ED.88.B4.EB.B0.95.EC.8A.A4.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B7.B8.EB.A6.AC.ED.94.BC">툴박스에 있는 그리피</h3> + +<div class="note"><b>주의</b>: Firefox에는 <code>toolbargrippy</code> 요소가 없습니다.</div> + +<p>툴박스에 있는 그리피들은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code></code>라는 요소를 이용해서 작성됩니다. 그리피의 목적이 툴바를 접기 위한 것이기 때문에, 툴바 밖에서 이 요소를 사용하는 것은 아무 의미가 없습니다. 그러나 좀 다른 스타일을 원할 수 도 있습니다. 여러분은 <code>toolbar</code> 요소의 <code><code id="a-grippyhidden"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/grippyhidden">grippyhidden</a></code></code> 속성을 <code>true</code>로 설정하면 그리피를 숨길 수 있습니다.</p> + +<div class="float-right"> +<p>동일 툴바들이지만 두 개는 접혀 있습니다.<br> + <img alt="Image:toolbar3.jpg"></p> +</div> + +<p>3개의 툴바를 가진 툴박스<br> + <img alt="Image:toolbar2.jpg"></p> + +<div class="highlight"> +<h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h3> + +<p>파일 찾기 대화창에 툴바를 넣어 보겠습니다. 사실 툴바가 꼭 필요한 것은 아니지만 설명을 위해서 추가할 것입니다. 2개의 버튼이 추가될 것인데, 열기(Open)와 저장(Save) 버튼입니다. 아마도 이것들은 사용자가 검색 결과를 저장하고 나중에 다시 열어볼 수 있게 해줄 것 같습니다.</p> + +<pre class="eval"><vbox flex="1"> + <span class="highlightblue"><toolbox> + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="Open"/> + <toolbarbutton id="savesearch" label="Save"/> + </toolbar> + </toolbox></span> + <tabbox> +</pre> + +<div class="float-right"><img alt="Image:toolbar5.png"></div> + +<p>2개의 버튼을 가진 툴바가 추가되었습니다. 그림에서 여러분은 툴바가 상단에 가로방향으로 나타나 있는 것을 볼 수 있습니다. 그리피 또한 툴바의 왼쪽면에 보입니다. 주목할 점은 툴바가 세로 상자 내 탭상자 바로 위의 위치하고 있다는 것입니다. 이것은 툴바가 모든 것보다 앞에 나타나도록 하기 위해 세로방향을 사용했기 때문입니다.</p> + +<p>지금까지의 파일 찾기 예제 : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul">View</a></p> +</div> + +<p>다음에는 창에 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴바</a>를 넣는 방법에 대해 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Scroll_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars">다음 »</a></p> +</div><p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html new file mode 100644 index 0000000000..23e3afa192 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html @@ -0,0 +1,166 @@ +--- +title: Trees +slug: Mozilla/Tech/XUL/XUL_Tutorial/Trees +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Trees +--- +<p> </p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Tree_Features">다음 »</a></p> +</div><p></p> +<p>XUL은 tree를 사용하여 표형태 또는 계층목록을 만드는 방법을 제공합니다.</p> +<h3 id=".ED.8A.B8.EB.A6.AC" name=".ED.8A.B8.EB.A6.AC">트리</h3> +<p><a href="ko/XUL/tree">tree</a>에서 가장 복잡한 요소중 하나가 tree입니다. listbox처럼, tree는 항목을 만드는 데 사용할 수 있습니다. tree 요소는 계층적 목록 또는 표를 만들 수도 있습니다. 예를 들어 메일 프로그램에서 메시지 목록, 또는 모질라의 북마크 편집창을 tree를 사용하여 만들 수 있습니다.</p> +<p>어떤 측면에서 tree는 <code><a href="ko/XUL/listbox">listbox</a></code>와 유사합니다. 둘다 다중 행과 열을 가진 표를 만드는 데 사용할 수 있으며, 둘다 열 머릿말(header)을 담을 수 있습니다. tree는 안쪽(netsted) 행을 지원하지만, listbox는 그렇지 않습니다. 하지만, listbox는 어떤 형태의 내용도 담을 수 있습니다. 반면 tree는 글과 그림 내용만 담을 수 있습니다. listbox는 단순하게 처리할 경우, tree에 대한 대안으로 만들어졌기 때문에, 필요한 경우 대신 사용할 수 있습니다. (프로그레스 바나 체크 박스 같은 경우 트리에 추가할 수 있습니다.)</p> +<p>tree는 칼럼 세트와 tree body 두 가지 부분으로 나누어 집니다. A tree consists of two parts, the set of columns, and the tree body.</p> +<ul> + <li>칼럼 세트는 <code><a href="ko/XUL/treecol">treecol</a></code> 요소의 갯수로 표시합니다. 각 칼럼은 tree의 상위 헤더로 나타납니다.</li> +</ul> +<p>elements, one for each column. Each column will appear as a header at the top of the tree.</p> +<ul> + <li>tree body는 tree에 포함되거나 <code><a href="ko/XUL/treechildren">treechildren</a></code> 태그로 만든 데이터를 말합니다.</li> +</ul> +<p>The tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. This contrasts with the listbox, where individual <code><a href="ko/XUL/listitem">listitem</a></code> and <code><a href="ko/XUL/listcell">listcell</a></code> tags are used to specify the rows in the listbox. In a tree, all of the data to be displayed is supplied by a separate object, called a tree view. When it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. The tree is smart enough to only ask for information from the view for those rows that need to be displayed. This allows the view to be optimized such that it only needs to load the data for displayed content. For instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. This means that the tree is scalable to any number of rows without any performance problems. Of course, this is independant of the performance of the view object itself.</p> +<p>A tree view is an object which implements the <a href="ko/NsITreeView">nsITreeView</a> interface. This interface contains thirty properties and functions which you may implement. These functions will be called by the tree as necessary to retrieve data and state about the tree. For instance, the <code>getCellText()</code> function will be called to get the label for a particular cell in the tree.</p> +<p>An advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. This allows more flexibility when using trees.</p> +<p>Naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. Fortunately, XUL provides a couple of built-in view implementations which do most of the hard work for you. For most trees, especially when you first start to use trees, you will use one of these built-in types. However, you can create a view entirely from scratch if necessary. If you do, you might store the data in an <a href="ko/A_re-introduction_to_JavaScript#Arrays">array</a> or JavaScript data structure, or load the data from an XML file.</p> +<p>Since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. This is because there are no elements that display the individual cells, like there is with the <a href="ko/XUL_Tutorial/List_Controls#Multi-Column_List_Boxes">listbox</a>. Instead, all drawing is done by the tree body using data supplied by the view. This is an important point and many XUL developers have trouble understanding this aspect. To modify the appearance of a tree cell, the view must instead associate a set of keywords for a row and cell. A special CSS syntax is used which styles components of the tree body with those keywords. In a sense, it is somewhat like using CSS classes. Tree styling will be discussed in detail in a <a href="ko/XUL_Tutorial/Styling_a_Tree">later section</a>.</p> +<h3 id="Tree_.EC.9A.94.EC.86.8C" name="Tree_.EC.9A.94.EC.86.8C">Tree 요소</h3> +<p>Trees can be created with the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element, which is described in the following sections. There are also two elements used to define the columns to be displayed in the tree.</p> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></dt> + <dd> + This is the outer element of a tree.</dd> +</dl> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></dt> + <dd> + This element is a placeholder for a set of <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> elements.</dd> +</dl> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></dt> + <dd> + This is used to declare a column of the tree. By using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. You should always place an <code><a href="/ko/XUL/Attribute/id" title="ko/XUL/Attribute/id">id</a></code> attribute on a column, as Mozilla uses the ids to identify the columns when rearranging and hiding them. This is no longer required in Mozilla 1.8 and later, but it is still a good idea to use ids on columns.</dd> +</dl> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></dt> + <dd> + This contains the main body of the tree where the individual rows of data will be displayed.</dd> +</dl> +<h5 id=".EB.91.90.EA.B0.9C_.EC.B9.BC.EB.9F.BC.EC.9D.84_.EA.B0.80.EC.A7.84_.ED.8A.B8.EB.A6.AC" name=".EB.91.90.EA.B0.9C_.EC.B9.BC.EB.9F.BC.EC.9D.84_.EA.B0.80.EC.A7.84_.ED.8A.B8.EB.A6.AC">두개 칼럼을 가진 트리</h5> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">View</a></p> +<pre><tree flex="1"> + + <treecols> + <treecol id="nameColumn" label="Name" flex="1"/> + <treecol id="addressColumn" label="Address" flex="2"/> + </treecols> + + <treechildren/> + +</tree> +</pre> +<p>First, the entire table is surrounded with a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element. This declares an element that is used as a table or tree. As with HTML tables, the data in a tree is always organized into rows. The columns are specified using the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> tag.</p> +<p>You may place as many columns as you wish in a tree. As with <a href="/ko/XUL_Tutorial/List_Controls" title="ko/XUL_Tutorial/List_Controls">listboxes</a>, a header row will appear with column labels. A drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. Each column is created with a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> element. You can set the header label using the <code>label</code> attribute. You may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. In this example, the second column will be approximately twice as wide as the first column. All of the columns should be placed directly inside a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> element.</p> +<p>In this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. You may have to resize the window to see anything since there isn't any data to display. Since the tree has been marked as flexible, the body will stretch to fit the available space. Making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. However, you may specify a specific number of rows to appear in a tree by setting the <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute on the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element. This attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. The total number of rows is supplied by the tree view. If there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. If you don't specify the <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute, the default value is 0, which means that none of the rows will appear. In this case, you would make the tree flexible. If your tree is flexible, it doesn't need a <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute since it will grow to fit the available space.</p> +<h3 id="The_Content_Tree_View" name="The_Content_Tree_View">The Content Tree View</h3> +<p>Having said that the data to be displayed in a tree comes from a view and not from XUL tags, there happens to be a built-in tree view which gets its data from XUL tags. This may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. The following tags are used:</p> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></dt> + <dd> + This contains a single parent row and all its descendants. This element also serves as the item which can be selected by the user. The treeitem tag would go around the entire row so that it is selectable as a whole.</dd> +</dl> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></dt> + <dd> + A single row in the tree, which should be placed inside a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> tag.</dd> +</dl> +<dl> + <dt> + <code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></dt> + <dd> + A single cell in a tree. This element would go inside a treerow element.</dd> +</dl> +<p>Conveniently, these tags may be placed directly inside the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> tag, nested in the order above. The tags define the data to be displayed in the tree body. In this case, the tree uses the built-in tree view, called a content tree view, which uses the labels and values specified on these elements as the data for the tree. When the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getCellText function, which in turn gets the data from the label of the appropriate <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code>.</p> +<p>However, the three elements listed above are not displayed directly. They are used only as the source for the data for the view. Thus, only a handful of attributes apply to the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> and related elements. For instance, you cannot change the appearance of the tree rows using the <code><code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> attribute or with other CSS properties and the box related features such as flexibility and orientation cannot be used.</p> +<p>In fact, apart from some tree specific attributes, the only attributes that will have any effect will be the <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> attribute to set a text label for a cell and the <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> attribute to set an image. However, there are special ways of styling the tree and setting other features which we will see in later sections.</p> +<p>Also, events do not get sent to <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> element and their children; instead they get sent to the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> element.</p> +<p>That the treeitems are unlike other XUL elements is a common source of confusion for XUL developers. Essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. Naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> elements at all.</p> +<p>Let's start by looking at how to create a simple tree with multiple columns using the tree content view. This could be used to create a list of mail messages. There might be multiple columns, such as the sender and the subject.</p> +<h4 id="treechildren_.EC.98.88.EC.A0.9C" name="treechildren_.EC.98.88.EC.A0.9C"><code>treechildren</code> 예제</h4> +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">View</a></p> +<div class="float-right"> + <img alt="Image:trees1.png"></div> +<pre><tree flex="1"> + + <treecols> + <treecol id="sender" label="Sender" flex="1"/> + <treecol id="subject" label="Subject" flex="2"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="joe@somewhere.com"/> + <treecell label="Top secret plans"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="mel@whereever.com"/> + <treecell label="Let's do lunch"/> + </treerow> + </treeitem> + </treechildren> + +</tree> +</pre> +<p>그림에서 보듯이, 두개의 자료 열을 가진 tree가 만들어졌습니다.</p> +<p>이 tree는 두개의 열을 가지고 있고, 이 중 두번째는 첫번째보다 더많은 공간을 차지하게 되어있습니다. 이 경우 해당 열에 flex 속성을 줄 것입니다. CSS의 <code><code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> 속성으로 넓이값을 줄 수도 있습니다. tree에 있는 열의 숫자만큼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 요소를 포함시켜야 한다. 그렇지않으면 엉뚱한 일이 발생합니다.</p> +<p><br> + 머릿말 행(header row)은 자동으로 만들어집니다. 오른쪽 위에 있는 버튼은 해당 열을 숨기고 감출 수 있습니다. 이 버튼을 숨기고 싶다면 <code><code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code></code> 속성을 tree에 넣거나 true 값을 주면 됩니다. 각 열에 id 속성을 설정했는 지 또는 행의 숨김과 보기가 작동하는 지를 확인하도록 합니다.</p> +<p>Make sure that you set an <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute on each column or the hiding and showing of columns will not work in all versions of Mozilla.</p> +<p>The <code>treechildren</code> element surrounds all of the rows. Inside the body are individual rows, which may in turn contain other rows. For a simpler tree, each row is created with the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> and <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> elements. The <code>treerow</code> element surrounds all of the cells in a single row, while a <code>treeitem</code> element would surround a row and all of its children. Trees with nested rows are described in the next section.</p> +<p>Inside the rows, you will put individual tree cells. These are created using the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> element. You can set the text for the cell using the <code>label</code> attribute. The first <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> in a row determines the content that will appear in the first column, the second <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> determines the content that will appear in the second column, and so on.</p> +<p><br> + 사용자는 마우스로 항목을 클릭하거나 키보드를 사용해서, treeitem을 선택할 수 있습니다. Shift 또는 Control 키를 누른 상태에서 다른 행을 클릭해서 다중 항목을 선택할 수 있습니다. 다중선택을 사용 못하게 하려면, tree에 <code><code id="a-seltype"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></code> 속성을 넣고, 값을 <code>single</code>로 합니다. 이렇게하면, 한번에 한 행만 선택할 수 있습니다.</p> +<div class="highlight"> + <h4 id=".EC.B0.BE.EC.9D.80_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_tree_.EC.B6.94.EA.B0.80" name=".EC.B0.BE.EC.9D.80_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_tree_.EC.B6.94.EA.B0.80">찾은 파일에서 tree 추가</h4> + <p>검색결과가 표시되도록 파일찾기(find files) 창에 tree를 추가해보자. 다음 코드는 iframe에 추가해야 한다. tree는 treeview를 사용합니다. 아래 코드는 <a href="ko/XUL_Tutorial/Content_Panels#iframe_example">iframe</a>에 추가할 수 있습니다.</p> + <pre class="eval"><span class="highlightred"><tree flex="1"> + <treecols> + <treecol id="name" label="Filename" flex="1"/> + <treecol id="location" label="Location" flex="2"/> + <treecol id="size" label="Size" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="2520 bytes"/> + </treerow> + </treeitem> + </treechildren> +</tree></span> + +<splitter collapse="before" resizeafter="grow"/> +</pre> + <p>파일명(filename), 위치(location) 그리고 파일크기(file size)라는 3개의 행을 가진 tree를 추가한 것입니다. 두번째 열은 더 큰 flex(flex="2")값을 가지고 있기 때문에 넓이가 2배가 됩니다. 하나의 행이 추가되었는 데, 하나의 행을 가진 표가 어떤 모습인지 설명하기 위한 것입니다. 실제 마무리 단계에서는, 검색했을 경우 해당 열은 스크립트에 의해 추가될 것입니다.</p> + <p>지금까지 예제는 <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">View</a>에서 보실 수 있습니다.</p> +</div> +<p><br> + 다음 장에서는 <a href="ko/XUL_Tutorial/More_Tree_Features">고급 tree 기능</a>에 대해 알아 보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Tree_Features">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html new file mode 100644 index 0000000000..34128c0e57 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html @@ -0,0 +1,112 @@ +--- +title: Using Spacers +slug: Mozilla/Tech/XUL/XUL_Tutorial/Using_Spacers +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Button_Features">다음 »</a></p> +</div><p></p> +<p>이 단원에는 우리가 만든 요소들 사이에 여백을 넣는 방법을 알아볼 것입니다.</p> +<h3 id=".EC.97.AC.EB.B0.B1.28spacer.29_.EB.84.A3.EA.B8.B0" name=".EC.97.AC.EB.B0.B1.28spacer.29_.EB.84.A3.EA.B8.B0">여백(spacer) 넣기</h3> +<p>사용자 인터페이스를 개발하는데 있어서의 문제점 중 하나는 사용자마다 서로 다른 화면 장치를 가진다는 것입니다. 어떤 사용자는 고해상도에 큰 화면을 가지고 있으며, 또 다른 사용자는 저해상도를 가지고 있을 수 있습니다. 더군다나, 다른 플랫폼은 사용자 인터페이스에 특별한 요구조건을 가지고 있을 수 있습니다. 다중 언어를 지원할 경우, 어떤 언어에 사용된 텍스트는 다른 언어보다 더 많은 공간이 필요할지도 모릅니다.</p> +<p>다중 플랫폼과 언어를 지원해야 하는 응용프로그램은 이를 위해 많은 여백을 가지는 창 배치를 합니다. 일부 플랫폼과 사용자인터페이스 툴킷은 사용자의 요구에 맞게 크기 조절과 위치 설정을 잘 처리하는 구성요소를 제공합니다. (예를 들어, 자바에서는 레이아웃 관리자를 사용합니다.)</p> +<p>XUL은 요소의 위치와 크기 재설정을 자동으로 처리할 수 있는 기능을 제공하고 있습니다. 앞서 본것 처럼, 파일 찾기 창은 내부 요소 크기에 맞게 표시되었습니다. 우리가 새로운 요소를 추가할 때마다 창 크기는 더욱 커졌습니다.</p> +<p>XUL은 '상자 모델(Box Model)'이라고 하는 레이아웃 시스템을 사용합니다. 이에 대해서는 <a href="ko/XUL_Tutorial/The_Box_Model">다음 단원</a>에서 언급할텐데, 이는 기본적으로 창을 요소를 포함한 일련의 상자로 나눌 수 있게 해줍니다. 상자는 사용자가 정의한 사양에 근거하여 위치와 크기를 조절하게 된다. 현재로써는, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 요소가 상자 형식이라는 것만 알도록 하자.</p> +<p>상자에 대한 세부 내용을 다루기 전에, 레이아웃에 유용한 또 다른 XUL 요소인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>를 소개할 것입니다. 여백(spacer)는 매우 단순하고 한가지 속성만을 필요로 하는데, 곧 설명하겠습니다. 가장 단순한 여백(spacer)은 다음과 같습니다.</p> +<pre class="eval"><spacer flex="1"/> +</pre> +<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>는 창에 공백을 넣는 데 사용됩니다. 공백 요소의 가장 유용한 점은 사용자가 창의 크기를 조절하는 것처럼 공백 자체가 늘어나거나 줄어들 수 있다는 것입니다. 창의 크기와 상관없이 버튼을 창의 오른쪽 또는 하단에 두면서 오른쪽 또는 하단 모서리에 고정시키는 것이라고 보면 됩니다. 앞으로 보겠지만, 수많은 레이아웃 효과를 주기 위해서 여러개의 공백 요소를 사용할 수 있습니다.</p> +<p>위의 구문에서, 공백 요소는 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>라는 한 가지 속성을 가지고 있습니다. 이것은 공백의 유연성을 정의하는 데 사용됩니다. 위의 경우에서, 공백은 1이라는 flex를 가집니다. 이것은 공백 요소를 신축성 있게 만들어 줍니다. 사용자가 직접 창 내부에 공백 요소를 위치시키면, 창의 크기가 변경됨에 따라 공백도 같이 늘어나게 됩니다.</p> +<p>잠시 후 파일찾기 대화창에 공백 요소를 추가할 것입니다. 그 전에 먼저 현재 대화창의 크기를 조절할 때 어떤일이 일어나는지 보도록 하겠습니다.</p> +<p><img alt="Image:springs1.jpg"></p> +<p>파일찾기 창의 크기를 변경하더라도 포함된 요소들은 그것들의 원래 위치에 그대로 있는 것을 볼 수 있습니다. 창이 더 많은 공간을 가지게 되더라도, 이들 중 어느 것도 이동하거나 크기를 변경하지 않습니다. 글상자(text box)와 찾기(Fine) 버튼 사이에 공백 요소를 추가하였을 때는 어떻게 될지 보겠습니다.</p> +<p><img alt="Image:springs2.jpg"></p> +<p>공백 요소를 추가하고 창 크기를 조절하면, 공백이 여백을 채우기 위해 확장되는 것을 볼 수 있습니다. 버튼들은 밀려나 위치하게 됩니다.</p> +<div class="highlight"> + <h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h5> + <p>공백 요소를 추가한 코드는 아래와 같습니다. 해당 요소를 Find 버튼 앞에 삽입하세요.</p> + <pre class="eval"><span class="highlightred"><spacer flex="1"/></span> + +<button id="find-button" label="Find"/> +</pre> +</div> +<h3 id=".EC.9C.A0.EC.97.B0.EC.84.B1.EC.97.90_.EB.8C.80.ED.95.9C_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EA.B2.83.EB.93.A4" name=".EC.9C.A0.EC.97.B0.EC.84.B1.EC.97.90_.EB.8C.80.ED.95.9C_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EA.B2.83.EB.93.A4">유연성에 대한 더 많은 것들</h3> +<p>XUL은 요소에 적당한 넓이와 높이를 계산하여 여백을 추가하는 식으로 창에 있는 요소를 배치합니다. 사용자가 요소의 넓이와 높이에 대한 정보를 지정하지 않으면, 요소의 기본 크기는 내용에 의해 결정됩니다. 대화상자의 취소(Cancel) 버튼이 항상 기본 넓이로 설정되어 있어서 글에 맞출 수 있습니다. 매우 긴 라벨을 가진 버튼을 만든다면, 버튼의 기본 크기는 전체 라벨을 담기에 충분하게 커지게 됩니다. 글상자와 같은 다른 요소는 적당한 기본 크기를 선택한 것을 볼 수 있습니다.</p> +<p><code>flex</code> 속성은 어떤 요소가 상자(이 경우, 창)에 맞출 수 있도록 크기 변경 여부를 지정하는 데 사용됩니다. 앞에서, 공백 요소에 적용된 flex 속성을 봤지만, 이 속성은 어떤 요소에도 적용할 수 있습니다. 예를 들어, 여러분은 아마 Find 버튼 크기가 수정되도록 하기를 원하실 수도 있습니다.</p> +<p><img alt="Image:springs3.jpg"></p> +<p>그림에서 보는 것처럼, 찾기(Find) 버튼에 flex 속성을 지정하면, 창의 크기가 바뀌었을 때 버튼의 크기도 변경됩니다. 공백 요소는 특별한 것이 아니고 그냥 숨겨진 버튼이라고 생각하시면 됩니다. 이것은 화면에서 출력되지 않을 뿐이지, 버튼과 동일한 방식으로 동작합니다.</p> +<p>여러분이 위 그림에서 뭔가를 눈치챘을 지 모르겠습니다. 찾기(Find) 버튼의 크기가 커졌을 뿐만 아니라, 주 라벨과 버튼 사이에 약간의 여백이 나타난 것을 보실 수 있습니다. 당연한 것이지만, 이것은 앞에서 공백 요소를 넣은 것입니다. 공백 요소가 그 자체 크기를 조절한 것입니다. 자세히 보면, 변경되는 크기가 공백 요소와 버튼에 균등하게 나누어져 적용되는 것을 볼 수 있습니다. 여유 공간의 절반은 공백 요소에 나머지 절반은 버튼에 적용되는 것입니다.</p> +<p>이런 효과를 보는 이유는 공백 요소와 찾기(Find) 버튼 모두 flex 속성을 가지고 있기 때문입니다. 둘 다 <code>flex</code>을 가지기 때문에, 버튼과 공백 요소 모두 균일하게 크기를 변경한 것입니다.</p> +<p>만일 요소를 어떤 요소를 다른 것에 비해 두배 크기로 적용하려면 어떻게 할까? 그렇게 하려면 <code>flex</code> 속성값을 더 높은 숫자로 쓰면 됩니다. 요소의 flex 값은 비율을 나타냅니다. 만일 어떤 요소의 flex값이 1이고 다음 요소의 값은 2라면, 후자는 첫 번째의 두배 비율로 커지게 됩니다. 사실, flex 값이 2라는 것은 flex가 1인 요소 2개 가지고 있다고 말하는 것과 같습니다.</p> +<p><code>flex</code> 속성은 실제 크기를 나타내기 위해 사용되는 것이 아닙니다. 대신 그것은 포함하는 상자의 자식들 중간에 어떻게 빈 공간을 넣을지를 나타내는 것입니다. 우리는 다음 섹션에서 상자에 대해 알아볼 것입니다. 상자의 자식들의 기본 크기가 정해지면 유연성 값(flex)은 상자 내의 빈 공간을 나누는데 사용됩니다. 예를 들어 상자의 너비가 200픽셀이고 두 개의 유연한 버튼(flex값을 가진 버튼)을 포함한 경우, 첫 번째 버튼이 50픽셀이고 다음 버튼은 90픽셀이면, 남은 공간은 60픽셀입니다. 만일 버튼 모두의 flex값이 1이면 각 버튼의 너비가 30픽셀씩 추가되어 나눠집니다. 만일 두번째 버튼의 flex값이 2로 증가하면, 첫번째 버튼은 20픽셀의 남은 공간을 두번째 버튼은 40픽셀의 추가 공간을 할당받게 됩니다.</p> +<p><code>flex</code> 속성은 어떠한 요소에도 포함될 수 있지만 XUL 상자에 바로 포함되어 있는 요소에서만 의미가 있습니다. 이것은 HTML 요소에도 <code>flex</code>를 넣을 수 있지만, 해당 요소가 비상자(non-box) 요소의 내부에 있다면 아무 효과도 일어나지 않는다는 것을 의미합니다.</p> +<h5 id="Flex_.EC.98.88.EC.A0.9C" name="Flex_.EC.98.88.EC.A0.9C">Flex 예제</h5> +<pre class="eval">예제 1: + <button label="Find" flex="1"/> + <button label="Cancel" flex="1"/> + +예제 2: + <button label="Find" flex="1"/> + <button label="Cancel" flex="10"/> + +예제 3: + <button label="Find" flex="2"/> + <button label="Replace"/> + <button label="Cancel" flex="4"/> + +예제 4: + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + <button label="Cancel" flex="3"/> + +예제 5: + <html:div> + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + </html:div> + +예제 6: + <button label="Find" flex="145"/> + <button label="Replace" flex="145"/> +</pre> +<dl> + <dt> + 예제 1 </dt> + <dd> + 이 경우 유연성(flexibility)은 두 버튼에서 균등하게 나뉘어집니다. 두 버튼은 균등하게 크기를 변경하게 됩니다.</dd> + <dt> + 예제 2 </dt> + <dd> + 이 경우, 두 버튼은 커지긴 하지만, Cancel 버튼의 flex값이 Find 버튼의 flex값보다 10배 크기 때문에, 찾기(Find) 버튼은 항상 취소(Cancel)버튼의 크기 증가값의 1/10 크기만큼만 변하게 됩니다. 가능한 공간은 1만큼의 Find 버튼 영역과 10만큼의 Cancel 버튼 영역으로 나누어지게 됩니다.</dd> + <dt> + 예제 3 </dt> + <dd> + 버튼 중 2개만이 유연하도록 표시되어 있습니다. Replace 버튼은 절대 크기가 변하지 않을 것이고, 나머지는 변할 것입니다. 취소(Cancel) 버튼은 항상 찾기(Find) 버튼의 두 배만큼 커지는데 이는 flex 값이 두배이기 때문입니다.</dd> + <dt> + 예제 4 </dt> + <dd> + 이 경우, 3개 모두 유연함을 가지고 있습니다. 찾기(Find)와 바꾸기(Replace) 버튼은 항상 같은 크기이지만 취소(Cancel)은 약간은 더 크게 됩니다(정확히 말하면 50% 더 커집니다).</dd> + <dt> + 예제 5 </dt> + <dd> + 여기서는 두 개 버튼이 div 요소내에 있습니다. 이처럼 버튼이 상자내에 직접 사용되지 않은 경우에는 flex의 의미가 없어집니다. 이 경우에는 flex가 없는 것과 동일한 효과를 보이게 됩니다.</dd> + <dt> + 예제 6 </dt> + <dd> + 두 버튼의 flex 값이 모두 같기 때문에, 동일하게 변합니다. flex에 145 대신 1값을 적용하더라도 동일하게 동작할 것입니다. 이 경우에는 전혀 차이가 없습니다. 여러분은 가독성을 위해서 가능한 낮은 숫자를 사용할 것을 권장합니다.</dd> +</dl> +<p>버튼의 라벨과 최소 크기 같은 다른 요인들이 버튼의 실제 크기에 영향을 준다는 점을 반드시 명심하세요. 예를 들어 버튼에 포함된 라벨이 필요로 하는 공간보다 작게는 줄어들지는 않을 것입니다.</p> +<p>flex값을 0으로 설정하는 것은 <code>flex</code> 속성을 사용하지 않은 것과 같은 효과를 나타냅니다. 이것은 해당 요소가 전혀 유연하지 않게 된다는 것을 의미합니다. 여러분은 때때로 flex 값을 백분률로 지정한 것을 볼 수도 있을 것입니다. 이것은 특별한 의미는 없고 백분률 기호(%)가 없는 것처럼 처리됩니다.</p> +<p>여러분은 파일 찾기 대화상자를 수직으로 크기 조절을 했을 때 버튼의 크기가 자동적으로 창의 높이에 맞게 늘어나는 것을 보실 수 있을 것입니다. 이것은, 모든 버튼들은 내부적으로 수직 flex가 지정되어 있기 때문입니다. 다음 섹션에서는 이것을 어떻게 수정할 수 있는지에 대해 공부하겠습니다.</p> +<div class="highlight"> + <h5 id=".EC.97.AC.ED.83.9C.EA.B9.8C.EC.A7.80.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.97.AC.ED.83.9C.EA.B9.8C.EC.A7.80.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">여태까지의 파일 찾기 예제</h5> + <p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">View</a></p> +</div> +<p>다음에는 <a href="ko/XUL_Tutorial/More_Button_Features">버튼의 부가적인 기능들</a>에 대해 알아보겠습니다.</p> +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Button_Features">다음 »</a></p> +</div><p></p> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html new file mode 100644 index 0000000000..4b3eaea401 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html @@ -0,0 +1,132 @@ +--- +title: XPCOM Examples +slug: Mozilla/Tech/XUL/XUL_Tutorial/XPCOM_Examples +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples +--- +<p> +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees">다음 »</a></p> +</div> +<p></p><p>본 단원에서는 몇가지 인터페이스와 함께 XPCOM를 이용하는 예제를 제공합니다. +</p> +<h3 id=".EC.B0.BD_.EA.B4.80.EB.A6.AC" name=".EC.B0.BD_.EA.B4.80.EB.A6.AC"> 창 관리 </h3> +<div class="note"> +<p>본 예제에는 <a href="ko/XUL_Tutorial/Templates">이후 단원</a>에서 보게될 RDF 데이터소스에 대한 내용이 들어 있습니다. 따라서 이에 대한 지식이 없다면 넘어가도 괜찮습니다. +</p> +</div> +<h4 id=".EC.B0.BD_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.B0.BD_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0"> 창 메뉴 만들기 </h4> +<p>The list of currently open Mozilla windows can be used as an <a href="ko/XUL_Tutorial/RDF_Datasources">RDF datasource</a>. This allows you to create a Window menu with a list of the currently open windows in the application. The datasource for this is <code>rdf:window-mediator</code>. We can use this as in the following example: +</p><p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpcomex_1.xul.txt">Source</a> +</p> +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>A Window menu will be created with a list of all the open windows. Try this example by opening a number of browser windows and you'll see that they are all listed on the menu. +</p> +<h4 id="Window_mediator_component" name="Window_mediator_component"> Window mediator component </h4> +<p>This is fine for displaying a list of open windows, but we would like to enhance this so that clicking on the menu item will switch to that window. This is accomplished by using the <a class="external" href="http://xulplanet.com/references/xpcomref/comps/c_rdfdatasource1namewindowmediator.html">window mediator component</a>. It implements the interface nsIWindowDataSource. The code below shows how to get a component which implements it: +</p> +<pre>var wmdata = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); +wmdata.QueryInterface(Components.interfaces.nsIWindowDataSource); +</pre> +<p>This code retrieves a window mediator data source component. The component used here is the same one that handles the window-mediator RDF datasource. You can also get this component through the RDF service, which is another service that manages RDF datasources. +</p><p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWindowDataSource.html">nsIWindowDataSource</a> interface has a function <code>getWindowForResource</code>, which can be used to get the window given a resource. In the earlier example, we generated the list of windows and added it to a menu via a template. The template generates an <code>id</code> attribute on each <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> element. The value of this attribute can be used as the resource. That means that in order to switch the window focus, we need to do the following: +</p> +<ol><li> Determine the element that the user clicked on. +</li><li> Get the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute from the element. +</li><li> Pass this value to <code>getWindowForResource()</code> to get a window object. +</li><li> Switch the focus to this window. +</li></ol> +<p>The example below shows how we might do this: +</p> +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window" oncommand="switchFocus(event.target);"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> + +<script> +function switchFocus(elem) +{ + var mediator = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); + mediator.QueryInterface(Components.interfaces.nsIWindowDataSource); + + var resource = elem.getAttribute('id'); + switchwindow = mediator.getWindowForResource(resource); + + if (switchwindow){ + switchwindow.focus(); + } +} +</script> +</pre> +<p>A command handler was added to the menu element which calls the function switchFocus() with a parameter of the element that was selected from the menu. The function switchFocus(): +</p> +<ul><li> first gets a reference to a component which implements the window mediator interface. </li><li> Next, we get the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute for the element. We can use the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute as the resource. </li><li> The function <code>getWindowForResource()</code> takes the resource and returns a window that matches it. This window, stored in the <code>switchwindow</code> variable, is the same as the JavaScript window object. </li><li> This means that you can call any of the functions provided by it, one of which is the <code><span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus()</a></code></span></code> function. +</li></ul> +<h3 id=".EC.BF.A0.EA.B8.B0.28cookies.29" name=".EC.BF.A0.EA.B8.B0.28cookies.29"> 쿠기(cookies) </h3> +<p>다음으로 브라우저에 저장된 쿠키 목록을 가져와 보겠습니다. 쿠키 서비스는 다양한 목적으로 사용될 수 있습니다. 쿠키 서비스는 <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookieManager.html">nsICookieManager</a></code> 인터페이스를 구현하고 있으며, 저장된 모든 쿠키를 열거하는데 사용할 수 있습니다. 다음은 MozillaZine에서 설정된 모든 쿠키의 이름을 메뉴 목록에 출력하는 예제입니다. +</p> +<pre><script> + +function getCookies() +{ + var menu = document.getElementById("cookieMenu"); + menu.removeAllItems(); + + var cookieManager = Components.classes["@mozilla.org/cookiemanager;1"] + .getService(Components.interfaces.nsICookieManager); + + var iter = cookieManager.enumerator; + while (iter.hasMoreElements()){ + var cookie = iter.getNext(); + if (cookie instanceof Components.interfaces.nsICookie){ + if (cookie.host == "www.mozillazine.org") + menu.appendItem(cookie.name,cookie.value); + } + } +} +</script> + +<hbox> + <menulist id="cookieMenu" onpopupshowing="getCookies();"/> +</hbox> +</pre> +<p><br> +getCookies() 함수는 메뉴가 열릴때마다 호출되는데, 이는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소의 <code><code id="a-onpopupshowing"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/onpopupshowing">onpopupshowing</a></code></code> 속성에 지정되어 있습니다. getCookies() 함수의 처음 두줄은 menulist를 가져와서 현재 메뉴에 있는 모든 항목을 삭제하는 것입니다. 이것은 getCookies() 함수가 메뉴가 열릴때마다 호출되고, 매번 이전 항목이 남아있지 않아야 하기 때문입니다. +</p><p>다음은 쿠키 관리자에 대한 참조를 받아옵니다. 쿠키 관리자에는 <code><a href="ko/NsISimpleEnumerator">nsISimpleEnumerator</a></code> 인터페이스를 구현하는 객체를 반환하는 <code>enumerator</code> 메소드가 있습니다. 이 메소드는 모든 쿠키별로 반복(iteratee)하기 위해 사용됩니다. 해당 인터페이스(nsISimpleEnumerator)에는 <code>hasMoreElements()</code> 메소드가 있으며 마지막 쿠키에 도달하기 전까지는 true를 반환합니다. <code>getNext()</code> 메소드는 쿠키를 가져온 후 열거자(enumerator)의 인덱스를 다음 쿠키로 이동합니다. <code>enumerator</code>는 범용 객체를 반환하기 때문에, 사용하기 전에 QueryInterface() 함수로 <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookie.html">nsICookie</a></code> 인터페이스를 얻어와야 합니다. 예제에서는 <code>instanceof</code> 연산자를 사용하였습니다. +</p><p>마지막으로 메뉴에 쿠키를 추가하며, 이를 위해 쿠키의 호스트, 이름, 값이 사용되었습니다. 메뉴에는 <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem()</a></code></span></code> 함수가 있으며, 이 함수는 주어진 라벨과 값으로 메뉴 항목을 추가하는데 사용됩니다. +</p> +<h3 id=".EB.98.90_.EB.B3.BC.EA.B3.B3" name=".EB.98.90_.EB.B3.BC.EA.B3.B3"> 또 볼곳 </h3> +<p>아래에서 좀더 많은 예제를 볼 수 있습니다. +</p> +<ul><li> <a href="ko/Code_snippets">Code snippets</a> +</li><li> <a class=" external" href="http://kb.mozillazine.org/Category:XPCOM_example_code" rel="freelink">http://kb.mozillazine.org/Category:XPCOM_example_code</a> +</li></ul> +<p>다음에는 <a href="ko/XUL_Tutorial/Trees">트리의 작성방법</a>에 대해 알아보겠습니다. +</p><p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees">다음 »</a></p> +</div> +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html new file mode 100644 index 0000000000..135628bf09 --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html @@ -0,0 +1,187 @@ +--- +title: XPCOM Interfaces +slug: Mozilla/Tech/XUL/XUL_Tutorial/XPCOM_Interfaces +tags: + - XPConnect + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +--- +<p> </p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples">다음 »</a></p> +</div><p></p> + +<p>이번 단원에서는, Mozilla가 사용하는 객체 시스템인 <a href="ko/XPCOM">XPCOM</a> (Cross-platform Component Object Model)에 대해 간단히 알아보겠습니다.</p> + +<h3 id=".EB.84.A4.EC.9D.B4.ED.8B.B0.EB.B8.8C_.EA.B0.9D.EC.B2.B4_.ED.98.B8.EC.B6.9C.ED.95.98.EA.B8.B0" name=".EB.84.A4.EC.9D.B4.ED.8B.B0.EB.B8.8C_.EA.B0.9D.EC.B2.B4_.ED.98.B8.EC.B6.9C.ED.95.98.EA.B8.B0">네이티브 객체 호출하기</h3> + +<p>우리는 XUL을 사용해서 복잡한 사용자 인터페이스를 작성할 수 있습니다. 또한, 인터페이스를 변경하고 어떤 작업을 수행하는 스크립트를 붙일 수도 있습니다. 그러나 아직도 JavaScript를 이용해서 직접적으로 수행할 수 없는 많은 것들이 존재합니다. 예를 들어, 메일 응용프로그램을 작성하고자 한다면, 메일 서버에 접속해서 메일을 보내거나 받을 수 있는 스크립트를 작성해야 할 것입니다. 그러나 JavaScript로는 이러한 것들을 할 수 없습니다.</p> + +<p>이러한 기능을 처리할 수 있는 유일한 방법은 메일을 주고 받을 수 있는 네이티브(native) 코드를 작성하는 것입니다. 또한 작성된 네이티브 코드를 스크립트에서 손쉽게 호출할 수 있는 방법도 있어야 할 것입니다. Mozilla는 <a href="ko/XPCOM">XPCOM</a> (Cross-platform Component Object Model)을 사용해 이러한 것들을 수행할 수 있는 방법을 제공합니다.</p> + +<div class="note"> +<p>Mozilla에서는 많은 수의 XPCOM 컴포넌트와 인터페이스를 제공합니다. 따라서 대부분의 경우 직접 네이티브 코드를 작성할 필요는 없을 것입니다. 이번 단원을 학습한 후에 <a class="external" href="http://xulplanet.com/references/xpcomref/">XULPlanet XPCOM Reference</a>를 보면서 필요한 인터페이스를 찾을 수 있을 것입니다.</p> +</div> + +<h3 id="XPCOM.EC.97.90_.EA.B4.80.ED.95.98.EC.97.AC" name="XPCOM.EC.97.90_.EA.B4.80.ED.95.98.EC.97.AC">XPCOM에 관하여</h3> + +<p>Mozilla는 각각의 고유한 작업을 수행하는 컴포넌트들의 집합으로 구성되어 있습니다. 예를 들어, 메뉴, 버튼, 요소들에 해당하는 컴포넌트가 있습니다. 컴포넌트들은 인터페이스라고 불리는 정의들로부터 구축됩니다.</p> + +<p>Mozilla에서의 인터페이스는 컴포넌트들에 의해 구현되어야 하는 기능들의 집합입니다. 컴포넌트는 무엇인가를 수행하는 Mozilla에 있는 코드를 구현한 것입니다. 각각의 컴포넌트는 인터페이스에 서술된데로 기능을 구현합니다. 단일 컴포넌트가 여러 개의 인터페이스를 구현할 수도 있고, 여러 개의 컴포넌트들이 하나의 인터페이스를 구현할 수도 있습니다.</p> + +<p>파일 컴포넌트를 예로 들어 보겠습니다. 인터페이스는 파일이 수행할 수 있는 함수와 속성을 서술하여 작성할 필요가 있을 것입니다. 파일에는 이름, 수정일자, 크기와 같은 속성과 파일의 이동, 복사, 삭제를 수행하는 함수가 포함되어야 할 것입니다.</p> + +<p>파일 인터페이스는 파일의 특성에 대해서만 서술하고, 이를 구현하지는 않습니다. 파일 인터페이스의 구현은 컴포넌트의 몫입니다. 컴포넌트는 파일의 이름과 날짜, 크기 등을 가져올 수 있는 코드를 가질 것입니다. 또한 파일을 복사하거나 이름을 바꾸는 코드도 있을 것입니다.</p> + +<p>컴포넌트가 인터페이스를 올바르게 구현했다면 어떻게 구현되는지에 대해서는 신경쓰지 않아도 됩니다. 물론 플랫폼에 따라 서로 다른 구현이 있을 것입니다. 파일 컴포넌트의 Windows와 Macintosh 버전은 꽤 틀릴 것입니다. 그러나 그들은 모두 동일한 인터페이스를 구현할 것입니다. 따라서 우리는 인터페이스를 통해 알게 된 함수로 접근함으로서 해당 컴포넌트를 사용할 수 있습니다.</p> + +<p>Mozilla에서 인터페이스 이름을 쉽게 알아볼 수 있도록, 보통 'nsI', 'mozI'가 이름 앞에 붙습니다. 예를 들어 <code>nsIAddressBook</code>는 주소록과 관련된 인터페이스이며, <code>nsISound</code>는 음악 파일을 플레이 하는데 사용되며, <code>nsILocalFile</code>는 파일을 사용하는 것과 관련된 인터페이스 입니다. Mozilla에 있는 많은 인터페이스에 대해서는 <a href="ko/Interfaces">인터페이스</a>를 참조하세요.</p> + +<p>XPCOM 컴포넌트는 대부분 네이티브 코드로 구현되어 있으며, 이는 JavaScript가 자체적으로는 하지 못하는 것들을 할 수 있다는 것을 의미합니다. 그러나 잠시 후 보시겠지만, 이를 호출할 수 있는 방법이 있습니다. 우리는 인터페이스에서 기술한데로 이를 구현한 컴포넌트에서 제공되는 어떤 함수도 호출할 수 있습니다. 예를 들어 어떤 컴포넌트를 가지고 있다면, 그것이 <code>nsISound</code> 인터페이스를 구현하는지 검사할 수 있으며, 그렇다면 그것을 통해 음악을 플레이 할 수 있습니다.</p> + +<p>스크립트에서 XPCOM을 호출하는 절차를 <a href="ko/XPConnect">XPConnect</a>라고 부르며, 이는 스크립트 객체를 네이티브 객체로 변환해주는 계층(layer)입니다.</p> + +<h3 id="XPCOM_.EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1" name="XPCOM_.EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1">XPCOM 객체 생성</h3> + +<p>XPCOM 컴포넌트를 호출하는데는 3가지 단계가 있습니다.</p> + +<ol> + <li>컴포넌트를 얻는다.</li> + <li>사용하고자 하는 인터페이스를 구현한 컴포넌트의 일부를 얻는다.</li> + <li>필요한 함수를 호출한다.</li> +</ol> + +<p>처음 두 단계만 실행하면, 마지막 단계는 필요시마다 반복할 수 있습니다. 우리가 파일 이름을 바꾼다고 합시다. 이를 위해 우리는 <code>nsILocalFile</code> 인터페이스를 사용할 수 있습니다. 첫번째 단계는 파일 컴포넌트를 얻어오는 것입니다. 두번째는 파일 컴포넌트에 질의해서 <code>nsILocalFile</code> 인터페이스를 구현하는 부분은 얻어오는 것입니다. 마지막으로 해당 인터페이스에서 제공하는 함수를 호출합니다. 이 인터페이스는 하나의 파일을 표현하는데 사용됩니다.</p> + +<p>우리는 인터페이스 이름이 'nsI'나 'mozI'로 시작하는 것을 자주 봤습니다. 그러나 컴포넌트는 URI와 같은 문자열을 사용해서 참조됩니다. Mozilla는 내부 레지스트리에 사용 가능한 모든 컴포넌트의 목록을 저장하고 있습니다. 사용자는 필요한 경우 새로운 컴포넌트를 설치할 수 있습니다. 이는 플러그인과 아주 비슷하게 동작합니다.</p> + +<p>Mozilla에서는 파일 컴포넌트를 제공하며, 이는 <code><a href="ko/NsILocalFile">nsILocalFile</a></code> 인터페이스를 구현합니다. 이 컴포넌트는 <code><a class="link-mailto" href="mailto:'@mozilla.org" rel="freelink">'@mozilla.org</a>/file/local;1'</code>로 참조될 수 있으며 이 문자열을 계약(contract)ID라고 부릅니다. 계약ID의 구문은 다음과 같습니다.</p> + +<pre class="eval">@<internetdomain>/module[/submodule[...]];<version>[?<name>=<value>[&<name>=<value>[...]]] +</pre> + +<p>다른 컴포넌트들도 이와 비슷한 방법으로 참조할 수 있습니다.</p> + +<p>컴포넌트의 계약ID는 컴포넌트를 얻기 위해 사용할 수 있으며, JavaScript 코드를 사용해 컴포넌트를 얻는 방법은 다음과 같습니다.</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +</pre> + +<p>파일 컴포넌트를 얻어와<em>aFile</em> 변수에 저장하였습니다. 예제의 <code><a href="ko/Components_object">Components</a></code>는 컴포넌트와 관련된 함수를 제공하는 범용 객체를 참조합니다. 여기서 우리는 <code>classes</code> 속성으로부터 컴포넌트 클래스를 얻어옵니다. <code>classes</code> 속성은 사용할 수 있는 모든 컴포넌트를 가지고 있는 배열입니다. 다른 컴포넌트를 얻어오려면 대괄호 안에 있는 계약ID를 사용하고자 하는 컴포넌트의 ID로 변경하면 됩니다. 마지막으로 <code>createInstance()</code> 함수를 이용해 인스턴스를 생성하였습니다.</p> + +<p>여러분은 <code>createInstance()</code>함수의 반환값이, 컴포넌트가 존재하지 않는다는 것을 의미하는 null이 아닌지 확인하는게 좋습니다.</p> + +<p>그러나 이 시점에서 우리는 파일 컴포넌트 자체에 대한 참조만을 얻었을 뿐입니다. 컴포넌트 내의 함수를 호출하기 위해서는 컴포넌트의 인스턴스를 얻어야만 합니다. 이 경우에는 <code><a href="ko/NsILocalFile">nsILocalFile</a></code>로 다음의 두번째 줄에서 필요한 코드가 추가되어 있습니다.</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile); +</pre> + +<p><code>QueryInterface()</code> 는 모든 컴포넌트에서 제공되는 함수로, 해당 컴포넌트의 특정 인터페이스를 얻기 위해 사용됩니다. 이 함수는 얻고자 하는 인터페이스를 명시한 한 개의 인자를 받습니다. <code>Components</code> 객체의 <code>interfaces</code> 속성에는 해당 컴포넌트에서 사용 가능한 모든 인터페이스의 목록이 들어 있습니다. 여기서 우리는 <code>nsILocalFile</code> 인터페이스를 사용하고자 하므로, 이를 <code>QueryInterface()</code>의 인자로 넘겼습니다. 결과적으로 <code>aFile</code> 변수는 파일 컴포넌트에서 nsILocalFile 인터페이스를 구현하는 부분을 참조하게 됩니다.</p> + +<p>위의 JavaScript 코드는 아무 컴포넌트의 어떤 인터페이스에서도 사용할 수 있습니다. 코드의 컴포넌트 이름을 사용하고자 하는 컴포넌트와 인터페이스 이름으로 바꿔서 사용하면 됩니다. 또 당연히 변수 이름도 바꿀 수 있습니다. 예를 들어 사운드 인터페이스를 얻으려면 다음과 같이 수정하면 됩니다.</p> + +<pre>var sound = Components.classes["@mozilla.org/sound;1"].createInstance(); +if (sound) sound.QueryInterface(Components.interfaces.nsISound); +</pre> + +<p>XPCOM 인터페이스는 다른 인터페이스로부터 상속될 수 있습니다. 다른 인터페이스로부터 상속된 인터페이스는 자신의 함수와 부모 인터페이스가 가진 모든 함수를 가지게 됩니다. 모든 인터페이스는 <code>nsISupports</code>라고 불리는 최상위 인터페이스에서 상속됩니다. 이 인터페이스에는 앞서 보았던 JavaScript를 지원하기 위한 목적인 <code>QueryInterface()</code>라는 한가지 함수만 있습니다. <code>nsISupports</code> 인터페이스가 모든 컴포넌트에 의해 구현되기 때문에, <code>QueryInterface()</code> 함수도 모든 컴포넌트에서 사용할 수 있는 것입니다.</p> + +<p>몇몇 컴포넌트들은 동일한 인터페이스를 구현할 수도 있습니다. 그러한 경우 보통은 어떤 클래스의 서브클래스들인 경우이겠지만, 꼭 그래야 하는것은 아닙니다. 아무 컴포넌트나 <code>nsILocalFile</code>의 기능을 구현할 수 있습니다. 또한 하나의 컴포넌트가 여러개의 인터페이스를 구현할 수도 있습니다. 이런 이유들 때문에 위와 같이 두 단계로 진행되는 것입니다.</p> + +<p>그러나 위의 코드를 자주 사용하기 때문에 다음과 같이 줄여서도 사용할 수 있습니다.</p> + +<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); +</pre> + +<p>이 코드는 앞서의 두줄 짜리 코드와 동일한 일을 하는 한줄 짜리 코드입니다. 여기서는 앞서의 두 단계에 있었던 인스턴스를 생성한 후에 인터페이스를 얻기 위해 쿼리하는 부분이 제거되었습니다.</p> + +<p>만일 객체에 <code>QueryInterface()</code>를 호출하고 해당 객체에서 지원하지 않는 인터페이스를 요청하면 예외가 발생합니다. 어떤 컴포넌트에서 어떤 인터페이스가 지원되는지 확신이 없을 경우 이를 확인하기 위해 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></code> 연산자를 사용할 수 있습니다.</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + // do something +} +</pre> + +<p>위 코드에서 <code>instanceof</code> 연산자는 aFile이 nsILocalFile 인터페이스를 구현하였다면 true를 반환합니다. 이것은 <code>QueryInterface()</code>를 호출하는 것에 대한 부작용이 있으며, 따라서 aFile은 이후에 유효해집니다.</p> + +<h3 id=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EC.9D.98_.ED.95.A8.EC.88.98_.ED.98.B8.EC.B6.9C" name=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EC.9D.98_.ED.95.A8.EC.88.98_.ED.98.B8.EC.B6.9C">인터페이스의 함수 호출</h3> + +<p>이제 우리는 nsILocalFile 인터페이스를 구현한 컴포넌트를 참조하는 객체를 가지고 있으므로, 이로부터 nsILocalFile의 함수를 호출할 수 있습니다. 아래의 표는 nsILocalFile 인터페이스에 있는 함수와 메소드의 일부를 보여주고 있습니다.</p> + +<dl> + <dt>initWithPath </dt> + <dd>이 메소드는 nsILocalFile에서 사용할 파일명과 경로를 초기화하는데 사용됩니다. 첫번째 인자는 '/usr/local/mozilla'와 같은 파일 경로이어야 합니다.</dd> + <dt>leafName </dt> + <dd>디렉토리 부분을 뺀 파일명.</dd> + <dt>fileSize </dt> + <dd>파일 크기.</dd> + <dt>isDirectory() </dt> + <dd>nsILocalFile이 디렉토리이며 true를 반환합니다.</dd> + <dt>remove(recursive) </dt> + <dd>파일을 삭제합니다. 만일 recursive 인자가 true이면 디렉토리와 이 안에 있는 모든 파일, 하위 디렉토리 모두 삭제됩니다.</dd> + <dt>copyTo(directory,newname) </dt> + <dd>파일을 다른 디렉토리로 복사하며, 선택적으로 파일명을 바꿀 수 있습니다. directory 인자는 파일이 복사될 디렉토리에 대한 nsILocalFile 객체이어야 합니다.</dd> + <dt>moveTo(directory,newname) </dt> + <dd>파일을 다른 디렉토리로 이동하거나 이름을 변경합니다. directory 인자는 파일이 이동할 대상 디렉토리에 대한 nsILocalFile 객체이어야 합니다.</dd> +</dl> + +<p>파일을 삭제하기 위해서 먼저 해당 파일을 nsILocalFile에 할당해야 합니다. <code>initWithPath()</code> 메소드를 호출함으로서 어떤 파일인지를 알려줍니다. 이 속성에는 그냥 파일의 경로만 할당하세요. 다음으로 <code>remove()</code> 함수를 호출합니다. 이 함수는 재귀적으로 삭제할지를 나타내는 한개 인자만을 받습니다. 아래 코드는 이러한 두 단계를 보여줍니다.</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + aFile.initWithPath("/mozilla/testfile.txt"); + aFile.remove(false); +} +</pre> + +<p>이 코드는 /mozilla/testfile.txt 파일을 삭제할 것입니다. 임의의 이벤트 핸들러에 위 코드를 추가해서 실행해 보세요. 위의 파일명은 삭제하고자 하는 것으로 바꿔주어야 할 것입니다.</p> + +<p>위 표에 있는 함수들 중 copyTo()와 moveTo() 함수는 각각 파일을 복사하고 이동하기 위해 사용됩니다. 여기서 주의할 것은 이 함수들의 복사하거나 이동할 대상 디렉토리 인자가 문자열 값이 아닌 nsILocalFile 이어야 한다는 점입니다. 이것은 이 함수를 실행하려면 두 개의 파일 컴포넌트가 필요하다는 것을 의미합니다. 아래 예제는 어떻게 파일을 복사하는지를 보여줍니다.</p> + +<pre>function copyFile(sourcefile,destdir) +{ + // get a component for the file to copy + var aFile = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aFile) return false; + + // get a component for the directory to copy to + var aDir = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aDir) return false; + + // next, assign URLs to the file components + aFile.initWithPath(sourcefile); + aDir.initWithPath(destdir); + + // finally, copy the file, without renaming it + aFile.copyTo(aDir,null); +} + +copyFile("/mozilla/testfile.txt","/etc"); +</pre> + +<h3 id="XPCOM_.EC.84.9C.EB.B9.84.EC.8A.A4" name="XPCOM_.EC.84.9C.EB.B9.84.EC.8A.A4">XPCOM 서비스</h3> + +<p>어떤 XPCOM 컴포넌트들은 서비스라 불리는 특별한 컴포넌트들입니다. 이것들은 꼭 하나만 존재해야 하기 때문에 인스턴스를 만들지 않습니다. 서비스는 전역 데이터를 획득 또는 지정하거나 다른 객체들에 대한 어떤 동작을 수행하기 위한 범용 함수를 제공합니다. 서비스 컴포넌트에 대한 참조를 얻어오기 위해서는 <code>createInstance()<code> 함수 대신 <code>getService()</code> 함수를 호출해야 합니다. 이것 이외에는 다른 컴포넌트들과 특별히 다른점은 없습니다.</p> + +<p>Mozilla에서 제공하는 서비스들 중 북마크 서비스가 이에 해당합니다. 이 서비스를 이용하면 현재 사용자의 북마크 목록에 북마크를 추가할 수 있습니다. 다음은 이에 대한 예입니다.</p> + +<pre>var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService(); +bmarks.QueryInterface(Components.interfaces.nsIBookmarksService); +bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null); +</pre> + +<p>먼저 "@mozilla.org/browser/bookmarks-service;1" 컴포넌트가 반환되고 이의 서비스가 <code>bmarks</code> 변수에 저장되었습니다. 우리는 nsIBookmarksService 인터페이스를 얻기 위해 <code>QueryInterface()</code>를 사용했습니다. 이 인터페이스에서 제공하는 <code>addBookmarkImmediately()</code> 함수는 북마크를 추가하기 위해 사용됩니다. 이 함수의 처음 두개의 인자는 북마크의 URL과 제목입니다. 세번째 인자는 북마크 유형으로 보통 0이며, 마지막 인자는 북마크될 문서의 문자 인코딩으로 null일 수 있습니다.</p> + +<p>다음에는 우리가 사용할 수 있는 <a href="ko/XUL_Tutorial/XPCOM_Examples">Mozilla에서 제공하는 몇가지 인터페이스</a>에 대해 알아보겠습니다.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples">다음 »</a></p> +</div><p></p> + +<p></p> diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html new file mode 100644 index 0000000000..4f1326dc6a --- /dev/null +++ b/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html @@ -0,0 +1,166 @@ +--- +title: XUL Structure +slug: Mozilla/Tech/XUL/XUL_Tutorial/XUL_Structure +tags: + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Introduction" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL">다음 »</a></p> +</div><p></p> + +<p><br> + 우리는 먼저 Mozilla에서 XUL의 작동 방식에 대해 알아볼 것 입니다.</p> + +<h3 id="XUL.EC.9D.98_.EC.9E.91.EB.8F.99_.EB.B0.A9.EC.8B.9D" name="XUL.EC.9D.98_.EC.9E.91.EB.8F.99_.EB.B0.A9.EC.8B.9D">XUL의 작동 방식</h3> + +<p>Mozilla에서 XUL은 HTML이나 다른 유형의 컨텐츠가 동작하는 것과 매우 비슷한 방법으로 동작합니다. 사용자가 브라우저의 주소 영역에 HTML 페이지의 URL을 입력하면, 브라우저는 해당 웹 사이트를 찾고 내용을 다운로드합니다. Mozilla의 렌더링 엔진은 HTML 소스 형태인 내용을 가져와서 <a href="ko/DOM">DOM</a>이라고 하는 문서 트리 구조로 변환합니다. 그 후 트리는 화면에 출력될 수 있는 객체 집합으로 변경됩니다. <a href="ko/CSS">CSS</a>, 이미지, 기타 다른 기술들이 출력을 제어하는데 사용됩니다. XUL도 동일한 방식으로 동작합니다.</p> + +<p>사실 Mozilla에서는 문서 형태가 HTML, XUL 혹은 <a href="ko/SVG">SVG</a> 인지 상관없이 동일한 내부 코드에 의해 작동됩니다. 이것은 동일한 CSS 속성을 HTML과 XUL 모두의 스타일에 사용할 수 있으며, 많은 기능들을 공유할 수 있다는 것을 의미합니다. 그러나 HTML에서의 폼(form)이나 XUL에서의 <a href="ko/XUL_Tutorial/Overlays">overlays</a>같이 고유한 것들도 존재합니다. XUL과 HTML은 동일한 방법으로 동작하므로 둘 다 로컬 파일 시스템, 웹 페이지, 확장 기능 혹은 독립형 <a href="ko/XULRunner">XULRunner</a> 응용프로그램을 통해 로드할 수 있습니다.</p> + +<p><code><span class="nowiki">http://localhost/~username/</span></code>과 같은 원격지의 컨텐츠는 문서 형태가 HTML이나 XUL 혹은 다른 형태인지에 상관없이 보안상의 이유로 컨텐츠가 수행할 수 있는 동작에 제한을 가지게 됩니다. 이러한 이유 때문에 Mozilla에서는 컨텐츠를 로컬에 설치하고 <strong><a href="ko/Chrome">chrome</a></strong> 시스템의 일부분으로 등록할 수 있는 방법을 제공하고 있습니다. 이는 <code><a class="external" rel="freelink">chrome://</a></code> URL이라고 불리는 특별한 URL 형식에 의해 가능합니다. Chrome URL을 사용하여 파일에 접근하게 되면, 해당 파일들은 로컬 파일이나 설정, 북마크 등에 접근할 수 있는 향상된 권한을 가지며, 또 다른 권한이 필요한 동작을 수행할 수 있습니다. 전자 인증서로 서명되거나 그러한 행위를 수행하도록 허가되지 않는다면, 당연히 웹 페이지들은 이러한 권한을 얻을 수 없습니다.</p> + +<p>이러한 <strong>chrome</strong> 꾸러미의 등록이 Firefox 확장 기능이 브라우저에 기능을 추가할 수 있는 방법입니다. 확장 기능은 XUL, 자바스크립트, 스타일시트, 이미지들을 단일 파일로 묶어 놓은 작은 꾸러미입니다. 이 파일은 ZIP 유틸리티를 이용하여 생성할 수 있습니다. 사용자가 꾸러미 파일을 다운로드 받으면, 컴퓨터에 확장 기능이 설치될 것입니다. 꾸러미는 브라우저의 XUL과 확장 기능의 XUL을 조합하는 <a href="ko/Overlay">overlay</a>라는 고유 기능을 사용하여 브라우저에 잡히게 됩니다. 사용자에게는 마치 확장 기능이 브라우저를 <strong>수정</strong>한것 처럼 보이겠지만 사실 모든 코드는 분리되어 있으며 확장 기능은 쉽게 설치 해제(uninstall)할 수 있습니다. 물론 등록된 꾸러미가 꼭 overlay를 사용해야 할 필요는 없습니다. Overlay를 사용하지 않는 꾸러미들은 메인 브라우저의 인터페이스를 통해서는 접근할 수 없지만, chrome URL을 이용해서 여전히 접근할 수 있습니다.</p> + +<p>독립형 XUL 응용프로그램들은 유사한 방법으로 XUL코드를 포함할 수 있지만, 당연히 확장기능처럼 별도로 설치되어야만 하는 것과는 달리 응용프로그램을 위한 XUL이 설치의 일부분에 포함되어야만 합니다. 그러나 이러한 XUL 코드가 응용프로그램이 UI를 출력할 수 있는 것과 같은 chrome 시스템에 등록될 것입니다.</p> + +<p>Mozilla 브라우저 자체는 XUL 파일, 자바스크립트, 스타일시트를 포함하는 꾸러미 집합이라는 것을 알 필요가 있습니다. 이러한 파일들은 chrome URL을 통해 접근 가능하고 보다 강화된 권한을 가지며 다른 꾸러미들처럼 동작합니다. 물론 브라우저는 대부분의 확장기능보다 더 크고 복잡합니다. 수 많은 다른 컴포넌트들뿐만 아니라 Firefox와 Thunderbird도 모두 XUL로 작성되어 있고 chrome URL을 통해 접근할 수 있습니다. 여러분은 이러한 꾸러미를 Firefox나 다른 XUL 응용 프로그램이 설치된 chrome 디렉토리에서 확인할 수 있습니다.</p> + +<p>Chrome URL은 항상 '<a class="external" rel="freelink">chrome://'로</a> 시작합니다. <span class="nowiki">'http://'</span> URL이 항상 HTTP를 사용해 접근하는 원격 웹 사이트를 참조하고, '<a class="external" rel="freelink">file://</a>' URL이 항상 로컬 파일을 참조하는 것과 마찬가지로 '<a class="external" rel="freelink">chrome://</a>' URL은 항상 설치된 꾸러미와 확장기능을 참조합니다. 다음 섹션에서 chrome URL의 구문에 대해 좀 더 자세히 알아 볼 것입니다. Chrome URL을 통해 컨텐츠에 접근할 때는 위에서 언급한 다른 종류의 URL이 갖지 못한 강화된 권환을 획득한다는 것에 유의하십시요. 예를 들어 HTTP URL은 특별한 권한을 가지고 있지 않으므로, 웹 페이지가 로컬 파일을 읽으려고 하면 오류가 발생할 것입니다. 그러나 chrome URL을 이용하여 로드된 파일은 제약 없이 파일을 읽을 수 있습니다.</p> + +<p>이러한 차이는 중요합니다. 이것은 사용자의 북마크를 읽는 것과 같이 웹 페이지상의 컨텐츠가 할 수 없는 것이 있다는 것을 의미합니다. 이러한 차이점은 출력되는 컨텐츠의 종류에 따른 것은 아니고 단지 사용된 URL의 종류에 따른 것입니다. 웹 사이트에 위치한 HTML과 XUL은 모두 특별한 퍼미션이 없지만, chrome URL을 통해 로드되면 강화된 퍼미션을 가지게 됩니다.</p> + +<p>만일 여러분이 웹사이트에서 XUL을 사용한다면, HTML 파일들을 웹 사이트에 올리것처럼 XUL 파일을 올리고 브라우저 <small><span class="nowiki">http://localhost/xul.php</span></small>에서 URL을 로드합니다. 여러분의 웹 서버가 XUL 파일을 <strong><code>application/vnd.mozilla.xul+xml</code></strong>의 컨텐츠 타입(PHP에서는 <code>header('content-type:application/vnd.mozilla.xul+xml');</code>)으로 보낼 수 있도록 설정되어 있는지 확인하세요. 이 컨텐츠 타입은 Mozilla가 HTML과 XUL을 구분하는데 사용됩니다. Mozilla는 파일 시스템을 통해 파일을 읽은 것이 아니면 파일 확장자를 사용하는 것은 아니지만, 모든 XUL 파일들에 대해 .xul 확장자를 사용하는 것이 좋습니다. 여러분은 여러분의 컴퓨터의 브라우저에서 열거나 파일 매니저에서 더블 클릭하여 XUL 파일을 로드할 수 있습니다.</p> + +<div class="note">원격 XUL은 기능상의 중대한 제약 조건을 가지는 것을 기억하세요.</div> + +<h4 id=".EB.AC.B8.EC.84.9C_.EC.9C.A0.ED.98.95:_HTML_XML_XUL_CSS" name=".EB.AC.B8.EC.84.9C_.EC.9C.A0.ED.98.95:_HTML_XML_XUL_CSS">문서 유형: HTML XML XUL CSS</h4> + +<p>Mozilla는 문서 유형들 간의 대부분의 기능들은 공유하지만 HTML과 XUL에 대해 완전히 다른 종류의 문서 객체(<a href="ko/DOM">DOM</a>)를 사용합니다. Mozilla에는 HTML, XML, XUL의 세 가지 종류의 주요 문서 유형이 존재합니다. 본질적으로 HTML 문서는 HTML 문서에 사용되고 XUL 문서는 XUL 문서에 XML 문서는 다른 종류의 XML 문서에 사용됩니다. XUL 역시 XML이기 때문에 XUL 문서는 좀 더 일반적인 XML 문서의 서브 타입입니다. 기능상의 사소한 차이점이 존재합니다. 예를 들어 HTML 페이지에서의 폼 컨트롤은 <code>document.forms</code> 속성을 통해 접근할 수 있는 반면, XUL은 HTML에서의 폼이 없기 때문에 이러한 속성은 XUL 문서에서는 사용할 수 없습니다. 비슷하게 overlayer나 template과 같은 XUL 고유 기능은 XUL문서에서만 가능합니다.</p> + +<p>이러한 문서간의 차이는 중요합니다. 문서 타입에 특정하지 않은 많은 XUL의 기능을 HTML이나 XML 문서에서도 사용할 수 있습니다. 그러나 다른 기능들은 올바른 유형의 문서를 필요로 합니다. 예를 들어 여러분은 XUL layout 타입은 XUL 문서 타입에 의존하지 않기 때문에 다른 문서에서도 사용할 수 있습니다.</p> + +<p>위에서 언급한 점을 요약하면 다음과 같습니다.</p> + +<ul> + <li>Mozilla는 <a href="ko/HTML">HTML</a>과 <a href="ko/XUL">XUL</a>을 동일한 내부 엔진으로 출력하고 출력 양식을 결정하기 위해 <a href="ko/CSS">CSS</a>를 사용합니다.</li> +</ul> + +<ul> + <li>XUL은 원격지, 로컬 파일 시스템이나 설치된 꾸러미로부터 로드될 수 있고, <a href="ko/Chrome">chrome</a> URL을 사용해서 접근할 수 있습니다. 마지막 방법은 브라우저의 확장 기능이 하는 것입니다.</li> +</ul> + +<ul> + <li>Chrome URL은 설치된 꾸러미에 접근하고 강화된 권한으로 여는데 사용할 수 있습니다.</li> +</ul> + +<ul> + <li>HTML, XML, XUL은 서로 다른 문서 타입을 가집니다. 어떠한 기능들은 아무 문서 타입에서도 사용할 수 있지만 어떠한 기능들은 특정 유형의 문서에서만 사용할 수 있습니다.</li> +</ul> + +<p>다음 섹션에서는 Mozilla에 설치될 수 있는 chrome 꾸러미의 기본 구조에 대해 설명합니다. 그러나 여러분이 지금 당장 간단한 응용 프로그램을 작성하고 싶다면, <a href="ko/XUL_Tutorial/Creating_a_Window">Creating a Window</a>로 건너뛰고 다음을 위해 본 섹션은 저장하세요.</p> + +<h3 id="Package_Organization" name="Package_Organization">Package Organization</h3> + +<p>Mozilla is organized in such a way that you can have as many components as you want pre-installed. Each extension is also a component with a separate chrome URL. It also has one component for each installed theme and locale. Each of these components, or packages, is made up of a set of files that describe the user interface for it. For example, the messenger component has descriptions of the mail messages list window, the composition window and the address book dialogs.</p> + +<p>The packages that are provided with Mozilla are located within the chrome directory, which are in the directory where you installed Mozilla. The chrome directory is where you find all the files that describe the user interface used by the Mozilla browser, mail client, and other applications. Typically, you put all the XUL files for an application in this directory, although extensions are installed in the extensions directory for a particular user. Just copying a XUL file into the chrome directory doesn't give the file any extra permissions, nor can it be accessed via a chrome URL. To gain the extra privileges, you will need to create a manifest file and put that in the chrome directory. This file is easy to create, as it is typically only a couple of lines long. It is used to map a chrome URL to a file or directory path on the disk where the XUL files are located. Details of how to create this file will be discussed in a <a href="ko/XUL_Tutorial/Manifest_Files">later section</a>.</p> + +<p>The only way to create content that can be accessed through a chrome URL is by creating a package as described in the next few sections. This directory is called 'chrome' likely because it seemed like a convenient name to use for the directory where the chrome packages that are included with Mozilla are kept.</p> + +<p>To further the confusion, there are two other places where the word "chrome" might appear. These are the <code>-chrome</code> command line argument and the <code>chrome</code> modifier to the <code><a href="ko/DOM/window.open">window.open()</a></code> function. Neither of these features grant extra privileges; instead they are used to open a new top-level window without the browser UI such as the menu and toolbar. You will commonly use this feature in more complex XUL applications since you wouldn't want the browser UI to exist around your dialog boxes.</p> + +<p>The files for a package are usually combined into a single JAR file. A JAR file may created and examined using a ZIP utility. For instance, you can open the JAR files in Mozilla's chrome directory to see the basic structure of a package. Although it's normal to combine the files into a JAR file, packages may also be accessed in expanded form into a directory. Although you don't normally distribute a package this way, it is handy during development since you can edit the file directly and then reload the XUL file without having to repackage or reinstall the files.</p> + +<p>By default, Mozilla applications parse XUL files and scripts, and store a pre-compiled version in memory for the remainder of the application session. This improves performance. However, because of this, the XUL will be not be reloaded even when the source files are changed. To disable this mechanism, it is necessary to change the preference <code>nglayout.debug.disable_xul_cache</code>. In Firefox, this preference may be added to the user preferences by typing "about:config" in the address field, and setting this value to true. Or, just manually edit your user.js preferences file and add the following line:</p> + +<pre class="eval">pref("nglayout.debug.disable_xul_cache", true); +</pre> + +<p>There are usually three different parts to a chrome package, although they are all optional. Each part is stored in a different directory. These three sets are the content, the skin, and the locale, which are all described below. A particular package might provide one or more skins and locales, but a user can replace them with their own. In addition, the package might include several different applications, each accessible via different chrome URLs. The packaging system is flexible enough so that you can include whatever parts you need and allow other parts, such as the text for different languages, to be downloaded separately.</p> + +<p>The three types of chrome packages are:</p> + +<ul> + <li><strong>Content</strong> - Windows and scripts<br> + The declarations of the windows and the user interface elements contained within them. These are stored in XUL files, which have a .xul extension. A content package can have multiple XUL files, but the main window should have a filename that is the same as the package name. For example, the editor package will have a file within it called editor.xul. Scripts are placed in separate files alongside the XUL files.</li> + <li><strong>Skin</strong> - Style sheets, images and other theme specific files<br> + Style sheets describe details of the appearance of a window. They are stored separately from XUL files to facilitate modifying the skin (theme) of an application. Any images used are stored here also.</li> + <li><strong>Locale</strong> - Locale specific files<br> + All the text that is displayed within a window is stored separately. This way, a user can have a set for their own language.</li> +</ul> + +<h3 id="Content_Packages" name="Content_Packages">Content Packages</h3> + +<p>The name of the JAR file might describe what it contains, but you can't be sure unless you view its contents. Let's use the browser package included with Firefox as an example. If you extract the files in browser.jar, you will find that it contains a directory structure much like the following:</p> + +<pre>content + browser + browser.xul + browser.js + -- other browser XUL and JS files goes here -- + bookmarks + -- bookmarks files go here -- + preferences + -- preferences files go here -- +. +. +. +</pre> + +<p>This is easily recognizable as a content package, as the top-level directory is called content. For skins, this directory will usually be called skin and for locales, it will usually be called locale. This naming scheme isn't necessary, but this is a common convention to make the parts of a package clearer. Some packages may include a content section, a skin, and a locale. In this case, you will find a subdirectory for each type. For example, Chatzilla is distributed in this way.</p> + +<p>The content/browser directory contains a number of files with .xul and .js extensions. The XUL files are the ones with the .xul extension. The files with .js extensions are JavaScript files containing scripts that handle the functionality of a window. Many XUL files have a script file associated with them, and some may have more than one.</p> + +<p>In the listing above, two files have been shown. There are of course others, but for simplicity they aren't shown. The file browser.xul is the XUL file that describes the main browser window. The main window for a content package should have the same name as the package with a .xul extension. In this case, the package name is "browser" so we expect to find browser.xul. Some of the other XUL files describe separate windows. For example, the file pageInfo.xul describes the page info dialog.</p> + +<p>Many packages will include a contents.rdf file, which describes the package, its author, and the overlays it uses. However, this file is obsolete and has been replaced with a simpler mechanism. This newer method is the manifest file mentioned earlier, and you will find these as files with the .manifest extension in the chrome directory. For instance, browser.manifest describes the browser package.</p> + +<p>Several subdirectories, such as bookmarks and preferences, describe additional sections of the browser component. They are placed in different directories only to keep the files more organized.</p> + +<h3 id="Skins_or_Themes" name="Skins_or_Themes">Skins or Themes</h3> + +<p>Although the underlying code for Mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing. The classic.jar file describes the default theme provided with Firefox. The structure is similar to the content packages. For example, examining classic.jar:</p> + +<pre>skin + classic + browser + browser.css + -- other browser skin files go here -- + global + -- global skin files go here -- +. +. +. +</pre> + +<p>Again, this directory structure isn't necessary and is used for convenience. You can actually put all the files in one directory at the top level and not use subdirectories. However, for larger applications, subdirectories are used to separate the different components. In the example above, a directory exists for theme related files for the browser and another for global theme related files. The global directory contains skin files that are general to all packages. These files will apply to all components and will be included with your own standalone applications. The global part defines the appearance of all of the common XUL widgets, whereas the other directories have files that are specific to those applications. Firefox includes both the global and browser theme files in one archive, but they can be included separately.</p> + +<p>A skin is made up of CSS files and a number of images used to define the look of an interface. The file browser.css is used by browser.xul and contains styles that define the appearance of various parts of the browser interface. Again, note how the file browser.css has the same name as the package. By changing the CSS files, you can adjust the appearance of a window without changing its function. This is how you can create a new theme. The XUL part remains the same but the skin part changes independently.</p> + +<h3 id="Locales" name="Locales">Locales</h3> + +<p>The file en-US.jar describes the language information for each component, in this case for US English. Like the skins, each language file contains files that specify text used by the package for a specific language. The locale structure is similar to the others, so it won't be listed here.</p> + +<p>The localized text is stored in two types of files: DTD files and properties files. The DTD files have a .dtd extension and contain entity declarations, one for each text string that is used in a window. For example, the file browser.dtd contains entity declarations for each menu command. In addition, keyboard shortcuts for each command are also defined, because they may be different for each language. DTD files are used by XUL files so, in general, you will have one per XUL file. The locale part also contains properties files, which are similar, but are used by script files. The file browser.properties contains a few such localized strings.</p> + +<p>This structure allows you to translate Mozilla or a component into a different language by just adding a new locale for that language. You don't have to change the XUL code at all. In addition, another person could supply a separate package that applies a skin or locale to your content part, thus providing support for a new theme or language without having to change the original package.</p> + +<h3 id="Other_Packages" name="Other_Packages">Other Packages</h3> + +<p>There is a one special package called toolkit (or global). We saw the global directory earlier for skins. The file toolkit.jar contains the corresponding content part for it. It contains some global dialogs and definitions. It also defines the default appearance and functionality of the various common XUL widgets such as textboxes and buttons. The files located in the global part of a skin package contain the default look for all of the XUL interface elements. The toolkit package is used by all XUL applications.</p> + +<h3 id="Adding_a_Package" name="Adding_a_Package">Adding a Package</h3> + +<p>Mozilla places the packages that are included with the installation in the chrome directory. However, they do not need to be placed there. When installing another package, you can place it anywhere on the disk, as long as a manifest file points to it. It is common to place packages into the chrome directory simply because it is convenient; however, they will work just as well from another directory or somewhere on your local network. You cannot store them on a remote site, unless the remote site is mounted through the local file system.</p> + +<p>There are two chrome directories used for XUL applications: one is installed in the same place where the application is installed, while the other is part of user's profile. The former allows packages that are shared by all users while the latter allows packages to be created only for a specific user or users. Extensions, while installed in a separate extensions directory, are also usually user specific. Any manifest files located in either chrome directory will be examined to see which packages are installed.</p> + +<p>In the next section, we'll look at how to refer to chrome packages using the chrome URL.</p> + +<p></p><div class="prevnext" style="text-align: right;"> + <p><a href="/ko/docs/XUL_Tutorial:Introduction" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL">다음 »</a></p> +</div> <span class="comment">Interwiki Language Links</span><p></p> + +<p></p> diff --git a/files/ko/mozilla/개발자_프로그램/index.html b/files/ko/mozilla/개발자_프로그램/index.html new file mode 100644 index 0000000000..0282bfa7e2 --- /dev/null +++ b/files/ko/mozilla/개발자_프로그램/index.html @@ -0,0 +1,124 @@ +--- +title: Mozilla 개발자 프로그램 +slug: Mozilla/개발자_프로그램 +translation_of: Mozilla/Connect +--- +<div class="summary"> +<pre><span class="seoSummary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></pre> +</div> + +<div> +<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper"> +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Hacks_blog">Hacks blog</h2> + +<p>Open Web을 개발하는 사람들의 가장 핵심 수단인 Mozilla Hacks blog는 웹 기술과 브라우저 특징들의 최신 뉴스와 토론들을 제공합니다.</p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Feedback_channels">Feedback channels</h2> + +<p>Do you have a <a href="http://mzl.la/devtools">great idea for the Developer Tools</a> in Firefox or <a href="http://mzl.la/openwebapps">how Open Web Apps should work</a>? Let us know and help shape the future features!</p> + +<p>Building things and need help? Ask away on Stack Overflow!<br> + <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&A below")}}</strong></span></p> + +<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&A on Stack Overflow </a></div> +</div> +</div> + +<div class="dev-program-callout"> +<div class="callout-link-container"> +<h2 id="Join_MDN">Join MDN</h2> + +<p>개발자 프로그램에 가입하세요! You will able to <a href="/en-US/docs/MDN/Contribute">edit the documentation</a> here, create a profile to show off your work, and get access to features over time as we roll them out.</p> + +<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or log in </a></div> +</div> +</div> +</div> + +<div class="dev-program-explanation dev-program-block"> +<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2> + +<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your own knowledge.</p> + +<p>We are offering help through <a href="http://stackoverflow.com/r/mozilla">Q&A on Stack Overflow</a>, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed on the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps & Hacks newsletter.</a></p> + +<p>If you share Mozilla's <a href="https://www.mozilla.org/en-US/mission/">mission</a> and <a href="https://www.mozilla.org/en-US/about/manifesto/">principles</a>, and want to help spread them to more developers, check out the ways you can <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">get involved with technical evangelism</a>, and join our <a href="https://lists.mozilla.org/listinfo/evangelism">evangelism discussion group</a>.</p> + +<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter, </a>and <a href="/profile/edit">sign up for an account</a>!</p> + +<h2 id="Join_Mozilla" style="line-height: 30px;"><strong>Join Mozilla</strong></h2> + +<p><span style="line-height: 1.5;">If you want to go beyond <em>connecting</em> with Mozilla, you can <em>join</em> Mozilla and help realize <a href="https://www.mozilla.org/mission/">Mozilla's mission of building a better Internet</a>. As a developer, you have skills to contribute in many areas, as well as the opportunity to enhance your skills. Mozilla is an open source project, so we "default to open." You can "view source" and contribute to our software development projects, like the Firefox browser for desktop and Android, Firefox OS, and Mozilla's own websites. You can become part of an international community and get recognition for your efforts. Here are some of the advantages of contributing to the Mozilla project.</span></p> + +<h3 id="Opportunity_to_learn_something_new"><strong>Opportunity to learn something new </strong></h3> + +<div> +<p><span style="line-height: 1.5;">In writing code for an open source project, you may face problems you have not encountered before, which present learning opportunities for you. You can try out new tools and techniques in an open source project. For example, if you've never done any unit testing, and cannot get permission from your boss to do so in your regular job, writing some code for an open source project would be an excellent place to try it out. Contributing to open source gives you the opportunity to collaborate with and get to know many people around the world who have similar interests. Moreover, an open source organization like Mozilla has many contributors who can help you in solving problems you encounter.</span> If you're just getting started contributing, you can look for "mentored" bugs, where an experienced contributor has offered to help a newcomer fix them.</p> + +<h3 id="What_can_I_get_by_contributing"><strong>What can I get by contributing ? </strong></h3> + +<p><span style="line-height: 1.5;">Exploring many things and getting recognition in the community -- these are the intangible benefits of contributing to Mozilla. While we can't guarantee specific tangible benefits, many valued contributors receive free Mozilla gear and invitations to Mozilla-related events, and are first in line to be considered for internships. Moreover, your experience in contributing to an open source project might help you find a job. </span><span style="line-height: 1.5;">More and more employers of developers are looking at open source contributions. They like to see that you're blogging and contributing to mailing lists, and they really like to see you listed as a committer on an open source project. It can also help with the work experience section of your resume. </span></p> + +<h3 id="How_can_I_contribute_to_Mozilla"><strong>How can I contribute to Mozilla ? </strong></h3> + +<p><span style="line-height: 1.5;">Mozilla에 기여할 수 있는 많은 프로젝트 영역이 있습니다. You can find a current, complete list on the main Mozilla <a href="https://www.mozilla.org/contribute">참여</a> page. Some areas that may interest you as a developer include:</span></p> + +<ul> + <li><a href="http://www.whatcanidoformozilla.org/">Coding</a></li> + <li><a href="http://www.whatcanidoformozilla.org/">Web development</a></li> + <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li> + <li><a href="https://quality.mozilla.org/teams/">QA</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Add-ons</a></li> + <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li> + <li><a href="/en-US/docs/MDN/Getting_started">Developer documentation (here on MDN)</a></li> +</ul> +</div> +</div> + +<div class="column-container dev-program-block"> +<div class="column-half" id="Developer_discussions"> +<h2 id="QA_on_Stack_Overflow_See_all_QA...">Q&A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&A...</a></h2> + +<p>We have Q&A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p> + +<div class="stack-form">Stack form</div> + +<h3 id="Latest_QA_Topics">Latest Q&A Topics</h3> +</div> + +<div class="column-half dev-program-hacks dev-program-block"> </div> +</div> + +<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p> + +<div class="column-container dev-program-block"> +<div class="column-7 dev-program-events"> +<h2 id="Mozilla는_어디에_있나요_View_attendees_and_details_on_our_Events_page...">Mozilla는 어디에 있나요? <a class="heading-link" href="https://developer.mozilla.org/en/events">View attendees and details on our Events page... </a></h2> + +<p>Here is a listing of events where Mozilla representatives will be speaking. 대화를 꼭 나눠보세요!</p> +</div> + +<div class="column-5"> +<h2 id="관련_자원들">관련 자원들</h2> + +<ul class="no-bullets"> + <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a> + + <ul> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS 동영상</a></li> + <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox 개발자 도구 동영상</a></li> + </ul> + </li> + <li><a href="https://twitter.com/mozhacks">@mozhacks on Twitter</a></li> +</ul> +</div> +</div> +</div> diff --git a/files/ko/mozilla/안드로이드용_파이어폭스/index.html b/files/ko/mozilla/안드로이드용_파이어폭스/index.html new file mode 100644 index 0000000000..131f5749fa --- /dev/null +++ b/files/ko/mozilla/안드로이드용_파이어폭스/index.html @@ -0,0 +1,47 @@ +--- +title: Firefox for Android +slug: Mozilla/안드로이드용_파이어폭스 +translation_of: Mozilla/Firefox_for_Android +--- +<p>점점 더 많은 사람들에게 있어서 모바일 기기가 웹에 접속하는 주요한, 더 나아가서 유일한 방법이 되고 있습니다. <a href="https://www.mozilla.org/ko/mobile/">안드로이드용 Firefox</a>(코드네임 Fennec)는 개방적이고, 수정이 자유롭고, 표준에 기반한 데스크탑 Firefox와 비슷한 브라우저입니다.</p> +<p>안드로이드용 Firefox는 XUL 대신 기본 안드로이드 위젯에서 만들어진 UI를 사용합니다. 이를 통해 처음 구동 시간과 같은 성능을 향상시키고 메모리 절감 효과를 얻었습니다.</p> +<p> </p> +<h2 id="안드로이드용_Firefox에_기여하기">안드로이드용 Firefox에 기여하기</h2> +<p>안드로이드용 Firefox에 대한 정보를 얻을 수 있는 가장 좋은 시작점은 <a class="link-https" href="https://wiki.mozilla.org/Mobile">프로젝트 위키 페이지</a>입니다.</p> +<p>다음과 같은 활동을 통해서 안드로이드용 Firefox를 만들고 개선하는데 도움을 줄 수 있습니다:</p> +<ul> + <li><a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">테스트</a>에 도움 주기 + <ul> + <li>모바일 게코(gecko)와 주요 사이트의 호환성 - <a href="/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">자세한 정보</a> 살펴보기</li> + </ul> + </li> + <li><a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a>나 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">수요일 개발자 회의</a>를 통해 개발팀과 연락하기</li> + <li><a class="external" href="http://planet.firefox.com/mobile/">플래닛 firefox</a>와 <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">트위터</a>를 통해 최신 프로젝트 뉴스 확인</li> + <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">안드로이드용 Firefox 빌드하고 수정하기</a> (Fennec)</li> +</ul> +<h2 id="모바일_웹_개발">모바일 웹 개발</h2> +<p><a href="/En/Mobile" title="En/Mobile">모바일 기기를 위한 웹사이트 디자인</a>에 가이드 문서를 올리고 있습니다.</p> +<p>안드로이드용 Firefox를 사용하면 기기의 다양한 기능을 사용할 수 있는 API를 사용할 수 있습니다. 이를 통해 웹과 네이티브 어플리케이션 사이의 차이를 줄일 수 있습니다:</p> +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">배터리 </a></li> + <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">카메라</a></li> + <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelephony</a></li> + <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li> + <li><a href="/En/Using_geolocation" title="Using geolocation">위치정보</a></li> + <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientation</a></li> +</ul> +<p>안드로이드용 Firfox를 <a class="link-https" href="https://www.mozilla.org/en-US/mobile/">안드로이드 기기에 설치</a>하거나 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">안드로이드 에뮬레이터를 사용해서 데스크탑에서 실행</a>해 봄으로써 사이트를 테스트해 볼 수 있습니다.</p> +<h2 id="모바일_부가기능_제작">모바일 부가기능 제작</h2> +<p>안드로이드용 Firefox는 다른 게코 기반의 어플리케이션과 동일한 <a href="/en/Extensions" title="en/Extensions">확장 시스템</a>을 통해서 <a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">부가 기능을 지원</a>합니다. 새로운 확장 시스템을 만들지 않았습니다. 이 말은 데스크탑용 부가 기능을 만들던 것과 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">동일한 과정</a>을 통해서 안드로이드용 Firefox의 부가기능을 만들 수 있다는 말입니다. 하지만 데스크탑용 Firefox 부가 기능이 <strong>자동으로 작동하지는 않습니다</strong>. 사용자 인터페이스가 너무 다르기 때문입니다.</p> +<div class="note"> + 안드로이드용 Firefox에는 <code>install.rdf</code>에 지정되어야 하는 독자적인 어플리케이션 인식자가 있습니다. 인식자는 <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code>입니다.</div> +<p>기존의 재시작 해야만 하는 부가기능과 <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">재시작이 필요없는</a> 부가기능은 동일한 접근방법을 가지고 있습니다. 부가기능을 설치하거나 삭제할 때 재시작을 해야만 하는 방식은 사용자 경험에 많은 영향을 미치기 때문에 가능하다면 재시작이 필요없는 방식이 선호됩니다.</p> +<h3 id="기본_개요">기본 개요</h3> +<ul> + <li>UI에 XUL이 없기 때문에 UI의 추가나 변경 기능은 필요가 없습니다.</li> + <li><code>gBrowser</code> 같은 내부 코드와 객체가 존재하지 않습니다. 내부 코드에 대해서는 안드로이드용 Firefox의 <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a>를 참조하세요. 많은 수의 기본 기능들이 위치하고 있습니다.</li> + <li>Services like <code>nsIPromptService</code>나 <code>nsIAlertsService</code> 같은 서비스는 안드로이드의 기본 UI를 사용하도록 구현되었습니다.</li> + <li>안드로이드의 기본 UI를 다루는 <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a> 자바스크립트 객체가 있습니다.</li> +</ul> +<h2 id="안드로이드용_Firefox_도움말">안드로이드용 Firefox 도움말</h2> +<p>안드로이드용 Firefox를 사용하기 위한 문서와 도움말이 <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>를 통해서 제공되고 있습니다.</p> diff --git a/files/ko/mozilla/지역화/index.html b/files/ko/mozilla/지역화/index.html new file mode 100644 index 0000000000..fda2a6a834 --- /dev/null +++ b/files/ko/mozilla/지역화/index.html @@ -0,0 +1,26 @@ +--- +title: Mozilla 지역화 +slug: Mozilla/지역화 +tags: + - l10n + - 모질라 + - 번역 + - 지역화 +translation_of: Mozilla/Localization +--- +<p><span class="seoSummary"><strong>지역화</strong>(L10n) 는 소프트웨어 사용자 인터페이스를 한 언어에서 다른 언어로 번역하고 다른 문화에 적합하도록 맞추는 과정입니다. 이러한 자원들은 지역화에 포함된 기술적 측면에 관심있는 모두를 위한것입니다. 모든 기여자들과 개발자들을 위한 것입니다.</span></p> + +<h2 id="참고">참고</h2> + +<dl> + <dt><a href="/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizing MDN</a></dt> + <dd>이 자원은 여기 MDN 문서의 지역화를 커버합니다.</dd> +</dl> + +<p><a href="https://developer.mozilla.org/en-US/Apps/Build/Localization">App localization</a>(응용프로그램 지역화)</p> + +<p> 이 문서들은 파이어폭스 OS 앱을 포함한, 앱 지역화에 좀 더 특별히 적용됩니다.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/L10n">L10n</a></p> + +<p> 파이어폭스 OS를 지역화하기 위한 L10n API에 대한 참고 문서</p> diff --git a/files/ko/mozilla/지역화/localizing_with_verbatim/index.html b/files/ko/mozilla/지역화/localizing_with_verbatim/index.html new file mode 100644 index 0000000000..6f01ebb051 --- /dev/null +++ b/files/ko/mozilla/지역화/localizing_with_verbatim/index.html @@ -0,0 +1,125 @@ +--- +title: Verbatim을 이용해 지역화하기 +slug: Mozilla/지역화/Localizing_with_Verbatim +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +<p><span class="seoSummary">Verbatim은 모질라 웹 컨텐츠들을 지역하기 위한 웹 기반의 툴(정확힌 모질라에서 호스트된 Pootle 인스턴스)입니다 . 여러분은 모든 언어를 지원할수 있는 이 툴을 이용해 여러가지 모질라 프로젝트들을 지역화할수 있습니다. 이 가이드는 여러분을 보통의 모질라 웹 프로젝트를 지역화 하는 방법을 소개할 것입니다.</span>이 튜토리얼은 여러분에게 Verbatim을 이용해 여러분이 지역화 커뮤니티에 공헌하기 위해 모질라 프로젝트를 지역화 하는 데에 단단한 기반을 제공해 줄 것입니다. 우리는 어떤 모질라 웹 프로젝트들이 Verbatim을 이용하고 있는 지, Verbatim을 어떻게 사용하기 시작할지, 그리고 Verbatim을 이용해서 보통 이루어진 일들에 대해서 다룰 것입니다.</p> +<h2 id="Verbatim을_사용하기_시작하기">Verbatim을 사용하기 시작하기</h2> +<p>Verbatim이 온라인에 기반되어 있으므로, 번역자들은 Verbatim을 이용하기 위해서 무조건 인터넷에 연결되어 있어야 합니다. There are essentially two ways to get started with Verbatim: start a new localization or join an existing localization community's efforts. Either way, you will need to follow these steps to start working on a Verbatim project.</p> +<table style="width: 100%; border-style: solid; border-color: rgb(0,0,0);"> + <thead> + <tr style="text-align: center;"> + <th scope="col" style="text-align: center;">Verbatim에서 새로운 지역화를 시작하기</th> + <th scope="col" style="text-align: center;">Verbatim에서 진행중인 지역화에 참여하기</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <ol> + <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li> + </ol> + </td> + <td> + <ol> + <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li> + </ol> + </td> + </tr> + <tr> + <td> + <ol start="2"> + <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li> + </ol> + </td> + <td> + <ol start="2"> + <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li> + </ol> + </td> + </tr> + <tr> + <td> + <ol start="3"> + <li>File a <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&blocked=&bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&bug_severity=normal&bug_status=NEW&cf_blocking_191=---&cf_blocking_192=---&cf_status_191=---&cf_status_192=---&cf_status_firefox10=---&cf_status_firefox11=---&cf_status_firefox8=---&cf_status_firefox9=---&cf_tracking_firefox10=---&cf_tracking_firefox11=---&cf_tracking_firefox8=---&cf_tracking_firefox9=---&comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&component=Verbatim&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-4=X&flag_type-607=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Webtools&qa_contact=verbatim%40webtools.bugs&rep_platform=All&requestee_type-325=&requestee_type-4=&requestee_type-607=&short_desc=Request%20for%20new%20localization%20on%20Verbatim&status_whiteboard=&target_milestone=---&version=Trunk" title="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&assigned_to=nobody%40mozilla.org&blocked=&bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&bug_severity=normal&bug_status=NEW&cf_blocking_191=---&cf_blocking_192=---&cf_status_191=---&cf_status_192=---&cf_status_firefox10=---&cf_status_firefox11=---&cf_status_firefox8=---&cf_status_firefox9=---&cf_tracking_firefox10=---&cf_tracking_firefox11=---&cf_tracking_firefox8=---&cf_tracking_firefox9=---&comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&component=Verbatim&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&defined_groups=1&dependson=&description=&flag_type-4=X&flag_type-607=X&form_name=enter_bug&keywords=&maketemplate=Remember%20values%20as%20bookmarkable%20template&op_sys=All&priority=--&product=Webtools&qa_contact=verbatim%40webtools.bugs&rep_platform=All&requestee_type-325=&requestee_type-4=&requestee_type-607=&short_desc=Request%20for%20new%20localization%20on%20Verbatim&status_whiteboard=&target_milestone=---&version=Trunk">bug</a> using this prefilled bugzilla template. Add your locale code and language name to the description field, as well as any other information you'd like to share. See the following example.</li> + </ol> + <div class="note"> + <strong>Example</strong>: I would like to request that you add the <em><strong>en-US</strong></em> as a new localization in Verbatim. The langauge is <em><strong>English</strong></em>. Also, I like cookies. Lots and lots of cookies. I can easily be motivated by any and all baked goods.</div> + </td> + <td> + <ol start="3"> + <li><a class="link-https" href="https://wiki.mozilla.org/Category:L10n_Teams" title="https://wiki.mozilla.org/Category:L10n_Teams">Contact the community</a> to find out which projects they need you to concentrate your efforts on. See the following example for what you could include in your email to the community leaders.</li> + </ol> + <div class="note"> + <strong>Example</strong>: I would like to join your localization efforts on Verbatim for this locale. Where would be the best place for me to begin? Also, I would like to buy you a drink to encourage you to let me join the team!</div> + </td> + </tr> + </tbody> +</table> +<p>Now that you're registered and logged in, we'll outline the general translation workflow, using the <a class="link-https" href="https://localize.mozilla.org/projects/fxhome/" title="https://localize.mozilla.org/projects/fxhome/">Firefox Home project</a> as our example.</p> +<h2 id="Translating">Translating</h2> +<p>First thing's first, you need to find untranslated source strings to translate.</p> +<ol> + <li>Navigate to the <a class="link-https" href="https://localize.mozilla.org/projects/mdn" title="https://localize.mozilla.org/projects/fxhome/">MDN project page</a>.</li> + <li>Select your language from the <strong>Overview</strong> tab.</li> + <li>Now click on the the <strong>Translate</strong> tab. This tab will display the directories for the MDN user interface.</li> + <li>Select the <strong>LC Messages</strong> directory. This is where the project's <code>.po</code> files containing translatable strings are located. You will now see an overview of each <code>.po</code> file.</li> + <li>In the summary column, the number of words untranslated will be shown as a link. Click on that link to be taken directly to the first string that needs to be translated.</li> +</ol> +<p>Now you're ready to contribute translations and you won't believe how easy it is. Check it out, you can contribute translations in two simple steps:</p> +<ol> + <li>Simply type your translation in the box to below the English string</li> + <li>Select <strong>Suggest</strong>. If you have approval permission, select <strong>Submit</strong>. You will then be taken to the next string that needs translating.</li> + <li>Hooray! You're translating! Repeat steps one and two for the remainder of the untranslated strings.</li> +</ol> +<div class="note"> + <strong>Note</strong>: If you come across a string that already has a suggested translation, you can still suggest your own translation if you feel it is more accurate.</div> +<h3 id="Some_extra_cool_features_on_Verbatim">Some extra cool features on Verbatim</h3> +<p>Here are a few additional items about the Verbatim interface that you should be aware of. Some of these can be seen in the screen shot below.</p> +<p><a href="/@api/deki/files/5930/=Translate_Tab.png" title="Translate Tab.png"><img alt="Translate Tab.png" class="internal default" src="/@api/deki/files/5930/=Translate_Tab.png" style="width: 1113px; height: 221px;"></a></p> +<ul> + <li>You can copy the English string over to the translation box by clicking the <strong>Copy</strong> icon.</li> + <li>You can use machine translation by clicking on the <strong>Google Translate</strong> icon.</li> + <li>You can move forward and back through the strings by clicking the <strong>Next</strong> and <strong>Previous</strong> buttons.</li> + <li>You can navigate directly to a particular string by clicking it's string number on the far left.</li> + <li>You can mark a translation as <strong>Fuzzy</strong> if you think there could be a better way to say something. This will mark it so it can be found and updated later. Remember that only submitted strings will be commited to the localization's repository, not fuzzy strings. If strings remain marked as fuzzy, the source string will appear in your localized version instead of a translated string.</li> + <li>You can add notes about a particular string in the <strong>Translator Comments</strong> section.</li> + <li>When translating a string with both singular and plural forms you will see two boxes on the right hand side. The box for the singular form is labeled <strong>Plural Form 0</strong> and the box for the plural form is labeled <strong>Plural Form 1</strong>.</li> +</ul> +<h2 id="Additional_tasks">Additional tasks</h2> +<p>If you are a localizer with approval priviledges, here are a few more tasks that you should be aware of.</p> +<h3 id="Review_suggested_translations">Review suggested translations</h3> +<ol start="1"> + <li>Click on the <strong>Review</strong> tab. It will show how many strings are waiting for review for each <code>.po</code> file.<a href="/@api/deki/files/5931/=Review_Tab1.png" title="Review Tab1.png"><img align="right" alt="Review Tab1.png" class="internal rwrap" src="/@api/deki/files/5931/=Review_Tab1.png?size=webview" style="width: 274px; height: 145px;"></a></li> + <li>Select <span style="font-weight: bold;">Review</span><strong> suggestions</strong> to start approving suggestions. It will take you to the first string that needs to be reviewed.</li> + <li>You can accept the suggestion by clicking the green checkmark or reject the suggestion by clicking the red X (see the screen shot from the previous section).</li> +</ol> +<p>It is important to note that <em>only</em> submitted strings will appear in your localized pages. Neither suggestions nor fuzzy strings will appear. Before commiting your final localized product, make sure all strings have been submitted.</p> +<h3 id="Using_VCS_on_Verbatim">Using VCS on Verbatim</h3> +<p>VCS (<strong>V</strong>ersion <strong>C</strong>ontrol <strong>S</strong>ystem) is the repository system we use to update the project's strings as well as push your translated content onto the web. The difference between the two tasks is simply a matter of which link to click.</p> +<p><img align="right" alt="VCS.png" class="internal rwrap" src="/@api/deki/files/5925/=VCS.png" style="">To push your strings onto the web and see your changes, simply select the <strong>Commit to VCS</strong> link underneath each file name. It usually takes about an hour before you can see your changes on the project site.</p> +<p>To update your <code>.po</code> files with new untranslated strings, simple select the <strong>Update from VCS</strong> link underneath each file name.</p> +<p> </p> +<div class="note"> + <br> + <strong>Note</strong>: Some projects are automatically updated nightly while others require you to manually update them to receive new source content. Be sure to pay close attention to this, as it can alter your workflow.</div> +<h2 id="Translating_Verbatim_files_with_an_external_application">Translating Verbatim files with an external application</h2> +<p>While in the <strong>Translate</strong> tab, you have the option to export the <code>.po </code>and <code>.xliff</code> files and translate the strings with an external application (i.e., a text editor or translation memory tool).</p> +<ol> + <li>To download the <code>.po</code> file, select the <strong>Download</strong> link found underneath each file name. To download the .<code>xliff</code> file, select the <strong>Download XLIFF</strong> link.</li> + <li>Proceed to translate the strings using your selected tool.</li> +</ol> +<p>Once you've finished your translations, you'll need to upload your file to Verbatim. You can do this from the <strong>Translate</strong> tab.</p> +<ol> + <li>Navigate to the bottom of the files list to the <strong>Upload File</strong> section.</li> + <li>Click on the <strong>Browse</strong> button and select the file you wish to upload.</li> + <li>Select an upload setting from the options provided.</li> + <li>Once your upload setting has been selected, click <strong>Upload</strong>.</li> +</ol> +<div class="warning"> + <p class="warning"><strong>Important</strong>: There have been some problems in the past with community members updating their source strings while others are in the process of localizing the previous updated files. This can cause community members to overlook new source strings, producing untranslated strings in a localized project. Be sure to coordinate these manual updates within your community to avoid this problem.</p> +</div> +<h2 id="You're_ready_to_go!">You're ready to go!</h2> +<p>Whew! You've arrived at the end! Time to take what you've learned and put it to good use spreading Mozilla to everyone in your region. Have fun and <a class="link-mailto" href="mailto:l10n-drivers@mozilla.com" title="l10n-drivers@mozilla.com">let us know</a> if you run into any difficulties. We'll be happy to help in any way we can.</p> +<p> </p> +<p><a href="/en/Localization_Quick_Start_Guide:_Translation" title="Localization Quick Start Guide: Translation">Back: Quick Start Guide</a></p> diff --git a/files/ko/mozilla/지역화/pontoon_지역화/index.html b/files/ko/mozilla/지역화/pontoon_지역화/index.html new file mode 100644 index 0000000000..8d5664ca83 --- /dev/null +++ b/files/ko/mozilla/지역화/pontoon_지역화/index.html @@ -0,0 +1,135 @@ +--- +title: Pontoon 지역화 하기 +slug: Mozilla/지역화/Pontoon_지역화 +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon</a> 은 보시면 알만한 (WYSIWYG) 웹 기반 지역화 (l10n) 도구 입니다. Mozilla 에서, 우리는 Firefox 부터 Mozilla.org 까지 모든 Mozilla 제품과 웹사이트들을 지역화하는데 Pontoon 을 사용합니다. Pontoon 은 지역화 작업흐름에서 기술적인 능력이 거의 없이도 사용할 수 있는 아주 간단하고 교육적인 도구입니다. 여기서 우리는 로그인 하는 것 부터 여러분의 공헌을 마무리하는 것 까지 Pontoon 을 사용해 프로젝트를 지역화하는 방법에 대해 이야기 할 것입니다. 그 과정 중에, 여러분이 지역화 공헌을 더 쉽게 그리고 더 효과적으로 할 수 있게 해주는 몇 가지 매력적인 특징들을 짚어볼 것입니다.</p> + +<div class="note"> +<p><strong>개발자이십니까?</strong> <a href="/en-US/docs/Implementing_Pontoon_Mozilla">implementing Pontoon in your project</a> 를 읽어 보시거나 <a href="https://github.com/mozilla/pontoon">GitHub</a> 에서 참여하는 방법에 대해 배워보세요.</p> +</div> + +<h2 id="첫_단계">첫 단계</h2> + +<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon 홈페이지</a>는 아주 사용하기 쉽습니다. 프로젝트 지역화를 시작하기 위해, Persona 아이콘을 클릭하여 로그인 하세요. 다음으로, 여러분이 작업하고 싶은 프로젝트와 여러분의 언어를 드롭다운 메뉴에서 선택하세요. Pontoon 은 여러분이 지역화를 시작할 수 있도록 선택한 언어를 자동으로 열어줍니다. 참고하세요, 여기서 우리의 목적은 <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> 웹사이트를 사용해 Pontoon 의 기능과 작업흐름을 데모해 보는겁니다. 이것이 Photoon 에서 그것을 열었을 때 입니다:</p> + +<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p> + +<h3 id="메인_툴바">메인 툴바</h3> + +<p>보시다시피 인터페이스의 대부분은 번역되는 웹사이트에 달려있습니다. 단지 다음 항목들(왼쪽에서 오른쪽으로)을 포함하는 상단의 툴바가 Pontoon 에 속해있습니다:</p> + +<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p> + +<h4 id="문자열의_리스트">문자열의 리스트</h4> + +<p>지역화를 위한 리스트를 가진 사이드바를 엽니다.</p> + +<h4 id="프로젝트_셀렉터_(제휴된것)"><span id="cke_bm_939S" style="display: none;"> </span>프로젝트 셀렉터 (제휴된것)</h4> + +<p>지역화를 위한 프로젝트를 변경합니다.</p> + +<h4 id="리소스_셀렉터_(홈페이지)"><span id="cke_bm_940S" style="display: none;"> </span>리소스 셀렉터 (홈페이지)</h4> + +<p>부속 페이지나 지역화 파일들같은 지역화를 위한 프로젝트 자원들을 변경합니다. 프로젝트를 위한 가용 자원이 없다면 숨깁니다.</p> + +<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4> + +<dl> +</dl> + +<h4 id="언어_셀렉터_(Slovenian)">언어 셀렉터 (Slovenian)</h4> + +<p>지역화를 위한 언어를 변경합니다.</p> + +<h4 id="Go">Go</h4> + +<p>프로젝트-자원-언어 선택을 엽니다.</p> + +<h4 id="진행상황_표시기">진행상황 표시기</h4> + +<p>지역화중인 자원에 대한 여러분의 진행상황을 나타냅니다. 팝업에서 세부사항을 볼 수 있습니다.</p> + +<dl> +</dl> + +<h4 id="사용자_메뉴"><span id="cke_bm_943S" style="display: none;"> </span>사용자 메뉴</h4> + +<p>저장소에 커밋하거나 파일을 다운받고 로그아웃하기 같은 여러분만의 작업을 할 수 있도록 해줍니다.</p> + +<h4 id="정보_메뉴">정보 메뉴</h4> + +<p>키보드 단축기 목록과 기대하는 프로젝트 타임라인같은 중요한 정보를 줍니다.</p> + +<dl> +</dl> + +<p>좋습니다, 이제 번역 좀 해볼까요?<span id="cke_bm_608E" style="display: none;"> </span></p> + +<dl> +</dl> + +<h2 id="번역하기">번역하기</h2> + +<p>지역화를 위해 Pontoon 을 사용할 때 몇 가지 번역을 위한 옵션이 있습니다. 컨텍스트에서 번역하거나, 컨텍스트 밖에서 하거나, 둘의 조합에서 할 수 있습니다. 컨텍스트 단위 번역을 살펴봅시다.</p> + +<h3 id="컨텍스트에서">컨텍스트에서</h3> + +<p>Pontoon's in-context translation mode is what puts it above others. 웹 페이지(또는 웹 앱)를 열고 페이지의 실시간 편집을 활성화합니다. 여기 여러분이 번역할 첫번째 문자열이 있습니다:</p> + +<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p> + +<ol> + <li>마우스를 번역할 문자위에 올려놓으세요.</li> + <li>문자위에 수정 버튼이 나타납니다. 클릭하여 번역 모드를 활성화하세요.</li> + <li>원본 문자를 여러분의 언어로 번역한 문자로 바꾸세요.</li> + <li>저장 버튼을 눌러 번역을 저장하세요.</li> +</ol> + +<div> +<h3 id="컨텍스트_밖에서">컨텍스트 밖에서</h3> + +<p>어떤 문자열은 컨텍스트 안에서 번역하는 것이 불가능합니다. 예를들면, 웹사이트의 <title> 태그 안의 내용과 유동적이거나 다양한 복수형 문자열이 있습니다. 메인 툴바의 햄버거 아이콘을 클릭하는 것으로 사이드바에 모든 번역가능한 문자열의 목록을 열 수 있습니다. 또한 컨텍스트 밖 지역화를 위해 사이드바를 사용할 수도 있습니다:</p> + +<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p> + +<ol> + <li>번역할 문자열을 클릭하세요.</li> + <li>원본 문자열과 세부 사항(코멘트들)을 포함하는 번역 패널을 여세요.</li> + <li>아래 번역 공간에서 문자열을 번역하세요.</li> + <li>저장 버튼을 클릭해 번역을 저장하세요.</li> +</ol> + +<p>만약 해당 문자열이 컨텍스트 안에서도 번역 가능한 것이라면 컨텍스트 밖에서 문자열을 번역한 것 처럼 웹사이트에 번역한 내용이 나타날 것입니다. </p> + +<h3 id="번역_도우미">번역 도우미</h3> +</div> + +<p>보시다시피 번역 영역 바깥에 있는 히스토리, 번역 기록, 기계 번역 그리고 다른 로케일로부터 제안을 받으실 수 있습니다. 여러분이 문장을 번역하실 때 각 도우미들은 다음과 같이 도움을 드릴 것입니다:</p> + +<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p> + +<h4 id="History">History</h4> + +<p>이전에 다른 사용자들이 사용했던 제안 번역을 표시합니다.</p> + +<h4 id="Machinery">Machinery</h4> + +<p>여러 서비스에서 사용된 예를 표시합니다: 내부적으로 저장된 번역 기록, <a href="http://transvision.mozfr.org/">Mozilla Transvision</a>, <a href="https://amagama-live.translatehouse.org/">open source translation memory</a>, <a href="http://www.microsoft.com/Language/">Microsoft terminology</a> 그리고 <a href="http://www.bing.com/translator">machine translation</a>.</p> + +<h4 id="Other_locales">Other locales</h4> + +<p>다른 로케일에서 사용한 번역을 표시합니다.</p> + +<h4 id="Search">Search</h4> + +<p>Almost like machinery, but takes provided keyword as input parameter instead of the original string.</p> + +<p>추천단어를 클릭하면, 번역 영역으로 내용이 복사됩니다.</p> + +<dl> +</dl> + +<h2 id="게시하기">게시하기</h2> + +<p>이제 여러분은 repo 에 커밋하는 것으로 지역화 작업을 게시하실 것입니다. Pontoon 으로도 가능합니다! 실제로, Pontoon 은 시간 단위로 저장소와 자동으로 동기화됩니다. 이제 이 작업을 기념하기 위해 스스로 격려하거나, 가벼운 춤을 추거나, 잠을 자거나 또는 다른 것을 해도 좋습니다!</p> |