구름의 글들

배경 : 도대체 box-sizing의 역할은 무엇인가 알아보자 1. 배경 HTML, CSS 초창기는 content 영역의 크기를 width 값으로 지정하기 때문에 하기 사진의 두 div 값의 하얀 영역(content)크기는 같다. 그러나 border값이 포함되면서 어떤 element의 크기를 예측하기 어려워졌다. 즉, element의 크기를 지정할 때 만약 그 element가 padding, border 등 값들을 갖고 있다면 우리가 지정한 size와는 다르게 보일 수 있다. 이런 문제를 해결하기 위해 box-sizing이란 속성이 등장했다. 2. 속성값 box-sizing의 기본 속성값은 content-box인데, 이를 borer-box로 바꾸게 되면 하기 사진과 같이 두개의 같은 hello eleme..

농림축산식품부에서 운영하는 반려동물 등록제에 따라 반려견을 키우는 주인은 반려견을 반드시 등록해야 한다. 이는 동물 보호는 물론 유실·유기를 막고자 2008년 도입된 뒤 2014부터 의무화됐다. 그러나 현형법상 반려견 등록을 위해서는 내장형 무선식별장치(마이크로칩)를 몸에 삽입하거나, 외장형 무선식별장치를 목줄 등으로 매번 착용시켜야 하는 불편함이 있다. 장치 자체의 가격도 5~10만원 정도 되기때문에 견주들에게는 부담이 될 수밖에 없다. 더불어 반려동물의 체내에 칩을 삽입하는 행위에 대한 거부감도 무시할 수 없다. 항상 아이디어란 누군가의 불편함을 해결하기 위해 고민하는데에서 시작되는 것 같다. 위 같은 불편함을 해결하기 위해 몇몇 스타트업은 사람의 지문처럼 강아지의 코에도 독특한 모양의 무늬(비문)이..

# 브라우저 동작 방식 브라우저가 HTML 문서를 읽어들이고 스타일을 입히고 실제 화면에 출력하기까지의 과정을 Critical Rendering Path라고 한다. 이 과정은 여러 단계로 나눠져 있지만 크게 2개의 단계로 표현할 수 있는데, 해당 단계는 하기와 같다. [STEP1] 브라우저는 읽어들인 문서를 파싱하면서 어떤 내용을 최종적으로 페이지에 랜더링할지 결정한다. [STEP2] 브라우저가 랜더링을 수행한다. 여기서 STEP1을 겪으면서 랜더링 트리가 생성되며 랜더트리는 HTML 및 CSS 요소들로 구성된다. 그리고 랜더트리를 생성하기 위해서는 두가지 모델이 필요한데, 이는 DOM과 CSSOM이다. 브라우저 동작방식을 자바스크립트 딥다이브 책의 정의에 따라 다시 나열하자면, 브라우저는 사용자가 보고..