본문 바로가기

IT82

[JavaScript] 렌더링 트리(Critical Rendering Tree) 카테고리가 JavaScript에 국한된 건 아니지만, 이미 카테고리를 세부적으로 나누었기에 여기에 업로드! ​ 렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers TODO developers.google.com ​ *Critical Rendering Path ​ * Render Tree 형성은 DOM, CSSOM의 결합 * DOM Tree에서 - 일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다. - 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어,---위의 예시에서---span 노드의 경우 'display: none' 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누.. 2021. 1. 3.
복습용 간단 핵심 요약 C언어 정리 참고 _ 기초를 탄탄히 세워주는 c++ 프로그래밍 입문​*표준 입출력​- 데이터 입출력 함수​printf : 데이터 출력scanf : 데이터 입력​-> 이 함수들을 사용하기 위해 전처리문 #include 사용 필수​- 서식 문자​%d : for 10진수%lf, %f : for 실수 (주의 - float는 입출력 시 %f 사용 가능하지만 double은 다르다.)%c : for 문자*배열​-배열 사용 이유 : 학생 100명의 점수를 저장하려고 int형 변수 100개를 사용하면 큰 낭비다.100개가 아니라 1000개 혹은 10000개라면 어떻게 해야 할까?solution) 배열을 사용한다.​-배열이란?같은 타입의 변수 여러 개를 묶어 하나의 변수명으로 처리할 수 있도록 해주는 것1차원뿐만 아니라 2,3, .... 2021. 1. 3.
[CSS] px, rem, em 간단 정리 - 절대값으로 사용 됨- 뷰포트 크기 상관 x- 고정된 값으로 렌더링 된다.​- 루트 엘리먼트의 폰트 사이즈를 기준으로 적용된다.- 크기가 변하는 곳(ex. media query)에 사용하면 편리​- 상위 엘리먼트의 폰트 크기를 기준으로 적용된다.​ex).main { font-size: 2.5rem; height: 3em;} - height는 2.5rem의 3배가 된다. 2021. 1. 3.
[CSS] position : relative, absolute, sticky, fixed : 네이버 블로그 예시는 여기서.positionThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.orgposition의 default(기본값)은 static이다.​● position: relative원래 있던 자리를 유지하되, 상대적으로 사용자가 지정한 포지션(top, right, bottom, left) 만큼 이동한다.​● position: absolute근접한 부모 중에 static이 아닌 부모의 기준에서 움직인다.​● position.. 2021. 1. 2.
[CSS] flex box 이해 게임 [한글 버전] https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS의 flex 속성을 게임으로 쉽게 이해할 수 있다. 이 속성을 이용해 개구리를 원래의 연못으로 옮기는 게임이다. 2021. 1. 2.
[CSS] Absolute 일 때 중간 정렬 Absolute Centering in CSS If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline… medium.com parent 요소를 position:relative로 하고, child 요소를 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 로 한다. OR flexbox를 사용하는 방법도 있다. 위 블로그 글 참고. 2021. 1. 2.

티스토리툴바