독학 Python tkinter(GUI) - 06.grid

1. 요소(위젯) grid로 나타내기.

 - tkinter GUI는 pack, grid, place 3가지 방식으로 위치를 나타낼 수 있는데,

  지난 pack에 관련된 포스팅에 이어 2번째 grid에 대한 포스팅이다.

[이전 글 추가]

 

 - pack만 사용하거나 grid만 사용해도 무관하나, 상황에 따라 더 편리한 방법이 있다보니

   2가지를 다 알고 혼용하는 것도 좋다.

 - grid가 가지는 가장 큰 장점은 반듯한 사격형에 넣은 것과 같은 규격이다.

 - 셀 단위 배치라고도 부르는데, column(열)과 row(행)의 번호를 할당해주는 방식이다.

from tkinter import *

root = Tk()
root.title('To올라운드의 알찬 GUI 강의')


root.geometry("600x500") # 가로 X 세로 / 대문자X 하면 실행안됨




body_frame = Frame(root, relief='solid', bd=2, background='orange', padx=5, pady=5)
body_frame.pack(fill='both', expand=True)


num1_gird = Label(body_frame, text='(0,0)', relief='solid', bd=1)
num1_gird.grid(column=0, row=0)
num2_gird = Label(body_frame, text='(1,0)', relief='solid', bd=1)
num2_gird.grid(column=1, row=0)
num3_gird = Label(body_frame, text='(2,0)', relief='solid', bd=1)
num3_gird.grid(column=2, row=0)
num4_gird = Label(body_frame, text='(3,0)', relief='solid', bd=1)
num4_gird.grid(column=3, row=0)
num5_gird = Label(body_frame, text='(0,1)', relief='solid', bd=1)
num5_gird.grid(column=0, row=1)
num6_gird = Label(body_frame, text='(1,1)', relief='solid', bd=1)
num6_gird.grid(column=1, row=1)
num7_gird = Label(body_frame, text='(2,1)', relief='solid', bd=1)
num7_gird.grid(column=2, row=1)
num8_gird = Label(body_frame, text='(3,1)', relief='solid', bd=1)
num8_gird.grid(column=3, row=1)
num9_gird = Label(body_frame, text='(0,2)', relief='solid', bd=1)
num9_gird.grid(column=0, row=2)
num10_gird = Label(body_frame, text='(1,2)', relief='solid', bd=1)
num10_gird.grid(column=1, row=2)
num11_gird = Label(body_frame, text='(2,2)', relief='solid', bd=1)
num11_gird.grid(column=2, row=2)
num12_gird = Label(body_frame, text='(3,2)', relief='solid', bd=1)
num12_gird.grid(column=3, row=2)




root.resizable(False,False) # x너비, y 변경 허용 여부
root.mainloop()

 

 

2. 응용하기

 - 위에서 보듯이 column과 row 번호만 할당해주면 특별히 사용상 어려운 점은 없다.

 - 가장 많이 사용하는 확장(칸합치기/span)을 활용해서 키보드의 번호 패드와 같은 모양의 UI를 생성해보자.

 - 만들어 UI는 이런 형태인데, 처음 본 예시 그림과 크게 다른 부분은 없고, 0과 +, Enter 키의 경우 2칸이 합쳐져 있는 상태이다.

 - 이럴 때는 사용 기능에 따라 columnspan 또는 rowspan 의 파라미터를 추가하고 확장할 셀(칸)의 갯수를 입력하면 된다.

  - 코드

from tkinter import *

root = Tk()
root.title('To올라운드의 알찬 GUI 강의')


root.geometry("200x250") # 가로 X 세로 / 대문자X 하면 실행안됨




body_frame = Frame(root, relief='solid', bd=2, background='orange', padx=5, pady=5)
body_frame.pack(fill='both', expand=True)


num_numberlock_gird = Label(body_frame, text='Num', relief='solid', bd=1)
num_numberlock_gird.grid(column=0, row=0)
num_div_gird = Label(body_frame, text='/', relief='solid', bd=1)
num_div_gird.grid(column=1, row=0)
num_mul_gird = Label(body_frame, text='*', relief='solid', bd=1)
num_mul_gird.grid(column=2, row=0)
num_minus_gird = Label(body_frame, text='-', relief='solid', bd=1)
num_minus_gird.grid(column=3, row=0)

num7_gird = Label(body_frame, text='7', relief='solid', bd=1)
num7_gird.grid(column=0, row=1)
num8_gird = Label(body_frame, text='8', relief='solid', bd=1)
num8_gird.grid(column=1, row=1)
num9_gird = Label(body_frame, text='9', relief='solid', bd=1)
num9_gird.grid(column=2, row=1)
num_sum_gird = Label(body_frame, text='+', relief='solid', bd=1)
num_sum_gird.grid(column=3, row=1, rowspan=2)

