독학 Python tkinter(GUI) - 03.Frame

1. Frame 어디에 숨어 있었나?

  - 첫 포스팅에서 각각의 요소들에 대한 명칭을 배우며, Frame을 보지 못했을 것입니다.

  - 영어 단어 그대로 '틀' 이라는 의미 인데요.

  - 우리는 이 '틀'을 이용해 각각의 요소(위젯)들을 배치하기도 하고, 

    틀안에 다시 틀을 넣어서 원하는 위치를 가지도록 할 수 있습니다.

  - 먼저 처음 보았던 GUI 각 요소들의 설명시에 확인하지 못했던 Frame이 어디있는지 확인해볼까요?

  - 오른쪽에 보이는 검은색 으로 나뉘어진 영역들이 모두 Frame 영역들입니다.

  - 실제 프로그램에서는 상황에 따라 실선이나 점선 등으로 나타낼 수도 있고, 

    안 보이게도 설정 가능합니다.

 - 해당 영역을 나누는 가장 큰 이유는 필요한 기능끼리 정렬해서 배치하고 관리하기 위함입니다.

 - 그리고 가장 큰 특징 중 하나는 프레임 안에도 프레임을 입력할 수 있다는 것입니다.

 

2. Frame 사용하기

 - 사실 우리는 이미 가장 기본이 되는 frame을 알고 있습니다.

 - 바로 root라고 정의한 기본 윈도우 창입니다.

 - 이 root창을 어떻게 나눠써야 할지를 생각하고 생각한대로 나누는게 이번 포스팅의 목적이 되겠네요.

 - 이전에 샘플로 확인한 프로그램을 보면 크게는 3개의 Frame으로 되어 있고,

   가운데(주황색) Frame은 좌우를 나뉘어 초록색과 파란색 영역의 Frame이 들어 있는 형태입니다.

 - 우리도 이런 형태의 Frame을 1차적으로 구성해보겠다.

 

3. 코드1

from tkinter import *

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


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

head_frame = Frame(root, relief='solid', bd=2, background='red')
head_frame.pack(fill='both', expand=True)


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

 - 이전 포스팅에서 작성된 기본 코드에 9~10 라인이 추가된 코드이다.

 - 실행해보면 빨간색으로 뒤덮힌 창이 나타나는데, 이건 눈에 보기 좋게 표기했을 뿐이다.

 - Frame을 선언하는 방법은 9라인과 같이 사용될 frame의 이름을 먼저 정의하고 이후,

   Frame이 생성될 위치(root도 tkinter로 생성되는 가장 기본 윈도우 Frame이다.)와

   속성들을 입력한다.

 - 각각의 속성은 relief - 영역 경계선(검은 테두리), bd - 영역 경계선 굵기, background - 배경색 등이다.

   더 자세한 내용은 아래에 일괄적으로 정리하겠습니다.

 - 그리고 10라인의 pack()을 실행해야 선언한 해당 frame이 지정된 윈도우(root)창에 나타나게 됩니다.

   (pack 외에도 grid, place가 있으며 이후 포스팅에서 다룰 예정입니다.)

반응형

 

 

 

4. Frame 파라미터 값

  - Frame의 파라미터 값을 아래의 조건에 따라 할당할 수 있습니다.

이름	의미	기본값	속성
width	Frame 의 너비	0	상수
height	Frame의 높이	0	상수
relief	Frame 의 테두리 모양	flat	flat, groove, raised, ridge, solid, sunken
background=bg	Frame 의 배경 색상	SystemButtonFace	color
padx	Frame 의 테두리와 내용의 가로 여백	1	상수
pady	Frame 의 테두리와 내용의 세로 여백	1	상수

 

5. 코드 2

 - 이제 우리가 추가하려던 형태에 따라 주황색영역과 보라색 영역도 추가해보겠습니다.

from tkinter import *

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


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

head_frame = Frame(root, relief='solid', bd=2, background='red')
head_frame.pack(fill='both', expand=True)


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


tail_frame = Frame(root, relief='solid', bd=2, background='purple')
tail_frame.pack(fill='both', expand=True)

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

 - body_frame과 tail_frame을 생성하였고, 해당 frame을 나타내자(pack)

   별다른 설정이 없어도 위에서 아래로 쌓이는 형태로 나타나는 걸 보실 수 있습니다.

 

 

6. 코드3

 - 그럼 이제 마지막 과정인 body_frame 안에 초록색과 파란색의 frame을 입력해보도록 할까요?

from tkinter import *

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


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

head_frame = Frame(root, relief='solid', bd=2, background='red')
head_frame.pack(fill='both', expand=True)


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


body_left_frame = Frame(body_frame, relief='raised', bd=2, background='green')
body_left_frame.pack(fill='both', expand=True)

body_right_frame = Frame(body_frame, relief='ridge', bd=2, background='blue')
body_right_frame.pack(fill='both', expand=True)


tail_frame = Frame(root, relief='solid', bd=2, background='purple')
tail_frame.pack(fill='both', expand=True)

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

 

- 코드를 확인해 봐도 기존에는 root에 위치하던 frame 값이 body_frame으로 변경되었는데(17~21 라인)

   그 결과 2번째 코드와는 달리 주황색 영역이 사라지고, 해당 영역이 초록색과 파란색으로 바뀐것을 확인하실 수 있습니다.

 - 처음 계획했던 좌우로 나뉜 구성이 되지 않았지만 해당 내용은 다음 포스팅인 pack과 grid, place를 다루는 포스팅에서 자세히 다뤄보도록 하겠습니다.

 

 - 17라인과 20라인을 비교해보면 background 뿐 아니라 relief(경계선)의 유형도 다름을 볼 수 있습니다. 

   실행된 UI를 보면 해당 기능의 차이를 확인 하실 수 있습니다.

 - 13라인의 padx와 pady를 통해 내부의 여백을 설정할 수 있습니다. 해당 값이 0이면, 주황색 영역이 사라지고,

   초록색과 파란색으로만 나타납니다.

 

어떠신가요? 생각보다 어렵진 않지만, 이때까지는 생각하지 못했던 부분들이 있지 않으신가요?

 

실제 시중에 유통되는 프로그램은 많은 개발자 뿐 아니라 디자이너 분들의 노력과 기술도 많이 포함되어 있습니다.

디자인적인 능력이 없다고 좌절하거나 포기하지마세요.

 

우린 전문 디자이너가 아닌 코드쟁이들일 뿐이니, 주어진 조건으로 최선을 다해보는 것이 

이번 포스팅의 목적입니다. 심플한게 가장 베스트일수도 있으니까요.

 

이제 다음 포스팅에서 Lable을 다뤄보도록 하겠습니다.