레이블 컨트롤에서 캔버스 앱Label control in canvas apps

텍스트, 숫자, 날짜 또는 통화와 같은 데이터를 표시하는 상자입니다.A box that shows data such as text, numbers, dates, or currency.

설명Description

레이블은 사용자가 지정한 데이터를 사용자가 입력한 대로 정확히 나타나는 텍스트의 리터럴 문자열, 또는 텍스트의 문자열로 평가되는 수식으로 표시합니다.A label shows data that you specify as a literal string of text, which appears exactly the way you type it, or as a formula that evaluates to a string of text. 레이블은 다른 컨트롤(예: 등급 또는 오디오 컨트롤)을 식별하는 레이블로 다른 컨트롤(예: 화면을 식별하는 배너) 외부 또는 항목에 대한 특정 유형 정보를 표시하기 위해 갤러리에 나타나는 경우가 많습니다.Labels often appear outside of any other control (such as a banner that identifies a screen), as a label that identifies another control (such as a rating or audio control), or in a gallery to show a specific type of information about an item.

주요 속성Key properties

AutoHeight – 레이블을 모든 텍스트를 표시할 높이 자동 증가 허용 하려면 true로 설정 합니다.AutoHeight – Set to true to allow the label to auto-grow its height to show all text. 텍스트를 할당된 높이로 자르려면 false로 설정합니다.Set to false to truncate the text to the height assigned.

Color – 컨트롤의 텍스트 색입니다.Color – The color of text in a control.

Font – 텍스트가 표시되는 글꼴의 제품군 이름입니다.Font – The name of the family of fonts in which text appears.

Text – 컨트롤에 표시되는 텍스트 또는 사용자가 컨트롤에 입력하는 텍스트입니다.Text – Text that appears on a control or that the user types into a control.

DelayOutput – 텍스트를 입력하는 동안 작업을 지연하려면 true로 설정합니다.DelayOutput – Set to true to delay action during text input.

추가 속성Additional properties

Align - 컨트롤의 가로 가운데를 기준으로 한 텍스트의 위치입니다.Align – The location of text in relation to the horizontal center of its control.

AutoHeightText 속성에 컨트롤이 한번에 표시할 수 있는 것보다 더 많은 문자가 포함된 경우 레이블이 Height 속성을 자동으로 높일지 여부를 선택합니다.AutoHeight – Whether a label automatically increases its Height property if its Text property contains more characters than the control can show at one time.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 텍스트 색입니다.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

FontWeight – 컨트롤의 텍스트의 가중치: 굵게, Semibold, 정상, 또는 밝은.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 텍스트 색입니다.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic - 컨트롤의 텍스트를 기울임꼴로 설정할지 여부를 선택합니다.Italic – Whether the text in a control is italic.

LineHeight - 예를 들어 텍스트 선 또는 목록의 항목 사이의 거리입니다.LineHeight – The distance between, for example, lines of text or items in a list.

Live – 화면 읽기 프로그램 발표 레이블의 값을 변경 하는 방법 텍스트 속성입니다.Live – How a screen reader announces changes to the value of the label's Text property.

  • 로 설정 하면 해제, 화면 판독기에서 변경 내용을 발표 하지 않습니다.When set to Off, the screen reader doesn't announce changes.
  • 로 설정 하면 정중, 화면 판독기는 화면 판독기가 말하는 동안 발생 한 모든 변경 사항을 발표 앞에서 이야기를 완료 합니다.When set to Polite, the screen reader finishes speaking before announcing any changes that occurred while the screen reader was speaking.
  • 로 설정 하면 Assertive, 화면 판독기를 중단 하는 화면 판독기가 말하는 동안 발생 한 변경 내용을 발표할 자체입니다.When set to Assertive, the screen reader interrupts itself to announce any changes that occurred while the screen reader was speaking.

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

OverflowWrap 속성이 true로 설정되고 컨트롤의 Text 속성에 해당 컨트롤이 1회에 표시할 수 있는 것보다 더 많은 문자가 포함된 경우 스크롤바를 레이블에 표시할지 여부를 선택합니다.Overflow – Whether a scrollbar appears in a label if its Wrap property is set to true and the value of the control's Text property contains more characters than the control can show at one time.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 아래쪽 가장자리 사이의 거리입니다.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 위쪽 가장자리 사이의 거리입니다.PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 텍스트 색입니다.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

역할 -레이블 텍스트를 제목 1 등의 의미 체계 역할입니다.Role - The semantic role of the label text, such as Heading 1. 레이블의 스타일을 변경 하지 않습니다 하지만 출력 화면 판독기에서 해석을 위한 의미 체계가 잘못 되었습니다.Doesn't change the style of the label but makes the output semantically correct for interpretation by screen readers.

Size -컨트롤에 표시되는 텍스트의 글꼴 크기입니다.Size – The font size of the text that appears on a control.

Strikethrough - 컨트롤에 표시되는 텍스트 중앙에 선을 표시할지 여부를 선택합니다.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 컨트롤에 표시되는 텍스트 아래에 선을 표시할지 여부를 선택합니다.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – 컨트롤의 세로 가운데를 기준으로 한 텍스트의 위치입니다.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

