정기 업데이트 소식을 전해드려요. [업데이트 확인하기]
Flextudio
릴리즈노트
Flextudio 가이드
Flextudio 가이드
  • 플렉스튜디오 처음 시작하기
    • GETTING STARTED
      • 0. 플렉스튜디오 준비하기
      • 1. 워크스페이스 시작하기
      • 2. 시나리오 개발하기
      • 3. 앱 배포하기
      • 4. 앱 사용하기
    • 플렉스튜디오 로드맵
    • 튜토리얼(Tutorial)
      • 메모장 앱 만들기(필수)
        • 1. [Design] 디자인하기
        • 2. [Event] 화면 이동 구현하기
        • 3. [Data] 컴포넌트에 데이터 연결 하기
      • 템플릿을 활용해 앱 만들기(초급)
        • 0. 시나리오 생성하고 사용하기
        • 1. [Design] 디자인 템플릿 사용하기
        • 2. [Event] 클릭 시 스텝(Step) 이동하기
        • 3. [Data] 컴포넌트에 데이터 연결하기
        • 4. [Data] 이벤트 스크립트로 게시물 삭제 구현하기
      • 약속잡기 앱 만들기(중급)
        • 0. 시나리오 생성하기
        • 1. [Data] Firestore 준비
        • 2. [Event] 약속 만들기
        • 3. [Data] 약속 데이터 생성
        • 4. [Event]약속 조회하기
        • 5. 사용자 SNS로그인
        • 6. 앱 배포/링크
        • 7. [Event] 약속 회신하기
        • 8. 배포하고 확인하기
        • 9. 추가 상세 가이드
  • 개념 학습하기
    • 시나리오의 구성요소
    • 컬렉션(Collection)과 섹터(Sector)
    • 사용자 입력에 의한 데이터 변화
    • 이벤트와 서비스 구동 방법
    • 대체 텍스트 사용하기
    • [심화] Filter - 섹터(Sector) Status, Condition
    • [심화] Step의 구성과 생애주기
    • [심화] 컬렉션의 카테고리
    • [심화] 데이터의 상태관리(Sector Status)
    • [심화] 카테고리 연결관계
  • 워크스페이스 콘솔 가이드
    • 워크스페이스 콘솔 인터페이스
      • 앱
        • 시나리오 관리
        • 레이아웃관리
        • 데이터연결
        • 고객관리
        • 링크앱팩설정
        • 링크관리
        • 서비스오류로그
        • SDK설정
        • 앱정보설정
      • 앱팩
      • 개발
        • 시나리오
        • 권한키관리
        • 패키지설치
      • 데이터
        • API 연동
        • 호스팅 폴더
        • FlexSQL
      • 고객 관리
        • 설정 페이지
      • 에뮬레이터
      • 워크스페이스 설정
        • 기본정보
        • 개발자 관리
        • Flex API Key관리
  • 시나리오 개발하기
    • 시나리오 스튜디오 인터페이스
      • 상단영역
      • 시나리오 관리
      • 시나리오 설정
      • 시나리오 배포
      • 테마색 설정
      • 하단패널-Collection
      • 하단패널-DataBase
      • 하단패널-Authkey
      • DB 연결하기
    • 디자인 모드 (Design Mode)
      • 디자인 템플릿
      • 고정 레이아웃
      • 너비 높이
      • 디스플레이
      • 마진
      • 패딩
      • 배경
      • 보더
      • 색상
      • 스크롤 타입
      • 스타일 유형
      • 아이콘
      • 절대값 위치 설정
      • 컨트롤 명
      • 캡션
      • 텍스트
      • 투명도 설정
      • 힌트
      • 인풋 컨트롤 변경
    • 개발 모드 (Dev Mode)
      • 컴포넌트(Component)
        • 컴포넌트 상태
        • 로드스크립트
        • 데이터(Data)
        • 이벤트(Event)
        • 컴포넌트 동적 활용(컴포넌트 아이디)
      • 이벤트
        • 이벤트 서비스 스크립트 API 액션 추가
        • API 호출
        • 함수 자동 생성
        • 스크립트 에디터
      • 서비스
        • FlexSQL
        • FlexAutoQuery
        • Firestore
        • GoogleSheet
        • Flextudio API - User
      • 데이터소스
      • Etc
        • Collections
        • Language
        • Scenario
    • 컴포넌트
      • 스텝
      • 그룹
      • 레이아웃
      • 컨트롤
        • Approval
        • Button
        • CalendarNavigator
        • Calendar Schedule
        • Checkbox
        • ComboBox
        • DatePicker
        • Embed
        • FileUpload
        • Image
        • InputDate
        • InputMask
        • InputNumber
        • InputSearch
        • InputText
        • Line
        • MultiInputBox
        • Radio
        • Sheet (Beta)
        • Signature
        • Tab
        • Text
        • TimeTable
        • Tree
      • 스텝 버튼
  • 디버거
    • 디버거 인터페이스
    • 실행 내역 확인하기
    • 콘솔
    • 데이터 상태 확인하기
    • 서비스 테스트
      • Test-API
      • Test-SQL
  • 참고
    • FAQ
      • 시나리오에서 앱을 배포했는데, 라이브에 적용이 안되요.
    • 단어집
      • 권한키 (AuthKey)
      • 이너블럭
      • 컬렉션 키
      • FlexDB
      • 공개앱(오픈앱)
      • ParamBlock/ResultBlock
      • _SUID(suid)
    • 단축키
    • 개발 예제
      • 스크롤 페이징 샘플
    • 심화 실습
      • Google Map 그려주기
        • 1. Google Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • Naver Map 그려주기
        • 1. Naver Map 생성영역 생성
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • QR코드 생성하기
        • 1. 화면구성하기
        • 2. 이벤트 구성하기
        • 3. 이벤트 연결하기
      • 목적지 경로 거리 및 시간 Google Map
        • 1. Google Map Distance Matrix API 추가하기
        • 2. 화면 구성하기
        • 3. 이벤트 구성 및 연결하기
        • 4. API 호출 결과 후처리하기
    • 데이터 연동 방법
      • 자사 API 백엔드 시스템
      • 외부 DB 연동
      • Firestore 연동
      • GoogleSheet 연동
      • K-System 연동
      • Airtable 연동
    • 앱 출시하기 (SDK)
      • Android SDK
      • iOS SDK
