mozilla
검색 결과

    Element Positioning

    이번에는 XUL 요소의 크기와 위치를 지정하는 방법을 알아 보겠습니다.

    Box 요소의 위치 지정

    지금까지 상자 속의 요소들을 가로나 세로로 정렬하는 방법을 배웠습니다. 우리는 상자 속 요소의 크기와 위치를 제어할 필요가 있으며, 이를 위해 먼저 상자가 작동하는 원리에 대해 좀 더 알아볼 필요가 있습니다.

    XUL에서는 배치 방식(layout style)에 따라 내부 요소들의 위치가 결정됩니다. 예를 들어 가로 상자에 버튼을 추가하면 만약 추가된 버튼의 앞에 다른 요소가 있다면, 앞 버튼의 오른쪽에 위치하게 됩니다. 요소의 크기는 그 요소가 필요로 하는 크기와 사용자가 지시한 크기, 두 가지 요인에 의해 결정됩니다. 요소가 필요로 하는 크기는 그 요소 안에 무엇이 있느냐에 따라 달라집니다. 예를 들어 버튼의 너비는 버튼에 표시되는 문자열의 길이에 의해 결정됩니다.

    일반적으로 요소의 크기는 내부의 것들을 표시하기에 딱 알맞은 크기로 결정됩니다. 글상자(textbox) 같은 몇몇 요소들에는 기본 크기가 지정되어 있습니다. 일반 상자는 그 내부의 요소들을 모두 포함할 수 있을 만큼 충분한 크기를 가지게 됩니다. 예를 들어 세 개의 버튼을 포함하는 가로 상자의 너비는 세 개의 버튼과 약간의 여백을 포함할 정도의 넓어집니다.

    Image:boxstyle1n.png

    그림에서 앞의 두 버튼은 문자열을 표시하기에 알맞은 크기로 되어 있습니다. 세 번째 버튼은 글자가 더 많기 때문에 크기가 더 큽니다. 버튼을 포함하고 있는 상자의 너비는 세 버튼의 너비와 버튼들 간의 사이 공간을 더한 전체 너비가 됩니다. 버튼의 높이도 글씨의 크기에 맞춰져 있습니다.

    Width와 height 속성

    여러분은 아마 창 내의 요소 크기를 좀 더 세밀히 제어할 필요가 있을 것입니다. 그래서 XUL은 요소의 크기를 조정할 수 있는 다양한 기능을 제공합니다. 그 중에서 가장 쉬운 방법은, HTML의 img에 너비와 높이를 주는 방식과 아주 비슷하게, 해당 요소에 widthheight 속성을 사용하는 것입니다. 다음은 이러한 예를 보여주고 있습니다.

    예제 1 : Source View

    <button label="OK" width="100" height="40"/>
    

    하지만 이러한 방법은 사용 환경이나 테마에 따라 문제가 발생할 수 있기 때문에 그렇게 추천할 만한 방법이 아닙니다. 더 나은 방법은 style 속성을 이용하는 것인데, 이는 HTML의 스타일 시트와 유사하게 작동합니다. 이 때는 다음의 CSS 속성을 사용할 수 있습니다.

    width 
    요소의 너비를 지정합니다.
    height 
    요소의 높이를 지정합니다.

    이 속성을 사용하면 지정된 너비와 높이를 가진 요소가 생성됩니다. 만약 하나의 값만 지정하면 나머지 값은자동으로 계산됩니다. 이러한 크기 스타일을 지정할 때는 수치와 단위를 함께 입력해야 합니다.

    유연한 요소들

    유연하지 않은(non-flexible) 요소의 크기는 쉽게 계산됩니다. 이런 요소들은 지정된 크기 그대로 화면에 나타나며, 만약 크기가 지정되지 않으면 내용을 표시하기에 알맞게 크기가 정해집니다. 하지만 유연한(flexible) 요소의 크기를 계산하는 것은 조금 까다롭습니다.

    유연한 요소란 flex 속성의 값이 0보다 큰 요소입니다. 이들은 사용 가능한 공간에 맞추어 크기가 커지거나 줄어든다는 것을 이전 섹션에서 말씀드렸습니다. 이들의 처음 크기는 유연하지 않은(inflexible) 요소와 똑같이 계산됩니다. 다음의 예제는 앞서 말한 내용에 대해 보여줍니다.

    예제 2 : Source View

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

    이 창을 열면 처음에는 위에서 본 그림처럼 나타날 것입니다. 앞의 두 버튼은 너비가 기본값과 같을 것이고 세 번째 버튼은 글자가 더 많기 때문에 너비가 더 클 것입니다. 첫번째 버튼은 유연하도록 설정되었으며 세 버튼 모두 상자에 포함되어 있습니다. 상자의 너비는 세 버튼의 총 너비(그림에서는 약 430 픽셀)로 맞춰질 것입니다.

    만일 창의 크기를 늘리면 XUL은 빈 공간을 매꾸기 위해서 유연한 요소들이 있는지 검사합니다. 위 예제에서첫번째 버튼이 유연한 요소이지만, 창을 늘려도 버튼의 크기가 변하지 않을 것입니다. 이는 버튼을 포함하는 상자가 유연하지 않기 때문입니다. 유연하지 않은 요소는 사용 가능한 공간이 늘어나도 크기가 변하지 않으며 따라서 버튼도 더 커질 수가 없는 것입니다.

    상자도 유연 요소로 만들면 문제가 해결됩니다. 그리고 나서 창을 늘리면 빈 공간이 생기고 이 빈 공간을 채우기 위해 상자의 크기도 변경됩니다. 상자가 더 커지면 상자 내부에 빈 공간이 생기고 그러면 상자 내부의 유연 요소인 버튼이 늘어나 빈 공간을 채우게 됩니다. 이러한 과정은 중첩된 상자에 대해 반복되어 처리됩니다.

    최소 크기와 최대 크기 지정하기

    여러분은 어떤 요소가 유연하면서도 특정 크기보다는 더 커지지 않도록 크기를 제한해야 할 때도 있을 수 있습니다. 또 그 반대로 최소 크기를 지정하고 싶을 때도 있을 것입니다. 이러한 제한들은 다음의 네 가지 속성을 사용해서 설정할 수 있습니다.

    minwidth 
    요소의 최소 너비를 지정한다.
    minheight 
    요소의 최소 높이를 지정한다.
    maxwidth 
    요소의 최대 너비를 지정한다.
    maxheight 
    요소의 최대 높이를 지정한다.

    위의 모든 값은 픽셀로 계산됩니다. 그리고 위의 속성 대신 CSS의 min-width, min-height, max-width, max-height를 이용해도 됩니다.

    이 속성들은 유연한 요소에만 적용됩니다. 예를 들어 최대 높이를 지정한 유연한 버튼은 지정된 높이만큼만 늘어날 수 있습니다. 최대 높이까지 늘어난 버튼은 창의 크기를 늘려도 더 이상 늘어나지 않습니다. 이 버튼을 포함하는 상자에 최대 높이를 지정하지 않으면 상자는 버튼과 상관 없이 계속해서 늘어날 것입니다.

    만약 두 버튼이 동일하게 유연하다면, 두 버튼이 빈 공간을 똑같이 나누어 가질 것이다. 이 때 한 버튼에 최대 너비가 지정되어 있다면 남은 하나의 버튼이 남은 공간을 차지하게 됩니다.

    만약 상자에 최대 너비나 높이가 지정되어 있다면 상자 내의 요소들은 그 이상 커질 수가 없습니다. 마찬가지로 상자에 최소 너비나 높이가 지정되어 있으면 상자 내의 요소들은 그 이하로 줄어들 수가 없습니다.

    너비와 높이를 지정한 예제들
    <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>
    
    예제 1
    첫 번째 버튼은 너비가 100픽셀(px는 픽셀을 의미)이 될 것입니다. 만약 단위를 입력하지 않으면 너비가 적용되지 않을 것입니다.
    예제 2
    두 번째 버튼은 높이가 10px, 너비가 100em(em은 사용하고 있는 글꼴의 한 글자 크기)으로 표시될 것입니다.
    예제 3
    세 번째 버튼은 유연한 요소이므로 버튼을 포함하는 상자의 크기에 따라 크기가 변경될 것입니다. 하지만 이 버튼은 50px 이하로는 줄어들지 않을 것입니다. 이 때는 다른 유연한 요소들이 유동비(flex값의 비율)와 상관 없이 남은 공간을 채울 것입니다.
    예제 4
    네 번째 버튼은 유연하지만 높이가 2ex(ex는 사용하고 있는 글꼴의 x의 크기) 이하로 줄어들지 않고, 100px 이상으로 늘어나지도 않을 것입니다.
    예제 5
    글상자는 유연하지만 크기가 10em 이상으로 늘어나지 않을 것입니다. 글자와 관련된 크기를 정할 때는 주로 em을 사용합니다. 글꼴이 변경되면서 글자의 크기가 변할 수 있지만 글상자의 크기를 em으로 지정하면 언제나 글꼴에 맞추어서 크기가 정해지기 때문에 매우 유용합니다.
    예제 6
    description 요소의 최대 너비가 50픽셀로 지정되어 있습니다. 글자가 50픽셀을 넘으면 나머지 글자는 다음 줄에 표시될 것입니다.
    우리의 파일 찾기 대화창

    위에서 본 스타일들 중 몇 가지를 파일 찾기 대화창에 추가해 보도록 하겠습니다. 우리는 글상자의 크기가 창의 크기에 맞추어 변하도록 만들어 볼 것입니다.

    <textbox id="find-text" flex="1" style="min-width: 15em;"/>
    
    Image:boxstyle1.png

    위에서 글상자를 유연하게 만들었습니다. 이제 사용자가 대화창의 크기를 변경하면 글상자도 함께 늘어날 것입니다. 이는 사용자가 긴 문자열을 입력하고자 할 때 유용합니다. 또 최소 너비가 15em이기 때문에 글상자는 항상 적어도 15글자를 표시할 수 있게 되었습니다. 사용자가 창을 아주 작은 크기로 줄여도 글상자는 15em 이하로는 줄어들지 않을 것입니다. 이 때는 글상자가 마치 대화창의 경계를 벗어난 것처럼 그려질 것입니다. 그림에서와 같이 글상자가 창의 크기에 딱 맞추어져 있습니다.

    상자 묶기

    유연한 상자가 두 개의 자녀 요소를 갖고 있는데, 둘 다 유연하지 않다면 어떻게 될까요? 아래의 예를 보겠습니다.

    예제 3 : Source View

    <box flex="1">
      <button label="Happy"/>
      <button label="Sad"/>
    </box>
    

    창의 크기가 변경되면 상자의 크기도 이에 맞추어 변경됩니다. 하지만 두 개의 버튼은 크기가 고정되어 있기 때문에 변하지 않을 것입니다. 따라서 상자의 내부에 빈 공간이 생겨 창의 오른쪽 부분에 빈 공간이 생긴 것처럼 보이게 됩니다. 하지만 아마 여러분은 왼쪽에 빈 공간이 생기고, 창의 오른쪽으로 버튼이 정렬되게끔 하고 싶을 때도 있을 것입니다.

    상자 안에 여백(spacer)를 넣으면 되지만, 매번 그렇게 하는 것은 너무 성가실 것입니다. 더 좋은 방법은 boxpack 속성을 이용하는 것입니다. 이 속성은 상자내의 자식 속성을 어떻게 포장 할지를 나타내는 속성입니다. 수평 상자에서는 자식 요소들의 수평 위치를 제어하는데 사용되며, 수직 정렬 상자에서는 수직 위치를 제어하는데 사용됩니다. 이 속성에 사용할 수 있는 값은 다음의 세 가지입니다.

    start 
    자식 요소를 수평 상자에서는 왼쪽에, 수직 상자에서는 위쪽에 위치시키며 이것이 기본값입니다.
    center 
    자식 요소를 상자의 중앙에 위치시킵니다.
    end 
    자식 요소를 수평 상자에서는 오른쪽에, 수직 상자에서는 아래쪽에 위치시킵니다.

    pack 속성은 자식 요소가 아니라 자식 요소를 포함하는 상자에 적용해야 합니다.

    앞의 예제를 자식 요소들이 중앙에 오도록 하려면 다음과 같이 수정할 수 있습니다.

    예제 4 : Source View

    <box flex="1" pack="center">
      <button label="Happy"/>
      <button label="Sad"/>
    </box>
    

    이제 창의 크기가 변경되면 버튼이 모두 가로 방향의 중앙에 위치합니다. 이를 앞의 예와 비교해 보세요.

    상자 정렬

    위의 Happy-Sad 예에서 창의 너비를 변경하면 상자의 너비도 함께 변경됩니다. 창의 높이를 변경하면 버튼의 높이도 변하는 것을 보실 것입니다. 이것은 다른 방향으로는 자동으로 크기 유연성이 지정되기 때문입니다.

    이러한 동작 방법은 align 속성을 이용하면 조정할 수 있습니다. align 속성은 수평 상자에서는 자식 요소의 수직 위치를, 수직 상자에서는 자식 요소의 수평 위치를 조정하는데 사용합니다. 사용할 수 있는 값은 pack과 비슷합니다.

    start 
    자식 요소를 수평 상자의 윗부분에, 수직 상자의 왼쪽에 정렬합니다.
    center 
    자식 요소를 상자의 중앙에 정렬합니다.
    end 
    자식 요소를 수평 정렬 상자의 아래쪽에, 수직 정렬 상자의 오른쪽에 정렬합니다.
    baseline 
    문자열이 위로 올라오도록 자식 요소를 정렬합니다. 이 속성은 수평 정렬 상자에만 적용됩니다.
    stretch 
    이 속성의 기본값으로, 자식 요소들이 유연한 요소처럼 상자의 크기에 맞춰 늘어나도록 합니다. 단, 상자의 정렬 방향의 반대 방향에만 적용됩니다.

    pack 속성과 마찬가지로 align 속성도 자식 요소가 아닌 자식 요소를 포함하는 상자에 적용해야 합니다.

    다음의 예제에서 첫 번째 상자는 align 속성이 지정되지 않았기 때문에 자식 요소들이 늘어나게 됩니다. 하지만 두 번째 상자는 align 속성에 따라 자식 요소들이 한 가운데에 정렬되는 것을 볼 수 있을 것입니다.

    예제 5 : Source View

    <?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>
    
    Image:boxstyle2-b.png

    여러분은 pack과 align 속성 대신 style의 -moz-box-pack-moz-box-align을 사용할 수 있습니다.

    상자의 여러 가지 속성에 대해 직접 시험해 보시려면, 상자 정렬 예제를 이용해 보시기 바랍니다.

    문자열과 버튼 자르기

    여러분은 아마 버튼의 최대 너비보다 긴 라벨을 가진 버튼 요소를 만들지도 모릅니다. 물론 문자열이 들어갈 만큼 버튼을 크게 만들면 되겠지만, 버튼(과 라벨을 가진 다른 요소)의 crop 속성을 이용하면 라벨이 너무 큰 경우 라벨이 잘려지는 방법을 제어할 수 있습니다.

    문자열이 잘리면 잘린 부분에 말줄임표(...)가 나타납니다. crop 속성에 사용할 수 있는 값은 아래의 네 가지입니다.

    start 
    문자열의 왼쪽이 잘립니다.
    end 
    문자열의 오른쪽이 잘립니다.
    center 
    문자열의 왼쪽과 오른쪽이 모두 잘립니다.
    none 
    이 속성의 기본값으로 문자열이 잘리지 않습니다.

    이 속성은 대화창이 어떤 크기에서든 사용할 수 있도록 만들 때 정말로 유용합니다. crop 속성은 label 속성을 갖는 요소들에서 사용할 수 있습니다. 아래의 예는 crop 속성의 사용법을 보여줍니다.

    예제 6 : Source View

    Image:boxstyle2.png
    <button label="Push Me Please!" crop="end" flex="1"/>
    

    창이 줄어들면 문자열의 오른쪽이 잘리는 것을 볼 수 있습니다.

    지금까지의 파일 찾기 예제 : Source View

    다음에는 지금까지 살펴본 상자 모델에 대한 요약과 함께 박스 모델에 대한 추가적인 세부 사항에 대해 알아보겠습니다.

    문서 태그 및 공헌자

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