Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Content Panels

 

이번 단원에서는 HTML 페이지 혹은 외부 XUL 파일을 표시할 수 있는 패널을 추가하는 방법에 대해 알아보겠습니다.

자식 패널 추가하기

여러분은 다른 페이지의 문서 일부분을 가져오고자 할 때가 있을 것입니다. 때로는 창의 일부분만을 수정하고자 할 때도 있을 것입니다. 단계별로 진행되는 마법사 대화창이 좋은 예입니다. 마법사 대화창은 여러개의 화면을 통해 단계적으로 질문을 하고 답변을 하도록 안내해줍니다. 사용자가 다음 버튼을 클릭할 때마다 마법사의 다음 화면이 표시됩니다.

마법사를 만들 때 각 화면별로 다른 창이 열리도록 인터페이스를 구성할 수도 있을 것입니다. 하지만 이 방법에는 다음의 세 가지 문제점이 있습니다. 첫 번째는 각 창이 다른 위치에 나타날 수 있다는 점입니다(해결책이 있기는 합니다). 두 번째는 '뒤로'나 '다음' 버튼 등의 요소는 인터페이스 전반에 걸쳐 공통적으로 사용되기 때문에 마법사의 내용 영역만 바뀌도록 구성하는 것이 좋다는 점입니다. 세 번째는 여러 개의 창을 이용하면 스크립트를 효율적으로 사용할 수 없다는 점입니다.

XUL에는 마법사 인터페이스를 만들기 위한 wizard 요소가 존재한다는 점을 알고 계십시요. 이에 대해서는 이후 단원에서 설명할 것입니다.

또 다른 방법은 iframe 요소를 사용하는 것인데, 같은 이름의 HTML 요소와 아주 비슷하게 동작합니다. iframe은 하나의 창 내에 서로 다른 문서를 만들 수 있게 해 줍니다. 또한 iframe은 창의 어느 곳에나 위치할 수 있고 다른 파일에서 내용을 불러올 수 있다는 장점이 있습니다. iframe에서는 src 속성을 사용하여 프레임에 표시될 URL을 지정합니다. URL이 가리킬 수 있는 파일 종류에는 제한이 없지만, 보통 HTML이나 XUL 파일을 사용합니다. 스크립트를 사용하면 창에 영향을 주지 않고 iframe의 내용을 바꿀 수도 있습니다.

Mozilla 브라우저 창에서 웹 문서가 표시되는 영역이 바로 iframe으로 만들어진 것입니다. 사용자가 URL을 입력하거나 문서의 링크를 클릭하면 이 프레임의 소스가 변경되는 것입니다.

iframe 예제

예제 1 : Source View

<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"/>

위 예제는 웹 브라우저로 사용할 수 있는 아주 간단한 인터페이스를 만들어 보았습니다. 상자에는 toolboxiframe 요소를 포함합니다. 툴바에는 "뒤로 가기" 버튼과 "앞으로 가기" 버튼, URL 입력란이 포함되어 있습니다(툴바에 대해서는 이후 단원에서 배울것입니다). 웹 문서는 iframe 안에 표시되는데, 예제에서는 기본적으로 welcome.html 파일이 표시됩니다.

이 예제는 완전한 기능을 제공하지는 않습니다. 나중에 사용자가 Enter 키를 누르는 것과 같은 특정 시점에 src 속성을 변경하는 스크립트를 추가할 것입니다.

브라우저

browser 태그를 사용하는 두 번째 유형의 내용 패널이 있습니다. 이 패널은 브라우저처럼 내용을 출력하는 프레임을 생성하고자 할 때 사용할 수 있습니다. 사실 iframe도 이러한 것을 할 수 있지만, 브라우저는 좀 더 다양한 기능을 제공합니다. 예를 들어, 브라우저는 '뒤로'나 '다음' 버튼을 사용할 수 있도록 페이지 기록을 관리합니다. browser 요소는 해당 내용의 참조자와 다른 플래그들을 가지고 페이지를 로드할 수 있습니다. 당연히, browser 태그는 브라우저와 같은 인터페이스를 만들고자 할 때 사용되어야 하지만, 간단한 패널이 필요할 때 iframe을 사용할 수도 있습니다.

