본문 바로가기
블록코딩/ㆍ코듈라

버튼(Button) 컴포넌트 사용 방법 알아보기 - 코듈라

by diMik 2021. 6. 29.

버튼 사용법을 함께 알아봐요

 

 

버튼을 배우자

이번 포스팅에서는 버튼(Button)을 대하여 알아볼게요. 왼쪽 상단에 있어요.

 

 


 

끌어다가 놓기 (gif가 제대로 안보이면 클릭해서 보세요)

 

 

왼쪽 기능 리스트에서 버튼을 끌어다가 핸드폰모양 위에 올려두세요. 우측에 Button1이 생겼죠? 그러면 우리가 버튼을 하나 만든 거에요.

 

 

Button1에서 1이라는 숫자는 처음으로 만든 버튼이라는 의미입니다. 같은 방법으로 버튼을 또 끌어다놓으면 Button2가 생기고, 또 놓으면 Button3이 됩니다.

 


 

 

디자이너 화면 우측에서 설정할 수 있는 것들

 

 

우측에서 Button1을 클릭하면 이렇게 다양하게 버튼을 꾸밀 수 있는 화면이 펼쳐집니다. 하나하나 어떤 기능인지 번역해두었어요. 정말 다양한 설정을 할 수 있죠? 크기도 바꾸고 색깔도 바꾸고 다양한 디자인은 여기서 이뤄집니다.

 


모양은 4가지 종류가 있는데 이런 모습으로 나타납니다.

 

기본설정(Default)으로 해두면 모서리가 살짝 동그랗게 된 둥근(Rounded)의 모습을 띄네요.

둥근(Rounded)모양은 모서리가 둥글게 깎여 있는 모습이고요.

직사각형(Rectangular)는 모서리가 완전 각져있고요.

타원(Oval)은 기본적으로 타원형의 모습이지만, 80x80 처럼 가로세로 사이즈가 같으면 완전한 원형의 모습을 보여주네요.

 

shape 종류

 


 

색도 바꾸고 버튼 텍스트도 바꾸고 크기도 바꾸니 처음의 버튼 모습보다 훨씬 귀엽죠? 본인의 개성에 맞게, 앱의 성격에 맞게 다양하게 디자인 해보세요.

댓글