본문 바로가기

전체 글1159

[C#][.NET] 윈도우 앱 포커스 안녕하세요, 오늘은 포커스에 대해 알아보고 윈도우 앱에서 포커스를 다루는 법을 배워보겠습니다. 일단 포커스란 현재 사용자가 입력을 받을 수 있는 컨트롤을 가리킵니다. 컨트롤은 윈도우 앱에서 폼을 구성하는 하나의 구성요소입니다. 예를 들어 구글 웹페이지로 이동하면 화면 중앙에 검색창이 있죠. 이 때 이 검색창을 클릭하게 되면 다음과 같이 검색창이 클릭되고 포커스를 갖게 되는데 여기서 검색창의 입력칸이 하나의 컨트롤이라고 생각할 수 있습니다. 이렇게 하나의 컴포넌트가 포커스를 받게 되면 사용자가 구분할 수 있고 그 다음 사용자의 입력이 포커스와 연관될 것이라고 사용자는 예상할 수 있습니다. 이렇듯 포커스는 사용자 경험 향상을 위해 중요한 요소입니다. 그리고 웹페이지 외에도 안드로이드 앱, 윈도우 앱, ios.. 2024. 3. 25.
[JavaScript] 탭 레이아웃 만들기 오늘은 자바스크립트를 활용하여 탭 레이아웃을 만들어 보겠습니다. 코드입니다. DOCTYPE html> 탭 레이아웃 예제 Tab 1 Tab 2 Tab 3 Tab 1 Tab 1의 내용입니다. Tab 2 Tab 2의 내용입니다. Tab 3 Tab 3의 내용입니다. function openTab(evt, tabName) { // 모든 탭 콘텐츠를 숨깁니다. var tabcontent = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 모든 탭 링크에서 "active" 클래스를 제거합니다. var tablinks = do.. 2024. 3. 24.
[JavaScript] 리뷰 만들기 오늘은 리뷰만들기를 해보겠습니다. 다음은 app.js파일의 설명입니다. 1. reviews 배열은 리뷰 데이터를 저장합니다. 각 리뷰는 사람의 이름, 직업, 이미지 URL, 그리고 리뷰 텍스트를 포함하는 객체입니다. 2. document.getElementById와 document.querySelector를 사용해 HTML 문서의 요소들을 선택합니다. 3. window.addEventListener('DOMContentLoaded', function () {...}); 코드는 문서의 로딩이 완료되었을 때 초기 리뷰를 화면에 표시하기 위해 사용됩니다. 4. showPerson 함수는 주어진 person 인덱스에 해당하는 리뷰 정보를 UI에 표시합니다. 5. nextBtn, prevBtn, randomBtn.. 2024. 3. 23.
[JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 안녕하세요. 이번 예제에서는 Bootstrap을 사용하여 버튼 클릭시 스크롤 위치 이동하는 기능을 만들어보겠습니다. 이 기능을 Scrollspy 라고 합니다. 1. Scrollspy란? Scrollspy는 웹 페이지에서 스크롤 이벤트를 사용하여 사용자가 스크롤할 때 특정 섹션 또는 요소가 화면에 보이는지 감지하는 기능입니다. 이를 통해 페이지 내 탐색을 돕고 사용자 경험을 향상시킬 수 있습니다. 주로 단일 페이지 애플리케이션(SPA) 또는 긴 페이지가 있는 웹사이트에서 사용됩니다. 2. 전체코드 Item 1 Item 2 Item 3 Item 4 Item 1 부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며,.. 2024. 3. 22.
[Java] Java Swing으로 구현하는 날씨 기반 상태 변화 시뮬레이션 자바 스윙을 사용하여 간단한 날씨 기반 상태 변화 시뮬레이션 프로그램을 구현하는 방법을 알아보겠습니다. 이 프로그램은 날씨 상태(Sunny, Cloud, Rain)에 따라 사람(Person) 객체의 체력과 기분이 변화합니다. 날씨는 랜덤으로 변경되며, GUI에서는 날씨에 해당하는 이미지가 표시됩니다. 사람 객체의 상태 변화는 콘솔에 출력됩니다. 날씨가 맑다면 사람객체의 기분이 좋아지고, 체력이 10만큼 높아집니다. 구름낀 날씨라면 사람 객체의 기분은 그저 그렇고, 체력이 5만큼 높아집니다. 비가 오는 날시라면 사람 객체의 기분은 좋지 않고, 체력은 10만큼 줄어듭니다. 객체 지향 프로그래밍의 기본적인 개념과 자바 스윙의 사용법을 이해하는데 도움이 되었으면 좋겠습니다. 우선 시연영상부터 보겠습니다. 다음은.. 2024. 3. 21.
[PHP] MySQL 연결 및 다루기 (MySQLi 방식) PHP와 MySQL을 함께 사용하여 데이터베이스 기반 웹 애플리케이션을 개발할 때, 데이터베이스와의 통신은 필수적입니다. PHP에서 MySQL 데이터베이스와 상호작용하는 주된 두 가지 방법은 MySQL Improved Extension(MySQLi)와 PHP Data Objects(PDO)입니다. 이 글에서는 MySQLi 확장 기능을 사용한 연결 및 데이터베이스 다루기 방법에 초점을 맞추겠습니다. MySQLi를 사용한 서버 연결 객체 지향 방식 절차적 방식 데이터베이스 다루기 레코드 추가 $sql = "INSERT INTO tablename (column1, column2) VALUES ('value1', 'value2')"; if ($conn->query($sql) === TRUE) { echo "새 .. 2024. 3. 20.
[JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화 해보겠습니다. 다음은 index.html 의 코드입니다 Crypto Market Data Bitcoin Ethereum Litecoin Show Data 다음은 script.js 의 코드입니다. // 전역 변수로 차트 인스턴스를 저장 let myChart; document.getElementById('show-data').addEventListener('click', async () => { const cryptoCurrency = document.getElementById('crypto-select').value; const ctx = document.getElementBy.. 2024. 3. 19.
[NestJs] 게시물 수정 및 삭제하기 안녕하세요. 오늘은 게시물 수정 및 삭제를 해보겠습니다. 먼저 service파일입니다. import { Injectable, NotFoundException } from '@nestjs/common'; import { CreateBoardDto } from './board.dto'; @Injectable() export class BoardService { private boards = []; private id = 1; create(createBoardDto: CreateBoardDto){ createBoardDto.id = this.id; this.boards.push(createBoardDto); this.id++; return createBoardDto; } getAll(){ return this.. 2024. 3. 18.
[JavaScript] 카운터 만들기 오늘은 카운터 만들기를 해보겠습니다. 이해를 돕기위해 알아야 할 내용은 1. html의 클래스로는 여러개의 클래스 명들이 들어올 수 있다. 2. `.` 과 `#`은 CSS선택자 입니다. `#`은 id선택자 `.`은 클래스 선택자입니다. 3. document.querySelectorAll(".btn")는 클래스 속성이 btn인 모든 요소를 찾아서 반환합니다. 4. btn.addEventListener("click", function (e) { ... }) 의 function (e) { ... } 는 이벤트가 발생했을 때 실행할 함수를 정의합니다. `e` 이벤트 객체로, 이벤트에 대한 정보를 담고 있습니다. 4.1. e.currentTarget 은 이벤트 리스너가 부착된 요소를 가리킵니다. 5. e.curr.. 2024. 3. 17.

티스토리툴바