이와 비슷한 요소인 tabbrowserbrowser의 모든 기능을 제공하면서 여러 페이지들간에 이동할 수 있는 탭바를 제공합니다. 이는 Mozilla 브라우저에서 탭브라우징 인터페이스를 제공하기 위해 사용되는 위젯입니다. 사실 tabbrowser 요소는 여러개의 browser를 포함하는 tabbox로 구현되어 있습니다. 두 가지 형태의 브라우저 모두 출력되는 페이지들을 제어하기 위한 비슷한 방법을 제공합니다.

browser 예제

예제 2 : Source View

<browser src="http://www.mozilla.org" flex="1"/>

iframe과 같이 src속성을 사용하여 브라우저에 url을 지정할 수 있습니다. tabbrowser에서는 위와 같이 직접 url을 지정할 수 없는데 이는 이 요소가 단지 하나의 url만 출력하는 것이 아니기 때문입니다. 대신 스크립트를 사용해서 loadURI 함수를 호출해야만 합니다.

브라우저는 출력하고자 하는 내용에 따라 3가지의 유형이 있습니다. 이 유형은 type 속성을 이용하여 지정합니다.

첫 번째 유형은 기본값이며 type 속성이 명시되지 않았을 때 사용됩니다. 이 경우 브라우저내에 로드되는 내용은 내용을 로드하는 응용 프로그램의 일부로 취급되어 외부 창에 접근할 수 있는 방법을 가지게 됩니다. 이것은 브라우저 내에 로드된 스크립트가 최상위 창을 얻으려고 시도하면, 그것은 외부의 XUL 창을 얻게 된다는 것을 의미합니다.

이러한 유형은 응용 프로그램의 일부인 자식 XUL 패널에서는 적당하지만, 웹 페이지를 로드하는 브라우저에서는 원치 않는 것입니다. 대신 여러분은 웹 페이지가 웹 페이지의 내용에만 접근할 수 있도록 제한하기를 원할 것입니다. 여러분은 Mozilla 브라우저 창이 메인 영역을 구성하는 tabbrowser와 함께 툴바와 상태바 등과 같은 XUL 콘텐츠를 가진다는 것을 알고 있을 것입니다. 이러한 내부 영역은 웹 페이지를 출력하지만, 웹 페이지는 이들 주위의 XUL에는 접근할 수 없습니다. 이것은 브라우저가 두 번째 유형을 사용하기 때문인데, 이 유형에서는 type 속성에 content값을 지정합니다. 이렇게 지정하면 내용이 XUL window에 접근하지 못하도록 막아줍니다. 다음은 이에 대한 예제입니다.

<browser src="http://www.mozilla.org" type="content" flex="1"/>
중요: 여러분은 browser 요소내에 원격지 웹사이트를 출력하기 위해서는 type 속성을 정확히 지정해야 합니다.

tabbrowser는 자기가 생성한 모든 탭 브라우저에 대해 자동으로 유형을 지정합니다. 그렇기 때문에 탭 브라우저의 경우 명시적으로 지정할 필요가 없습니다.

세 번째 유형은 다른 내용을 출력하기 위해 사이드바를 사용하는 것과 같이 창에 다중 브라우저 요소를 포함할때 사용됩니다. 메인 browser 요소의 type 속성을 content-primary로 지정하면 이것은 창에서 주 내용이라는 것을 나타냅니다. 이것은 창 내부의 내용이 XUL 창의 'content' 속성을 이용하여 접근할 수 있다는 점만 제외하면 content 값과 유사하게 동작합니다. 이것은 스크립트를 사용하여 주 브라우저의 내용에 접근하기 쉽게 해 줍니다. tabbrowser는 자동으로 현재 보이는 브라우저에 대해 type 속성을 content-primary로 지정하며, 이것은 여러분이 현재 보이는 내용에 대해 항상 접근할 수 있다는 것을 의미합니다.

다음에는 분할자(splitter)를 작성하는 방법에 대해 알아보겠습니다.

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: teoli, Suguni
 최종 변경: teoli,