Wrap – 너무 길어서 레이블에 들어 맞지 않는 텍스트를 다음 줄로 줄바꿈할지 여부를 선택합니다.Wrap – Whether text that's too long to fit in a label wraps to the next line.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Text( Number, "FormatCodes" )Text( Number, "FormatCodes" )

Examples

리터럴 문자열을 표시합니다.Show a literal string

수식의 결과를 표시합니다.Show the result of a formula

  • 레이블을 추가하고 Text 속성을 다음과 같은 수식으로 설정합니다.Add a label, and set its Text property to a formula such as this one:
    Today()Today()

    참고

    식을 지정할 때 수식의 인수가 리터럴 문자열이 아닌 한 따옴표를 사용하지 않습니다.When you specify a formula, you don't use quotation marks unless an argument of the formula is a literal string. 이러한 경우에는 수식이 아닌 인수를 큰따옴표에 넣으세요.In that case, enclose the argument, not the formula, in double quotation marks.

    Today 함수 또는 다른 함수에 대해 더 알고 싶으신가요?Want more information about the Today function or other functions?

이 절차에서는 유럽의 다양한 도시의 인구에 대한 데이터가 포함된 CityPopulations라고 하는 컬렉션을 만듭니다.In this procedure, you'll create a collection, called CityPopulations, that contains data about the population of various cities in Europe. 다음으로, 세 개의 레이블이 포함된 갤러리에서 해당 데이터를 보여주며 각 레이블이 표시할 데이터 형식을 지정합니다.Next, you'll show that data in a gallery that contains three labels, and you'll specify the type of data that each label will show.

  1. 단추 하나를 추가하고 OnSelect 속성을 다음 수식으로 설정합니다.Add a button, and set its OnSelect property to this formula:
    ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000})ClearCollect(CityPopulations, {City:"London", Country:"United Kingdom", Population:8615000}, {City:"Berlin", Country:"Germany", Population:3562000}, {City:"Madrid", Country:"Spain", Population:3165000}, {City:"Rome", Country:"Italy", Population:2874000}, {City:"Paris", Country:"France", Population:2273000}, {City:"Hamburg", Country:"Germany", Population:1760000}, {City:"Barcelona", Country:"Spain", Population:1602000}, {City:"Munich", Country:"Germany", Population:1494000}, {City:"Milan", Country:"Italy", Population:1344000})

  2. F5 키를 누르고 단추를 선택한 다음, Esc 키를 누릅니다.Press F5, select the button, and then press Esc.

  3. 텍스트 갤러리를 추가하고 Items 속성을 CityPopulations로 설정합니다.Add a text gallery, and set its Items property to CityPopulations.

    갤러리를 선택하면 오른쪽 창에는 해당 갤러리 옵션이 나와 있습니다.When the gallery is selected, the right pane shows options for that gallery.

  4. Gallery1 창에서 맨 위 목록을 Population로, 중간 목록을 City로, 맨 아래 목록을 Country로 설정합니다.In the Gallery1 pane, set the top list to Population, set the middle list to City, and set the bottom list to Country.

접근성 지침Accessibility guidelines

레이블 컨트롤은 그 이름과 달리 다른 컨트롤의 레이블로 사용하지 않아도 되며,Despite its name, a Label control does not have to be used as a label for another control. 텍스트의 일부를 표시하는 데 사용할 수 있습니다.It can be used to display any piece of text.

레이블OnSelect 동작을 지정하여 단추 또는 링크로 사용할 수 있습니다.A Label can be used as a button or link by specifying OnSelect behavior. 이 방법을 사용하는 경우에는 단추와 유사한 접근성 고려 사항이 있습니다.When used this way, there are similar accessibility considerations as with buttons.

색 대비Color contrast

다음 사이에 적절한 색 대비가 있어야 합니다.There must be adequate color contrast between:

화면 reader 지원Screen-reader support

  • Text 가 있어야 합니다.Text must be present.

  • Live(properties-accessibility.md 는 화면 읽기 프로그램이 레이블의 Text 속성의 값으로 변경 내용을 알려야 경우 Polite 또는 Assertive로 설정해야 합니다.Live should be set to Polite or Assertive if a screen reader should announce changes to the value of the Text property.

    참고

    화면 읽기 프로그램은 TabIndex 가 0 이상이면 레이블을 단추로 처리합니다.Screen readers will treat Labels as buttons when TabIndex is zero or greater.

저시력 사용자 지원Low vision support

  • 레이블은 링크로 사용되는 경우 링크처럼 표시되어야 합니다.Label should look like a link, if it is used as a link.

키보드 지원Keyboard support

  • 텍스트가 단추 또는 링크로 사용되는 경우 TabIndex 는 0 이상이어야 합니다.TabIndex must be zero or greater, if the text is used as a button or link. 이 경우 키보드 사용자가 이미지로 이동할 수 있습니다.This allows keyboard users to navigate to it.
  • 텍스트가 단추 또는 링크로 사용되는 경우 포커스 표시기는 명확하게 표시되어야 합니다.Focus indicators must be clearly visible, if the text is used as a button or link. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this.