PowerApps에서 캔버스 앱 컨트롤 추가 및 구성Add and configure a canvas-app control in PowerApps

도구 모음, 속성 탭 또는 수식 입력줄에서 직접 캔버스 앱에 다양한 UI 요소를 추가하고 모양과 동작의 측면을 구성합니다.Add a variety of UI elements to your canvas app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. 이러한 UI 요소는 컨트롤이라고 하며, 구성하는 측면은 속성이라고 합니다.These UI elements are called controls, and the aspects that you configure are called properties.

필수 조건Prerequisites

  1. PowerApps 라이선스가 아직 없는 경우 등록한 다음 로그인합니다.If you don't already have a PowerApps license, sign up, and then sign in.

  2. 나만의 앱 만들기 아래 빈 페이지의 캔버스 앱을 마우스로 선택한 후 만들기를 선택합니다.Under Make your own app, hover over Canvas app from blank, and then select Make this app.

  3. 대화형 둘러보기가 나타나는 경우 PowerApps 인터페이스의 주요 영역을 살펴보려면 다음을 선택합니다(또는 건너뛰기 선택).If you're prompted to take the intro tour, select Next to get familiar with key areas of the PowerApps interface (or select Skip).

    화면의 오른쪽 위 모서리의 물음표 아이콘을 선택한 다음 즉석 팁을 선택하여 언제든지 나중에 둘러보기를 선택할 수 있습니다.You can always take the tour later by selecting the question-mark icon near the upper-right corner of your screen and then selecting Take the intro tour.

컨트롤 선택 및 추가Add and select a control

삽입 탭에서 다음의 단계 중 하나를 수행합니다.On the Insert tab, perform either of these steps:

  • 여러 유형의 컨트롤 중 하나를 추가하기 위해 레이블 또는 단추를 선택합니다.Select Label or Button to add one of those types of controls.
  • 컨트롤의 범주를 선택한 다음 추가하려는 컨트롤 유형을 선택합니다.Select a category of controls, and then select the type of control that you want to add.

예를 들어, 새 화면을 선택한 후 앱에 빈 화면을 추가하기 위해 비어 있음을 선택합니다.For example, select New screen, and then select Blank to add a blank screen to your app. (화면은 다른 유형의 컨트롤을 포함할 수 있는 컨트롤의 유형입니다.)(Screens are a type of control that can contain other types of controls.)

화면 추가

Screen2라고 새 화면이 왼쪽 탐색 창에 나타납니다.The new screen is named Screen2 and appears in the left navigation pane. 이 창은 각 컨트롤을 쉽게 선택하고 찾을 수 있도록 앱에서 컨트롤의 계층적 목록을 보여줍니다.This pane shows a hierarchical list of controls in your app so that you can easily find and select each control.

목록의 Screen2

계층적 목록을 확인하기 위해서 삽입 탭에서 레이블을 선택합니다. 계층적 목록의 Screen2 아래에 새 컨트롤이 나타납니다.To demonstrate how this list works, select Label on the Insert tab. The new control appears under Screen2 in the hierarchical list.

목록의 Screen2

화면에서는 기본적으로 6개의 핸들을 가진 상자가 레이블을 둘러쌉니다.In the screen, a box with six handles surrounds the label by default. 어떤 컨트롤이 선택되면 해당 유형의 상자가 둘러쌉니다.That type of box surrounds whichever control is selected. 화면을 클릭하거나 탭(하지만 레이블 외부)하면 레이블의 상자가 사라집니다.If you select the screen by clicking or tapping in it (but outside the label), the box disappears from the label. 레이블을 선택 하 다시 클릭 하거나, 탭 또는 클릭 하거나 컨트롤의 계층적 목록에서 해당 이름을 탭 합니다.To select the label again, you can click or tap in it, or you can click or tap its name in the hierarchical list of controls.

중요

컨트롤을 구성 하기 전에 항상 선택 해야 합니다.You must always select a control before you can configure it.

컨트롤 이름 바꾸기Rename a control

계층적 목록에서 이름을 변경하려는 컨트롤 위로 마우스를 가져가고, 나타나는 줄임표 단추를 선택한 다음, 이름 바꾸기를 선택합니다.In the hierarchical list of controls, hover over the control that you want to rename, select the ellipsis button that appears, and then select Rename. 그런 다음 앱을 쉽게 만들 수 있도록 고유하고 기억하기 쉬운 이름을 입력할 수 있습니다.You can then type a unique, memorable name to make building your app easier.

컨트롤 이름 바꾸기

컨트롤 삭제Delete a control

계층적 목록에서 삭제하려는 컨트롤 위로 마우스를 가져가고, 나타나는 줄임표 단추를 선택한 다음, 삭제 선택합니다.In the hierarchical list of controls, hover over the control that you want to delete, select the ellipsis button that appears, and then select Delete. 화면에 없는 컨트롤을 삭제하려면 캔버스에서 컨트롤을 선택한 후 Delete 키를 누릅니다.To delete a control that isn't a screen, you can also select the control on the canvas, and then press the Delete key.

컨트롤 삭제

화면을 다시 정렬Reorder screens

계층적 목록에서 위로 또는 아래로 이동하려는 화면에 마우스를 가져가고, 나타나는 줄임표 단추를 선택한 다음, 위로 이동 하거나 아래로 이동을 선택합니다.In the hierarchical list of controls, hover over a screen that you want to move up or down, select the ellipsis button that appears, and then select Move up or Move down.

화면을 다시 정렬

참고

앱을 열 때 컨트롤의 계층적 목록 맨 위에 있는 화면이 일반적으로 첫 번째로 나타납니다.When the app is opened, the screen at the top of the hierarchical list of controls usually appears first. 하지만 Navigate 함수를 포함하는 수식으로 OnStart 속성을 설정하여 다른 화면을 지정할 수 있습니다.But you can specify a different screen by setting the OnStart property to a formula that includes the Navigate function.

