Note
-
script 태그의 위치Note 2021. 3. 29. 16:17
html에서 script 태그는 어디에 위치하는 것이 좋을까? 결론부터 말하면 body 태그 최하단에 위치하는 것이 가장 좋다. 이를 이해하기 위해서는 브라우저 동작 방식을 살펴볼 필요가 있다. 브라우저의 동작 방식 HTML을 읽기 시작 HTML을 파싱 (parsing: 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업) DOM 트리 생성 Render 트리가 생성 (DOM tree + CSS의 CSSOM 트리 결합) Display(브라우저)에 표시 여기서 중요하게 봐야 하는 구간이 1~2의 과정이다. HTML을 읽고 내려가는 과정에서 script를 만나면 파싱은 중단되고, 중단된 상태에서 자바스크립트 코드를 로드 후에 자바스크립트 코드를 파싱하게 된다. 그리고 다시 HTML 파싱이 계속되는 것이다. HTML을 ..
-
[css] 다른 요소에 영향을 주는 hoverNote 2021. 3. 28. 20:14
stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered How to affect other elements when one element is hovered What I want to do is when a certain div is hovered, it'd affect the properties of another div. For example, in this JSFiddle demo, when you hover over #cube it changes the background-color but what I stackoverflow.com 요소가 컨테이너 내부에 직접 있는 경우 #contain..
-
[css] ntn-child, ntn-last-childNote 2021. 3. 22. 15:25
:nth-child(), :nth-last-child() :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자 :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터 :nth-child 앞에서부터 /* 목록의 두 번째 선택 */ li:nth-child(2) { color: red; } /* 목록의 4, 8, 12, 16...번째에 위치하는 모든 요소 선택 */ :nth-child(4n) { color: blue; } //홀수번째 :nth-child(odd) 또는 :nth-child(2n+1) //짝수번째 :nth-child(even) 또는 :nth-child(2n) // 임의의 10번째 요소 :nth-child(10..
-
TypescriptNote 2021. 2. 26. 19:03
Typescript 자바스크립트에 타입을 부여한 언어 컴파일(complie) 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 한다. 이 변환 과정을 컴파일이라고 한다. npm i typescript -g tsc index.ts // index.js 추가됨 컴파일 옵션 tsconfig.json { "compilerOptions": { "allowJs": true, // 프로젝트 안에 자바스크립트를 허용 "checkJs": true, // @ts-check 역할 허용 "noImplicitAny": true // 모든 타입에 대해 기본적인 타입 넣어야 함 } } 기본 // 문자열 let str: string = "hello"; // 숫자 let num: number = 22..