[ Tkinter ] 파이썬 Tkinter 버튼 만들기(Python Tkinter Button), 그리드(grid)

기본 프레임 만들기

Tkinter 모듈을 이용해 창을 만들때

프레임을 먼저 생성하고, 그 안에 버튼이나 리스트 박스 등을

배치한다고 생각하시면 됩니다.

대략 이런 형태가 됩니다.

프레임 안에 위젯을 배치하고,

프레임 안에 프레임을 또 생성하여 위젯을 배치할 수 있습니다.

위젯은 버튼, 리스트박스, 체크박스, 스크롤바 등이 있습니다.

프레임은 기본적으로 하나 이상이 됩니다.

 

기본 프레임을 만드는 코드입니다.

from tkinter import *

root = Tk()

main_frame = Frame(root)
main_frame.grid()

# 위젯 배치 코드 작성 공간

root.mainloop()

위 코드를 실행하면 아래와 같이 창이 생성됩니다.

위 그림을 보시면 그림 하나와 창을 최대화하는 버튼, 닫는 버튼으로 구성되어 있습니다.

그 아래에 버튼을 만들어 보겠습니다.

 

버튼 만들기

btn_test = Button(main_frame, text = "test1")
btn_test.grid()

위 코드를 추가하고 실행하면 아래 그림과 같이 

버튼이 하나 생성됩니다.

버튼을 두개 더 생성해 보겠습니다.

btn_test = Button(main_frame, text = "test1")
btn_test.grid()

btn_test2 = Button(main_frame, text = "test2")
btn_test2.grid()

btn_test3 = Button(main_frame, text = "test3")
btn_test3.grid()

위 코드를 추가하고 실행하면

아래 그림과 같이 버튼이 세개가 만들어집니다.

 

그리드(grid) 이해하기

위젯을 배치하는 방법은 몇가지가 있는데

그 중 하나가 그리드(grid())입니다.

grid를 사전에서 찾아보면 격자라는 의미라고 나옵니다.

프레임을 위 그림과 같이 나누고 

한칸에 하나의 위젯을 배치하는 방법입니다.

위 그림에서는 [ 3 X 3 ]의 크기를 예로 들었지만,

크기는 변경이 가능합니다.

다시 위 코드의 결과를 보면

이런식으로 출력이 되었는데,

grid 함수 안에는 column과 row 값을 지정하여 위치를 지정하나,

별도의 값을 넣지 않을 경우 위 그림과 같이

위에서 아래로 배치가 됩니다.

 

column과 row 값을 지정하여 버튼을 배치해 보겠습니다.

btn_test = Button(main_frame, text = "test1")
btn_test.grid(column=0, row=0)

btn_test2 = Button(main_frame, text = "test2")
btn_test2.grid(column=1, row=0)

btn_test3 = Button(main_frame, text = "test3")
btn_test3.grid(column=0, row=1)

위 코드의 실행결과는 다음과 같습니다.

 

만약 테스트2 버튼의 column값을 2로 바꾸면 어떻게 되는지 보겠습니다.

btn_test2 = Button(main_frame, text = "test2")
btn_test2.grid(column=2, row=0)

결과가 바뀌지 않습니다.....

버튼을 하나 더 추가해 보겠습니다.

btn_test = Button(main_frame, text = "test1")
btn_test.grid(column=0, row=0)

btn_test2 = Button(main_frame, text = "test2")
btn_test2.grid(column=2, row=0)

btn_test3 = Button(main_frame, text = "test3")
btn_test3.grid(column=0, row=1)

btn_test4 = Button(main_frame, text = "test4")
btn_test4.grid(column=1, row=1)

test4 버튼을 하나 더 추가했습니다.

이제야 test1과 test2가 한칸이 띄워졌습니다.

grid 로 배치를 하면 다른 위젯의 위치에 영향을 받습니다.

 

test4 버튼을 추가하기 전에

test2의 column의 값을 2로 바꾸어도

아래 그림과 같이 결과가 나왔습니다.

프레임 내의 어느곳에도 column의 값이 1인 곳이 없었습니다.

그렇기 때문에 column값을 증가시켜도

배치가 변하지 않게 됩니다.

아마 tkinter에서 grid는 격자의 위치가

절대적인 값으로 인식하는 것이 아니라

다른 위젯의 배치에 따라 상대적인 위치로 인식하는 것으로 보입니다.

즉 첫번째 위젯의 위치가 (1, 1)이고

두번째 위젯의 위치가 (1, 5)이면서

다른 위젯이 없다고 가정했을 때

두번째 위젯은 첫번째 위젯의 다음에 온다 정도로 인식하는 것 같습니다.

btn_test = Button(main_frame, text = "test1")
btn_test.grid(column=1, row=1)

btn_test2 = Button(main_frame, text = "test2")
btn_test2.grid(column=1, row=5)

