diff options
Diffstat (limited to 'files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html')
| -rw-r--r-- | files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html | 159 |
1 files changed, 0 insertions, 159 deletions
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html deleted file mode 100644 index 74de7d0cb8..0000000000 --- a/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -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> |