pogun 코딩 공부 저장소

원본 코드 Modal open modal × Modal 창입니다. 1. HTML 구조 분석 × Modal 창입니다. div#modal : 모달 창의 전체 컨테이너div.modal-content : 모달 내부 콘텐츠span.close : 닫기(X) 버튼p : 모달 내부에 표시될 텍스트 ("Modal 창입니다.")2. CSS 스타일 분석body { font-family: Arial, Helvetica, sans-serif;}: 글꼴을 Arial, Helvetica, sans-serif로 설정 (Sans-serif 계열 폰트) .mo..

1. 화살표 함수(Arrow Function) 1-1. 기본 함수 선언 방식function func() { console.log('func()');}func();: 전통적인 함수 선언 방식 1-2. 즉시 실행 함수 (IIFE) (function func() { console.log('(func())');})();: 함수 선언과 동시에 실행되는 패턴 : 특정 코드 블록을 즉시 실행하고 싶을 때 사용 1-3. 익명 함수 표현식 const func = function () { console.log('function ()'); };func();: const를 사용하여 함수를 변수에 할당하는 방식 1-4. 화살표 함수(Arrow Function)const func = () => { console.log('func..

1. 배열 생성let array = ['a', 'b', 'c'];: array라는 이름의 배열을 생성하고, 'a', 'b', 'c' 값을 초기값으로 설정 2. 배열 요소 추가하기 : 배열에 새로운 요소를 추가하는 방법에는 push(), unshift(), splice()가 있다. 2.1 push() - 배열 맨 뒤에 요소 추가array.push('d'); // 배열의 끝에 'd' 추가console.log(array); // ['a', 'b', 'c', 'd']: push()는 배열의 마지막 요소 뒤에 새로운 요소를 추가합니다. 2.2 unshift() - 배열 맨 앞에 요소 추가 array.unshift('A'); console.log(array); // ['A', 'a', 'b', 'c', 'd'..

1. 텍스트 점멸 효과 만들기: setInterval()을 사용하면 일정한 시간 간격마다 특정 동작을 반복할 수 있다. 시간(timer)에 따라서 점멸 설명:: setInterval(myfunc, 500); → 0.5초마다 myfunc() 함수가 실행됨. : myfunc() 함수는 "환영합니다"라는 텍스트를 번갈아가며 표시/숨김 처리한다.: document.myform.myFrmMsg.value를 이용해 input 필드 값을 조작한다. 1-1. querySelector 사용 let flg = false;setInterval(() => { document.querySelector("#time input").value = flg ? "환영합니다" : ""; flg = !flg;}, 500);..

1. DOM (Document Object Model) 이란?: DOM은 웹 페이지의 HTML 요소들을 객체(Object) 형태로 표현하여 JavaScript에서 조작할 수 있도록 해주는 모델: DOM을 사용하면 HTML 태그를 추가하거나, 삭제하거나, 수정할 수 있다.기능전통적인 방식최신 방식 텍스트 가져오기 element.childNodes[0].nodeValue element.textContent 선택된 값 가져오기 element.childNodes[index].text element.value 요소 추가 createElement() + appendChild() new Option() 사용 가능 요소 삭제 removeChild() remove() 사용 가능 모든 요소 가져오기 getElem..

1. onload - 페이지 로딩 완료 시 실행 : onload 이벤트는 페이지가 완전히 로드된 후 실행 : body 태그에 적용하면 HTML, CSS, JavaScript가 모두 로드된 후 실행1-1. 최신 문법 (DOMContentLoaded 사용) : window.onload보다는 DOMContentLoaded 이벤트를 사용하는 것이 더 적절하다.document.addEventListener("DOMContentLoaded", () => { console.log('onload 실행');});2. onblur - 입력 필드에서 포커스가 벗어날 때 실행 : 사용자가 입력 필드에서 다른 곳을 클릭해 포커스를 이동하면 실행 : 주로 유효성 검사(예: 나이 입력 확인)에 사용age: 세2-1. 최신 문..

1. HTML 을 이용한 데이터 전송: 기본 폼 제출 방식 name: age: : 사용자가 입력한 이름(name)과 나이(age) 데이터를 indexTwo.jsp로 전송 : 요소의 name 속성값이 name="name", name="age"로 지정되어 있어 서버에서 데이터를 받을 수 있다.: submit 버튼을 누르면 GET 방식(기본값)으로 데이터가 URL에 포함되어 전달 ex) 사용자가 홍길동 / 25 입력 후 버튼 클릭 → indexTwo.jsp?name=홍길동&age=25 : get방식을 쓰면 url에 넘어가는 값이 보여짐(보여주지 않기 위해선 post방식 사용)2. JavaScript를 이용한 동적 페이지 이동: location.href를 이용한 GET 방식 데이터 전송 ..

1. 기본적인 HTML 페이지 이동 1-1. 태그를 사용한 이동 index Two로 이동: href 속성을 이용해 다른 페이지로 이동 : 사용자가 클릭하면 새로운 페이지가 열린다.1-2. 을 이용한 이동 index Three로 이동: form 태그의 action 속성으로 이동할 URL을 지정할 수 있다.: submit 버튼을 누르면 해당 페이지로 이동1-3. JavaScript를 이용한 이동 const goPage = () => { location.href = "./indexThree.html";}: location.href를 사용하면 JavaScript로 동적으로 페이지를 이동할 수 있다.2. JavaScript를 이용한 페이지 탐색 2-1. history.back(): 이전 페이지로 이..

1. 문자열 가져오기let msg = document.getElementById("msg").innerHTML;: HTML 문서에서 특정 id를 가진 요소의 내용을 가져와 msg 변수에 저장2. 문자열 길이 확인let len = msg.length;console.log(len);: length 속성을 사용하면 문자열의 길이를 확인할 수 있다.: 이는 문자열 내의 문자 개수를 반환3. 특정 문자 위치 찾기 (indexOf, lastIndexOf)let pos = msg.indexOf('자동차');console.log(pos);: indexOf() 메서드는 특정 문자열이 처음 등장하는 위치(인덱스)를 반환 : 만약 해당 문자열이 없다면 -1을 반환let lastPos = msg.lastIndexOf('자동차..

1. JavaScript의 진수 변환변환 유형코드 예제결과 2진수 → 10진수 parseInt("10000000", 2) 128 16진수 → 10진수 parseInt("80", 16) 128 10진수 → 2진수 (128).toString(2) "10000000" 10진수 → 16진수 (128).toString(16) "80" 2진수 → 16진수 parseInt("10000000", 2).toString(16) "80" 16진수 → 2진수 parseInt("80", 16).toString(2) "10000000" 10진수 -> 다른 진수로 변환 (toString() 활용)let num = 128;// 10 -> 2 (2진수 변환)let number2 = num.toString(2);..