mozilla
검색 결과

    The Box Model

    이 단원에서는, XUL이 레이아웃을 어떻게 처리하는지에 대해 알아보겠습니다.

    상자 소개

    XUL에서 레이아웃의 주된 형식은 '상자모델'이라고 하는 것입니다. 이 모델은 창을 여러개의 상자로 분할 할 수 있도록 해 줍니다. 상자 내부의 요소는 가로 또는 세로 orient(방향)을 가지게 됩니다. 여러개의 상자와 공백, flex속성을 가진 요소들을 묶음으로써, 창의 레이아웃을 제어할 수 있습니다.

    상자는 XUL의 요소들을 배치하기 위해 가장 중요한 부분이지만, 몇 가지 단순한 규칙만을 가집니다. 상자는 가로 또는 세로 두 방향 중 하나의 형태로 자식이 배치되도록 할 수 있습니다. 가로상자는 상자에 포함된 요소를 가로 방향으로 세로 상자는 세로 방향으로 정렬시킵니다. 여러분은 상자를 HTML 테이블의 행 또는 열로 생각하실 수 있습니다. CSS 스타일 속성과 더불어 자식 요소에 사용되는 여러 속성은 자식 요소의 위치와 크기를 정확하게 제어할 수 있게 해 줍니다.

    상자 요소들

    상자의 기본 구문은 다음과 같습니다.

    <hbox>
      <!-- horizontal elements -->
    </hbox>
    
    <vbox>
      <!-- vertical elements -->
    </vbox>
    

    hbox 요소는 가로 방향의 상자를 만드는 데 사용됩니다. hbox에 포함되는 요소들은 하나의 행 안에 수평적으로 배치됩니다. vbox 요소는 세로 방향의 상자를 만드는 데 사용됩니다. 상자에 추가되는 요소들은 아래쪽으로 배치됩니다.

    또한 가로 방향을 기본으로 하는 기본적인 box 요소가 존재하는데, 이것은 hbox와 같은 역할을 한다는 의미입니다. 그렇다 하더라도, 상자의 방향을 제어하기 위해서 orient 속성을 사용할 수 있습니다. 이 속성을 이용하면 가로 상자를 만들기 위해서는 horizontal값을 세로 상자는 vertical값을 설정하면 됩니다.

    따라서 다음의 두 줄은 동일한 것입니다.

    <vbox></vbox>
    
    <box orient="vertical"></box>
    

    다음의 예제는 3개의 버튼을 세로로 나타내는 방법을 보여주고 있습니다.

    예제 1 : Source View

    Image:boxes-ex1.png
    <vbox>
      <button id="yes" label="Yes"/>
      <button id="no" label="No"/>
      <button id="maybe" label="Maybe"/>
    </vbox>
    

    여기에 있는 3개 버튼은 상자가 지시한 대로 세로 방향으로 배치되어 있습니다. 버튼을 가로 방향으로 배치되도록 하려면 vboxhbox로 변경하기만 하면 됩니다.

    로그인 대화상자 예제

    여러분은 다른 상자를 포함해서 상자내에 원하는데로 많은 요소를 추가할 수 있습니다. 가로 상자의 경우에, 추가되는 요소는 이전 요소의 오른쪽에 놓이게 됩니다. 상자에 포함된 요소들은 다음 줄로 넘어가지 않기 때문에, 요소를 추가하면 창의 너비가 그 만큰 넓어지게 됩니다. 마찬가지로, 세로상자에 추가된 요소는 이전 요소의 아래에 놓이게 됩니다. 아래는 간단한 로그인 대화상자 예제입니다.

    예제 2 : Source View

    Image:boxes-ex2.png
    <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>
    

    위 예제에서는, 2개의 hbox 태그와 2개의 button 요소, 총 4개 요소가 세로 방향으로 배치되어 있습니다. 주의할 것은 상자의 바로 아래 자식 요소만 세로 방향으로 처리된다는 점입니다. 라벨과 글상자는 안쪽 hbox 요소 내부에 있기 때문에, 이들 상자의 방향인 가로 방향에 따라 배치되어 있습니다. 각 라벨과 글상자가 가로 방향으로 배치되어 있는 것을 그림에서 확인하실 수 있습니다.

    글상자 정렬

    로그인 대화상자의 그림을 자세히 보면, 2개의 글상자가 정렬되어 있지 않은 것을 볼 수 있습니다. 아마도 정렬되어 있다면 더 보기 좋을 것입니다. 이 작업을 위해서는 몇 가지 상자를 추가해 주어야 합니다.

    예제 3 : Source View

    Image:boxes-ex3.png
    <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>
    

    이제 글상자가 어떻게 정렬되었는지 주의깊게 보시기 바랍니다. 이렇게 하기 위해 우리는 주 상자 내에 또 다른 상자를 추가해야 했습니다. 원래는 2개의 라벨과 글상자가 가로 상자 내부에 위치하고 있었습니다. 그런데 이번에는 라벨을 모두 하나의 수직 상자에, 글상자도 모두 하나의 수직 상자에 포함되어 있습니다. 여기서 사용한 수직 상자가 각 요소들을 수직으로 정렬시킵니다. 수평 상자는 라벨을 포함하는 수직 상자와 글상자를 포함하는 수직 상자를 수평적으로 배치하기 위해 사용되었습니다. 만일 이 수평 상자를 없애면 글상자는 모두 라벨의 아래에 위치하게 될 것입니다.

    이제 남은 문제는 'Password' 라벨이 오른쪽에 있는 글상자에 비해 너무 높이 위치해 있다는 점입니다. 이 문제를 해결하려면 grid 라는 요소를 사용할 수 밖에 없는데, 이에 대해서는 이후 단원에서 배우게 될 것입니다.

    우리의 파일 찾기 대화창 예제

    파일 찾기 대화창에 몇 가지 상자를 추가해 보겠습니다. 모든 요소를 포함하도록 제일 바깥쪽에 세로 상자를 추가하고, 글상자와 버튼 주변에 가로상자를 추가하겠습니다. 이렇게 하면 버튼이 글상자 아래에 나타나게 될것입니다.

    <vbox flex="1">
    
      <description>
        Enter your search criteria below and select the Find button to begin
        the search.
      </description>
      
      <hbox>
        <label value="Search for:" control="find-text"/>
        <textbox id="find-text"/>
      </hbox>
    
      <hbox>
        <spacer flex="1"/>
    
        <button id="find-button" label="Find"/>
        <button id="cancel-button" label="Cancel"/>
      </hbox>
    </vbox>
    
    Image:boxes1.png


    세로상자는 메인 텍스트와 글상자를 포함한 상자와 버튼을 포함한 상자를 세로 방향으로 배치되게 해 줍니다. 안쪽의 수평 상자들은 그들이 포함한 요소들을 수평적으로 배치되게 해 줍니다. 그림에서 보듯이, 라벨과 글상자는 나란히 놓여 있습니다. 공백요소와 2개의 버튼 또한 상자에서 가로로 배치되어 있습니다. spacer 요소가 flex 속성을 지정하고 있기 때문에, 버튼들이 오른쪽에 붙어있다는 점에 주목하세요.

    여태까지의 예제: Source View

    다음 섹션에서는, 요소들의 크기를 지정하고 크기에 제한을 주는 방법에 대해 알아 보겠습니다.

    문서 태그 및 공헌자

    태그: 
    Contributors to this page: teoli, Suguni
    최종 변경: teoli,