coding-abc.tistory.com

tkinter, pack()을 이용한 위젯 배치

파이썬, tkinter의 pack()을 활용한 몇 가지 위젯 배치 예제를 만들어 봅니다.pack()은 위젯을 상하좌우 방향으로 자동 배치할 때 유용하고, side, fill, expand 옵션 조합에 따라 다양한 배치 패턴을 만들 수 있습니다.1. 기본 세로 배치 (기본값: side="top")import tkinter as tkroot = tk.Tk()tk.Button(root, text="버튼 1").pack()tk.Button(root, text="버튼 2").pack()tk.Button(root, text="버튼 3").pack()root.mainloop()특징: 위에서부터 차례로 쌓임.2. 가로 배치 (side="left")import tkinter as tkroot = tk.Tk()tk.But..

자바스크립트 배열(Array)에 대해 정리해 봅니다.📌 자바스크립트 배열 (Array)1. 배열이란?여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조.값은 인덱스(index, 0부터 시작) 로 접근합니다.let fruits = ["사과", "바나나", "포도"];console.log(fruits[0]); // "사과"console.log(fruits[2]); // "포도" 2. 배열 생성 방법let arr1 = [1, 2, 3]; // 리터럴 방식let arr2 = new Array(4, 5, 6); // 생성자 방식 3. 주요 속성let nums = [10, 20, 30];console.log(nums.length); // 3 (배열 길이) 4. 배열 주요 메서드➡..

자바스크립트의 setInterval() 함수에 대해 설명합니다.📌 setInterval() 이란?특정 시간마다 반복적으로 함수를 실행합니다.멈추려면 반드시 clearInterval() 을 사용해야 합니다.📌 문법setInterval(실행할_함수, 지연시간(ms), [추가인자...]);실행할_함수: 일정 주기마다 실행할 함수지연시간(ms): 반복 실행 간격 (1000ms = 1초)추가인자: 함수에 전달할 인자 (옵션)📌 기본 예제let count = 0;let timerId = setInterval(() => { count++; console.log("⏰ " + count + "초 경과"); if (count === 5) { clearInterval(timerId); // 5초 뒤 멈춤 ..

자바스크립트의 setTimeout() 은 특정 시간이 지난 후에 한 번만 함수를 실행하도록 예약하는 타이머 함수입니다.📌 문법setTimeout(실행할_함수, 지연시간(ms), [추가인자...]);실행할_함수: 일정 시간이 지난 뒤 실행할 함수지연시간(ms): 밀리초 단위 (1000ms = 1초)추가인자: 함수에 전달할 인자(옵션)📌 기본 예제console.log("1. 시작");setTimeout(() => { console.log("2. 2초 후 실행됨");}, 2000); // 2000ms = 2초console.log("3. 끝"); 실행 순서console.log("1. 시작") → 바로 출력setTimeout 예약 (2초 후 실행)console.log("3. 끝") → 바로 출력약 2초 후 ..

✅ onload 이벤트란?onload 이벤트는 웹 페이지나 특정 요소(예: 이미지, iframe 등)가 모두 로드(불러오기)된 후 발생하는 이벤트입니다.주로 페이지가 다 준비된 뒤 실행해야 하는 코드를 넣을 때 사용합니다.예를 들어, DOM 요소 접근, 초기화 작업, 이미지 크기 계산 같은 것들이 이에 해당합니다.✅ 문법 또는 자바스크립트 코드에서 직접 등록할 수도 있습니다:window.onload = function() { // 실행할 코드};✅ 간단한 예제👉 웹 페이지가 로드되면 "페이지 로딩이 완료되었습니다!" 라는 메시지를 띄우는 예제입니다. onload 이벤트 예제 페이지가 아직 준비되지 않았습니다... 📌 실행 흐름:브라우저가 HTML과 리소스를 모두 읽음 →window.onloa..

onchange 이벤트는 사용자가 , , 등의 값(value)을 변경했을 때 발생하는 이벤트입니다.즉, 값이 바뀌고 요소가 포커스를 잃었을 때 실행됩니다. (즉시 실행되는 oninput과는 다릅니다.)✅ 특징주로 입력값 확인, 폼 자동 처리, 선택값에 따른 UI 변경 등에 사용됩니다.예: 드롭다운에서 옵션을 바꾸면 해당 옵션에 따라 다른 내용을 표시하기.📌 예제: 드롭다운 선택 시 메시지 출력 과일을 선택하세요: -- 선택 -- 사과 바나나 포도 👉 드롭다운에서 과일을 선택하면 onchange 이벤트가 실행되어 문구가 바뀝니다.원하시면 제가 onchange와 oninput의 차이를 간단히 비교하는 예제도 만들어 드릴까요?

아래 코드는 버튼을 클릭할 때마다 문자열과 배경을 변경하는 자바스크립트 코드입니다. 버튼을 눌러보세요 😀 클릭

자바스크립트 이벤트 속성은 HTML 요소에서 특정 동작(클릭, 키 입력, 마우스 이동 등)이 발생했을 때 실행되는 이벤트 핸들러 속성을 말합니다.아래에 주요 이벤트 속성들을 카테고리별로 정리했습니다.마우스 관련 이벤트키보드 관련 이벤트폼(form) 관련 이벤트윈도우/문서 관련 이벤트드래그 & 드롭 관련 이벤트기타1. 마우스 관련 이벤트이벤트 속성설명onclick요소를 클릭했을 때 실행 https://coding-abc.tistory.com/388ondblclick요소를 더블 클릭했을 때 실행onmousedown마우스를 누를 때 실행onmouseup마우스를 뗄 때 실행onmousemove마우스를 움직일 때 실행onmouseover마우스를 요소 위에 올렸을 때 실행onmouseout마우스가 요소에서 벗어날..

바스크립트에서 요소(element) 선택은 HTML 문서 안의 특정 태그를 가져와서 조작할 수 있게 해 주는 중요한 기능입니다.예제를 통해서 알아보겠습니다. getElementById("id") → 하나만 선택getElementsByClassName("class") → 여러 개 (HTMLCollection)getElementsByTagName("tag") → 여러 개 (HTMLCollection)querySelector("선택자") → 첫 번째만querySelectorAll("선택자") → 모든 요소 (NodeList) 1. getElementById()id 속성으로 요소를 선택 안녕하세요 제목 바꾸기 2. getElementsByClassName()같은 class 속성을 가진 여러 요소 선택 ..

여기서는 아주 기본적인 방식으로, 아이디와 비밀번호를 입력받아 맞으면 로그인 성공 처리, 틀리면 실패 메시지를 띄우는 자바스크립트 코드입니다.(※ 실제 서비스에서는 보안상 서버와 DB를 반드시 사용해야 합니다.)이 코드에서는 아이디와 암호가 프로그램 코드에 입력되어 있습니다.아이디: admin, 비밀번호: 1234 입력 시 성공로그인에 성공했을 때 "https://coding-abc.tistory.com" 이동하도록 하는 코드입니다. 로그인 로그인 아이디: admin, 암호: 1234 -- 맞으면 coding-abc.tistory.com 사이트로 이동합니다.