이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 (기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다. joshua1988.github.io 이번 포스팅에서는 위의 블로그를 참고하여 이벤트 버블링과 캡처에 대해서 알아보고자 한다. 먼저 이벤트 버블링과 캡처에 대해 알기 전, 이벤트 등록을 위해 아래와 같이 작성하였다. 1) 이벤트 등록방법 : addEventListener HTML Button-Click first-class second-class third-class JS //button이라는 선태자 or 요소를 선택한다. const btn = document.querySelector('button'); //'click' event를 등..

[Node JS] readline 모듈로 입출력 방법 코딩공부를 하려고보니 막상 입출력 관련 모듈을 제대로 사용해본적 없었다. Javascript 입출력 관련은 여러가지 모듈들이 있지만.. 내장 모듈을 사용하고자 "readline"을 소개하려고 한다. 1) readline torimaru.tistory.com 이전글을 참고하여 간단하게 소프티어 연습문제를 풀어보았다. readline이 익숙치 않아 연습이 많이 필요해보인다. const readline = require('readline'); const rl = readline.createInterface({ input : process.stdin, output : process.stdout }); let sum = []; let array = []; //..

코딩공부를 하려고보니 막상 입출력 관련 모듈을 제대로 사용해본적 없었다. Javascript 입출력 관련은 여러가지 모듈들이 있지만.. 내장 모듈을 사용하고자 "readline"을 소개하려고 한다. 1) readline을 본격적으로 사용하기 앞서 기본적으로 필수적인 작성을 해야한다. //readline 모듈 IMPORT const readline = require('readline'); // 입출력을 위한 인터페이스 객체 생성 const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); 2) "on" 메서드를 통해 작성할 수 있으며, rl (=realine)은 line 한줄 한줄을 작성하기 위한 이벤트, clo..

Box-sizing이란? 화면에 보여지는 Box의 크기를 표현하는 방식을 뜻합니다. 기본적으로 모든 Box의 기본값은 content-box 입니다. 구글 이미지 Box의 Box-sizing 값을 살펴보면 아래와 같이 Box-sizing은 content-box라고 표현됩니다. CSS로 입히지 않아도 기본적으로 content-box로 지정됩니다. 그러나, 파란색으로 표시된 부분이 "Content"영역인데, 이 "Content-Box"영역에 한해서 Box의 크기를 지정하는겁니다. 현재 Google의 Content 영역의 크기는 Width : 272px, Heigth: 92px 입니다. 만약 CSS를 추가 적용하는데 Padding-left의 영역을 400px만큼 주었다면,화면에서 보여지는 결과는 Padding-..