위와 같은 코드가 있다고 가정하자.버튼이 클릭됐을때 웹 APIs에서 이벤트가 발생하면 이 콜백을 Task Queue에 넣어준다.콜백 안에서 작성한 코드는 어떤 순서로 작성하던 상관이 없다. 왜냐하면 이 콜백이 Call stack에 들어가는 순간 이벤트 루프는 이것이 다

requestAnimationFrame: 이벤트가 실행될때는 코드를 변경하지 않고 나중에 브라우저가 화면을 업데이트 할 때 등록한 변경사항을 적용한다.Call Stack 안에서 코드 블럭이 실행되고 난 후 바로 setTimeout()의 콜백함수를 실행하고 싶을 때 이렇

class를 사용하고 class안의 함수를 다른 콜백으로 전달할 때에는 그 안에 포함돼 있는 class의 정보가 사라진다. 이렇게 되면 함수만 전달되고 class는 전달되지 않을 수가 있다.this와 함수를 묶을 수 있는 바인딩을 사용할 수 있다.예를 들어 this.o

target 클릭시 브라우저는 capturing을 거치게 된다. 부모부터 해당 target 까지 내려간다.target의 EventHandler를 호출하고 bubbling을 거치면서 부모요소들의 EventHandler까지 다 호출해버린다.capturing단계에서 우리가

keypress 이벤트가 발생할때 어떤키가 눌리는지 알기 위해 디버그 창을 이용해 확인했다.그 후 코드 작성.

box에 item들이 y축으로 추가되면서 box밖으로 넘치는 상황이 있는데이럴 때 overflow-y: auto를 하면 box안에서 scroll된다.

DOM이란? 브라우저를 이해할 수 있는 자신들만의 오브젝트로 변환하게 되는 것 ex) HTML의 ``가 javascript의 node라는 오브젝트로 변환됨. node라는 오브젝트는 EventTarget이라는 오브젝트를 상속한다. 즉 모든 node는 이벤트가 발생할 수

요소의 사이즈나 위치에 관련된 정보를 얻어낼 수 있다.top, left, bottom, right, width, height 등 ( 이때 bottom, right는 css와는 다르게 위에서는 얼만큼 왼쪽에서는 얼만큼 떨어져있는지를 나타냄 )브라우저 window창에서 x

모니터 사이즈브라우저 전체의 사이즈브라우저 페이지 + 스크롤 바문서 자체를 의미함 (스크롤 바 제외 영역)

window는 global object이다.따라서 console.log(this) = console.log(window)

리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다.리플로우는 브라우저에서 사용자를 차단하는 작업이므로, 개발자가 리플로우 시간을 향상하는 방법을 이해하고 다양한 문서 속성(

getBoundingClientRect() 메서드는 요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.

브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 사용자 화면에 지금 보이는 요소인지 아닌지를 구별하는 기능을 제공한다.다수의 이미지가 중심이 되는 페이지에서 화면상의 모든 이미지를 한 번에 불러오면 불필요한 네트워크 비용이

깃헙 마크다운 확인 참고사이트https://dillinger.io/깃헙에 넣을 배찌 참고사이트https://shields.io/아이콘 참고 사이트https://simpleicons.org/깃헙 프로필 꾸미기 참고사이트https://g

박스 요소에 top: 20px과 같은 css를 먹이고 싶은데 적용되지 않는 경우가 종종 있다.그럴땐 현재 박스에 position: \*을 지정해 주어야만 위치 값이 먹는다.이런 실수는 안 하도록 하자.

정렬할 박스의 속성을 부모 기준으로 absolute로 지정한다.left:0, right:0을 사용한다.양쪽(left,right) 방향의 margin을 auto로 지정한다.top:0, bottom:0을 사용한다.상하 방향의 margin을 auto로 지정한다.

그냥 연습...

css는 원시적인 문법이기에 고도화된 작업에서는 불편한 경우도 있다. css preproceccor(전처리기) 전처리기를 컴파일하는 작업이 필요하다 전처리기는 css문법과 굉장히 유사하지만 표준 css보다 많은 기능을 사용해 편리하게 작성이 가능하다. 웹에서는 동작하지

HTML CSS

< 평상시 >< hover시 >