가이드 - 정보화사업관리시스템

제목(h3) .bullet

제목(h3) 밑줄 .under

가로 배열 : position 사용 .title_wrap

계약총액(원) : 000,000,000원

2중 가로 배열 : flex 사용 .title_wrap2

차세대 지방세정보시스템 통합구축 변화관리 컨설팅

계약기간 2021.10.20 ~ 2022.06.16

weak / 16px 500 #606060

timid / 16px 400 rgba(0,0,0,0.6)

컨텐츠 박스 .content_box

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum.

하단 모서리가 둥근 경우 .content_box_round

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum.

한 줄 .line

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum.

두 줄 .line2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ea velit fugit saepe, obcaecati, libero, voluptates natus ullam eaque perspiciatis corrupti laborum aut itaque perferendis nesciunt? Nostrum illo cumque illum.

form과 버튼 목록이 함께 있는 경우 .two_box_wrap

기본 예산 계획의 검색 필터
사업명
회계연도	사업기간	~	담당자
사업유형	사업상태		담당부서

기본 테이블 .table1

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

둥근 모서리 + .round

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

줄무늬 + .stripe

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

위에 한 줄 .table1 + .line

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

배경 및 선 없음 / 위아래 두줄 .table2

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

내부에 짧은 세로선 / 위아래 두줄 .table2 + .line2

tbody의 th	tbody의 td	tbody의 th	tbody의 td
tbody의 th	tbody의 td	tbody의 th	tbody의 td
tbody의 th	tbody의 td	tbody의 th	tbody의 td

tbody 선 없음 / 위에 한 줄.table2 + .line3

thead의 th	thead의 th	thead의 th
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td
tbody의 th	tbody의 td	tbody의 td

테이블 분활화면 타입1.item-wrap + .-type01

root

ITGS
- 예산타당성심사
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
- 예산타당성심사
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미
  - 더미더미

기본 예산 계획의 검색 필터
상위메뉴ID필수
메뉴ID
메뉴명필수
사용여부필수	사용 사용중지
링크URL필수
파라미터필수
순서필수
타겟필수

테이블 분활화면 타입2.item-wrap + .-type02

메타설정관리의 메타명, 메타영문영 내용의 표
메타명
메타명

메타설정관리의 메타속성명, 메타명칭여부, 메타속성영문명, 속성순서 내용의 표
메타속성명필수		메타명칭여부필수	Y N
메타속성영문명필수		속성순서

테이블 분활화면 타입3.item-wrap + .-type03

서울시청

본청
- 시장
  - 대변인
  - 서울혁신기획관
    - 더미더미
  - 시민소통기획관
    - 더미더미
  - 청년청
  - 기획조정실
    - 더미더미
  - 소방재난본부
    - 더미더미
- 행정1부시장
  - 더미더미
- 행정2부시장
  - 더미더미
- 정무부시장
  - 더미더미
노동공정상생정책관
- 더미더미
도시기반시설본부
- 더미더미

사용자권한설정의 권한명, 권한설명 내용의 표
권한명	권한설명
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
EA	EA담당
데이터센터	데이터센터 이프라 통합담당
데이터센터	데이터센터 이프라 통합담당

전체 보더선 + thead 회색 bg.table3

예산편성세부내역의 예산과목, 사업비(단위:천원), 합계, 전전년도 결산(2020), 전년도(2020), 당해년도(2022), 향후(2021), 회계구분, 비고 내용의 표
예산과목 (공공운영비,전산개발비등)	사업비(단위:천원)
예산과목 (공공운영비,전산개발비등)	합계	전전녀도 결산(2020)	전년도(2020)	당해년도(2022)			향후(2021)
총예산	000,000	000,000	000,000	000,000	회계구분	비고	000,000
공공운영비	000,000	000,000	000,000	000,000			000,000

테이블 정렬, bg

예산편성세부내역의 예산과목, 사업비(단위:천원), 합계, 전전년도 결산(2020), 전년도(2020), 당해년도(2022), 향후(2021), 회계구분, 비고 내용의 표
.tal (테이블 좌측 정렬)	.tac (테이블 중앙 정렬)	.tar (테이블 우측 정렬)
.-white (하얀색 bg)	.-grey (회색 bg)

밑줄이 생기는 메뉴 (공통) .메뉴명_menu

탭 메뉴 .tab_menu

