UI에 텍스트 추가하기

제목이나 레이블, 자리 표시자 텍스트가 포함된 텍스트 입력 필드 등 다양한 텍스트 컴포넌트를 사용하여 UI에 읽기 전용 또는 편집 가능한 텍스트를 추가할 수 있습니다. ` Text ` 컴포넌트는 서식이 지정된 텍스트를 추가하고, ` Text Edit ` 컴포넌트는 여러 줄로 구성된 라인 편집 필드를 추가하며, ` Text Input ` 컴포넌트는 편집 가능한 단일 줄 필드를 추가합니다.

사용할 글꼴을 선택하고, 각 텍스트 문자열에 대해 포인트 또는 픽셀 단위의 크기, 스타일 이름, 강조, 정렬, 간격 등 다양한 속성을 지정할 수 있습니다.

자세한 내용은 다음 동영상을 참조하십시오:

Label 배경이 있는 레이블을 만들려면 ‘ Components ’ > Qt Quick Controls에서 제공되는 ` Text Field ` 컴포넌트를 사용하십시오. 이 모듈에는 ` ` 및 ` Text Area ` 컨트롤을 생성하는 데 필요한 컴포넌트도 포함되어 있습니다. 이 컴포넌트들은 기본 컴포넌트와 달리 공통 스타일이 적용되어 있으며, 플레이스홀더 텍스트를 지정할 수 있다는 점이 다릅니다.

서식 있는 텍스트 사용

Text 및 Text Input 컴포넌트에서 서식 있는 텍스트를 사용할 수 있습니다. 서식 있는 텍스트 편집기를 열려면 Properties > Character > Text 에서 ' ' (Edit) 버튼을 선택하십시오.

리치 텍스트 편집기에서는 다음 작업을 수행할 수 있습니다:

• 텍스트에 강조 표시를 할 수 있습니다.
• 하이퍼링크를 생성할 수 있습니다.
• 텍스트 정렬.
• 글머리 기호 목록 및 번호 매기기 목록을 만들 수 있습니다.
• 텍스트 색상을 지정합니다.
• 텍스트 글꼴을 선택합니다.
• 글꼴 크기를 설정합니다.
• 표 만들기.

번역할 문자열 표시

번역가를 지원하기 위해 번역해야 할 문자열을 표시하십시오. ‘ Properties ’ > ‘ Character ’ > ‘ Text ’에서 ‘ tr ’를 선택하십시오.

기본적으로 텍스트 문자열은 qsTr() 호출로 둘러싸여 있습니다.

일반 텍스트 대신 텍스트 ID를 사용하는 경우, 기본 호출을 qsTrId() 로 변경하십시오. Edit > Preferences > Qt Quick > Qt Quick Designer를 선택한 다음, ‘ Internationalization ’ 그룹에서 ‘ qsTrId() ’ 라디오 버튼을 선택하십시오. 자세한 내용은 ‘텍스트 ID 기반 번역’을 참조하십시오.

텍스트를 편집할 때 문맥을 유지하거나 텍스트 속성에 바인딩을 설정하여 문맥을 변경하려면, ‘ qsTranslate() ’ 라디오 버튼을 선택하여 기본 호출을 ‘ qsTranslate() ’로 변경하십시오.

자세한 내용은 ‘번역을 위한 소스 코드 작성’을 참조하십시오.

문자 속성

Properties 의 ‘ Character ’ 섹션에서 글꼴 속성을 설정할 수 있습니다. ‘ Text ’ 필드에 입력한 각 문자열에 대해 ‘ Font ’ 필드에서 사용할 글꼴을 선택하고, 텍스트의 크기, 강조, 정렬 및 간격을 지정할 수 있습니다. ‘ Size ’ 필드에서 글꼴 크기를 포인트 또는 픽셀 단위로 지정하십시오.

' Font ' 필드의 사용 가능한 글꼴 목록에 사용자 정의 글꼴을 표시하려면, 먼저 해당 글꼴을 'Assets'에 추가해야 합니다:

