study 코딩하자

.keydown() 키보드를 눌렀을 때 실행 .keyup() 키보드를 누른 상태에서 키보드를 떼었을때 실행 .resize() 윈도우 크기가 바뀔 때 실행 .scroll() 스크롤을 할 때 실행 .submit() form요소가 서버로 전송되는 (submit)되는 과정에 실행 .trigger() 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜줌 .delay() 실행 중인 함수를 정해진 시간만큼 중지(연기) .stop() 동작하고 있는 애니메이션 것을 중단. .appendTo() 해당 요소 또는 텍스트를 ( )의 내부 선택요소 뒤에 추가 .prependTo() 해당 요소 또는 텍스트를 ( )의 내부 선택요소 앞에 추가 .attr() ( )요소에 속상 값을 가..

.fadeIn() 서서히 나타난다. .fadeOut() 서서히 사라진다. .fadeToggle() 서서히 나타남과 사라짐 두 기능 (토글기능) .slideUp() 슬라이드 효과, 올라가며 사라지게함. .slideDown() 슬라이드 효과, 내려가며 사라지게함. .slideToggle() 슬라이드 올라감, 내려감 두기능 (토글기능) .show() ( )의 선택 요소 보여짐 .hide() ( )의 선택 요소 사라짐 .toggle() ( )의 선택 요소 .show .hide 메서드 두기능 (토글기능) .append() 해당 선택자 내부 가장 뒤에 새로운 요소나 콘테츠 추가 .prepend() 해당 선택자 내부 가장 앞에 새로운 요소나 콘테츠 추가 .remove() 해당 선택자 요소 삭제 .empty() ( )..

setTimeout()과 setInterval()은 둘 다 자바스크립트에서 시간간격을 주는 함수입니다. 같은 목적의 함수이기는 하지만 둘 사이에는 약간의 차이가 있습니다. 헷갈려서 정리해 두려 합니다. setTimeout(function, delay)setInterval(function, delay) delay 시간 후에 딱 한 번 실행. delay 시간 마다 반복해서 호출 반복을 위해서는 재귀적으로 호출 한번만 호출하면 반복실행이 되기 때문에 코드가 간결 반복을 종료 : clearTimeout(timeoutName) 반복을 종료 : clearInterval(intervalName) setTimeout은 반복을 위해 함수를 재귀적으로 호출합니다. 따라서 함수 간의 딜레이가 정확하게 실행 될 수 있습니다...

.submit() form요소가 서버로 전송되는 (submit)되는 과정에 실행 .trigger() 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜줌 .delay() 실행 중인 함수를 정해진 시간만큼 중지(연기) .stop() 동작하고 있는 애니메이션 것을 중단. .appendTo() 해당 요소 또는 텍스트를 ( )의 내부 선택요소 뒤에 추가 .prependTo() 해당 요소 또는 텍스트를 ( )의 내부 선택요소 앞에 추가 .attr() ( )요소에 속상 값을 가져오거나 추가. .height() 선택 요소의 높이 .innerHeight() 선택 요소의 첫 번째 요소에 패딩영역을 포함한 높이 .outerHeight() 선택 요소의 첫 번째 요소에 패딩영역..

$(this) 자신을 바인딩 JSthis === jQuery$(this)[0] .find() 해당 선택자 자손요소를 선택 .siblings() 선택자의 형제들 선택 .eq() 선택자중에 해당 인덱스 요소를 선택 .add() 해당 선택자의 선택 요소 추가 .not() 해당 선택자 중에 ( )내부의 선택자를 제외 하고 요소 선택 .has() ( )내부의 요소를 가지고 있는 선택자 선택 .parent() 해당 선택자 바로 상위 부모 요소 선택 .parents() 해당 선택자 상위 모든 부모 요소 선택 .next() ( )의 선택 요소의 바로 다음에 위치한 형제 요소 선택 .prev() ( )의 선택 요소의 바로 이전의 위치한 형제 요소 선택 .after() ( )의 선택 요소에 뒤에 새로운 요소 추가 또는 다..

this란? this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다. 첫..

반응형 웹 반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다. 미디어 쿼리(Media Query)는 접속하는 장치에 따라서 CSS 스타일을 변경한다.( 다른 프로그래밍 언어의 if 조건문과 비슷한 개념) PC로 접속하면 PC화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃을 변경한다. view port 뷰 포트(View Port)는 작은 화면의 스마트폰에서 PC의 웹 페이지 표시할 때 전체적인 페이지의 배율을 조정해준다. 뷰 포트 설정 width=device-width 페이지의 가로 길이를 기기의 스크린 가로 길이로 설정한다. height=device-height 페이지의 세로 길이를 기기의 스크린 세로 ..

정규 표현식의 용어들정규 표현식에서 사용되는 기호를 Meta문자라고 표현한다. 표현식에서 내부적으로 특정 의미를 가지는 문자를 말하며 간단하게 정리하면 아래의 표와 같다. 문법 /검색패턴/플래그 표현식 의미 ^x 문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다. x$ 문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다. .x 임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다. x+ 반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다. x? 존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다. x* 반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다. x|y or 를 표현하며 x 또는 y 문자가 존재함을 의미한다. (x) 그룹..