Front End
브라우저 렌더링(리플로우, 리페인트)
🌐브라우저 렌더링브라우저 렌더링 과정파싱(Parsing)DOM TreeCSSOM Tree렌더 트리(Render Tree)레이아웃페인트리플로우(Reflow) / 리페인트(Repaint)리플로우와 리페인트의 최적화불필요한 레이아웃 줄이기CSS에서 레이아웃, 페인트를 발생시키는 속성들영향을 주는 노드 줄이기브라우저 렌더링브라우저 렌더링(rendering)이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다. 브라우저는 기본적으로 렌더링을 수행하는 렌더링 엔진을 가지고 있다.브라우저 렌더링 과정사용자가 브라우저를 통해 웹 사이트에 접속한다.브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 필요한 리소스를 다운받는다.렌더링 엔진은 전달받은 ..
CSS Animation (@keyframe, canvas)
@keyframesanimation필수 옵션추가 옵션예제를 통해 사용법 알아보기캔버스로 사각형 그리기캔버스로 클릭이벤트 만들기@keyframesCSS 애니메이션은 기본적으로 transition 속성을 이용해 간단히 구현할 수도 있지만, @keyframe을 이용해 시간 순서대로 정밀하게 짜여진 애니메이션도 구현할 수 있다. 키프레임 활용을 하기 위해선 우선 @keyframe 블록을 이용해 시간에 따른 CSS 속성을 작성해주어야 한다./* '%' 단위로 시간 진행에 따른 상태를 작성 */ @keyframes 애니메이션이름 { /* from 으로 작성도 가능*/ 0% { CSS속성 : 속성값; } /* 애니메이션 진행도에 따른 스타일 설정 */ /* 필요하다면 1부터 99, 소수점까지도 모두 작성 가능 */ ..
반응형 웹
반응형 웹탄생 배경모바일 퍼스트(mobile first)반응형 웹의 장단점장점단점미디어 쿼리미디어 쿼리 적용법태그 속성을 이용한 적용법CSS 파일 또는 태그에서 직접 작성미디어 쿼리 구문복잡한 미디어 쿼리논리곱(and) 미디어 쿼리논리합(or) 미디어 쿼리부정(not) 미디어 쿼리반응형 웹반응형 웹이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트를 의미한다. 즉, 브라우저(스크린)의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미하며, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이기도 하다.반응형 웹은 위의 예시처럼 하나의 URL을 기반으로 화면이 바뀐다. 만약 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 ..
브라우저
🌐브라우저웹(Web)브라우저의 특징과 웹의 동작 원리브라우저의 구조사용자 인터페이스(User Interface)브라우저 엔진(Browser Engine)렌더링 엔진(Rendering Engine)통신(Networking)자바스크립트 해석기(JavaScript Interpreter)자바스크립트 엔진 구조 (V8 엔진을 토대로)UI 백엔드자료 저장소웹 스토리지(Web Storage) 특징브라우저웹 브라우저, 웹 탐색기로도 불리는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTMl 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 휘해 응용 계층의 대표적 프로토콜인 HTTP를 통해 송수신한다.웹(Web)브라우저 상에서 제..
자료 구조
자료구조 자료구조의 특징 Stack Stack의 특징 Stack 실사용 예제 Queue Queue의 특징 Queue 실사용 예제 Tree Tree의 특징 Tree의 구조 깊이 (depth) 레벨 (level) 높이 (height) 서브 트리 (sub tree) Tree 실사용 예제 효율적인 탐색을 위한 트리 구조 이진 트리(Binary tree) 이진 탐색 트리(Binary Search Tree) 트리 순회 전위 순회 (preorder traverse) 중위 순회 (inorder traverse) 후위 순회 (postorder traverse) 레벨 순회 (levelorder traversal) Graph Graph의 구조 Graph의 표현 방식 인접 행렬 인접 리스트 알아두어야 할 Graph 용어 Gr..