✅ 사용한 핵심 jQuery 메서드 정리 (개념 요약)목적메서드설명속성 읽기.attr("속성")HTML 속성 값 가져오기속성 변경.attr("속성", 값)단일 속성 변경여러 속성 변경.attr({})객체로 여러 속성 한 번에 변경속성 제거.removeAttr()HTML 속성 자체 제거CSS 변경.css()스타일 변경내용 변경.html()태그 포함 내용 변경내용 삭제.empty()자식 요소만 삭제요소 삭제.remove()요소 자체 삭제요소 생성$("")동적 생성삽입.appendTo()자식 끝에 추가삽입.prependTo()자식 처음에 추가형제 삽입.insertBefore()특정 요소 앞에 추가형제 삽입.insertAfter()특정 요소 뒤에 추가✅ 버튼별 동작 정리🔹 속성 읽기 (Getter)var sr..

1) 초기화 코드: $(f_initial); / f_initial()역할DOM 로드(ready) 후 f_initial() 실행각 버튼 클릭 이벤트를 개별 함수에 바인딩핵심 API$(fn) = $(document).ready(fn)$("selector").click(handler)동작button:nth-of-type(1~9) → f_go ~ f_go9 연결div button:nth-of-type(1)(div 안 버튼) → f_go10 연결2) 배열(객체) 생성 + $.each()로 링크 목록 출력역할링크 정보 {name, link}를 담은 배열을 만들고 형태로 HTML 생성 후 #here에 출력핵심 APIarr.push()$.each(array, function(index, item){...})$("#he..

JavaScript 로딩 및 실행 방식 비교window.onloadwindow.onload = function(){ ... }페이지의 모든 리소스(HTML, 이미지, CSS 등)가 로드된 후 실행중요 포인트window.onload는 마지막에 선언된 함수만 유효따라서 아래 두 개 중 두 번째 것만 실행됨window.onload = function(){ ... "JavaScript 이용1"};window.onload = function(){ ... "JavaScript 이용2"}; jQuery 문서 준비 이벤트 (document ready)기본 형태$(document).ready(function(){ ... }); 모든 버튼 색상 변경동작 내용모든 버튼의 배경색을 파란색모든 버튼의 글자색을 흰색으로 ..

1) 초기화: window.onload = f_initial; / f_initial()목적페이지 로딩 완료 시 버튼 DOM을 잡아 이벤트를 연결핵심 코드 흐름hereObj = document.querySelector("#here")로 출력 대상 확보버튼 1~9를 querySelector("button:nth-of-type(n)")로 선택addEventListener("click", f_callN)로 각 기능 함수 연결포인트nth-of-type는 “같은 태그(button)” 중 n번째를 선택버튼이 늘어나면 선택자가 깨질 수 있어 실무에서는 id/class를 더 선호2) 버튼1: f_call1() — forEach() 순회 출력목적배열의 각 요소를 순회하면서 index/value/원본 배열을 화면에 출력핵심..

1) 초기화 영역: window.onload = f_initial; / f_initial()목적페이지 로드 완료 후 버튼 클릭 이벤트를 표준 이벤트 모델(addEventListener)로 연결핵심 코드#btn1 ~ #btn6 각각을 클릭하면 f_call1 ~ f_call6 실행포인트주석에 “고전적 이벤트 모델”이라 쓰셨는데, 실제로는 **고전적(onclick 속성 직접 지정)**이 아니라window.onload로 초기화 후 **표준 이벤트 모델(addEventListener)**을 사용하고 있습니다.2) f_call1() : 객체 리터럴 기본 + 프로퍼티 접근 방식 + 축약 문법목적객체 속성 접근을 점 표기법 / 대괄호 표기법으로 비교변수명을 그대로 키로 쓰는 프로퍼티 축약(shorthand) 보여주기핵..