1. ' Assets ' > ' '을 선택합니다.
2. 글꼴 파일을 선택한 다음, ‘ Open ’을 선택합니다.
3. ' Add Resources ' 대화 상자에서 파일이 저장될 위치를 선택합니다.
4. ' OK'을 선택합니다.

' Weight ' 필드에서 'extra-light'부터 'extra-bold'까지의 미리 정의된 값 목록에서 글꼴 두께를 선택할 수 있습니다. 또한 ' Emphasis ' 그룹의 버튼을 사용하여 텍스트를 굵게, 기울임꼴, 밑줄, 취소선으로 서식을 지정할 수도 있습니다.

Style name 필드에 스타일 이름을 설정하면, Weight 및 Emphasis 필드에 설정된 값 대신 해당 스타일 이름에 따라 글꼴이 지정됩니다.

Word spacing 필드의 값은 단어 간의 기본 간격을 변경하는 반면, Letter spacing 필드의 값은 단어 내 개별 글자 간의 간격을 변경합니다. 양수 값을 설정하면 해당 픽셀 수만큼 간격이 넓어지고, 음수 값을 설정하면 간격이 좁아집니다.

‘ Line height ’ 필드의 값은 텍스트의 줄 간격을 설정합니다. ‘ Text Extras ’ 섹션의 ‘ Line height mode ’ 필드에서 ‘ FixedHeight ’을 선택하면 줄 간격을 픽셀 단위로 설정할 수 있고, ‘ ProportionalHeight ’(기본값)을 선택하면 줄에 비례하여(배수로) 간격을 설정할 수 있습니다. 예를 들어, 줄 간격을 두 배로 하려면 2로 설정합니다.

텍스트 정렬

텍스트 구성 요소를 가로 및 세로로 정렬할 수 있습니다. 기본적으로 텍스트는 세로 방향으로 상단에 정렬됩니다. 가로 정렬은 텍스트의 자연스러운 정렬 방향을 따릅니다. 기본적으로 영어와 같은 좌우 방향 텍스트는 텍스트 영역의 왼쪽에 정렬되는 반면, 아랍어와 같은 우좌 방향 텍스트는 텍스트 영역의 오른쪽에 정렬됩니다.

텍스트를 왼쪽, 오른쪽, 위쪽 또는 아래쪽으로 정렬하거나, 수평 또는 수직으로 중앙 정렬할 수 있습니다. 가로 방향 텍스트는 양쪽 정렬할 수 있습니다.

한 줄로 된 텍스트의 경우, 텍스트의 크기는 텍스트 영역과 동일합니다. 이러한 일반적인 경우, 모든 정렬 방식은 동일하게 적용됩니다. 부모 요소 내에서 텍스트를 중앙에 배치하려면 고정(anchoring)을 사용하거나 텍스트 구성 요소의 너비를 부모 요소의 너비에 바인딩하십시오. 자세한 내용은 바인딩 설정을 참조하십시오.

텍스트 및 스타일 색상

텍스트 자체의 색상과 텍스트 스타일에 사용되는 보조 색상을 설정할 수 있습니다.

Text Edit 및 Text Input 구성 요소의 경우, Selected text color 및 Selection color 필드에서 선택된 텍스트의 색상과 선택 영역 뒤에 적용되는 텍스트 강조 표시 색상을 설정할 수도 있습니다.

Text Field 및 Text Area 컨트롤의 경우, 플레이스홀더 텍스트의 색상도 설정할 수 있습니다.

색상 선택에 대한 자세한 내용은 ‘색상 선택’을 참조하십시오. 텍스트 구성 요소에는 단색만 설정할 수 있습니다.

고급 텍스트 속성

텍스트 구성 요소의 높이와 너비는, 예를 들어 ‘ Text ’ 필드에 지정한 문자열의 길이와 글꼴 크기를 반영하여, 사용자가 설정한 속성 값에 따라 자동으로 결정됩니다. ‘ Text Extras ’ 섹션에서 텍스트 서식을 지정하기 위한 추가 속성을 설정할 수 있습니다.

