(Tkinter - Basic) Chapter 8. Frame (프레임)

"Life is too short, You need python"

프레임 위젯을 사용하면 위젯을 구성하고 그룹화할 수 있습니다. 위젯을 배치할 수 있는 직사각형 영역이며 마치 컨테이너처럼 작동합니다. GUI 앱을 만든다면 여러 위젯을 사용하겠지만 Geometry Manager만으로는 배치에 한계가 있습니다. 위젯 배치를 도와 이를 보완해 줄 수 있는 것이 바로 Frame 위젯입니다. Frame의 기본적인 구문 사용법, Method, Option Parameters 그리고 간단한 사용 예에 대해 알아보도록 하겠습니다.

A frame in Tk lets you organize and group widgets. It works like a container. Its a rectangular area in which widges can be placed. If you make a GUI app, you’ll be using different widgets. Those widgets need to be organized somehow, that’s where a frame comes in.

 

---

 

Frame ( 프레임 )

 

 

 

GUI로 프로그램을 제작하는 가장 큰 이유이자 중요한 이유는 개체들의 그래픽화를 통해 보다 쉽고 직관적인 조작 방식을 제공함으로써 사용자 친화적인 환경에서 사용자가 소프트웨어와 상호 작용하는 것을 돕기 위함입니다.

외형적인 디자인도 중요하겠지만 더 핵심적인 기능은 적절한 Layout 배치를 고려하여 사용자가 쉽고 직관적인 조작을 할 수 있도록 공간을 할당해야 합니다. 

다만, Tkinter에서 제공하는 Geometry Manager(Pack, Grid, Place)만으로 Layout을 의도대로 컨트롤 하기엔 다소 아쉽고 어려운 부분이 있는데 Frame은 이러한 부분을 보완해 주는 역할을 하게 됩니다. Frame을 통해 미리 위젯들이 배치될 공간을 나누어 주고 위젯들을 Frame안에 담는다고 생각하면 됩니다.

 

---

 

Syntax ( 구문 )

 

frame_pylife = tk.Listbox(container***, option parameters)

 

*** container : parent window ( root )

 

---

 

Skeleton Code

 

아래는 Frame 위젯을 설명하기 위한 Skeleton Code 입니다.

Frame 위젯은 내부에 위젯이 없고, 별도 옵션이 없으면 실행 시 아무것도 나타나지 않기 때문에

시각적인 도움을 위해 skeleton code에 height, fill, background 옵션을 추가하였습니다.

 

Input »

 

 

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.geometry('300x150')
root.resizable(False, False)
root.title('Widget Demo')

# show the widget syntax here
frame_pylife_first = tk.Frame(root, height = 30, background = '#FFF0C1')
frame_pylife_second = tk.Frame(root, height = 30, background = '#D2E2FB')
frame_pylife_third = tk.Frame(root, height = 30, background = '#CCE4CA')
frame_pylife_fourth = tk.Frame(root, height = 30, background = '#F5C2C1')
frame_pylife_first.pack(fill = 'x')
frame_pylife_second.pack(fill = 'x')
frame_pylife_third.pack(fill = 'x')
frame_pylife_fourth.pack(fill = 'x')

root.mainloop()

 

Output »

 

 

Frame 기본 Format

 

---

 

Option Parameters

 

위젯의 구문 Option으로 추가해도 되고 .Config() Method를 통해 설정도 가능합니다.

 

- Widget Design Setting -

Name	Meaning	Default	Preference
width	프레임 너비	0	상수***
height	프레임 높이	0	상수***
relief	프레임 테두리 모양	flat	relief 속성***
background=bg	프레임 배경 색상	SystemButtonFace	color
padx	프레임 테두리와 내용의 가로 여백	1	상수
pady	프레임 테두리와 내용의 세로 여백	1	상수
cursor	프레임의 마우스 커서 모양	-	cursor 속성***
class_	클래스 설정	-	-
visual	시각적 정보 설정	-	-
colormap	256 색상을 지정하는 색상 맵 설정	-	new
highlightcolor	프레임이 선택되었을 때 색상	SystemWindowFrame	color
highlightbackground	프레임이 선택되지 않았을 때 색상	SystemButtonFace	color
highlightthickness	프레임이 선택되었을 때 두께***	0	상수

*** width/height : 내부에 위젯이 존재할 경우, 설정을 무시하고 크기 자동 조절

*** relief 속성 : flat, groove, raised, ridge, solid, sunken

*** highlightbackground를 설정하였을 경우, 프레임이 선택되지 않았을 때에도 두께가 표시됨

*** cursor 속성 : arrow, based_arrow_down, based_arrow_up, boat, bogosity, bottom_left_corner, bottom_right_corner, bottom_side, bottom_tee, box_spiral, center_ptr, circle, clock, coffee_mug, cross, cross_reverse, crosshair, diamond_cross, dot, dotbox, double_arrow, draft_large, draft_small, draped_box, exchange, fleur, gobbler, gumby, hand1, hand2, heart, icon, iron_cross, left_ptr, left_side, left_tee, leftbutton, ll_angle, lr_angle, man, middlebutton, mouse, pencil, pirate, plus, question_arrow, right_ptr, right_side, right_tee, rightbutton, rtl_logo, sailboat, sb_down_arrow, sb_h_double_arrow, sb_left_arrow, sb_right_arrow, sb_up_arrow, sb_v_double_arrow, shuttle, sizing, spider, spraycan, star, target, tcross, top_left_arrow, top_left_corner, top_right_corner, top_side, top_tee, trek, ul_angle, umbrella, ur_angle, watch, wait, xterm, X_cursorflat, groove, raised, ridge, solid, sunken

 

 

