개발기록

총 6단계HTML를 파싱 후, DOM트리 구축CSS를 파싱 후, CSSOM트리 구축JavaScript 실행DOM과 CSSOM을 조합하여 렌더트리 구축뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout 단계)계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계) ▶︎ 브라우저의 주요 기능: 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것 ▶︎ 랜더링 엔진: 사용자가 선택한 콘텐츠를 표시해주는 소프트웨어브라우저렌더링 엔진크롬Blink 사파리Webkit파이어폭스Gecko ▶︎ 파싱(Parsing)브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것문서나 HTML 등 어떤 큰 자료에서 내가 원하는 정보만 가공하고 추출해서 원할 때 ..

추상 자료형 ADT(Abstract Data Type) - 기능의 구현 부분을 나타내지 않고 순수한 기능이 무엇인지 나열한 것 - 구현 방법을 명시하고 있지 않음. - 예로는 큐, 스택, 연결 리스트(트리) 가 있다. 큐(Queue) 선형(linear) 자료형. FIFO(First In First Out) : 먼저 집어넣은 데이터가 먼저 나온다. 데이터를 집어넣는 enqueue, 데이터를 추출하는 dequeue 등의 작업을 할 수 있다. 큐는 순서대로 처리해야 하는 작업을 임시로 저장해두는 버퍼(buffer)로서 많이 사용 class Queue { constructor() { this._arr = []; } enqueue(item) { this._arr.push(item); } dequeue() { re..

Math.abs() 정의 주어진 숫자의 절대값 반환 예제 function difference(a, b) { return Math.abs(a - b); } console.log(difference(3, 5)); // 출력: 2 console.log(difference(5, 3)); // 출력: 2 Math.ceil() 정의 전달된 숫자를 소수점 아래로 버리고, 다음으로 큰 정수로 올림한 값을 반환 주어진 숫자보다 크거나 같은 가장 작은 정수 반환 예제 console.log(Math.ceil(4.2)); // 출력: 5 console.log(Math.ceil(7.8)); // 출력: 8 console.log(Math.ceil(-3.1)); // 출력: -3 Math.floor() 정의 주어진 숫자의 소수점..

@mixin : 자주 쓰는 CSS 스타일을 재사용할 수 있게 함. //@mixin - 스타일 정의 @mixin 믹스인 이름 { //CSS 스타일 내용 } //@include - 믹스인 호출 @include 믹스인 이름 인자(argument) 추가 @mixin setColor($color) { //CSS 스타일 내용 } p{ @include setColor(blue) }

1. favicon 생성 https://realfavicongenerator.net/ Favicon Generator for perfect icons on all browsers The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages. realfavicongenerator.net 2. 아이콘 폰트 만들기 https://icomoon.io/app/#/select/font IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io 3. web font https..

변수: 반복적으로 사용하는 코드를 미리 선언하여 재사용할 수 있게 함. 변수 선언 $variable-name: variable-value; Color Palettes 보통 디자인 시안은 colors 가 정해져 있고, 자주 쓰이기 때문에 colors.scss파일을 만들어 색깔에 대한 변수를 선언해주면 좋다. Typography 글씨체, 글씨 크기, 색깔 등 또한 변수 선언해주면 좋다. Grid System columns: 기둥 개수 unit: 기둥 너비 gutter: 양쪽 너비 margin: 양쪽 여백

0. vscode에서 terminal을 열어준다. 1. package 생성 후에 node-sass 설치 npm init -y npm i node-sass 3. package.json "scripts" 부분을 수정해준다. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node-sass": "node-sass", "sass": "node-sass styles/main.scss ./style.css", "sass:watch": "node-sass --watch" }, 4. 확인 main.scss에 아무 코드 입력후, npm run sass해주면, main.scss에 썼던 코드가 style.css에 그대로 나타난다. 이렇게 잘 실행되면..

클라우드 서비스란?물리적 자원 혹은 논리적 자원을 대여하는 것인터넷을 통해 컴퓨팅 자원, 데이터 저장, 소프트웨어, 플랫폼 및 기타 서비스를 원격으로 제공하는 것  EC2Elastic Compute Cloud크기 조정이 가능한 컴퓨팅 파워를 클라우드에서 제공하는 웹 서비스  AWS 인스턴스 생성하기 인스턴스 생성 완료  EC2에 애플리케이션 배포하기chmod 400 keyPair.pemssh -i keyPair.pem ec2-user@172.31.16.55curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bashexport NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "$..