num4_gird = Label(body_frame, text='4', relief='solid', bd=1)
num4_gird.grid(column=0, row=2)
num5_gird = Label(body_frame, text='5', relief='solid', bd=1)
num5_gird.grid(column=1, row=2)
num6_gird = Label(body_frame, text='6', relief='solid', bd=1)
num6_gird.grid(column=2, row=2)

num1_gird = Label(body_frame, text='1', relief='solid', bd=1)
num1_gird.grid(column=0, row=3)
num2_gird = Label(body_frame, text='2', relief='solid', bd=1)
num2_gird.grid(column=1, row=3)
num3_gird = Label(body_frame, text='3', relief='solid', bd=1)
num3_gird.grid(column=2, row=3)
num_enter_gird = Label(body_frame, text='Enter', relief='solid', bd=1)
num_enter_gird.grid(column=3, row=3, rowspan=2)

num0_gird = Label(body_frame, text='0', relief='solid', bd=1)
num0_gird.grid(column=0, row=4, columnspan=2)
num_dot_gird = Label(body_frame, text='.', relief='solid', bd=1)
num_dot_gird.grid(column=2, row=4)




root.resizable(False,False) # x너비, y 변경 허용 여부
root.mainloop()

반응형

  - 뭔가 정렬된듯 하면서도 아쉬운 UI가 나왔다. 

  - 여기에 width나 정렬과 관련된 몇가지 파라미터들을 더 추가해보겠다.

from tkinter import *

root = Tk()
root.title('To올라운드의 알찬 GUI 강의')


root.geometry("200x250") # 가로 X 세로 / 대문자X 하면 실행안됨




body_frame = Frame(root, relief='solid', bd=2, background='orange', padx=5, pady=5)
body_frame.pack(fill='both', expand=True)


num_numberlock_gird = Label(body_frame, text='Num', relief='solid', bd=1 , width=5 , height=2)
num_numberlock_gird.grid(column=0, row=0)
num_div_gird = Label(body_frame, text='/', relief='solid', bd=1 , width=5 , height=2)
num_div_gird.grid(column=1, row=0)
num_mul_gird = Label(body_frame, text='*', relief='solid', bd=1 , width=5 , height=2)
num_mul_gird.grid(column=2, row=0)
num_minus_gird = Label(body_frame, text='-', relief='solid', bd=1 , width=5 , height=2)
num_minus_gird.grid(column=3, row=0)

num7_gird = Label(body_frame, text='7', relief='solid', bd=1 , width=5 , height=2)
num7_gird.grid(column=0, row=1)
num8_gird = Label(body_frame, text='8', relief='solid', bd=1 , width=5 , height=2)
num8_gird.grid(column=1, row=1)
num9_gird = Label(body_frame, text='9', relief='solid', bd=1 , width=5 , height=2)
num9_gird.grid(column=2, row=1)
num_sum_gird = Label(body_frame, text='+', relief='solid', bd=1 , width=5 , height=2)
num_sum_gird.grid(column=3, row=1, rowspan=2)

num4_gird = Label(body_frame, text='4', relief='solid', bd=1 , width=5 , height=2)
num4_gird.grid(column=0, row=2)
num5_gird = Label(body_frame, text='5', relief='solid', bd=1 , width=5 , height=2)
num5_gird.grid(column=1, row=2)
num6_gird = Label(body_frame, text='6', relief='solid', bd=1 , width=5 , height=2)
num6_gird.grid(column=2, row=2)

num1_gird = Label(body_frame, text='1', relief='solid', bd=1 , width=5 , height=2)
num1_gird.grid(column=0, row=3)
num2_gird = Label(body_frame, text='2', relief='solid', bd=1 , width=5 , height=2)
num2_gird.grid(column=1, row=3)
num3_gird = Label(body_frame, text='3', relief='solid', bd=1 , width=5 , height=2)
num3_gird.grid(column=2, row=3)
num_enter_gird = Label(body_frame, text='Enter', relief='solid', bd=1 , width=5 , height=2)
num_enter_gird.grid(column=3, row=3, rowspan=2)

num0_gird = Label(body_frame, text='0', relief='solid', bd=1 , width=5 , height=2)
num0_gird.grid(column=0, row=4, columnspan=2)
num_dot_gird = Label(body_frame, text='.', relief='solid', bd=1 , width=5 , height=2)
num_dot_gird.grid(column=2, row=4)




