☑️ 개인 프로젝트_최종완료코인(매수/매도)차트 게임☑️ 작업기간2025/02/25 ~ 2025/02/27 ☑️ 게임설명턴 선택 후 시작을 눌러 원하는 구간에 매수를 하고 원하는 수익률 도달시 매도하여 시드를 늘리는 게임 - 코인종류 3종류(난이도 개념)- 턴 제 방식 : 1,10,30턴 선택하여 차트를 볼수있다.- 턴 시작 후 코인 종목 선택 불가- 상승/하락 각각 50% 확률, 초기 시드 30만- 매도 시 게임종료(반복 매수X), 최종시드, 코인 등락률, 내 수익률을 확인 할 수 있다.- 게임 다시하겠습니까? Y : 수익율을 반영한 시드로 다시 게임시작 N : 최종 시드 기준 등급을 확인가능(100만 이상(챌린저), 70만 이상(마스터), 50만 이상(플레티넘) 미만 코린이)☑️ 주요 메..

☑️ 계산기 만들기 ✅ DOMContentLoaded 이벤트 리스너 등록 웹 페이지가 완전히 로드되었을 때 실행될 함수를 등록DOMContentLoaded 이벤트는 HTML이 로드 및 파싱된 후 실행document.addEventListener("DOMContentLoaded", function () { ✅ 변수설정 result : 계산 결과 출력 buttons : 모든 버튼 요소저장expression : 사용자가 입력한 계산식(수식)을 저장할 변수를 선언하고 초기화 let result = document.getElementById("result");let buttons = document.querySelectorAll("#calculator input[type='button']");let expr..

☑️ 타자연습✅ onchange : value 값이 변경될때 발생되는 이벤트this.value : 입력된 값 점수: 점 ✅ 단어 리스트생성(2차원 배열)let datas = [ ["삼성전자", "LG전자", "SK바이오", "E1","녹십자"], ["위메이드","넥슨게임즈","펄어비스","데브시스터즈","컴투스"], ["셀트리온","셀트리온제약","한국비엔씨","경남스틸"]] ✅ 초기세팅 (점수,캔버스크기, 글씨 색상)let cnt = 0; // 점수let words = []; // 화면에 출력되는 단어배열// 글자색상 랜덤하게 설정let colors = ['red','blue','green','gry','orange','black','pink'];let can..

☑️ BomBrowser Object Model (브라우저 객체 모델) ✅ 브라우저의 구성요소를 객체로 처리할 수 있는 기능=> 브라우저의 구성요소가 이미 객체로 생성되어 있음 (내장객체)✅ BOM 객체1) window : 브라우저 창을 의미. 최상위 객체2) screen : 화면을 의미. 화면의 너비/높이 등 처리 3) history : 방문 경로를 저장. 뒤/앞 이동 가능 4) location : 현재 브라우저의 경로 처리 5) document : 현재 브라우저의 문서를 의미 DOM : 문서상의 모든 요소들 document - html - meta - title - body ..

☑️ 배열관련 메소드✅ 배열.concat (배열,배열...)const arr1 = ['사과','딸기'];const arr2 = ['자동차','비행기','오토바이'];area1.innerHTML += "arr1.concat(arr2) : " + arr1.concat(arr2) + "";// arr1.concat(arr2) : 사과,딸기,자동차,비행기,오토바이 */ 기존 arr1 배열 객체는 변경/적용 안됨.area1.innerHTML += "arr1 : " + arr1 + '';// arr1 : 사과,딸기 대입연산자를 이용하여 새로운 배열에 저장let arr3 = arr2.concat(arr1, [1,2,3]);// arr3 : 자동차,비행기,오토바이,사과,딸기,1,2,3 ✅ 배열.reverse() : ..

☑️ forEach자바스크립트 기본 내장 메서드배열에서만 사용 가능 (NodeList 같은 유사 배열에도 가능!)break나 return으로 반복을 중단xlet arr = [1, 2, 3];arr.forEach((num, index) => { console.log(index, num);});  ☑️  each자바스크립트 기본 문법xjQuery에서 제공하는 반복문이야.jQuery 객체에서만 사용 가능해. ($('div').each(...))return false; 하면 반복을 중단가능$("div").each(function(index, element) { console.log(index, $(element).text()); if (index === 1) return false; // 두 번..

✅ 시계 구현하기 function fnFillZero(n){ // 3 return n = 50){ // .className = "class 속성값" document.querySelector("#counter").className = 'over50second'; // setAttribute : 속성 등록 함수 // setAttribute("속성명",'속성값') // document.querySelector("#counter").setAttribute("class",'over50second'); ..

☑️ 요소접근DOM (Document Object Model) : 문서객체모델 - HTML 문서의 태그들을 객체로 처리 방식 - 객체 조화방식- 조회할 태그가 반드시 스크립트 실행전에 먼저 인식되어야함 - 함수내에서의 DOM처리는 가능함. ✅ document.getElementById ("id속성값") : 요소리턴 아이디 속성을 이용하여 조회하기*Id 속성은 유일함을 의미함. 한개의 객체만 찾아서 조회함아이디로 접근 ✅ document.getElementsByTagName ("name속성값") : 배열리턴태그 이름을 이용하여 조회하기 목록1 목록2 목록3 목록4 목록5 ..

☑️ 반응형 웹@media : 화면의 크기별로 다른 css 적용이 가능하다./* 화면 크기 : 최대 600px 까지 */@media(max-width: 600px){ body{background-color: red;}}/* 화면 크기 : 601~999px 까지 */@media(min-width: 601px) and (max-width:999px){ body{background-color: green;}} /* 화면 크기 : 1000px ~ * */@media(min-width: 1000px){ body{background-color: blue;}}☑️ BootstrapCDN 방식 : Content Delivery Network. 인터넷상에서 바로 css 파일 전송받기*네트워크 환경이 되어야지 작업가능 ..

🩸 메인 콘텐츠 높이 만큼 스크롤시 각 number_ 클래스에 맞는 수치로 카운트 Html 포스코그룹참여사 0 개사 포스코그룹참여인원 0 명 기부금누적현황(2013년~) 0 억원 재단사업수혜자 0 명  Script🩸 각 수치마다 class 지정 및 수치 입력// 숫자 카운터를 초기화하는 함수function initializeNumberCounters() { new numberCounter("number_01", 35); new numberCounter("number_02", 38516); new numberCounter("number_03", 958); new nu..