‘ Size mode ’ 필드의 값은 표시되는 텍스트의 글꼴 크기가 어떻게 결정되는지를 지정합니다. ‘ FixedSize ’을 선택하면 ‘ Character ’ 섹션의 ‘ Size ’ 필드에 픽셀 또는 포인트 단위로 지정된 크기를 사용합니다.

‘ HorizontalFit ’ 또는 ‘ VerticalFit ’를 선택하면, 지정된 크기 범위 내에서 컴포넌트의 너비나 높이에 맞는 가장 큰 크기가 사용됩니다. ‘ Fit ’를 선택하면, 지정된 크기 범위 내에서 컴포넌트의 너비와 높이에 모두 맞는 가장 큰 크기가 사용됩니다. 맞춤 텍스트의 글꼴 크기는 ‘ Min size ’ 필드에 지정된 최소값과 ‘ Size ’ 필드에 지정된 최대값의 범위 내에서 결정됩니다.

텍스트 줄 바꿈 및 생략

' Wrap mode ' 필드에서 텍스트를 텍스트 컴포넌트의 너비에 맞춰 줄바꿈할 수 있습니다. 텍스트는 텍스트 컴포넌트의 너비를 명시적으로 설정한 경우에만 줄바꿈됩니다. 기본적으로 텍스트는 줄바꿈되지 않습니다. ' WordWrap '를 선택하면 줄바꿈이 단어 경계에서만 이루어지도록 제한할 수 있습니다. ' WrapAnywhere '을 선택하면 단어 중간에 위치하더라도 줄의 어느 지점에서나 줄바꿈이 활성화됩니다. ' Wrap '을 선택하면 가능한 경우 단어 경계에서 줄바꿈을 수행하고, 불가능할 경우 단어 중간이라도 줄의 적절한 지점에서 줄바꿈을 수행합니다.

Elide 속성과 Wrap 옵션을 함께 사용하면 단일 줄의 일반 텍스트를 설정된 너비에 맞출 수 있습니다. ElideRight 를 선택하고, Max line count 또는 텍스트 구성 요소 높이( H 필드)를 설정하십시오. 두 가지 모두 설정할 경우, 허용된 높이에 줄이 들어가지 않는 경우가 아니라면 최대 줄 수가 적용됩니다.

텍스트가 길이가 다양한 문자열이고, ` Elide ` 속성 값을 ` ElideNone` 이외의 값으로 설정하면, 해당 높이에 맞는 첫 번째 문자열이 사용되며, 그렇지 않은 경우 마지막 문자열이 생략됩니다.

여러 길이의 문자열은 가장 긴 것부터 가장 짧은 것까지 순서대로 배열되며, 유니코드 문자열 종결자 U009C 로 구분됩니다.

텍스트 서식 지정

텍스트는 ‘ Format ’ 필드에 설정한 값에 따라 일반 텍스트 또는 서식 있는 텍스트 형식으로 표시될 수 있습니다. ‘ AutoText ’를 선택하고 텍스트의 첫 번째 줄에 HTML 태그가 포함된 경우, 해당 텍스트는 서식 있는 텍스트로 처리됩니다. 서식 있는 텍스트는 ‘지원되는 HTML 하위 집합’에 설명된 HTML 4의 하위 집합을 지원합니다. 일반 텍스트가 서식 있는 텍스트보다 성능이 더 우수하다는 점에 유의하십시오.

텍스트 렌더링

' Render type ' 필드에서 텍스트 컴포넌트의 기본 렌더링 유형을 재정의할 수 있습니다. 텍스트가 대상 플랫폼에서 네이티브 방식으로 표시되기를 원하고 텍스트 변환과 같은 고급 기능이 필요하지 않은 경우 ' NativeRendering '를 선택하십시오. 네이티브 렌더링과 함께 회전이나 크기 조정을 사용하면 결과가 좋지 않거나 때로는 픽셀화될 수 있습니다.

‘ NativeRendering ’를 선택한 경우, ‘ Font Extras ’ 섹션의 ‘ Hinting ’ 필드에서 힌팅 기본 설정을 지정할 수 있습니다:

