레이블 컴포넌트 속성과 블럭
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 버튼과 레이블 컴포넌트에 대해 이해하고 실습을 하고자 한다.
. 레이블 컴포넌트
스마트폰에 글자를 표시할 때 사용하는 컴포넌트이다.
팔레트
레이블 컴포넌트는 팔레트에 “사용자 인터페이스”에 있다. 레이블 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 레이블이 추가된다.
뷰어
추가했을 때, 기본적으로 “레이블1의 텍스트”라는 글자가 뷰어 화면에 출력된다.
컴포넌트
컴포넌트에는 Screen1아래에 “레이블1”이라는 이름의 레이블 컴포넌트가 있다.
컴포넌트영역에서는 레이블1의 ‘이름바꾸기’와 ‘삭제’를 할 수 있다.
레이블1 이름을 의미가 있는 이름으로 변경하는 것을 권장한다. 나중에 코딩할 때 레이블의 이름을 보고 설정, 변경 등을 할 수 있다. 레이블1이 필요가 없으면 삭제할 경우에 아래 삭제 버튼을 클릭하면 된다.
레이블 속성
| 속성 | 내용 | 예시 |
| 배경색 | 레이블의 배경색을 설정할 수 있다. . 없음, 검정, 파랑, 청록색, 기본값, 어두운 회색, 회색, 초록, 밝은 회색, 자홍색, 주황, 분홍, 빨강, 흰색, 노랑, 사용자지정 |
레이블 빨강색 |
| 글꼴굵게 | 글자를 굵게 설정한다. | 레이블 글꼴굵게 |
| 글꼴이텔릭 | 글자를 이텔릭체로 바꾼다.(옆으로 누운 글씨모양) | 레이블 글꼴이텔릭 |
| 글꼴크기 | 글자 크기를 설정할 수 있다. | 레이블 글자크기 12 |
| 글꼴서체 | 글꼴에 기본값, 산 세리프, 세리프, 고정너비 서체가 있다. | 레이블 글꼴서체 세리프 |
| HTML형식 | 레이블의 텍스트를 HTML형식으로 입력여부를 설정한다. | <h1>HTML형식</h1> <h2>HTML형식</h2> |
| 여백 여부 | 레이블의 앞에 약간의 여백 여부를 설정한다. | 레이블 여백있음 레이블 여백없음 |
| 높이 | 레이블의 높이(세로)를 설정한다. | |
| 너비 | 레이블의 너비(가로)를 설정한다. | |
| 텍스트 | 레이블의 텍스트를 지정한다. | 안녕하세요 |
| 텍스트 정렬 | 텍스트의 정렬 방식을 지정한다. . 왼쪽, 가운데, 오른쪽 |
왼쪽 가운데 오른쪽 |
| 텍스트 색상 | 텍스트의 색깔을 지정한다. | 색깔은 배경색과 동일하다. (배경색 참조) |
| 보이기 | 레이블 보이기 여부를 설정한다. | 보이기/숨기기 |
레이블의 배경색은 아래 그림과 같다.
레이블 블록
레이블 블록은 레이블의 속성의 값을 코딩 블록으로 설정할 수 있다.
레이블 배경색
레이블의 배경색 값을 얻는 블록이다.
만일 레이블 배경색이 빨강이면 반환하는 값이 "빨강" 색상값이 반환된다.
지정하기 레이블 배경색
레이블의 배경색을 특정 색상으로 지정할 수 있는 블록이다.
만일 값에 "빨강" 색상을 지정하면 스마트폰 화면의 레이블의 배경색은 빨강색으로 바뀐다.
레이블의 글꼴크기
레이블의 글꼴크기 값을 얻을 수 있는 블록이다.
지정하기 레이블 글꼴크기
레이블의 글꼴크기를 특정한 값으ㄹ 지정할 수 있는 블록이다.
만일 값에 "15" 크기값을 지정하면 스마트폰 화면의 레이블의 텍스트 크기가 15로 바뀐다.
레이블의 HTMLContent
레이블의 HTMLContent 활성화 값을 반환하는 블록이다. 반환하는 값은 True 혹은 False이다.
만일 HTMLContent 값이 true이면 레이블의 텍스트에 HTML 태그를 넣어 HTML 코딩을 할 수 있다.
레이블 여백여부
레이블의 텍스트 앞에 여백 여부의 값을 반환하는 블록이다.
만일 값에 "빨강" 색상을 지정하면 스마트폰 화면의 레이블의 배경색은 빨강색으로 바뀐다.
지정하기 레이블 여백여부
레이블의 텍스트 앞에 여백을 지저할 수 있는 블록이다. 값은 true 혹은 false 값을 넣을 수 있다.
만일 값에 "true" 를 지정하면, 레이블 텍스트 앞에 여백을 넣는다.
레이블의 높이
레이블의 높이값을 반환하는 블록이다.
지정하기 레이블 높이
레이블의 높이를 특정한 값으로 지정할 수 있는 블록이다.
만일 값에 "15" 크기값을 지정하면 스마트폰 화면의 레이블의 높이가 15로 바뀐다.
지정하기 레이블 높이비율
레이블의 높이비율를 0-100 사이의 값으로 지정할 수 있는 블록이다. 값은 비율로 0%~100%비율 값이다. 스마트폰 화면의 높이에서 레이블이 차이하는 비율을 지정할 수 있다.
만일 값에 "10"(10%를 의미) 크기값을 지정하면 스마트폰 화면의 레이블의 높이 비율이 10% 비율 높이로 바뀐다.
레이블 텍스트
레이블의 텍스트 값을 반환하는 블록이다.
만일 레이블 텍스트에 "안녕하세요"라는 글자가 지정되어 있다면 "레이블 텍스트" 블록에서 반환되는 값은 "안녕하세요"라는 글자열이 반환된다.
지정하기 레이블 텍스트
레이블의 텍스트 값을 특정한 문자열로 지정할 수 있는 블록이다.
만일 값에 "안녕하세요" 문자열 값을 지정하면, 스마트폰 화면의 레이블에는 "안녕하세요"라는 글자가 표시된다.
레이블 텍스트색상
레이블의 텍스트 색상 값을 반환하는 블록이다.
만일 레이블 텍스트 색상에 "파랑" 값이 지정되어 있다면, 반환되는 값은 "파랑" 색상 값이 반환된다.
지정하기 레이블 텍스트색상
레이블의 텍스트색상 값을 특정한 색깔로 지정할 수 있는 블록이다.
만일 값에 "파랑색" 색상 값을 지정하면, 스마트폰 화면의 레이블의 텍스트 색상이 파랑색으로 표시된다.
레이블 보이기여부
레이블의 보이기여부 블록은 true 혹은 false 값으로, true값이면 레이블의 텍스트가 스마트폰 화면에 보이는 것이고, false이면 숨기기이다. 레이블 보이기여부 블록은 true or false 값 중에 하나의 값을 반환한다.
지정하기 레이블 보이기여부
레이블의 보이기여부는 true 혹은 false 값을 지정할 수 있는 블록이다.
만일 값에 "true" 값을 지정하면, 스마트폰 화면의 레이블이 화면에 표시되고, false이면 텍스트를 숨긴다.
레이블 너비
레이블의 너비 값을 반환하는 블록이다.
지정하기 레이블 너비
레이블의 너비 값을 특정한 값으로 지정할 수 있는 블록이다.
만일 너비값에 15 값을 지정하면, 스마트폰 화면의 너비는 15 너비(픽셀)만큼 표시된다.
지정하기 레이블 너비퍼센트
레이블의 너비퍼센 값은 0~100 사이의 값으로 지정할 수 있는 블록이다.
만일 너비퍼센트값에 50 값(50%)을 지정하면, 스마트폰 화면의 너비에 비하여 50% 크기의 레이블 너비를 표시한다.
지금까지 레이블 컴포넌의 속성과 레이블 블록 종류에 대해 살펴보았다.
반드시 다음 예제 “애국가-레이블 컴포넌트” 레이블을 활용한 애국가 가사를 스마트폰에 출력해보자.
지금까지 레이블 컴포넌의 속성과 레이블 블록 종류에 대해 살펴보았다.
반드시 다음 예제 “애국가-레이블 컴포넌트” 레이블을 활용한 애국가 가사를 스마트폰에 출력해보자.
레이블 속성과 레이블 블록에 대하여 살펴보았다.
이제 레이블을 활용한 예제로 아래 애국가 가사 꾸미기 앱을 따라해보자.
매우 유익하고 레이블을 어떻게 활용할 것인지 이해하게 될 것이다.
꼭 실습해보세요.
화이팅
2021.09.29 - [앱인벤터/앱인벤터 코딩따라하기] - 레이블예제-애국가 가사 꾸미기
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 컴포넌트' 카테고리의 다른 글
| 앱인벤터 목록뷰 컴포넌트 (0) | 2021.11.10 |
|---|---|
| 앱인벤터 목록선택버튼 컴포넌트 (0) | 2021.10.20 |
| 앱인벤터-이미지 컴포넌트 (0) | 2021.10.11 |
| 앱인벤터-날짜선택버튼 컴포넌트 (0) | 2021.10.10 |
| 앱인벤터-버튼 컴포넌트 (0) | 2021.10.01 |
댓글