탭 메뉴(박스) .tab_menu + .box

Input

label

Input-캘린더

~

Select .sel_wrap

Search .sear_wrap

Radio .radio_wrap

사업별 상세

현황 및 추이

Radio .radio_wrap + .radio-group

신규

본청

사업소

투자출연기관

Check box

운영 및 유지관리

시스템구축

DB구축

컨설팅

H/W 및 HW구매

기타(교육,보안,정책연두 등)

Date .date_box

textarea .textarea-wrap

첫 페이지로 이동 이전 페이지로 이동 다음 페이지로 이동 마지막 페이지로 이동

button

a

btn_square btn_square -type01 btn_square -type02 btn_square -type03 btn_round / 14px

button 오른쪽 정렬.btn-wrap + -right

왼쪽에 붙을 때 .icon_아이콘이름

원 안에 들어갈 때 .icon_circle_아이콘이름

글자 없이 단독 사용 .self_icon_아이콘이름

달력, 돋보기, 삭제 아이콘

필수 입력.require

필수입력필수

텍스트 .process

평가계획
수립
추천요청
정보등록
추천요청
결재
추천요청
승인결재
평가위원
선정
개최결과
등록
개인정보
파기확인서 제출
완료

이미지 .process_info

진행중
진행완료
진행예정

스텝 1.step_box

예산타당성심사
- 기본(예산)계획등록
- 예산타당성심사요청
- 예산타당성심사결과조회
- 예산반영현황등록
제안요청서검토
- 사업계획등록
- 제안요청서검토요청
- 제안요청서검토결과조회
- 제안요청서최종본등록
계약 및 대금지급
- 계약등록
- 업체등록
- 하도급계약등록
- 대금지금(하도급)등록
사업수행
- 사업착수
- 관리대상산출물 정의
- 관리대상산출물 등록
사업종료
- EA정보현행화
- 검사
성과관리점검
- 성과관리점검

스텝 2.step_box + .-wide

기본계획
등록
2021.08.11
예산타당성
작성
2021.08.11
심사요청
2021.08.11
심사접수
2021.08.11
심사완료
2021.08.11
심사확정
2021.08.11

사각형 .square_list

EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리

원형 .bullet_list

EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리

작은 원형 .bullet_list + .sm

EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리
EA기반의 서울시 정보화업무 추진을 위한 EA운영 및 품질관리

UI Style Guide

Title

제목(h3) .bullet

제목(h3) 밑줄 .under

가로 배열 : position 사용 .title_wrap

계약총액(원) : 000,000,000원

2중 가로 배열 : flex 사용 .title_wrap2

Text Style

Content Box

컨텐츠 박스 .content_box

하단 모서리가 둥근 경우 .content_box_round

한 줄 .line

두 줄 .line2

form과 버튼 목록이 함께 있는 경우 .two_box_wrap

Table

기본 테이블 .table1

둥근 모서리 + .round

줄무늬 + .stripe

위에 한 줄 .table1 + .line

배경 및 선 없음 / 위아래 두줄 .table2

내부에 짧은 세로선 / 위아래 두줄 .table2 + .line2

tbody 선 없음 / 위에 한 줄.table2 + .line3

테이블 분활화면 타입1.item-wrap + .-type01

테이블 분활화면 타입2.item-wrap + .-type02

테이블 분활화면 타입3.item-wrap + .-type03

전체 보더선 + thead 회색 bg.table3

테이블 정렬, bg

Menu & Tab

밑줄이 생기는 메뉴 (공통) .메뉴명_menu

탭 메뉴 .tab_menu

탭 메뉴(박스) .tab_menu + .box

Form

Input

Input-캘린더

Select .sel_wrap

Search .sear_wrap

Radio .radio_wrap

Radio .radio_wrap + .radio-group

Check box

Date .date_box

textarea .textarea-wrap

Paging

Button

button

a

button 오른쪽 정렬.btn-wrap + -right

Icon

왼쪽에 붙을 때 .icon_아이콘이름

원 안에 들어갈 때 .icon_circle_아이콘이름

글자 없이 단독 사용 .self_icon_아이콘이름

달력, 돋보기, 삭제 아이콘

필수 입력.require

Process

텍스트 .process

이미지 .process_info

스텝 1.step_box

스텝 2.step_box + .-wide

List

사각형 .square_list

원형 .bullet_list

작은 원형 .bullet_list + .sm