root.resizable(False,False) # x너비, y 변경 허용 여부
root.mainloop()

  - width와 height 값만 추가해도 좀 더 그럴 듯 해졌다. 하지만 아직 확장된 버튼들을 보면

    위치는 우리가 원하는 중앙에 있는것으로 보이나 해당 칸이 확장되어 있지 않다.

  - 해당 값 확장을 위해 sticky 옵션을 할당한다.

  - 해당 파라미터는 할당된 영역의 확장하는 방향을 설정하게 되는데,

     n : north, e : east, w : west, s : south 로 각각의 방향을 혼합해서 nesw 등 함께 입력하면

     최대 크기로 할당되는 것을 확인할 수 있다.

from tkinter import *

root = Tk()
root.title('To올라운드의 알찬 GUI 강의')


root.geometry("200x250") # 가로 X 세로 / 대문자X 하면 실행안됨




body_frame = Frame(root, relief='solid', bd=2, background='orange', padx=5, pady=5)
body_frame.pack(fill='both', expand=True)


num_numberlock_gird = Label(body_frame, text='Num', relief='solid', bd=1 , width=5 , height=2)
num_numberlock_gird.grid(column=0, row=0)
num_div_gird = Label(body_frame, text='/', relief='solid', bd=1 , width=5 , height=2)
num_div_gird.grid(column=1, row=0)
num_mul_gird = Label(body_frame, text='*', relief='solid', bd=1 , width=5 , height=2)
num_mul_gird.grid(column=2, row=0)
num_minus_gird = Label(body_frame, text='-', relief='solid', bd=1 , width=5 , height=2)
num_minus_gird.grid(column=3, row=0)

num7_gird = Label(body_frame, text='7', relief='solid', bd=1 , width=5 , height=2)
num7_gird.grid(column=0, row=1)
num8_gird = Label(body_frame, text='8', relief='solid', bd=1 , width=5 , height=2)
num8_gird.grid(column=1, row=1)
num9_gird = Label(body_frame, text='9', relief='solid', bd=1 , width=5 , height=2)
num9_gird.grid(column=2, row=1)
num_sum_gird = Label(body_frame, text='+', relief='solid', bd=1 , width=5 , height=2)
num_sum_gird.grid(column=3, row=1, rowspan=2, sticky='NWES')

num4_gird = Label(body_frame, text='4', relief='solid', bd=1 , width=5 , height=2)
num4_gird.grid(column=0, row=2)
num5_gird = Label(body_frame, text='5', relief='solid', bd=1 , width=5 , height=2)
num5_gird.grid(column=1, row=2)
num6_gird = Label(body_frame, text='6', relief='solid', bd=1 , width=5 , height=2)
num6_gird.grid(column=2, row=2)

num1_gird = Label(body_frame, text='1', relief='solid', bd=1 , width=5 , height=2)
num1_gird.grid(column=0, row=3)
num2_gird = Label(body_frame, text='2', relief='solid', bd=1 , width=5 , height=2)
num2_gird.grid(column=1, row=3)
num3_gird = Label(body_frame, text='3', relief='solid', bd=1 , width=5 , height=2)
num3_gird.grid(column=2, row=3)
num_enter_gird = Label(body_frame, text='Enter', relief='solid', bd=1 , width=5 , height=2)
num_enter_gird.grid(column=3, row=3, rowspan=2, sticky='NWES')

num0_gird = Label(body_frame, text='0', relief='solid', bd=1 , width=5 , height=2)
num0_gird.grid(column=0, row=4, columnspan=2, sticky='NWES')
num_dot_gird = Label(body_frame, text='.', relief='solid', bd=1 , width=5 , height=2)
num_dot_gird.grid(column=2, row=4)




root.resizable(False,False) # x너비, y 변경 허용 여부
root.mainloop()

 

- 원본 이미지와 비교해보면 동일한 UI를 완성하였다.

 

3. 파라미터

이름	의미	기본값	속성
row	행 위치	0	상수
column	열 위치	0	상수
rowspan	행 위치 조정	1	상수
columnspan	열 위치 조정	1	상수
sticky	할당된 공간 내에서의 위치 조정	-	n, e, s, w, nw, ne, sw, se
ipadx	위젯에 대한 x 방향 내부 패딩	0	상수
ipady	위젯에 대한 y 방향 내부 패딩	0	상수
padx	위젯에 대한 x 방향 외부 패딩	0	상수
pady	위젯에 대한 y 방향 외부 패딩	0	상수

  - 해당 파라미터를 이용해 좀 더 원하는 형태로 생성할 수 있다.