웹(56)
-
자바스크립트 엔진 - V8
V8 엔진 웹 브라우저를 만드는데 기반을 제공하는 오픈 소스 자바스크립트 엔진 C++ 작성된 고성능의 자바스크립트 & 웹 어셈블리어 엔진 동작 과정 일반적인 자바스크립트 엔진 동작 과정 V8 엔진 동작 과정 Javascript Code 작성 Javascript Code를 파서(Parer)가 파싱 AST(Abstract Syntax Tree) 생성 생성된 AST를 Ignition 에게 전달 V8 엔진의 인터프리터를 Ignition 이라고 하며 바이트 코드 생성(Bytecode) 및 실행을 담당. 원본 소스 코드 보다 컴퓨터가 이해하기 쉬운 바이트 코드로 변환함으로써 원본 코드를 다시 파싱(Parsing) 해야 하는 수고를 덜고 코드의 양도 줄이면서 코드 실행 때 차지하는 메모리 공간을 아끼려는 목적. 바이..
2020.03.02 -
자바스크립트 엔진
정의 자바스크립트 코드를 실행하는 프로그램/인터프리터 자바스크립트 엔진은 표준적인 인터프리터로 구현 될 수 있고, 특정한 방식으로 바이트코드로 Just In Time(JIT)컴파일로 구현 할 수도 있음 여러 목적으로 사용될 수 있지만 주로 웹 브라우저를 위해 사용 자바스크립트 코드를 해석하고 실행하기 위해 만들어진 일종의 프로세스 가상 머신 역할 자바스크립트 코드를 브라우저에 의해 해석되거나 어플리케이션 임베드 될 수 있는 최적화된 코드로 변환하는 역할 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어 혹은 기계어로 변환해주는 역할 종류 Google - V8 (Chorme과 Node.js 사용) Mozilla- Rhino Firefox - SpiderMonkey Safari - ..
2020.03.02 -
CSS - 상속(Inheritance)
상속(Inheritance) .ecosystem { color : red; } 생태계 동물 호랑이 사자 코끼리 식물 설명 .ecosystem 에 적용된 색상(부모에서 지정한 스타일)이, 하위 요소들에게도 적용 상속되는 속성들(properties) 상속이 CSS 속성 모두 적용되는 것이 아니라, 글자를 다루는 속성들이 대부분 포함 font font-size font-weight font-style line-height font-family color text-align text-indent text-decoration letter-spacing opacity 기타 등등 강제 상속 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 부모에서 자식으로 강제 상속 자식을 제외한 후손에게는 적용되지 않..
2019.12.11 -
CSS - 속성 선택자(Attribute Selectors)
속성 선택자(Attribute Selectors) HTML 속성을 이용 대괄호([]) 사용 ATTR 속성 attr을 포함한 요소 선택 [disabled] { opacity : 0.2; /* 20% */ color : red; } ATTR=VALUE 속성 attr 을 포함하며 속성 값이 value 인 요소 선택 value 인 요소에 쌍따옴표 생략 가능 [type=“password"] { opacity : 0.5; color : red; } ATTR^=VALUE 속성 attr 을 포함하여 속성 값이 value 로 시작하는 요소 선택 [class^=“btn-"] { font-weight : bold; boder-radius : 20px; } DANGER NORMAL ATTR$=VALUE 속성 attr 을 포함..
2019.12.11 -
CSS - 가상클래스 선택자 - NTH OF TYPE, NOT
NTH OF TYPE E 의 타입(태그이름)과 동일한 타입인 형제 요소 중 E 가 n 번재 요소라면 선택(n 키워드 사용 시 0 부터 해석(Zero-base)) 예제 1) .fruits { font-size : 40px; } .fruits p:nth-of-type(1) { color : red; } 딸기 사과 망고 오렌지 설명 클래스 선택자 fruits 찾아 태그 중에서 첫번째 요소 선택 예제 2) .fruits { font-size : 40px; } .fruits .red:nth-of-type(1) { color : red; } 오렌지 딸기 망고 사과 설명 red 라는 클래스를 가진 요소의 태그 이름은 li 태그 red라는 클래스를 먼저 검색 이후 타입을 li 반환 li 태그 중에 첫번째 요소 반환(오..
2019.12.11 -
CSS - 가상 요소 선택자(Pseudo-Elements Selectors)
가상 요소 선택자(Pseudo-Elements Selectors) '::’ 가 기호 BEFORE E 요소 내부의 앞에 내용(Content)을 삽입 content 속성(property) 필수 ul li::before { content : “숫자”; Font-weight : bold; } 1 => 숫자1 2 => 숫자2 3 => 숫자3 4 => 숫자4 5 => 숫자5 6 => 숫자6 AFTER E 요소 내부 뒤에 내용(Content)을 삽입 content 속성(property) 필수 ul li::after { content : “.0”; } 1 => 1.0 2 => 2.0 3 => 3.0 4 => 4.0 5 => 5.0 6 => 6.0 ※ 추가사항 이미지 삽입 가능 출처 : heropy.org
2019.12.11