• PreferDefaultHinting 대상 플랫폼의 기본 힌팅 수준을 사용합니다.
• PreferNoHinting 가능한 경우 글리프 윤곽선에 힌팅을 적용하지 않고 텍스트를 렌더링합니다.
• PreferVerticalHinting 가능한 경우, 수평 힌팅은 적용하지 않되 글리프를 수직 방향으로 픽셀 그리드에 정렬하여 텍스트를 렌더링합니다.
• PreferFullHinting 수평 및 수직 방향 모두에서 힌팅을 적용하여 텍스트를 렌더링합니다.

고급 글꼴 속성

Font Extras 섹션에서 글꼴에 대한 추가 속성을 지정할 수 있습니다.

‘ Capitalization ’ 필드에서 대소문자 변경이 적용되지 않는 일반 텍스트 렌더링을 원할 경우 ‘ MixedCase ’를 선택하십시오. 또한 텍스트를 모두 대문자나 소문자로 설정하거나 스몰 캡스를 사용할 수도 있습니다. ‘ Capitalize ’ 옵션을 선택하면 각 단어의 첫 글자가 대문자로 렌더링됩니다.

‘ Style ’ 필드에서 글꼴 스타일을 ‘ Outline ’, ‘ Raised ’ 또는 ‘ Sunken ’로 설정할 수 있습니다. ‘ Style color ’ 필드에서 선택한 색상은 윤곽선이 있는 텍스트의 윤곽선 색상으로 사용되며, 돌출되거나 오목한 텍스트의 그림자 색상으로 사용됩니다.

선택한 글꼴로 텍스트를 그릴 때 커닝을 적용하려면 ‘ Auto kerning ’를 선택하십시오.

때로는 글꼴이 문자를 올바르게 표시하기 위해 일련의 문자에 복잡한 규칙을 적용하기도 합니다. 브라흐미 문자 체계와 같은 일부 문자 체계에서는 텍스트를 가독성 있게 표시하기 위해 이러한 기능이 필요하지만, 라틴 문자 체계와 같은 다른 문자 체계에서는 단순히 미적 기능에 불과합니다. 이러한 기능은 성능 향상을 위해 기본적으로 비활성화되어 있습니다. 필요한 경우, ‘ Prefer shaping ’를 선택하십시오.

텍스트 입력

` Text Edit ` 및 ` Text Input ` 컴포넌트를 사용하여 사용자가 텍스트를 입력할 수 있는 텍스트 필드를 추가할 수 있습니다.

Text Input 컴포넌트는 편집 가능한 일반 텍스트 한 줄을 표시하는 반면, Text Edit 컴포넌트는 편집 가능한 서식이 적용된 텍스트 블록을 표시합니다. 두 컴포넌트 모두 텍스트 입력을 수신하는 데 사용됩니다.

비밀번호 입력

Text Input 컴포넌트의 속성을 설정하여 비밀번호 입력에 적합하게 만들 수 있습니다.

Input mask 필드에서는 마스크 문자, 메타 문자 및 이들 사이의 구분 기호를 포함하는 입력 마스크를 생성할 수 있습니다. 필드가 생성되거나 지워지면, 텍스트 편집기나 입력 필드에는 메타 문자가 제거되고 마스크 문자가 공백 문자로 대체된 입력 마스크 문자열의 복사본이 채워집니다. 예를 들어, IP 주소 입력 필드에서는 다음과 같은 마스크(공백 문자로 밑줄(_)을 사용)를 사용할 수 있습니다. 000.000.000.000;_. 입력 마스크 생성에 대한 자세한 내용은 QLineEdit::inputMask 문서를 참조하십시오.

' Echo mode ' 필드에서 ' Password '을 선택하면 사용자가 입력한 실제 문자 대신 플랫폼에 따라 달라지는 암호 마스크 문자가 표시됩니다. ' PasswordEchoOnEdit '을 선택하면 사용자가 입력한 그대로의 문자가 표시됩니다. 마스크 문자는 ' Password character ' 필드에 표시됩니다.

텍스트 입력

사용자가 텍스트 편집 또는 입력 필드에 텍스트를 입력하는 방식을 지정할 수 있습니다.