Powered by GitBook

ⓒ flextudio

On this page
  • 사용방법
  • 기능설명
  • 캡션 설정이 가능한 컨트롤
  • 따라하기

Was this helpful?

  1. 시나리오 개발하기
  2. 디자인 모드 (Design Mode)

캡션

인풋 박스 내용을 설명하는 캡션의 속성을 변경할 수 있어요.

Previous컨트롤 명Next텍스트

Last updated 9 months ago

Was this helpful?

캡션은 인풋박스를 사용할 때 필요에 따라 붙이는 제목 및 간단한 설명입니다. 이 이미지에서는 동호회 소분류가 캡션이에요.

사용방법

  1. 캡션이 있는 컨트롤을 삽입합니다.

  2. 원하는 문구를 입력합니다.

  3. 텍스트의 크기, 색상, 두께를 설정합니다.

  4. 정렬을 설정합니다.

캡션이 필요하지 않다면 캡션 텍스트를 삭제해 박스만 사용할 수 있어요.

기능설명

모양
기능
속성
의미

색상

테마, Hex

사이즈

px(픽셀)

텍스트 사이즈를 숫자로 입력하여 변경 (기본 14px)

모양

볼드(Bold)

텍스트 컨트롤 전체 볼드 처리

가로 정렬

좌측

텍스트 컨트롤 너비 기준으로 좌측 정렬

가운데

텍스트 컨트롤 너비 기준으로 가운데 중앙 정렬

우측

텍스트 컨트롤 너비 기준으로 우측 정렬

캡션위치설정

상단(기본값)

컨트롤 상단에 캡션 배치

좌측

컨트롤 좌측에 캡션 배치

캡션 설정이 가능한 컨트롤

모양
기능
설명

사용자가 텍스트를 입력할 수 있는 컨트롤

사용자가 숫자를 입력할 수 있는 컨트롤 (숫자, 소수점, 비밀번호)

사용자가 숫자를 입력할 수 있는 컨트롤 (시간, 금액, 날짜 직접입력)

사용자가 여러 선택지 중 하나를 선택할 수 있는 컨트롤 (펼쳐서 보기)

사용자가 검색을 할 수 있는 컨트롤

사용자에게 달력이 팝업으로 뜨며 날짜를 선택할 수 있는 컨트롤

사용자가 긴 내용의 텍스트를 입력할 수 있는 컨트롤

사용자가 여러 선택지 중 하나만 선택할 수 있는 컨트롤

지정된 사용자가 결재선으로 등록되어 확인할 수 있는 컨트롤

따라하기

화면 속 [시작하기]버튼을 눌러 데모를 확인하실 수 있습니다.

[] 을 체크합니다.

텍스트의 컬러를 변경

인풋텍스트

인풋넘버

인풋마스크

콤보박스

인풋서치

인풋데이트

멀티인풋박스

라디오

결재

색상
InputText
InputNumber
InputMask
ComboBox
InputSearch
InputDate
MultiInputBox
Radio
Approval