TIL/HTML, CSS, JS 이것저것24 UNIX-shell tutorial 터미널 명령어와 UNIX 셸의 기초를 배울수 있는 자료를 찾게되어 기록해둡니다. 이미 알고있던 내용도 있지만 모르던 부분도 몇몇 부분있네요. http://swcarpentry.github.io/shell-novice/02-filedir/index.html Navigating Files and Directories – The Unix Shell The part of the operating system responsible for managing files and directories is called the file system. It organizes our data into files, which hold information, and directories (also called ‘folders’),.. 2021. 7. 24. JS30-Whack A Mole JS30 30강을 진행하면서 배운 내용을 정리해두려 합니다. 1.textContent와 innerText의 차이. 나는 지금까지 이 두개가 그냥 같고 별다른 차이가 없다고 생각했는데 큰차이가 있었다. 결론적으로는 textContent가 성능상 훨씬더 유리하다. 이유는 아래와같다. 브라우저는 자동적으로 페이지의 레이아웃을 계산하여 각 element와 CSS를 화면에 렌더링 한다. 이하의 코드를 보자. elementA.className = "a-style"; var heightA = elementA.offsetHeight; // layout is needed elementB.className = "b-style"; // invalidates the layout var heightB = elementB.off.. 2021. 6. 27. JS30-Countdown Timer JS30 29강을 진행하면서 배운 내용을 정리해두려 합니다. 1. HTML 요소에 name 어트리뷰트가 있으면 document에서 메소드 가져오는것 처럼 선택이 가능함. ... ... //queryselector를 쓰지않고 document에서 바로 부를수 있다. document.customForm.addEventListener( ... const mins = this.minutes.value; //form 안의 input 엘리먼트도 name 속성이 있어서 바로 선택이 가능함. ... ) 2. 시간 구하기 관련 구현 //내가 구현한 방식. ... let timeInput; let seconds= 0; let minutes = 0; let id; function startTimer(e) { e.prevent.. 2021. 6. 27. JS30 - Video Speed Controller JS30 28강을 진행하면서 배운 내용을 정리해두려 합니다. 1. 최소 값이 있는 구간 구하기. const y = (e.offsetY / this.offsetHeight); const min = 0.4; const max = 4; const speedX = y * (max-min) + min; 이런 간단한 부분을 수학을 조금만 쓰면 되는데 나는 수학적 응용력이 너무 떨어지나보다... 이부분을 어떻게 구현할지 1시간 넘게 고민했는데 결국 구현하지 못하고 강의를 참조 했다. 2021. 6. 25. JS30-Stripe Follow Along Dropdown JS30 26강을 진행하면서 배운 내용을 정리해두려 합니다. 1. Arrow function은 this를 바인딩 하지 않기 때문에 arrow function 에서 this를 쓰면 바깥 스코프의 this를 사용함. function handleEnter() { this.classList.add('trigger-enter'); setTimeout(() => { //여기서 this는 addeventlistener 가 붙은 element를 가리킨다. this.classList.add("trigger-enter-active"); }, 150) function handleEnter() { this.classList.add('trigger-enter'); setTimeout( //setTimeout은 기본적으로 콜백함.. 2021. 6. 24. JS30- Sticky Nav / Event Capture, propagation JS30 24강을 진행하면서 배운 내용을 정리해두려 합니다. 1.CSS position CSS 포지션이 잘 이해가안가는 부분이 있었는데 특정 element의 position을 fixed 로 바꾸면 아래에 있던 element가 위치가 위로 당겨지는 거였다. 그 이유는 absolute positioning에 해당하는 요소들인 문서의 normal flow 에서 벗어나기 때문이다. 스택오버플로우에서 해당 내용을 기막히게 비유한 글이있어서 간단하게. 옮겨 적는다. (https://stackoverflow.com/questions/33132586/why-isnt-my-margin-working-with-position-fixed/33132765#answer-33132765) HTML 문서를 하나의 강이라고 생각하고.. 2021. 6. 23. 이전 1 2 3 4 다음
