draw.io로 화면 레이아웃 그림 그리기 (GUI/HTML로 표 만들기)

Draw.io는 GUI를 사용하여 프로세스 맵, 클래스 맵, 시퀀스 맵 등을 만들 수 있는 도구입니다.
브라우저에서 시작할 수 있으며 Google 드라이브 및 Giithub과 공동 작업할 수 있습니다.
데스크톱 버전이 있기 때문에 현지에서 일할 수 있습니다.VS 코드에서도 확장 기능을 사용할 수 있습니다.

화면 레이아웃, 선 프레임 도구로 사용할 옵션

UI 디자인 도구로 Adobe XD와 Invision Studio 등이 있지만, 이번에는 사내 시스템 관리 화면 개발 시 UI 디자인인 만큼 풍부한 기능보다는 더 잘할 수 있다는 점에 무게를 뒀다.
누구나 무료로 이용할 수 있고 HTML에서도 편집이 가능하며 VS 코드에서도 드라우를 이용할 수 있다.io를 선택합니다.

설계 제작 프로세스

UI 설계에 필요한 부품이 Layout 템플릿에 있습니다. 선택하십시오.

기본 프로세스는 왼쪽 패널에서 사용할 그래픽을 선택하고 오른쪽 패널 및 도구 모음에서 스타일 및 속성을 편집하는 간단한 프로세스입니다.

테이블 작성

기본적인 도형 제작은 파워포와 같은 것으로 특별히 적합한 점은 없지만 표면적인 제작 방법은 좀 번거롭다.
테이블의 템플릿은 Miscellaneous: 기타)에 있습니다.

크게 다음과 같은 두 가지로 나눌 수 있다.

GUI를 통해서만 편집할 수 있는 항목이 있는 테이블

HTML로만 편집할 수 있는 항목이 있는 테이블

한 번에 만드는 표의 종류는 뒤에서 변경할 수 없기 때문에 편집하는 방법을 먼저 결정해야 한다.

GUI만 편집할 수 있는 항목 테이블

"Table1", "Table2"등 접두사에 "table"테이블이 있는데 GUI만 편집할 수 있다.
드래그 앤 드롭을 통해 다음 작업을 수행할 수 있습니다(HTML에서는 편집 불가).

열의 폭과 행 높이 설정

줄 바꿈

다른 테이블에서 행 이동

메쉬 열기/닫기 또는 스타일 수정

"Table1"은 라인의 확인란에서 메쉬를 켜거나 끌 수 있음

"Table2"는 원래 격자가 없으며 뒤에 격자를 추가할 수 없음

HTML에서만 항목을 편집할 수 있는 테이블

HTML Table1과 HTML Table2처럼 조인트에 HTML Table이 있는 테이블은 HTML만 편집할 수 있습니다.
선택 테이블을 두 번 클릭하여 아이콘을 사용하여 HTML에서 편집할 수 있습니다.
이미지는 HTML Table3입니다.


HTML Table3은 다음과 같습니다.

<table border="1" width="100%" style="width: 100% ; height: 100% ; border-collapse: collapse">
    <tbody>
        <tr>
            <td align="center">Value 1</td>
            <td align="center">Value 2</td>
            <td align="center">Value 3</td>
        </tr>
        <tr>
            <td align="center">Value 4</td>
            <td align="center">Value 5</td>
            <td align="center">Value 6</td>
        </tr>
        <tr>
            <td align="center">Value 7</td>
            <td align="center">Value 8</td>
            <td align="center">Value 9</td>
        </tr>
    </tbody>
</table>

적당히 양식, 추가 행 등을 기술하다.
위의 HTML Table3에는 보기 쉽게 들여쓰기가 포함되지만 HTML을 압축하고 기술해야 합니다.

열의 폭과 행 높이 설정

줄 바꿈

다른 테이블에서 행 이동

메쉬를 켜거나 끄거나 스타일을 변경

위의 GUI만 편집 가능한 항목 테이블에서 편집 가능한 항목은 HTML 테이블에서 편집할 수 없습니다.스타일을 HTML로 직접 기술해야 합니다.