HTML & CSS

[CSS] box-sizing : border-box;

box-sizing : border-box! 요소의 크기가 원하는대로 보이지 않을 때 사용하는 CSS 프로퍼티다. 예전에는 뭔가 치트키스럽다는 생각을 가지고 있었다 ㅎㅎ.. 사실 그냥 박스모델 개념을 알면 쉽게 풀린다. 아주 짧게 박스모델과 관련하여 box-sizing 속성에 대해 알아보자. 박스 모델 프론트엔드 개발자가 크롬에서 자주 만나는 사각형이다. box model은 4가지 부분으로 구성된다. margin, border, padding, content box! margin은 생략하고, border, padding, content box를 중심으로 보자. 우리가 만들 요소의 크기가 border+pading+content box로 정해지기 때문이다. 우선, CSS box-sizing 속성의 기본값은 ..

[HTML] script 태그의 async, defer 속성

Script 태그 DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다. src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다. 해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다. 여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로 defer, async가 있다. DOM 생성 중단이 일어난다면 어떤 문제가 발생하는가. 위에서 언급한 대로, 스크립트 태그 아래에 있는 DOM 요소는 대기하므로, 해당 DOM 요소들에 접근할 수 없다. querySelector와 같이 DOM을 직접적으로 조작하여 핸들러등을 추가하는 등의 행위가 불가능하다. 스크립트의 용량이 크다면, 페이지..