728x90 300x250 SMALL 프로그래밍5 css애니메이션 한방에 정리하기!(transition, transform, animation) 1. css애니메이션이란?CSS애니메이션은 html 요소를 움직이게 만드는 방법이다.JavaScript없이도 가능하다.주요 방식 :transition - 요소 상태 변화 애니메이션@keyframes + animation - 복잡한 애니메이션 구현2. CSS 애니메이션 기본 사용법1) transition - 간단한 애니메이션.box { width: 100px; height: 100px; background: red; transition: background-color 0.5s ease-in-out;}.box:hover { background-color: blue;}transition 속성:속성명 지속시간 타이밍함수 지연시간ease-in-out(타이밍 함수)은 처음과 끝에서는 천천.. 2025. 4. 4. 타입스크립트 초보자 가이드 - 기초 문법과 컴파일 방법 타입스크립트란?타입스크립트(TypeScript)는 JavaScript의 슈퍼셋으로, 정적 타입 시스템을 제공한다.이를 통해 개발 시 오류를 사전에 방지할 수 있어 유지보수성이 뛰어나다. 타입스크립트 설치 방법Node.js가 설치되어 있어야 함(node -v 확인)타입스크립트 전역 설치npm install -g typescript tsc -v로 설치 확인타입스크립트 코드 작서 예시 1.app.ts 파일 생성let message: string = "Hello, TypeScript!";console.log(message); message라는 변수를 선언: string -> message 변수는 반드시 문자열(string)이어야 한다. 2. 컴파일타입스크립트는 브라우저에서 직접 실행할 수 없고, 자바스크립트로 .. 2025. 4. 2. Node.js란? 설치 및 설정 방법! Node.js는 Chrome V8 JavaScript 엔진을 기반으로 한 서버 사이드 런 타임이다.기존의 브라우저 환경에서만 사용되던 JavaScript를 서버에서도 실행할 수 있게 만들어졌다. Node.js의 주요 특징비동기 & 이벤트 기반싱글 스레드 아키텍처npm(Node Package Manager)을 통한 수많은 라이브러리 활용 가능Node.js 설치 방법(Window 기준)Node.js 공식 사이트에서 LTS 버전 다운로드설치 후 node -v와 npm -v로 정상 설치 확인간단한 Node.js 코드 실행console.log("Hello, Node.js!"); 2025. 3. 15. React에서 체크박스를 포함한 다중 입력 폼 구현하기 예제 코드import React, { useState } from "react";function MultiInputForm() { // 초기 상태 설정 const [formData, setFormData] = useState({ username: "", email: "", agreeToTerms: false, // 체크박스 상태 }); // 입력 값 변경 핸들러 const handleChange = (e) => { const { name, value, type, checked } = e.target; // e.target에서 필요한 값 추출 setFormData({ ...formData, // 기존 값 복사 [name]: type === "checkb.. 2025. 1. 29. 이전 1 2 다음 728x90 반응형 LIST