' Maximum length ' 필드에서 사용자가 입력할 수 있는 최대 문자 수를 설정하십시오.

‘ Auto scroll ’의 값에 따라 텍스트가 필드 너비보다 길 경우 텍스트 편집기나 입력 필드가 스크롤되는지 여부가 결정됩니다.

‘ Overwrite mode ’가 선택된 경우, 기존 텍스트는 새 텍스트로 한 글자씩 덮어쓰게 됩니다. 그렇지 않은 경우, 새 텍스트는 커서 위치에 삽입되어 기존 텍스트를 밀어냅니다. 기본적으로 새 텍스트는 기존 텍스트를 덮어쓰지 않습니다.

사용자가 텍스트를 변경하지 못하도록 하려면 ‘ Read only ’를 선택하십시오.

텍스트 선택

' Selection mode ' 필드에서는 포인터 장치를 사용하여 텍스트를 선택할 때 개별 문자를 선택할지, 아니면 단어 전체를 선택할지 지정할 수 있습니다.

‘ Select by mouse ’을 선택하면 사용자가 마우스를 사용하여 플랫폼별 방식으로 텍스트를 선택할 수 있습니다. 일부 플랫폼의 경우, 예를 들어 ‘ Flickable ’ 컴포넌트 내에서 텍스트가 동작해야 하는 방식과 충돌할 수 있으므로 이 상호작용 방식이 적합하지 않을 수 있습니다.

` Text Edit ` 컴포넌트의 경우, ` Select by keyboard `을 선택하면 편집 필드가 읽기 전용인 경우에도 사용자가 키보드를 사용하여 텍스트를 선택할 수 있습니다. 이 속성이 ` false`로 설정된 경우, 텍스트가 편집 가능한 상태라 하더라도 사용자는 키보드를 사용하여 텍스트를 선택할 수 없습니다.

포커스

Focus on press 의 값은 마우스 클릭 시 텍스트 편집 필드나 입력 필드가 활성 포커스를 받을지 여부를 결정합니다.

기본적으로 텍스트 편집기나 입력 필드가 활성 포커스를 얻으면 커서가 표시되므로, 다른 속성들은 현재 커서가 표시되어 있는지 여부에 따라 바인딩될 수 있습니다. Cursor visible 속성의 값은 자동으로 설정 및 해제되므로, 사용자가 직접 설정한 값은 덮어쓰일 수 있습니다.

Persistent selection 가 선택된 경우, 활성 포커스가 다른 컴포넌트로 이동하더라도 텍스트 편집기나 입력 필드는 선택 상태를 유지합니다.

탭 및 여백

Text Edit 컴포넌트 내의 텍스트 블록 서식을 지정하기 위해 추가 속성을 설정할 수 있습니다.

Tab stop distance 필드에서 탭 정지점 간의 기본 간격을 장치 단위로 설정합니다.

‘ Text margin ’ 필드에서 텍스트 주변의 여백을 픽셀 단위로 설정합니다.

패딩

Padding 섹션의 속성 값은 콘텐츠 주변의 패딩을 지정합니다. 개별 패딩 속성은 명시적으로 설정하지 않는 한, ‘ Global ’ 필드의 값을 따릅니다.

플레이스홀더 텍스트

Text Field 및 Text Area 컨트롤의 경우, 사용자가 텍스트를 입력하기 전에 필드에 표시할 텍스트를 지정할 수 있습니다. ‘ Placeholder text ’ 필드에 텍스트를, ‘ Placeholder color ’ 필드에 색상을 지정하십시오.

Hover 을 선택하면 텍스트 필드에서 호버 이벤트를 처리할 수 있습니다.

텍스트 컴포넌트 요약

다음 표에는 UI에 텍스트를 추가하는 데 사용할 수 있는 컴포넌트가 나열되어 있습니다. ‘위치’ 열에는 Components 에서 해당 컴포넌트를 찾을 수 있는 탭 이름이 표시되어 있습니다. ‘MCU 지원’ 열은 MCU에서 지원되는 컴포넌트를 나타냅니다.