몽땅뚝딱 개발자

◽ 문법 // 화면에 10,000으로 출력 {{ Number(10000).toLocaleString() }} 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ navigator.userAgent() navigator의 프로퍼티 중 하나로 브라우저가 User-Agent HTTP 헤더에 넣어 전송하는 문자열이다. 이 프로퍼티를 통하여 현재 사용자가 사용하고 있는 디바이스를 체크할 수 있다. ◽ navigator.userAgent() 예제 userAgent()를 출력하면 "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; InfoPath.3; rv:11.0) like Gecko" 같은 값이다. 때문에 indexOf()나 match()를 사용하여 일치하는 문자열을 찾는다. // 안드로..

◽ queryCommandSupported() 해당 브라우저에서 command 지원여부를 알 수 있는 API이다. but,, 더 이상 사용되지 않는다. (Deprecated) isSupported = document.queryCommandSupported(command); ◽ 예제 if (document.queryCommandSupported("cut")) { console.log("지원함"); } else { console.log("지원안함"); } 출처 Document.queryCommandSupported() - Web APIs | MDN The Document.queryCommandSupported() method reports whether or not the specified editor co..

◽ window.scrollTo(xpos, ypos) 특정 위치로 스크롤을 이동시키는 메서드이다. window는 생략이 가능하다. x-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 가로축 y-좌표: 문서의 왼쪽 상단부터 시작하는 픽셀단위의 세로축 window.scrollTo( 0, 1000 ); ◽ window.scrollTo(xpos, ypos)의 속성 - scroll-behavior: 스크롤 효과 지정, auto가 기본값이며 instant, smooth가 있다. - top: 세로 위치 - lef: 가로 위치 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/scrollTo 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도..

◽ window.pageYOffset scrollY의 다른 이름이다. 스크롤이 수직으로 얼마나 스크롤 됐는지 픽셀단위로 반환한다. 스크롤에 따라 상단 메뉴를 다르게 보이게 하는 상황 등에서 쓰인다. 최신 버전에서는 pageYOffset를 사용한다. scrollY는 작동하지 않을 수도 있다. yOffset = window.pageYOffset; 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ getBoundingClientRect() 이 method가 return하는 width, height 속성값은 padding과 border-width를 포함한 것이다. 즉, 엘리먼트 자체의 width + padding + border-width를 다 더한값이다. ◽ getBoundingClientRect()의 속성 - x: x 좌표 값 - y: y 좌표 값 - width - height - top - right - bottom - left // 이렇게 사용할 수 있다. getBoundingClientRect().top 출처 및 참조 https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect

◽ Object.assign() // target: 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체 // sources: 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들 Object.assign(target, ...sources) ◽ Object.assign() 사용하기 예제 1. 목표 객체의 속성 중 출처 객체와 동일한 키를 갖는 속성의 경우, 그 속성 값은 출처 객체의 속성 값으로 덮어쓴다. const target = { a: 1, b: 2, c: 2 }; const source = { b: 4, c: {'name': 2, 'idx': 4} }; const returnedTarget = Object.assign(target, source); console.log(ta..

소개순서 (1) 개념 및 기본 선택자 (2) 문서 객체 조작(DOM Control) (3) 이벤트(Event) 👉🏻 (4) 효과(Effects) ◽ 효과(Effect)의 기본형태 모든 효과는 속도, 콜백함수를 지정할 수 있으며 생략할 수도 있다. $('선택요소').이벤트함수('속도', 콜백함수) 💡 Tip 속도: slow, normal, fast 또는 사용자 지정 숫자 ◽ 효과(Effects) 종류 효과 설명 $('선택요소').hide() 선택 요소 숨김 $('선택요소').show() 선택 요소 노출 $('선택요소').toggle() show(), hide() 반복 // 버튼을 클릭할 때 마다 태그가 사라지고 나타나는 것이 반복됨. $("button").click(function(){ $("p").tog..

소개순서 (1) 개념 및 기본 선택자 (2) 문서 객체 조작(DOM Control) 👉🏻 (3) 이벤트(Event) (4) 효과(Effects) ◽ 이벤트(Event) 정의 웹 브라우저 내에서 벌어지는 버튼 클릭이나 마우스의 움직임등의 모든 행위를 '이벤트'라고 한다. ◽ 이벤트(Event) 종류 이벤트 설명 click() 선택 요소를 클릭했을 때 발생 dbclick() 이벤트 대상을 더블클릭했을 때 발생 mouseover() 마우스를 올려놓았을 때 발생 mouseout() 마우스가 벗어났을 때 발생 pocus() 대상에 포커스가 생겼을 때 발생 blur() 대상이 포커스를 잃었을 때 발생 focusin() 대상에 포함된 input 요소에 포커스가 있을 때 발생 focusout() 대상에 포함된 inpu..

◽ 문서 객체 조작(DOM Control) 1) 탐색 선택자: 정확한 요소를 선택하는 방법 선택자 설명 $("ul li:odd") 의 요소 중 홀수 인덱스 요소만 선택 $("ul li:even") 의 요소 중 짝수 인덱스 요소만 선택 $("ul li:first") 의 요소 중 첫번째 요소 선택 $("ul li:last") 의 요소 중 마지막 요소 선택 $("ul li:eq(1)"), $("ul li").eq(1) 의 요소 중 두번째 요소만 선택 $("ul li:it(2)") 의 요소 중 세번째 이전 요소만 선택 $("ul li:gt(2)") 의 요소 중 세번째 이후 요소만 선택 $("ul li:nth-child(2n)") 의 요소 중 2의 배수 번째 요소만 선택 $("ul li:contains('문자')..