- Widget 동작 관련 -

Name	Meaning	Default	Preference
takefocus	Tab 키를 이용하여 위젯 이동 허용 여부	False	Boolean
container	응용 프로그램이 포함될 컨테이너로 사용***	False	Boolean

*** container를 True로 설정하였을 경우, 프레임의 내부에 위젯이 포함되어 있지 않아야 함

 

---

 

Example (Use Case)

 

Label과 Button을 활용하여 Frame을 어떻게 사용하는지 간단하게 알아보도록 하겠습니다.

 

Input »

 

 

import tkinter as tk
from tkinter import ttk

# show the widget syntax here
frame_pylife_first = tk.Frame(root, height = 30, background = '#FFF0C1')
frame_pylife_second = tk.Frame(root, height = 30, background = '#D2E2FB')
frame_pylife_third = tk.Frame(root, height = 30, background = '#CCE4CA')
frame_pylife_fourth = tk.Frame(root, height = 30, background = '#F5C2C1')
frame_pylife_first.pack(fill = 'x')
frame_pylife_second.pack(fill = 'x')
frame_pylife_third.pack(fill = 'x')
frame_pylife_fourth.pack(fill = 'x')

label_pylife = tk.Label(frame_pylife_first, text='Pylife', bg = '#FFF0C1', font=("Helvetica", 14))
label_pylife.pack(side = 'left', ipadx = 10, ipady = 10)

photo = tk.PhotoImage(file = './search_icon.png')
label_image = tk.Label(frame_pylife_second, image = photo, text = 'Pylife', bg = '#D2E2FB', compound='top')
label_image.pack()

button_pylife = tk.Button(frame_pylife_third, text='Pylife', bg = '#CCE4CA')
button_pylife.pack(side = 'left', ipadx = 10, ipady = 10, padx = 5, pady = 5)

root.mainloop()

 

Output »

 

 

Frame 활용

 

---

 

아래는 Label, Entry와 Button을 활용 예입니다.

Username과 Password Label이 frame_pylife_first로 묶이고

Username과 Password Entry가 frame_pylife_second로 묶여 frame_pylife_login으로 들어가도록 배치하였습니다.

 

Input »

 

 

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.geometry('300x200')
root.resizable(False, False)
root.title('Widget Demo')

# show the widget syntax here
frame_pylife_login = tk.Frame(root)
frame_pylife_first = tk.Frame(frame_pylife_login, bg = '#FFF0C1')
frame_pylife_second = tk.Frame(frame_pylife_login, bg = '#D2E2FB')
frame_pylife_third = tk.Frame(root, bg = '#CCE4CA')
frame_pylife_login.pack(fill = 'x')
frame_pylife_first.pack(side = 'left', fill = 'both')
frame_pylife_second.pack(side = 'left', fill = 'both', expand = True)
frame_pylife_third.pack(fill = 'x')

label_username = tk.Label(frame_pylife_first, text = 'Username', bg = '#FFF0C1', font = ('calibre', 9, 'bold'))
label_username.pack(fill = 'both', padx = 5, pady = 5, ipadx = 5, ipady = 5)
label_password = tk.Label(frame_pylife_first, text = 'Password', bg = '#FFF0C1', font = ('calibre', 9, 'bold'))
label_password.pack(fill = 'both', padx = 5, pady = 5, ipadx = 5, ipady = 5)
entry_name = tk.Entry(frame_pylife_second, font = ('calibre', 9, 'bold'))
entry_name.pack(fill = 'both', padx = 10, pady = 5, ipadx = 5, ipady = 5, expand = True)
entry_password = tk.Entry(frame_pylife_second, font = ('calibre', 9, 'bold'), show = '*') 
entry_password.pack(fill = 'both',  padx = 10, pady = 5, ipadx = 5, ipady = 5, expand = True)
button_summit = tk.Button(frame_pylife_third, text='Summit', bg = '#CCE4CA', font = ('calibre', 9, 'bold'))
button_summit.pack(side = 'left', padx = 10, pady = 10, ipadx = 10, ipady = 10)
button_cancel = tk.Button(frame_pylife_third, text='Cancel', bg = '#CCE4CA', font = ('calibre', 9, 'bold'))
button_cancel.pack(side = 'left', padx = 10, pady = 10, ipadx = 10, ipady = 10)
root.mainloop()

 

Output »

 

 

Frame을 활용한 Login 창

 

---

 

(( 마무리 ))

 

Tkinter Frame의 사용법과 활용 예에 대해 알아보았습니다. Chapter 9에서는 Text의 사용법에 대해 알아보도록 하겠습니다.