파이썬(Python)/tkinter

파이썬 tkinter - grid란? (간격, 배치, 정렬 방법) 예제로 쉽게 이해하기

끄적끄적아무거나 2021. 9. 17. 13:17
반응형

Python tkinter grid란?

 

grid는 우리가 일반적으로 사용하는 엑셀처럼 행(row)과 열(column)의 번호를 이용해서 text, label, button 을 배치하는 작업이다. 

 

아래 예제 작업에서 버튼으로 예제를 시행할 것이다. 이유는 네모 모양이라 사이 간격이나 배치 모양이 눈에 바로 들어오기 때문이다. 

 


tkinter 배치하기

 

코드>>

from tkinter import *

app = Tk()

btn_0 = Button(app, text="(0, 0)")   
btn_0.grid(column=0, row=0)
btn_1 = Button(app, text="(1, 1)")   
btn_1.grid(column=1, row=1)
btn_2 = Button(app, text="(2, 2)")   
btn_2.grid(column=2, row=2)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

 

결과>>

주석>>

단순히 grid 안의 column, row 값을 지정하여 배치하였다.

 

만일 btn_0을 column=1, row=0에 배치하기위해 값을 변경하면 아래 그림처럼 예상과는 다른 결과가 나온다. 

이유는 첫번째 값으로 column=1, row=0을 넣었기 때문에 (0,0) 지점이 column=1, row=0 값으로 매칭되어서 계산되기 때문이다. 

 

그러므로 (0,0)의 위치를 비우고 다음 칸부터 채우고 싶을 경우 아래와 같이 추가 빈칸을 넣어줘야 한다. width로 크기를 지정하지 않으면 blank 칸이 없어지므로 지정해야한다. 

from tkinter import *

app = Tk()

blank_0 = Label(app, text="", width=5)   
blank_0.grid(column=0, row=0)
btn_0 = Button(app, text="(0, 1)", width=5)   
btn_0.grid(column=1, row=0)
blank_1 = Label(app, text="", width=5)   
blank_1.grid(column=0, row=0)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

위 코드의 결과는 아래와 같다. 

 


tkinter 정렬하기 & 배치하기

 

정렬을 위한 옵션 값들은 아래와 같다.

 

  • padx : x방향 외부 패딩
  • pady : y방향 외부 패딩
  • ipadx : x방향 내부 패딩
  • ipady : y방향 내부 패딩
  • sticky : 동서남북 위치 조절(n, e, s, w, nw, ne, sw, se)
  • rowspan : 행 합치기
  • clumnspan : 열 합치기

 

padx, pady 사용하여 위치 조정하기

 

코드>>

from tkinter import *

app = Tk()

btn_0 = Button(app, text="(0, 1)")   
btn_0.grid(column=1, row=0)
btn_1 = Button(app, text="(0, 2)")   
btn_1.grid(column=2, row=0)
btn_2 = Button(app, text="(0, 3)")   
btn_2.grid(column=3, row=0)
btn_3 = Button(app, text="(1, 1)")   
btn_3.grid(column=1, row=1, padx= 5, pady= 5)
btn_4 = Button(app, text="(1, 2)")   
btn_4.grid(column=2, row=1)
btn_5 = Button(app, text="(1, 3)")   
btn_5.grid(column=3, row=1)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

 

결과>>

 

주석>>

(1,1)에 padx, pady값을 입력하였다. 결과와 같이 외부와 간격이 생겼다.

이때 유의할 점은 (1,1) pad 값이 다른 행과 열에도 영향을 주는 것이다.

 

 

ipadx, ipady 사용하여 내용 위치 조정하기

 

코드>>

from tkinter import *

app = Tk()

btn_0 = Button(app, text="(0, 1)")   
btn_0.grid(column=1, row=0)
btn_1 = Button(app, text="(0, 2)")   
btn_1.grid(column=2, row=0)
btn_2 = Button(app, text="(0, 3)")   
btn_2.grid(column=3, row=0)
btn_3 = Button(app, text="(1, 1)")   
btn_3.grid(column=1, row=1, ipadx= 5, ipady= 5)
btn_4 = Button(app, text="(1, 2)")   
btn_4.grid(column=2, row=1)
btn_5 = Button(app, text="(1, 3)")   
btn_5.grid(column=3, row=1)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

 

결과>>

 

주석>>

글자 크기는 고정이므로 버튼이 내부에 pad 값을 키웠으므로 그림처럼 버튼의 크기가 변경되었다. 다른 행과 열도 결과처럼 영향을 받는다. 

 

 

sticky 사용하여 내용 위치 조정하기

 

코드>>

from tkinter import *

app = Tk()

btn_0 = Button(app, text="(0, 1)", width=10, height=2)   
btn_0.grid(column=1, row=0)
btn_1 = Button(app, text="(0, 2)", width=10, height=2)   
btn_1.grid(column=2, row=0)
btn_2 = Button(app, text="(0, 3)", width=10, height=2)   
btn_2.grid(column=3, row=0)
btn_3 = Button(app, text="(1, 1)")   
btn_3.grid(column=1, row=1, sticky="se")
btn_4 = Button(app, text="(1, 2)", width=10, height=2)   
btn_4.grid(column=2, row=1)
btn_5 = Button(app, text="(1, 3)", width=10, height=2)   
btn_5.grid(column=3, row=1)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

 

결과>>

 

주석>>

south east (동남)으로 (1,1)을 설정하였고 결과처럼 배치되었다.

 

 

행, 열 합치기 

 

코드>>

from tkinter import *

app = Tk()

btn_0 = Button(app, text="(0, 1)")   
btn_0.grid(column=1, row=0, rowspan=2)
btn_1 = Button(app, text="(0, 2)")   
btn_1.grid(column=2, row=0)
btn_2 = Button(app, text="(0, 3)")   
btn_2.grid(column=3, row=0)
btn_4 = Button(app, text="(1, 2)")   
btn_4.grid(column=2, row=1, columnspan=2)

app.title('scribblinganything.tistory.com')
app.geometry("300x200")
app.mainloop()

 

결과>>

 

주석>>

그림처럼 (0,1)은 rowspan 으로 행을 합쳤고 (1,2)는 columnspan으로 열을 합쳤다.

 

 

 

 

 

 

 

반응형