Category: TIL ✍

0

렌더링 엔진(2) - 렌더 트리 구축

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 브라우저의 기본 구조 렌더링 엔진 동작 과정1. HTML 파싱 (for DOM트리 구축)2. 렌더 트리 구축3. 렌더 트리 배치4. 렌더 트리 그리기 렌더 트리 구축 HTML 마크업을 처리하고 DOM 트리를 빌드합니다. CSS 마크

0

렌더링 엔진(1) - 파싱과 DOM트리 구축

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저와 렌더링 엔진 렌더링 엔진 동작 과정1. HTML 파싱 (for DOM트리 구축)2. 렌더 트리 구축3. 렌더 트리 배치4. 렌더 트리 그리기 파싱과 DOM트리 구축 파싱에 대하여문법 / 파서-어휘 분석기 조합 / 변환 / 파싱 예 / 어휘와

0

브라우저와 렌더링 엔진

https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 브라우저의 기본 구조 렌더링 엔진 1. 브라우저의 주요 기능 URI를 입력할 수 있는 주소 표시 줄 이전 버튼과 다음 버튼 북마크 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼 홈 버튼 2. 브라우저의 기본 구조 사용

0

12/ File Api와 이미지 용량 줄이기

오늘은 이미지 용량을 줄이는, (리사이징이 더 맞는 말이겠죠.) 방법에 대해서 알아보려고 합니다. 로컬에서 이미지 파일을 올리는 것부터 시작하죠. 이를 위해서는 HTML5관련 API 중 하나인 파일 API를 이용하고, 이미지 리사이징을 위해서 캔버스를 이용할 것입니다. 파일API를 다뤄보고 Blob에 대해서도 알아보죠..(Blob의 더 자세한 내용을 위해

0

(mobile) device-pixel-ratio계산

목차 👋👋0. 서론1. @media 대하여..2. -webkit-device-pixel-ratio - 2-1. 픽셀비율 계산하기 - 2-2. device width와 height 계산하기 0. 서론 현재 작업 중인 프로젝트는 데스크탑 브라우저(여러 브라우저 대응) 뿐만아니라 모바일 기기 대응도 진행해야한다. 너무도 당연히

0

Angular 프로젝트에 prettier 코드포매터 세팅하기

개인의 경험을 바탕으로 적은 글이기에 피드백은 언제나 댓글로 환영합니다. :) 목차 모듈 세팅 프리티어 설치하기 에디터에만 세팅하기 프로젝트에 세팅하기 프리티어 옵션 값 precommit, 커밋 전 옵션에 맞춰 재포맷 하는 hook 추가. lint stage husky 한 프로젝트에 프론트엔드 개발자가 여러 명일 경우 각자의 코드

0

앵귤러 미리 예습해보기_ToDoList

출처 inflearn : Angular 기본과 간단한 To-Do 어플리케이션 만들기 http://poiemaweb.com/ : angular 파트 요약 목차 Angular CLI Angular Hello world Module Component 알아보기 Templete 알아보기 컴포넌트 커뮤니케이션 컴포넌트 스타일 처리 Pipe 1. Angula

0

jquery 뽀개기(1)

basic html은 위에서 아래로 순차적으로 실행된다. jquery의 ready나 load메서드가 있을 경우 위에서 아래로 순차적으로 실행되지 않고 각 메서드의 특징별로 순서가 진행된다. 1. ready()제이쿼리 ready 메서드는 DOM이 완전히 로드되었을 때 코드를 실행하도록 구현되어있다.(리액트의 componentDidMount) 제이쿼리 3.0

0

11/ 정규표현식

목차 정규표현식 플래그 패턴 자주사용하는 정규표현식 JS Regular Expression RegExp Constructor RegExp Method RegExp.prototype.exec() RegExp.prototype.test() 1. 정규표현식RegExp.prototype.exec(text) :RegExp.prototype.te