위 코드의 결과입니다.

반응형

버튼 위치, 크기 등 조정하기

버튼이 처음 만들어 졌을 때는 버튼 안의 글자에 따라 크기가 정해집니다.

btn_test = Button(main_frame, text = "가")
btn_test.grid(column=0, row=0)

btn_test2 = Button(main_frame, text = "가나")
btn_test2.grid(column=2, row=0)

btn_test3 = Button(main_frame, text = "가나다")
btn_test3.grid(column=0, row=1)

btn_test4 = Button(main_frame, text = "가나다라")
btn_test4.grid(column=1, row=1)

위 코드의 실행 결과입니다.

 

다음 설명 위해 아래 그림과 같이 버튼을 만들어 보겠습니다.

6개의 버튼을 만들었는데 

너무 조밀조밀 배치되어 가독성이 

떨어져보입니다.

먼저 버튼사이의 간격을 조금 넓혀 보겠습니다.

간격을 넓힐 때는 padx 와 pady를 사용합니다.

아래 코드를 조금씩 수정해 보겠습니다.

btn_test = Button(main_frame, text = "test1")
btn_test.grid(column=0, row=0)

Button() 함수안에서 padx와 pady를 사용하면 

버튼 안의 글자를 기준으로 입력 값 만큼 버튼의 크기를 늘려줍니다.

btn_test = Button(main_frame, text = "test1", padx=10)

이렇게 코드를 작성하고 결과를 보면 다음과 같습니다.

btn_test = Button(main_frame, text = "test1", padx=10, pady=10)

 

다음은 grid() 함수안에서 padx와 pady를 사용했을 때입니다.

btn_test.grid(column=0, row=0, padx=10, pady=10)

test1의 grid 만 수정하였습니다.

버튼 사이의 간격이 벌어진 것을 알 수 있습니다.

버튼 사이의 간격이 벌어졌다고 표현하였지만,

첫번째 격자의 크기가 커진 것으로 볼 수도 있습니다.

첫번째 격자의 크기가 커짐에 따라 다른 격자의 크기도

조정이 된 것을 볼 수 있습니다.

 

grid() 함수 안에서는 ipadx 와 ipady 도 사용이 가능합니다.

btn_test.grid(column=0, row=0, ipadx=10, ipady=10)

위 코드의 결과는 다음과 같습니다.

 

버튼의 크기를 절대값으로 지정할 수도 있습니다.

width와 height를 사용합니다.

btn_test = Button(main_frame, text = "test1", width=20, height=3)

글자의 크기와 상관없이 버튼의 크기 조정이 가능합니다.

 

다음은 버튼의 위치를 조정하는 방법으로

sticky 를 사용합니다.

sticky는 버튼을 어느 방향에 붙이라는 의미로 보면 됩니다.

test4 버튼을 예로 들어보겠습니다.

btn_test4 = Button(main_frame, text = "test4")
btn_test4.grid(column=0, row=1, sticky="e")

test4가 오른쪽으로 붙었습니다.

sticky에는 [ n, e, s, w, nw, ne, sw, se ]가 사용이 가능합니다.

동서남북(east, west, north, south)의 첫글자로 보입니다.

여기서 오른쪽위(ne)를 사용하면 어떻게 될지 보겠습니다.

결과가 동일합니다.

sticky는 그리드의 크기와 버튼의 크기가 다를때 사용합니다.

test4버튼의 그리드는 test1의 그리드를 늘리면서 좌우로 같이 늘어났습니다.

위 그림에서 위쪽으로 여백이 있는 것 처럼 보이지만

위쪽 여백은 test1 그리드의 여백이지 test4 그리드의 여백이 아닙니다.

그렇기 때문에 오른쪽위로 정렬시켜도 오른쪽으로 정렬시킬때와

동일한 결과가 나타납니다.

 

test1 버튼역시 sticky를 사용해도 위치가 변하지 않습니다.

분명히 test1은 그리드의 크기에 비해 버튼의 크기가 작으나,

이미 padx, pady를 통해 그리드 내의 여백을 조정했기 때문에 

버튼이 움직일 자리가 없는 것입니다.

 

만약에 아래와 같이 버튼을 만들었는데 

test4 버튼을 길게 늘이고 싶다면 어떻게 해야할 지 알아보겠습니다.

 

먼저 test4가 두개의 그리드를 모두 가지고 가겠다는 의미로

columnspan = 2를 넣어줍니다.

btn_test4 = Button(main_frame, text = "test4")
btn_test4.grid(column=0, row=1, columnspan=2)

두개의 그리드 중앙에 test4 버튼이 위치해 있습니다.

이제 이것을 늘려서 채워보겠습니다.

btn_test4 = Button(main_frame, text = "test4")
btn_test4.grid(column=0, row=1, columnspan=2, sticky="WE")