본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
반응형

javascript60

JavaScript Date · 색상 완전 정리 Web Development · JavaScriptJavaScript Date · 색상Date 조건 배경색, CSS 색 이름, 랜덤 RGB 색상 생성을 정리합니다.시작 오늘 분석할 코드이 장은 JavaScript의 기본 데이터 구조와 브라우저 출력 연습을 묶은 내용입니다. 객체를 만드는 방식, 배열을 순회하고 정렬하는 방식, Date와 색상 문자열을 화면에 반영하는 흐름을 구분합니다.let current = new Date(); if (current.getHours() Date현재 날짜와 시간을 다루는 객체입니다.getHours현재 시를 0~23으로 반환합니다.getDay요일을 0~6으로 반환합니다.backgroundColor요소 배경색 CSS 속성입니다.RGBred, green, blue 값으로 색을 .. 2026. 7. 6.
JavaScript transform · z-index · 난수 완전 정리 Web Development · JavaScriptJavaScript transform · z-index · 난수rotate, scale, z-index 카드 섞기, 난수 배열, 클릭 계산 예제를 정리합니다.시작 오늘 분석할 코드이 장은 DOM 요소를 새로 만들고, 기존 요소의 스타일과 내용을 바꾸는 연습입니다. 핵심은 요소를 찾는 단계, 새 요소를 만드는 단계, 부모 요소에 붙이거나 스타일을 바꾸는 단계를 분리해서 보는 것입니다.let n = 90; function rotate(obj) { obj.style.transform = "rotate(" + n + "deg)"; n += 90; n %= 360; } function scale(obj) { obj.style.transform = "scale(" .. 2026. 7. 6.
JavaScript DOM 동적 삽입 완전 정리 Web Development · JavaScriptJavaScript DOM 동적 삽입createElement, appendChild, removeChild, prompt, innerHTML 흐름을 정리합니다.시작 오늘 분석할 코드이 장은 DOM 요소를 새로 만들고, 기존 요소의 스타일과 내용을 바꾸는 연습입니다. 핵심은 요소를 찾는 단계, 새 요소를 만드는 단계, 부모 요소에 붙이거나 스타일을 바꾸는 단계를 분리해서 보는 것입니다.function addAnswer(obj, text) { let parent = obj.parentElement; if (obj != parent.lastElementChild) return; let newP = document.createElement("p"); newP.o.. 2026. 7. 6.
JavaScript e.target 이벤트 완전 정리 Web Development · JavaScriptJavaScript e.target 이벤트이벤트 실제 대상, mouseover 설명 박스, visibility 토글, wheel 이미지 확대를 정리합니다.시작 오늘 분석할 코드이 폴더는 DOM 조작과 이벤트 처리 연습을 모은 장입니다. 작은 예제가 많기 때문에 코드가 어느 요소를 찾고, 어떤 이벤트에서 어떤 스타일이나 값을 바꾸는지 구분하는 것이 핵심입니다.window.onmouseover = function(e) { if (e.target.tagName.toLowerCase() != "span") return; e.target.style.textDecoration = "underline"; } let prev = null; window.onclick =.. 2026. 7. 6.
반응형

티스토리툴바