전체 글 (54) 썸네일형 리스트형 id, class 태그 id : 요소에 고유한 이름을 부여하는 식별자 속성 class: 요소를 그룹별로 묶어서 정의하는 식별자 속성 id와 class로 요소를 지정해 놓으면 차후 css나 javascrip로 해당 요소에 기능을 추가할 때 유용하다. id는 태그한 하나씩만 지정해야 하지만, class는 다중 지정 및 중복 가능함. 건강 수칙! 운동을 하자! 주 150시간 이상의 운동을 합니다. 식단 조절을 하자! 탄수화물 섭취를 줄이고 과일 채소를 많이 먹습니다. 개발자 도구를 통해 확인해 보면 두개의 div 요소가 각각 id가 exercise, nurtion 으로 지정되어 있어 서로 식별이 가능함을 확인할 수 있다. 두 div 요소의 h2 태그는 모두 title이라는 class로 지정되어 있음을 확인할 수 있다. 위젯 배치 - pack() tkinter에서 위젯을 배치하는 방법에는 pack, grid, place가 있다. 먼저 pack에 대하여 알아보겠다. pack은 위젯 요소들을 순서대로 배치시키는 것이다. 기본 문법 # pack()을 이용하여 label1부터 4까지 순서대로 배치시킨다. # pack()은 기본적으로 위에서 아래로 순서대로 배치시킨다. import tkinter from tkinter import * win = Tk() win.title("위젯 배치 pack") win.geometry("600x400") label1 = Label(win, text = "라벨 1", width = 10, height = 2, bg = "pink") label2 = Label(win, text = "라벨 2", width = 10, heig.. 컨테이너 태그 - div, span 태그 컨테이너 태그 여러 요소를 묶어 관리하기 편하게 만드는 역할을 하는 태그 콘텐츠 내용을 구분하거나, 공통적인 스타일 적용하고자 할 때 사용 컨테이너 태그를 이용해 콘텐츠의 내용을 묶어주면 차후 javascript를 통한 명령어를 적용할 때 유용하다. div 태그 블록 레벨의 콘텐츠를 묶어주는 컨테이너 태그 나의 목표 1 프로그래밍 언어를 공부한다. 나의 목표 2 운동을 열심히 한다. 개발자 도구를 이용해 확인해 보면 나의 목표 1이 한 블록으로 묶여 있음을 확인할 수 있다. 개발자 도구를 이용해 확인해 보면 나의 목표 2가 한 블록으로 묶여 있음을 확인할 수 있다. span 태그 인라인 레벨의 콘텐츠를 묶어주는 컨테이너 태그 나의 목표 1 프로그래밍 언어를 공부한다. 나의 목표 2 운동을 열심히 한다. .. 이미지 태그(img) img 태그는 이미지를 표시할 때 사용하는 태그입니다. 단일 태그로써 닫는 태그가 필요없습니다. 1. 기본 문법 scr 속성은 표시할 이미지의 경로와 파일명을 입력 받음. alt 속성은 이미지 로딩이 실패할 경우 이미지를 대체할 속성. 2. 이미지 크기 조절하기 width와 height를 이용하여 이미지 크기 지정 너비값과 높이값은 px 단위 3. 코드 예시 이미지 태그 사용 img 태그를 이용하여 이미지를 나타낸다. 내가 좋아하는 나연 사진입니다. 4. 코드 설명 html 프로젝트 폴더에 이미지 폴더를 만들고 거기에 nayeon.jpg 파일을 넣는다. img src에 nayeon.jpg가 속해있는 폴더인 images\nayeon.jpg 를 기입해 준다. nayeon.jpg 이 로딩이 되지 않았을 경우 .. Tkinter 기본 위젯 종류 1. Label(라벨) import tkinter as tk from tk import * win = tk.Tk() win.geometry("300x240") label = tk.Label(win, text = "라벨입니다.") label.pack() win.mainloop() 2. Button(버튼) import tkinter as tk from tkinter import * win = tk.Tk() win.geometry("300x240") button = tk.Button(win, text = "버튼 입니다.") button.pack() win.mainloop() 버튼 위젯입니다. 현재 버튼에 기능이 부여되어 있지 않습니다. button = tk.Button(win, text = "버튼 입니다.",.. [tkinter] BMI 계산기 만들기(ver.2) 안녕하세요. 코딩을 공부하는 의사, 닥터 배입니다. 지난 번에 tkinter를 이용하여 bmi 계산기를 만들어 보았는데요. 기능은 하는데 모양이 이쁘지 않더라구요! 그래서 문법을 조금 더 공부를 해서 frame을 이용하여 좀 더 보기 좋게 BMI 계산기를 만들어 보았습니다. 위 사진에서 보는 것과 같이 위에서 부터 아래로 4개의 프레임을 만들어 계산기를 만들었습니다. 구체적으로 이 BMI 계산기의 프레임은 위에서 부터 아래로 다음 4개의 프레임으로 구성되어 있습니다. BMI 계산기 제목이 있는 프레임. 키와 몸무게를 입력하는 프레임. 결과가 나오는 프레임. BMI 결과 기준치 설명이 있는 프레임. 프레임을 구분하면 각 프레임마다 pack, grid를 알맞게 사용할 수 있어 위젯들을 배치하기가 편한 느낌이.. 자기암시 GUI 프로그램 만들기(Tkinter) 안녕하세요. 닥터 배도사입니다. 오늘은 Tkinter 를 이용하여 자기암시 GUI 프로그램을 만들어 보겠습니다. 화면에 표시된 버튼을 누르면 자기암시 문구가 화면에 표시되는 프로그램을 구현해 보려고 합니다. 코드 selftalk = ["할 수 있다.", "이 또한 지나가리라.", "나 자신을 믿자."] # 표현할 자기암시 문구를 리스트로 만들어 selftalk라는 변수에 담아 줍니다. import tkinter from tkinter import * from PIL import ImageTk import random # 필요한 모듈을 설치해 줍니다. tkinter에서 .jpg 이미지 파일이 삽입이 되지 않아서 검색해 보니 PIL을 설치하고 ImageTK라는 모듈을 불러와야 .jpg 이미지 파일이 정상적으.. 블록 태그와 인라인 태그 블록 태그 자기가 속한 모든 영역의 자리를 차지 예: p 태그, h 태그 인라인 태그 자기가 필요로 하는 영역의 자리만 차지 예) strong 태그 - 인라인 태그, 감싸고 있는 콘텐츠를 굵게 표시 em 태그 - 인라인 태그, 감싸고 있는 콘텐츠를 이탤릭체로 표시 makr 태그 - 감싸고 있는 컨텐츠에 형광펜 표시를 더해줌 코드 예시 p 태그는 블록의 특성을 가집니다. h 태그 또한 블록의 특성을 가집니다. strong 태그는 인라인 특성을 가집니다. em 태그 또한 인라인 특성을 가집니다. mark 태그 또한 인라인 특성을 가집니다. 코드 설명 p 태그와 h1 태그는 블록의 특성을 가집니다. 따라서 콘텐츠가 속한 모든 영역을 차지합니다. 따라서 p 태그와 h1 태그는 가각 한 줄 씩 영역을 차지한는 것.. 이전 1 2 3 4 5 6 7 다음
