> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined/tab.md).

# 탭(Tab) 적용 가이드

X2BEE의 메뉴의 작업 공간을 구분하고 탭을 클릭하여 작업 공간의 화면을 이동하는 역할을 합니다.

탭을 구성하는 요소와 활용 정보를 설명합니다.

***

## 기본 구성 요소 <a href="#undefined" id="undefined"></a>

1. 탭이 정의하는 해당 정보의 상단에 탭 그룹을 구성합니다.
2. 입력이 가능한 탭의 경우 저장 버튼은 화면 단위로 저장할 수 있게 공통 영역에 포함하여 구성합니다.
3. 탭 개수가 많은 경우, 탭 방향키를 사용할 수 있습니다. (Tab in Tab(세로형) 이중탭은 사용하지 않습니다.)

## 배치 <a href="#undefined" id="undefined"></a>

가장 중요하고 선택 빈도가 높은 항목 또는 작업 순서 상 첫번째 탭을 좌측에 배치하고 활성화 합니다.

탭 배치를 위해 다음 가이드를 참고해야 합니다.

* 탭은 한 줄로 구성하며 두 줄로 표현하지 않음
* 선택 탭은 선택 되지 않은 탭과 구분할 수 있도록 시각적으로 명확하게 표현해야 함
* TabControl의 탭의 개수는 브라우저의 메모리 및 로딩 속도를 고려해 5개의 탭 생성을 권장하며, 최대 10개까지 생성을 제한함

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/%ED%83%AD%20%EC%A0%95%EB%A0%AC.png" alt=""><figcaption></figcaption></figure>

## 정보 유형별 탭 <a href="#undefined" id="undefined"></a>

A타입

같은 조회조건으로 검색된 동일한 레벨의 정보 그룹을 탭으로 나타낸다.

동일레벨의 정보가 분할하여 보여지는 타입과 업무 처리 순서에 따라 배열하는 프로세스형 타입으로 사용됩니다.

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/tab%20tayp.png" alt=""><figcaption></figcaption></figure>

B타입

관련 화면을 모아서 업무 순서대로 배열한 방식 탭 안에 개별 조회 영역을 포함할 수 있습니다.

<br>

<figure><img src="https://tech.x2bee.com/download/attachments/14975047/Untitled%20Diagram.drawio.png" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined/tab.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.