이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. HTML 문서의 각 엘리먼트들은 계층적으로 이루어져 있습니다. → 이런 계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생하면 연쇄적 이벤트 흐름이 일어나게 됩니다! 이런 이벤트 전파(Event Propagation)은 크게 버블링과 캡처링으로 나뉩니다. 버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파(기본값) 캡처링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달 즉, 버블링은 자식→ 부모, 캡처링은 부모→ 자식으로 방향이 정반대인 것을 알수 있습니다. 이벤트 전파 흐름은 3가지 단계가 있습니다. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 ..
이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 이번 주부터 저희는 JavaScript에 대해서 배우게 됩니다! 강의 도중에 실행 컨텍스트라는 개념에 대해서 배우게 되는데요. 이와 관련해서 좋은 글을 발견해서 같이 공유하려 합니다. 글 링크 : https://velog.io/@hyumapr/JavaScript-Sean103024 JavaScript의 핵심 원리 탐구: 실행 컨텍스트관점으로 보는 클로저, this, 그리고 호이스팅 여러 면접을 거쳐오면서 기술면접 질문들로 자주 받는 내용들인 실행 컨텍스트,클로저,this,호이스팅을 한번에 다뤄볼려고 한다. velog.io 어제 쓰여진 따끈따끈한 글인데요. 이 글에서는 this 바인딩, 클로저, 호이스팅이 무엇인지 알려주고 이 개념들과 실행 컨텍스..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. box-sizing: border-box box-sizing : border-box로 설정하고 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. → border값이나 padding 값이 지정한 width값이나 height값에 포함이 된다. 출처: https://juicyjerry.tistory.com/entry/css에서-box-sizing-을-border-box로-하는-이유 position sticky가 적용이 되지 않는 이유 sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됨 부모 태그는 무조건 height 높이 값이 들어가 있어야 ..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. CSS 전처리기 CSS 전처리기는 전처리기가 가진 특별한 문법으로 CSS를 생성하도록 하는 프로그램입니다. → 기존 CSS가 가진 문제점들을 해결하기 위해 만들어졌습니다. CSS 전처리기를 사용하면 다음과 같은 장점이 있습니다. 재사용성 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능 시간적 비용 감소 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약 유지 관리 CSS코드를 여러 파일로 나눠 유지 보수성 향상 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리 용이 Learning curve 낮음 하지만 전처리기를 위한 도구가 필요하다는 점과, 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소..
