NEW 앱인벤터2 강좌11. 컴포넌트 탐구 – 레이블(Lable)

이 글은 읽는데 약 4분이 걸립니다.

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

레이블은 텍스트를 표시하는 컴포넌트 입니다.


0. 개요

텍스트를 화면에 표시하는 아주아주 평범한 컴포넌트로, 정말 이 용도가 다 입니다.
물론 텍스트 표시에만 쓰이지만 앱에 빠져서는 안되는 요소이기도 하죠.

1. 형태

위처럼 텍스트를 보여줍니다.

1. 속성

레이블(Lable) 속성

속성명

설명

예시

배경 색(BackgroundColor)

배경색을 지정합니다.

글꼴 굵게(FontBold)

텍스트에 볼드체(굵은체)를 적용합니다.

글꼴 이텔릭(FontItalic)

텍스트에 이텔릭(기울임)을적용합니다.

글꼴 크기(FontSize)

텍스트 크기를 지정합니다.

글꼴 서체(FontTypeface)

텍스트의 글꼴을 지정합니다.

HTML 형식(HTMLFormat)

레이블에 표시할 텍스트를 HTML 형식으로 표시할 것인지 지정합니다.

여백 여부(HasMargins)

레이블의 앞에 약간의 여백을 표시합니다.

높이(Height)

높이(세로)를 지정합니다.

너비(Width)

너비(가로)를 지정합니다.

텍스트(Text)

텍스트를 지정합니다.

텍스트 정렬(TextAlign)

텍스트의 내부 정렬 방식을 지정합니다.

텍스트 색상(TextColor)

텍스트 색상을 지정합니다.

보이기(Visible)

보이기 여부를 지정합니다.

2. 블록

레이블(Lable) 속성 지정 블록

블록

입력형식

설명

색상

버튼의 배경색을 지정합니다. 만약 이미지가 있다면, 색상은 가려서 보이지 않습니다.

숫자

글씨의 텍스트 크기를 sp단위로 지정합니다.

논리

레이블에 외부여백(마진)을 적용할지 지정합니다.

숫자

컴포넌트의 높이를 px단위로 지정합니다.

숫자

컴포넌트의 높이를 스크린 높이에 대한 비율로 지정합니다. 단위는 퍼센트 입니다.

텍스트

표시할 텍스트를 지정합니다.

색상

텍스트의 색상을 지정합니다.

논리

컴포넌트의 보이기 여부를 지정합니다.

숫자

컴포넌트의 너비를 px단위로 지정합니다.

숫자

컴포넌트의 너비를 스크린 너비에 대한 비율로 지정합니다. 단위는 퍼센트 입니다.

레이블(Lable) 속성 블록

블록

반환형식

색상

숫자

논리

논리

숫자

텍스트

색상

논리

숫자

컴포넌트

3. HTML 형식이란

레이블의 텍스트에 HTML 형식으로 텍스트 스타일을 지정합니다.
JAVA로는 textview.setText(Html.fromHtml(text)); 와 같습니다.

이전까지는 하나의 레이블에 여러개의 스타일을 동시에 적용하지 못해(예시로 하나의 레이블의 텍스트 일부에만 색을 넣기 등) 레이블 여러개를 붙여서 각 스타일별로 따로따로 했어야 했습니다.
그러나 이 기능을 이용하면 레이블 하나로 HTML에서 지원하는 효과를 줄 수 있습니다.

여러가지 HTML 태그를 사용할 수 있습니다. 아래는 예시 입니다:

ㆍh1~h6

<h1>h1으로 글자 크기 조정</h1>

글자 크기를 1~6단계로 조정합니다.

ㆍp

<p>문단</p><p>나누기</p>

문단을 나눕니다. 일반 줄바꿈보다 줄간격이 큽니다.

ㆍblockquote

<blockquote>인용구</blockquote>

인용구 입니다.

ㆍbr

텍스트<br>줄바꿈

일반적인 줄바꿈 입니다.

ㆍstrong, b

<strong>strong</strong> 또는 <b>b</b>

둘다 글씨체를 두껍게 강조합니다.

ㆍi

<i>이텔릭</i>

글씨를 기울입니다.

ㆍsmall

<small>small</small>

글자를 작게 표시합니다.

ㆍsub, sup

<sub>아래첨자</sub>첨자<sup>윗첨자<sup/>

첨자를 넣습니다. sub는 아래에, sup은 위에 넣습니다.

ㆍfont

<font color="red">텍스트 색상 변경</font>
<font color="red">빨강</font><font color="green">초록</font><font color="blue">파랑</font>

color 속성으로 색을 지정할 수 있으며, 색상 이름이나 HEX코드로 쓸 수 있습니다.

댓글

제목과 URL을 복사했습니다