본문 바로가기

전체 글291

크롬으로 Layout(grid, flex) 디버깅 Styles의 Layout 탭에 대해서 살펴보자 Layout 탭에는 grid와 flex로 선언된 엘리먼트가 나타난다. Overlay display settings에서 show track sizes를 체크하고 grid overlays에서 원하는 요소를 체크해보면 viewport에서 아래 사진처럼 layout 정보를 보여준다. show track sizes에서 1fr - 238px 과 같이 나타나는데 1fr은 사용자가 지정한 값이고 238px은 computed된 px 값이다. grid나 flex는 복수 선택이 가능하며 엘리멘트 옆에 색상 네모칸은 해당 레이아웃을 viewport에서 하이라이팅 해줄 때 색상이다. 가장 오른쪽에 있는 화살표 버튼을 누르면 viewport에서 엘리먼트가 있는 곳으로 바로 이동이 .. 2021. 5. 5.
크롬으로 CSS 디버깅 크롬 개발자 도구 Elements 탭에 들어가면 css를 디버깅할 수 있는 방식들이 여러 가지가 있다. 그 중 유용한 기능들을 소개하고자 한다. # box model 바로 수정하기 아래 사진의 가장 좌측 inspector를 누른 후 화면의 요소를 선택한다. 이후 Computed 탭으로 이동하면 다음과 같이 해당 요소의 박스모델을 볼 수 있다. 박스 모델을 바로 수정할 수 있다. - 부분을 더블클릭하면 다음 처럼 수정할 수 있는 상태가 된다. 여기에 숫자를 입력하거나 %, rem, em 등을 입력할 수 있다. 1rem을 입력해보면 16으로 바뀌는데 이는 px 단위로 바뀌는 것이다. px이 아닌 단위도 입력이 가능하고 최종적으로 px로 변환되는 방식이다. 박스 모델에서 값을 변경해보고 싶을 때 Compute.. 2021. 5. 5.
크롬으로 DOM 디버깅 기본적인 사용법은 공식 문서에서 확인할 수 있다. 이 글에서는 좋은 기능들을 정리해보고자 한다. developer.chrome.com/docs/devtools/dom/ Get Started With Viewing And Changing The DOM - Chrome Developers How to view nodes, search for nodes, edit nodes, reference nodes in the Console, break on node changes, and more. developer.chrome.com # 키보드로 DOM 탐색하기 크롬 디버거로 DOM을 디버깅하다 보면 손이 굉장히 바쁘다. 조금 더 편하게 디버깅하려면 키보드 arrow(화살표)를 활용하면 된다. 다음과 같은 디버거 상.. 2021. 5. 5.
자바스크립트 동작 방식: 실행 컨텍스트(execution context) 자바스크립트는 인터프리터 방식의 언어일까? 답은 no에 가깝다고 할 수 있다. 인터프리터 방식의 언어라면 다음 코드는 에러가 나야할 것이다. foo(); function foo(){console.log(1)} 코드는 크게 선언문과 실행문으로 나누어 볼 수 있다. 선언문은 변수, 함수 등에 대한 식별자 이름을 만드는 것이고 ( const a, function foo() {} ) 실행문은 선언된 것들을 가지고 사용하는 부분으로 볼 수 있다. (console.log(a), foo()). 결국, 자바스크립트 파일은 선언문과 실행문의 묶음이다. 이를 실행하는 규칙을 방식이 자바스크립트에서는 실행 컨텍스트라는 방식으로 되어있다. 실행 컨텍스트는 세 가지로 나뉜다. Global Execution Context: 함수.. 2021. 5. 2.

티스토리툴바