mozilla
검색 결과

    Box Model Details

    지금까지 우리는 상자모델의 많은 기능을 살펴 보았습니다. 여기서는 몇 가지 예제를 가지고 좀 더 세부적인 내용을 알아보겠습니다.

    레이아웃에 대한 추가 내용

    min-widthmax-height같은 스타일 속성은 어떤 요소에든 적용할 수 있습니다. 지금까지는 이 속성들을 버튼과 글상자에만 적용했지만, 여백이나 상자 요소에도 적용할 수 있습니다. 게다가, flex 속성은 어떤 요소에든 적용할 수 있습니다.

    예제 1 : Source View

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

    위의 예제에서, 3개 요소는 유연하기 때문에 스스로 크기가 조절됩니다. 2개의 버튼은 최소 넓이를 100픽셀로 하고 있습니다. 버튼은 이 크기 이하로 절대 작아지지 않지만 더 늘어날 수는 있습니다. 여기서 해당 창은 대략 200픽셀 정도의 넓이가 될 것입니다. 이는 두개의 버튼이 들어가기에 충분한 공간입니다. 3개 요소 모두가 유연하기 때문에, 더 많은 공간을 필요로 하지 않으며 flex 속성에 의해 빈 공간이 생기지 않습니다.

    Image:boxdet1.png

    그림에서처럼, 두 개의 버튼은 이들을 포함하는 hbox에 맞도록 수직 방향으로도 늘어나는 것을 볼 수 있습니다. align 속성은 가로상자에서 이러한 동작을 제어하는데 사용됩니다. 또한 여러분은 요소나 상자에 최대 높이를 지정해서 늘어나지 못하게도 할 수 있습니다. 어떤 상자가 최대 높이값을 가지면, 상자내에 있는 요소들은 이것에 의해 제약을 받게 된다. 그러나 여기에도 문제가 있는데, 사전에 해당 요소가 얼마나 커야 할지 알아야 한다는 것입니다.

    예제 2 : Source View

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

    상자 모델 정리

    복잡한 레이아웃을 만드려면, 일반적으로 중첩된 상자를 추가하고 일부 요소에 최대 최소 크기를 지정해주고, 어떤 요소가 flex 속성을 가지도록 해야 합니다. 가장 좋은 인터페이스는 다양한 크기에서도 문제없이 표시될 수 있는 것입니다. 여러분 스스로 여러 경우를 시험해 보지 않으면 상자 모델을 이해하기 어려우실 겁니다.

    다음은 두 가지 상자 형식의 기본적인 내용을 설명하고 있습니다.

    가로상자

    1. 서로 이웃하는 요소를 가로 방향으로 배치합니다.
    2. 유연한 요소(flex 속성을 가진 요소)는 가로로 크기를 조절합니다.
    3. pack 속성은 자식 요소의 가로 방향 위치를 제어합니다.
    4. align 속성은 요소의 행이 어떻게 세로로 정렬될 지를 제어합니다.

    세로상자

    1. 세로 방향으로 요소들을 배치합니다.
    2. 유연한 요소(flex 속성을 가진 요소)는 세로로 크기를 조절합니다.
    3. pack 속성은 자식 요소의 세로 방향 위치를 제어합니다.
    4. align 속성은 자식 요소의 가로 정렬 방식을 제어합니다.

    상자는 테이블과 같은 HTML 요소 내부를 포함해서 XUL 어디에든 사용할 수 있습니다. 그러나 그러한 레이아웃은 일부 HTML 요소에 의해 제어되게 됩니다. 이는 flex 속성이 여러분이 원하는 대로 작동하지 않을 수도 있다는 것을 의미합니다. flex 속성은 상자 또는 상자 타입 요소 바로 안에 있는 요소들에 대해서만 적용된다는 점을 기억하세요.

    레이아웃 예제

    여백 사용하기

    예제 3 : Source View

    <hbox>
      <button label="One"/>
      <spacer style="width: 5px"/>
      <button label="Two"/>
    </hbox>
    

    여기서, spacer 요소는 두개의 버튼 사이의 구분자로 사용되고 있으며, 정확하게 5픽셀로 설정되어 있습니다. 여러분은 CSS의 margin 속성을 사용해서 여백을 설정할 수도 있습니다.

    버튼 중앙정렬

    예제 4 : Source View

    <hbox pack="center" align="center" flex="1">
      <button label="Look at Me!"/>
      <button label="Push Me!"/>
    </hbox>
    

    이 예제는 2개의 버튼을 포함하고 flex 속성이 지정된 가로 상자입니다. 해당 상자는 버튼들을 가로 중앙 정렬하기 위해 pack 속성을 사용합니다. align 속성은 버튼들을 세로로 정렬하고 있습니다. 결과적으로 상자 내 버튼들은 양방향에서 중앙에 위치하게 됩니다. 이 예제는 세로상자에도 마찬가지로 적용되는데, 다른점은 2번째 버튼이 우측이 아니라 아래에 놓이게 된다는 것입니다.

    파일 찾기 대화창

    예제 5 : Source View

    <?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>
    
    Image:boxdet-ex3.jpg

    여기서 2개의 세로상자가 만들어 지는데, 하나는 글상자를 포함하고 다른 하나는 체크상자와 버튼을 포함합니다. 좌측 상자는 우측보다 3배 큰 유연성을 가지고 있어(flex값이 3배 큼) 창의 크기가 커지면 추가 공간도 그만큼 커지게 된다. 오른쪽 상자는 최소 넓이를 150픽셀로 제한하고 있습니다.

    글상자는 flex 속성을 가지고 있기 때문에 창 크기가 바뀌면 따라서 바뀌게 됩니다. 글상자 또한 최소넓이를 100픽셀로 제한하고 있습니다. 오른쪽 상자에는 라벨이 있는 체크상자가 있습니다. 체크상자 바로 아래에는 여백(spacer) 요소가 있습니다. 여백(spacer)은 커지거나 줄어들게 되지만 30픽셀보다 커지지는 않습니다. 결과적으로 체크상자와 찾기(Find) 버튼은 30픽셀 보다 크지는 않을 공간으로 서로 떨어져 나타나게 됩니다.

    2번째 상자는 start라는 정렬 속성을 가지고 있습니다. 이 속성은 자식요소를 좌측 끝에 정렬시킵니다. 이를 지정하지 않았다면, 기본값은 stretch가 되는데, 자식요소를 가로으로 주욱 펼치게 되었을 것입니다. 찾기(Find) 버튼의 크기가 변하지 않게 하기 위해서는 정렬 속성을 지정해야 합니다.

    다음에는 좀 더 특별한 유형의 상자인 the groupbox에 대해 알아보겠습니다.

    문서 태그 및 공헌자

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