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

Groupboxes

이 단원에서는 요소들을 그룹에 포함하는 방법에 대해 알아 보겠습니다.

그룹상자

HTML에서는 여러 가지 요소를 그룹핑하기 위한 목적으로 사용할 수 있는 fieldset 요소를 제공합니다. 이 때 요소들을 둘러 싸는 테두리가 생기기 때문에 각 요소가 서로 연관되어 있음을 알 수 있게 됩니다. 체크박스의 그룹이 하나의 예가 될 수 있습니다. XUL은 비슷한 기능을 위해 사용될 수 있는 groupbox 요소를 제공합니다.

이름에서 알 수 있듯이 groupbox는 상자의 한 형태입니다. 따라서 groupbox 내부의 요소들은 상자에 적용되는 규칙에 따라 정렬됩니다. 하지만 groupbox와 일반 상자 사이에는 다음의 두 가지 차이점이 있습니다.

  • 기본적으로 groupbox에는 둥근 사각형 테두리가 그려지며, CSS를 이용해서 이를 변경할 수 있습니다.
  • groupbox는 테두리의 위쪽에 제목(caption)을 넣을 수 있습니다.

groupbox도 상자의 한 유형이기 때문에 상자에서 사용하는 orientflex같은 속성을 사용할 수 있습니다. groupbox에는 어떤 요소들도 넣을 수 있지만, 보통 서로 관련된 요소들만 넣습니다.

groupbox의 위쪽 제목은 caption 요소를 사용해서 생성할 수 있습니다. caption은 HTML의 legend 요소와 비슷한 기능을 합니다. 제목을 넣을 때는 caption을 첫 번째 자녀 요소로 넣어 주면 됩니다.

간단한 groupbox 예제

아래는 간단한 groupbox 예제입니다.

예제 1 : Source View

Image:titledbox1.png
<groupbox>
  <caption label="Answer"/>
  <description value="Banana"/>
  <description value="Tangerine"/>
  <description value="Phone Booth"/>
  <description value="Kiwi"/>
</groupbox>

이 예제를 실행하면 네 개의 문자열을 둘러 싸는 Answer 라는 제목을 가진 상자가 표시됩니다. groupbox의 정렬 속성은 세로 정렬이 기본이기 때문에 문자열이 세로로 차곡차곡 쌓이게 됩니다.

좀 더 복잡한 제목

caption 요소에 자식 요소를 넣으면 더 다양한 기능을 구현할 수 있습니다. 예를 들어 모질라의 글꼴 설정 판넬은 펼침 메뉴(drop-down menu)를 제목으로 사용하고 있습니다. 자식 요소는 무엇이든 쓸 수 있지만 보통 체크박스나 펼침 메뉴가 사용됩니다.

예제 2 : Source View

Image:groupbox2.png
<groupbox flex="1">
  <caption>
    <checkbox label="Enable Backups"/>
  </caption>
  <hbox>
    <label control="dir" value="Directory:"/>
    <textbox id="dir" flex="1"/>
  </hbox>
  <checkbox label="Compress archived files"/>
</groupbox>

이 예제에서는 checkbox가 제목으로 사용되었습니다. 스크립트를 사용하면 checkbox의 선택 여부에 따라 groupbox의 내용을 사용 가능/불가로 전환할 수 있습니다. 이 groupbox는 수평 box 하나를 갖고 있는데 그 안에는 labeltextbox가 포함되어 있습니다. 글상자와 groupbox 둘 다 flex 속성이 적용되었기 때문에 창이 늘어나면 글상자도 함께 늘어납니다. 그 다음의 체크박스는 글상자의 아래에 표시되는데 이는 groupbox의 정렬 방식이 세로 정렬이기 때문입니다. 다음 단원에서는 파일 찾기 대화창에 groupbox를 넣어 보도록 하겠습니다.

라디오 그룹

radiogroup 요소를 사용하면 여러 개의 라디오 버튼을 하나로 묶을 수 있습니다. radiogroup도 상자의 일종입니다. radiogroup은 radio 버튼을 다룰 수 있는 특수 기능 외에는 다른 상자와 다를 게 없기 때문에 안에 어떠한 요소를 넣어도 상관 없습니다.

radiogroup 안에 있는 라디오 버튼들은 그것들이 중첩된 상자내에 있더라도 모두 하나의 그룹이 됩니다. 이는 아래의 예제처럼 라디오 버튼으로 이루어진 구조에 다른 요소를 넣을 때 유용하게 사용될 수 있습니다.

예제 3 : Source View

<radiogroup>
  <radio id="no" value="no" label="No Number"/>
  <radio id="random" value="random" label="Random Number"/>
  <hbox>
    <radio id="specify" value="specify" label="Specify Number:"/>
    <textbox id="specificnumber"/>
  </hbox>
</radiogroup>

한 가지 유의할 점은 radiogroup 요소는 테두리가 생기지 않는다는 것입니다. 만약 테두리와 제목이 필요하다면 radiogroup을 groupbox에 포함시켜 사용하시면 됩니다.

다음에는, 지금까지 배워온 내용을 이용해서 몇 가지 요소들을 파일 찾기 대화창에 추가해 보겠습니다.

문서 태그 및 공헌자

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