Web23 [JS] 자바스크립트 변수 정의 과정 자바스크립트 엔진 - 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램 - 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱 되고 실행 - 크롬 브라우저 경우 V8 엔진 사용 - node.js는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램 - node.js는 여러 프로그램으로 구성, 자바스크립트 코드를 읽는 프로그램으로 V8 사용 - 브라우저와 node.js 환경은 같은 자바스크립트 코드를 작성해도 다르게 동작 가능 자바스크립트 코드 실행 - 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트 생성 * 실행 컨텍스트는 두 단계를 통해 생성 생성 단계 - 자바 스크립트 엔진 : 변수 선언 읽기 실행 단계 - 자바 스크립트 엔진 : 변수 값 할당 렉시컬 환경 Lexical E.. 2022. 4. 22. [JS] 이벤트와 이벤트 핸들러 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 - 자바스크립트는 발생한 이벤트에 반응하여 특정 동작 수행 이벤트 타입 - 발생한 이벤트의 종류 - 폼, 키보드, 마우스, HTML DOM, Window 객체 등 이벤트 설명 click 마우스 클릭 시 dbclick 마우스 더블 클릭 시 mouseenter 마우스를 요소 위에 올리면 mouseover 마우스를 요소 위에 올리면 (자식 노드도 영향) mouseout 마우스가 요소 밖으로 벗어날 때 mousedown 마우스로 요소를 눌렀을 때 focus 요소에 포커스가 이동되었을 때 keypress 키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생 keydown 키를 누를 때 keyup 키를 눌렀다가 떼는 순간 lo.. 2022. 4. 14. [JS] Node 객체 노드(Node)란? HTML DOM에서 정보를 저장하는 계층적 단위이다. 노트 트리는 노드들의 집합으로 노드 간 관계를 나타낸다. 자바스크립트에선 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드 간 관계 - 노드 트리의 모든 노드는 계층적 관계 노드 종류 문서 노드 요소 노드 주석 노드 속성 노드 텍스트 노드 문서 노드(document node) - HTML 문서 전체를 나타내는 노드 요소 노드(element node) - 모든 HTML 요소는 요소 노드 - 속성 노드를 가질 수 있는 유일한 노드 주석 노드(comment node) - HTML 문서의 모든 주석은 주석 노드 속성 노드(attribute node) - 모든 HTML 요소의 속성은 속성 노드 - 요소 노드에.. 2022. 4. 14. [JS] 문서 객체 모델 DOM 개념과 자바스크립트 DOM이란? DOM은 문서 객체 모델(Document Object Model)로 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM의 종류 Core DOM HTML DOM XML DOM Core DOM 모든 문서 타입을 위한 DOM 모델 HTML DOM HTML 문서를 위한 DOM 모델 HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 통해 접근 가능 XML DOM 문서를 위한 DOM 모델 XML 문서에 접근하여 그 문서를 다루는 표.. 2022. 4. 14. [HTML&CSS] 반응형 웹 - 미디어쿼리 Media Query 미디어 쿼리란? PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문이다. 화면 크기마다 각각 다르게 CSS를 적용한다. 미디어 쿼리 지정 방법 HTML 파일 내 내 태그에 media 속성 지정 css 파일 내 @media 지정 css 파일 내 import 미디어쿼리 작성 1. HTML 파일 내 내 태그에 media 속성 지정 2. css 파일 내 media 작성 방법 @media (조건1) and (조건2) {} - 조건문는 min-,max- 옵션을 줄 수 있음 - 미디어 유형으로는 all (모든 장치), print, screen, speech 등이 있다 뷰포트 viewport : 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 - 브라우저에서 .. 2022. 4. 7. [CSS] CSS3 애니메이션 - Transform, Transition, Animation CSS3 Transform Transition Animation 1. Transform - 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용 rotate scale skew translate - rotate(angle): 입력한 각도만큼 회전, 음수 입력 가능 - scale(x, y): width를 x배, height를 y배만큼 확대 (축소 시 소수점 값 입력) - skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비틂 - translate(x, y): 선택한 요소의 위치 변경 prefix 접두사 - Transform은 CSS3의 최신 버전에서만 실행 가능하기 때문에 접두사의 사용으로 각 하위 버전 브라우저의 실행 가능 2. Transition - 변화하고자 하는 과정을 보여주고자 할 때.. 2022. 4. 7. 이전 1 2 3 4 다음
