피리부는 사나이 (pied piper)

자바 스크립트에서 input 태그는 굉장히 자주 쓰인다. 그만큼 Input을 JS로 잘 다루는 방법들을 습득시키는게 중요하다고 한다. 특히 브라우저 기본 동작으로 input이나 button은 기본적으로 submit 즉, 전송시키는 동작이 있다. 이 동작은 동시에 페이지를 새로고침하는 기능을 갖고 있다. 하지만 대다수의 작업중에는 새로고침을 하지 않고 그대로 value값을 가지고 있음을 의도하는 경우가 많다. 그렇다면 이 default값으로 새로고침을 해버리는 이 동작을 어떻게 하면 막을 수 있을까? 메서드에 적혀있는 그대로 Default값을 Prevent해주는 메서드이다. cancelable : true (취소해도 되는 이벤트)의 경우에는 이 메서드를 호출하면 기본 동작일지라도 실행하지 않게 해준다. 그..

기본적 예제 : 변수 (전역변수)가 밖에 선언 var vscope ='global' function fscope() { alert (vscope); } fscope(); //여기서 fscope라는 함수를 선언하 globa이라는 텍스트가 경고창에 출력 //함수안에 있는 alert이 함수 밖에 '변수'에 접근할 수 있다는게 취지 변수가 밖에 선언되고, 함수안에도 선언됨과 동시에 ‘local’이라는 문자열을 새로 갖게 되었을 때 결과는 어떻게 될까? var vscope ='global' //전역변수 function fscope() { var vscope = 'local';//지역변수 alert (vscope); } fscope(); 정답 ‘local’을 출력하게 됨 vscope는 가까운 함수를 찾게 됨, 만약..

함수 표현식 복습 콜백 함수 (자바스크립트의 정신을 대변) https://ko.javascript.info/function-expressions 함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다. 값으로서의 함수 함수를 함수의 인수로 전달하고 필요하다면 인수로 전달한 그 함수를 나중에 호출하는 것이 콜백 함수의 개념 익명 함수 : 변수에 할당 된게 아니기때문에 선언된 함수 밖에서 접근할 수가 없음. 함수는 “동작"을 나타내는 값 문자열이나 숫자는 데이터를 나타냄 함수는 하나의 action을 나타냄 함수 선언문과 함수 표현식의 차이 함수 선언문 // 함수 선언문 function sum(a, b) { return a + b; } 함수 표현식 독자적인 구문형태로 존재 ..

배열의 선언방법 let arr=[]; //빈 배열 선언 arr = [1, 2, 3, 4, 100]; //배열에 값 할당 **접근 방법** arr[0] -> 1 arr[4] -> 100 //5가 아닌 4인데 5번째 100이 나온 이유 //컴퓨터는 숫자를 0부터 센다. 배열은 순서가 있다, 인덱스로 구성 (0부터 매김) 그 값들은 요소라고 부른다, 쉼표로 구분 대괄호를 통해 만듬 객체의 선언방법 let user = {}; // 빈 객체는 중괄호로 선언 user = { key : value key: value } //객체에 값 할당 접근방법 (2가지) **obj.key //돗 방식 (더 많이 씀)** obj['key'] //브라켓 방식 항상 키와 값을 넣어야한다. 그 값들은 속성(프로퍼티)라고 부른다, 마찬가..

1. Flex 부모 요소에 display : flex를 주고 justify-content와 Align-items를 이용하면 99%는 중앙 정렬 시킬 수 있다. but inline 요소와 Img 요소가 혼재해 있을 때는 오히려 번거로울 수 있다. 그럴때는 두 번째 방법을 쓰는 것을 추천한다. 2. margin : auto margin auto는 블럭인 요소를 중앙 정렬 시킬 때 사용할 수 있다. 굳이 flex로 바꾸지 않아도 간단하게 중앙 정렬이 가능하다. ex) img 태그를 중앙 정렬하고 block으로 만들고 margin auto를 쓰면 한 줄에서 가운데를 차지한다. inline (span, heading, p)와 같은 문자 요소는 어떻게 중앙 정렬하는데? 3.text-align text-align을 ..

JS에선 함수도 객체, 일종의 값이 될 수 있음 이것이 다른 언어의 함수와 다름 점 function a () {} //함수 a가 선언됐다. JS에선 함수는 객체의 값으로 포함될 수 있다. a = { b:function(){ } }; //그런면에서 볼 때 함수명 a라는 변수에 함수b가 값으로 담겼다고도 //볼 수 있을 것이다. 그리고 이렇게 '객체'의 '속성값'으로 담겨진 함수가 **메소드이다.** 함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 아래 예제를 보자. function cal(func, num){ **return** func(num) } function increase(num){ **return** num+1 } function decrease(num){ **return** num..

Box-sizing : border-box를 쓰고 시작하는 이유 일단 CSS는 기본적으로 box-sizing : content로 디폴트값이 설정되어있다. 그렇다면 무엇이 문제가 되는가? Width : 480px Height: 480px을 줬을 때 우리가 직관적으로 보는 (보더까지가 박스사이즈)라고 보는 것이 배신당한다는 이야기다. 실제로 패딩은 (보더안쪽, 컨텐츠 영역으로 보면 됨) 늘었을 때 컨텐츠 크기에 +되는 경향이 있음 그렇다면 저 사진 기준으로 박스 사이즈가 원래 설정해주고 싶음 480Px에 고정되는게 아니라, Height 480+패딩 탑 40이 되고, width 480 + 패딩 left 50이 되는 것 (정사각형이 아닌 직사각형이 됨) 이런 짜증나는 경우를 잡기위해 필요한 게 Box-sizin..