레이블로 애국가 가사 꾸미기
앱인벤터에서 레이블 컴포넌트로 애국가 가사를 꾸며보는 예제 앱입니다.
레이블 컴포넌의 다양한 속성값을 설정하고 레이블 컴포넌트의 블럭들을 활용하여 애국가 가사를 입력하고 서식으로 꾸며서 스마트폰에 표시해보는 앱입니다.
애국가
[1절]
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리 나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
[Step1 : 디자이너 속성탭에서 레이블 설정해보기]
. 제목 레이블
. 배경색 : 청록색
. 글꼴굵게 :
. 글꼴크기 : 30
. 글꼴서체 : 산세리프
. 텍스트 : ‘애국가’ : HTML <h1>태그로 지정하여 설정하기
. 높이 : 35픽셀
. 너비 : 부모요소에 맞추기
<< 너비값은 디자이너(전화크기 505, 320) 크기여서 너비 320값으로 설정
. 텍스트 : 애국가
. 텍스트정렬 : 가운데
. 텍스트 색상 : 회색
. 보이기여부 : 체크
상기의 속성값을 속성탭에서 설정할 수 있다.
레이블1의 텍스트에 HTML 태그로 <h1>을 삽입하여 속성값을 설정한다.
[Step2 : 코딩으로 속성값을 설정해보자]
디자이너에서는 레이블만 뷰어에 Drag&Drop한다.
디자이너의 속성탭에서 설정한다.
. 글꼴굵게 : 활성 << 코딩블록없음
. 속성탭에서 설정해야 함.
. 글꼴서체 : 산세리프 << 코딩블록없음
. 속성탭에서 설정해야 함.
. 텍스트정렬 : 가운데 << 코딩블록없음
<< 속성탭에서 설정함.
코딩블록에서 아래의 값을 설정한다.
. 배경색 : 청록색
. 글꼴크기 : 30
. 텍스트 : ‘애국가’ : HTML <h1>태그로 지정하여 설정하기
. 높이 : 35픽셀
. 너비 : 부모요소에 맞추기 <<부모요소에 맞추기 블록이 없음
<< 너비값은 디자이너(전화크기 505, 320) 크기여서 너비 320값으로 설정
. 텍스트 : <h1>애국가</h1>
. 텍스트 색상 : 회색
. 보이기여부 : 체크
. 1절 가사
레이블의 텍스트를 여러줄을 넣을 때의 팁입니다.
레이블의 텍스트를 입력하면 한줄로 길제 표시된다.
내가 원하고자 하는 곳에서 다음 줄로 변경하려면, “\n”을 입력하면 된다.
동해물과 백두산이 마르고 닳도록\n
하느님이 보우하사 우리 나라 만세\n
무궁화 삼천리 화려 강산\n
대한 사람 대한으로 길이 보전하세
그러면 하나의 레이블 텍스트에 여러줄을 표시할 수 있다.
코딩블록으로 여러줄을 입력할 때의 블록은 아래 그림과 같다.
줄바꿈하고자 하는 위치에 “\n”을 입력하면 된다.
아래 그림은 실행화면이다.
. 첫번째 애국가는 레이블의 속성탭에서만 값을 설정한 "애국가"가 화면에 표시된 것이다.
. 두번째 애국가는 레이블의 블록 코딩으로 레이블의 값들을 설정한 것이 화면에 표시된 것이다.
. 세번째 가사는 레이블 코딩에서 \n으로 줄바꿈으로 여러줄을 표시하였다.
아래 파일은 레이블 예제 파일입니다.
참고해서 앱인벤터에서 프로젝트->내컴퓨터에서 가져오기에서 아래 파일을 선택하면 활용할 수 있습니다.
앱인벤터에서 레이블 컴포넌트의 속성값과 블럭들을 활용하여 단순히 글자만을 입력하는 것을 넘어서서 다양한 글자크기, 글꼴, HTML 코딩 등을 활용하여 애국가 가사를 스마트폰 화면에 출력해 보았다.
단순하지만 눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 내 맘대로 검색하기-웹뷰어 컴포넌트 예제 (0) | 2022.01.03 |
|---|---|
| 앱인벤터-이미지 컴포넌트를 활용하는 예제 (0) | 2021.10.11 |
| 앱인벤터 날짜선택버튼 컴포넌트 예제-우리가 만난지 며칠 (0) | 2021.10.11 |
| 앱인벤터 버튼 컴포넌트 예제 (0) | 2021.10.04 |
| 앱인벤터 추석맞이 감사인사앱-캔버스, 버튼, 수평배치 컴포넌트 (0) | 2021.09.24 |
댓글