컨트롤 크기 조정 및 이동Move and resize a control

컨트롤을 이동하려면 십자형 화살표가 표시되도록 컨트롤 중심 위로 마우스를 가져간 다음 다른 위치로 컨트롤을 끌어 옵니다.To move a control, select it, hover over its center so that the four-headed arrow appears, and then drag the control to a different location.

컨트롤 이동

컨트롤의 크기를 조정하려면 선택 상자에 임의 핸들 위로 마우스를 가져가고 나타나는 양방향 화살표의 핸들을 끕니다.To resize a control, select it, hover over any handle in the selection box so that the two-headed arrow appears, and then drag the handle.

컨트롤 이동

참고

이 항목 뒷부분 설명처럼, 수식 입력줄에서 X, Y, HeightWidth 속성의 여러 조합을 수정하여 컨트롤의 크기를 조정하거나 이동할 수 있습니다.As this topic describes later, you can also move and resize a control by modifying any combination of its X, Y, Height, and Width properties in the formula bar.

레이블 또는 단추 텍스트 변경Change the text of a label or a button

레이블 또는 단추를 선택하고, 컨트롤에서 표시되는 텍스트를 두 번 클릭한 후 원하는 텍스트를 입력합니다.Select a label or button, double-click the text that appears in the control, and then type the text that you want.

텍스트 변경

참고

항목 뒷부분 설명처럼, 수식 입력줄에서 Text 속성을 수정하여 텍스트를 변경할 수도 있습니다.As this topic describes later, you can also change this text by modifying its Text property in the formula bar.

도구 모음에서 컨트롤 구성Configure a control from the toolbar

도구 모음에서 컨트롤을 구성하여 컨트롤을 직접 구성하는 것보다 더 광범위한 옵션을 지정할 수 있습니다.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

예를 들어, 탭에서 레이블을 클릭한 다음 레이블의 텍스트 글꼴을 변경합니다.For example, you can select a label, select the Home tab, and then change the font of the text in the label.

글꼴 변경

속성 탭에서 컨트롤 구성Configure a control from the Properties tab

속성 탭을 사용하여, 도구 모음에서 컨트롤을 구성하는 것보다 더 광범위한 여러 가지 옵션을 지정할 수 있습니다.By using the Properties tab, you can specify a wider variety of options than you can by configuring a control from the toolbar.

예를 들어, 컨트롤을 선택한 다음 Visible 속성을 변경하여 컨트롤을 표시하거나 숨길 수 있습니다.For example, you can select a control and then show or hide it by changing its Visible property.

표시 설정

수식 입력줄에서 컨트롤 구성Configure a control in the formula bar

컨트롤을 직접, 도구 모음, 속성 탭에서 구성하는 것 대신 속성 목록의 속성을 선택한 다음 수식 입력줄에서 값을 지정하여 컨트롤을 구성할 수 있습니다.Instead of configuring a control directly, from the toolbar, or in the Properties tab, you can configure a control by selecting a property in the property list and then specifying a value in the formula bar. 이 접근 방법을 사용하여 속성을 알파벳 순서로 검색하고, 값의 추가 유형을 지정할 수 있습니다.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

예를 들어, 레이블을 선택하고 다음과 같은 방법으로 구성할 수 있습니다.For example, you can select a label and then configure it in these ways:

  • 속성 목록에서 X 또는 Y를 선택한 다음 수식 입력줄에 다른 수를 지정하여 컨트롤을 이동할 수 있습니다.Move it by selecting X or Y in the properties list and then specifying a different number in the formula bar.

    X 설정 속성

  • 속성 목록에서 Height 또는 Width를 선택한 다음 수식 입력줄에 다른 수를 지정하여 컨트롤의 크기를 조정할 수 있습니다.Resize it by selecting Height or Width in the properties list and then specifying a different number in the formula bar.

    높이 속성 설정

  • 속성 목록에서 Text를 선택한 다음 수식 입력줄에서 리터럴 문자열, 식 또는 수식의 조합을 지정하여 해당 텍스트를 변경할 수 있습니다.Change its text by selecting Text in the properties list and then specifying any combination of a literal string, an expression, or a formula in the formula bar.

    • 리터럴 문자열은 따옴표로 둘러싸고 입력한 대로 정확하게 표시됩니다.A literal string is surrounded by quotation marks and appears exactly as you type it. "Hello, world" 는 리터럴 문자열입니다."Hello, world" is a literal string.

      리터럴 문자열을 텍스트 속성을 설정 합니다.

    • 식은 함수를 포함하지 않고 종종 다른 컨트롤의 속성에 기반합니다.An expression doesn't include a function and is often based on a property of another control. Screen1.HeightScreen1의 높이를 보여주는 식입니다.Screen1.Height is an expression that shows the height of Screen1.

      식 텍스트 속성을 설정 합니다.

    • 수식에는 하나 이상의 함수가 포함됩니다.A formula includes one or more functions. Now 함수에서 현지 표준 시간대의 현재 날짜 및 시간을 반환하며, Text 함수에서 날짜, 시간 및 통화 값과 같은 값들의 서식을 지정합니다.The Now function returns the current date and time in your local time zone, and the Text function formats values such as dates, times, and currency.

      수식에 텍스트 속성을 설정 합니다.

      수식은 일반적으로 이 예제 보다 훨씬 더 복잡하므로 데이터 업데이트, 정렬, 필터링 및 다른 작업을 수행할 수 있습니다.Formulas are usually much more complex than this example so that they can update data, sort it, filter it, and perform other operations. 자세한 내용은 수식 참조를 확인합니다.For more information, see the formula reference.

다음 단계Next steps