이다닷

다른 함수의 실행이 끝났을 때 실행되는 함수 => CallBack 함수 CallBack 함수란? JavaScript에서 함수는 object이다. 그래서 함수가 다른 함수의 인자로 사용될 수 있고, 또 어떤 함수에 의해 리턴될 수도 있다. ===> 함수를 등록하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수이다. 예제1) 함수 Func를 호출했을 때, 밑에 있는 특정 callBack 함수가 실행된다. 예제2) introduce 함수를 실행하면, callback 자리를 새로운 함수 function(name)으로 지정해주면서 fullName에 저장된 이름이 callback(fullName) 함수의 인자로 들어가서 실행된다. 필요한 이유 동기 / 비동기 1. 동기 - 하나의 요청..

자바스크립트의 this는 4가지 종류의 문맥으로 구분할 수 있다. 함수 실행 메소드 실행 생성자 실행 간접 실행 1. 함수 실행 함수 실행과 메소드 실행의 차이점을 알아보겠다. - 5라인에서 실행하고 있는 것은 hello라는 함수를 실행하고 있는 것이다. - 6라인에서 실행하고 있는 것은 자바스크립트에서 제공하는 console 객체의 log메소드를 호출하고 있는 것이다. 함수 실행에서의 this 함수 실행에서 this 는 전역 객체를 가리킨다. 한번에 이해할 수 있는 예시로 코드를 하나 가져와봤다. 함수 문맥으로 sum이 실행되었고, this는 sum() 안에 존재하는 전역객체이므로 window를 가리킨다. 3라인에서 this가 활용되면서 sum 함수가 호출되면 자바스크립트가 자동으로 this에 전역 객..

JavaScript는 싱글쓰레드 언어이다. 싱글 쓰레드 언어란? -> 여러 개의 작업이 있더라도 한 번에 하나의 작업만 수행할 수 있다. 하지만 JavaScript를 사용하다보면 멀티쓰레드처럼 동시에 여러 작업을 수행할 수 있다. JavaScript의 메인쓰레드인 이벤트 루프가 싱글쓰레드이다. 하지만 이벤트 루프만 독립적으로 실행되는것이 아닌 웹 브라우저나 NodeJS 같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로써 멀티쓰레드처럼 사용이 가능하다. JavaScript의 동작과정 JavaScript 엔진 JavaScript 엔진은 코드를 이해하고 실행을 도와주는 역할을 한다. JavaScript 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있다. - memory Heap..

'의미론적인 HTML 태그 문서 작성'이라는 뜻을 가진 시멘틱 마크업은 => 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 일을 한다. 시멘틱 마크업이란? 시멘틱 마크업을 사용하는 이유 웹 접근성에 효율적 코드 가독성에 따른 유지 보수 용이 검색엔진 최적화에 유리 시멘틱 마크업의 종류 header : 소개 및 탐색에 도움을 주는 콘텐츠, 제목, 로고, 검색 폼 등의 요소가 포함된다. nav : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션이다. 메뉴, 목차, 색인 등에 사용된다. main : 문서 의 주요 콘텐츠를 나타낸다. article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분되는 요소에 해당된다. section : 문서나 애플리케이션 영역을 ..

display 속성이란 요소 크기를 어떻게 결정 할건가를 결정하는 속성이다. display 속성 display 속성값의 종류 none block inline inline-block DOCTYPE html> None Block Inline Inline-block body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: #000000; } .block_div { display: block; background-color: aqua; } .inline_div { display: inline; width: 500px; background-color: chartreuse; } .inline-bloc..

HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 속성이 position 속성이다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소를 배치할 수 있다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position: static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정할 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정한다. fixed - 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다. inherit - 부모 태그의 속성값을 상속받..

ECMAScript란? ESMAScript는 넷스케이프(현재는 파이어폭스) 웹페이지에 동적인 요소를 구현하기 위해서 발명되었다. 그 후 넷스케이프 뿐만 아니라 다른 웹 브라우저들까지 이를 탑재하기 시작했고, 다양한 웹 브라우저들에서 JavaScript가 공통되게 잘 작동되기 위해서는 표준 규격의 필요성이 커졌다. -> 이러한 이유로 ECMAScript standard라는 스크립트 표준을 만들었다 ECMAScript가 포함하는 항목이다. 언어 구문 오류 처리 방법 자료형 전역 객체 프로토타입 기반 상속 구조 내장 객체 및 함수 엄격 모드 ES6란? ES6(ECMAScript)는 2015년에 도입된 최신 버전의 JavaScript이다. ES6가 발명되면서 이전에 있던 문제들이 사라졌다. 호이스팅이 사라진 것..

HTML4와 HTML5의 차이점은 쉽게말하자면 상위버전과 하위버전으로 볼 수 있다. 대체적으로 문법적으로 다양한 요소들의 표현이 간결해졌다. 1. DOCTYPE HTML4에서는 유효성 검사를 위한 선언문이 굉장히 길었지만 HTML5에서는 훨씬 간결해진 것을 볼 수 있다. 2. Encoding HTML4에 비해서 HTML5에서는 인코딩 규칙에 대한 명세가 간단해졌다. 3. 시멘틱 태그 HTML4에 비해서 HTML5는 시멘틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. Element 설명 header 해당 섹션의 가장 윗부분에 위치하는 태그 main 문서의 주된 컨텐츠를 표시하는 태그 nav 네비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 태그 section 문서의 영역을 구성하는데 사용하는..

우선, Sass(SCSS)에 대해서 본격적으로 설명하기에 앞서, Sass(SCSS)가 왜 생겼는지를 살펴보자. 그러기 위해서는 CSS에 대해서 먼저 알아볼 필요가 있다. CSS란? CSS의 특징과 사용할 때의 단점에 대해서 먼저 나열해보겠다. 우선 CSS는 HTML에서는 지원할 수 없는 다양한 문자 크기나 글자체, 줄 간격의 지정이 가능할 뿐만 아니라 기존의 HTML 태그 기능을 확장하여 배경색상 등도 자유롭게 선택할 수 있다. 웹 문서는 HTML만으로 작성이 가능하지만, HTML만으로는 원하는 웹 형태를 띄울 수가 없다. -> 따라서 CSS는 웹문서, ASP나 기타 CGI 등의 다양한 웹 관련 문서에 삽입해서 사용할 수 있으며, 단순화된 웹문서에 스타일을 지정해줄 수 있는 확장기능이다. CSS는 복잡한..