korin

Map Map은 키-값 쌍을 저장하며, 각 쌍의 삽입 순서도 기억하는 컬렉션이다. 배열일 순회하며 실행되는 콜백함수의 결과값들을 새로운 배열로 반환한다. Java의 HashMap과 같은 자료구조이다. key : value의 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value 값을 가져온다. Map.* Map.length 값이 0인 속성 Map.size Map의 키-값 개수 Map.clear() Map 초기화 Map.entries() Map의 모든 키와 값을 [key, value] 형태의 array로 만들어서 반환 Map.forEach() Map 모든 키와 값에 대해서 콜백 함수 사용 Map.get(key) key값에 맞는 value값 반환 Map.delete(key) key-value..

Event Handle Event : 사용자가 하는 행동 (ex. 마우스 이동, 클릭 키보드 입력..) Event Handle : 이벤트 발생 시, 원하는 동작을 할 수 있도록 선언 하는 것. Event Handler : 이벤트 발생 시, 실행 할 문장을 작성한 부분 자바 스크립트에서 이벤트 핸들러를 등록하는 방법 1. HTML 요소의 속성으로 등록 HTML의 input 이벤트 요소의 속성에는 여러가지가 있다. onclick 마우스 클릭 ondbclick 마우스 더블 클릭 onmousemove 마우스 포인터가 HTML 요소 위에서 움직일 때 onmouseout 마우스 포인터가 HTML 요소를 벗어날 때 onmouseover 마우스 퐁니터가 HTML 요소 위에 있을 때 onkeypress 키보드의 키를 누..

호이스팅 Hoisting Hoist는 밧줄이나 장비를 이용하여 끌어올리는다. 라는 뜻을 가진다. 어원 그대로 변수나 함수가 선언이 되면, 선언 된 위치와 상관없이 코드 최상단으로 끌어올리는 것을 말한다. 자바스크립트의 모든 선언에서 호이스팅이 일어난다. var는 선언과 함께 undefined로 초기화되어 저장되지만, let과 const는 초기화 되지 않은 상태로 올라가기 때문에 에러가 발생한다. addString("ABC","DEFG"); function addString(str1, str2){ return str1 + str2; } // 출력 값 : ABCDEFG 선언 되어 있지 않은 값을 참조할 때 addStirng 실행 하는 과정에 addString 함수가 선언되어 있지 않아서 오류가 발생해야 하지..

변수 변수(variable)는 값을 저장하기 위해 확보한 그 공간을 식별하기 위해 사용되는 이름 변수 생성 과정 1. 선언 단계 (Declaration) 변수를 변수 객체에 등록 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 (Initialization) 변수 객체에 들어간 변수를 위한 공간을 메모리에 확보 초기화 단계에서 변수는 undefined로 초기화 된다. 3. 할당 단계(Assignment) undefined로 초기화된 변수에 실제 값을 할당 var 키워드로 선언한 변수는 선언 단계, 초기화 단계가 동시에 이루어진다. let 키워드로 선언된 변수는 선언 단계, 초기화 단계가 분리되어 실행 let,const의 경우에 초기화는 실행 후, 변수 선언문에 도달했을 때 이루어진다. -> ..

JavaScript 객체기반의 스크립트언어이다. 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당한다. HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있다. 동적이며 타입을 명시할 필요가 없는 인터프리터 언어 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. HTML의 내용, 속성, 스타일을 변경 할 수 있다. 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다. AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공 Alert, Conform alert 알람창 띄우기 // 기본형 기존내용 change // id값 d1 요소를 찾아 Hello 출력을 한다 innerText 태그 안의 텍스트..

웹 사이트를 뜯어 보면서, 직접 Spotify Site를 구현 해봤다. footer, main, header 나누는 개념을 확실히 알게 되었고, 아직은 어렵지만 재미를 느끼게 되었다 개인적으로 아직 초반이지만 자바스크립트보다, CSS 구현이 더 어려운 것 같다. HTML Premium Support Download | Sign up Log in Listening is everything Millions of songs and podcasts. No credit card needed. GET SPOTIFY FREE COMPANY About Jobs For the Record COMMUNITIES For Artists Developers Advertising Investors Vendors USEFUL LI..

선택자(Selector) 선택을 해주는 요소 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있다, HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택 가능 Hello World 아이디 선택자 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. # 사용 Hello World> 클래스(class) 선택자 특정 집단(class) 의 여러 요소를 한 번에 선택할 때 사용한다. Hello World Hello> 그룹(group) 선택자 여러 선택자를 같이 사용할 때 사용한다. 여러 선택자를 쉼표(,)로 구분하여 연결한다. 전체 선택자 요소 내부의 모든 요소를 선택한다. 일치 선택자(Basic Combinator) A와B를 동시에 만족하는 요소 선택 #AB { ma..

Position HTML 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. Position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용된다. static(기본) : viewport의 순서대로 박스를 연결 relative : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재 박스 위치 지정 (상대위치) absolute : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재박스 위치를 지정 (절대위치) --> 상위태그 위치를 기준으로 지정(상위태그가 없다면 상단좌측 고정) fixed : 뷰포트(viewport)를 기준으로 위치를 설정 Relative 요소를 일반적인 문서 흐름에 따라 배치한다. 요소 자기 자신의 원래 위..

출처 : HTML Study | Advanced Web Ranking HTML Study Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The www.advancedwebranking.com 웹페이지에서 많이 사용되는 태그 사용 평균을 내는 사이트인데, 평균량 뿐만 아니라 여러 가지 정보들이 있어 참고하기가 매..

Flexbox - 설정하고 싶은 요소들이 들어있는 박스 태그에 display :flex; 를 선언한다. .flex { display: flex; } - flexbox는 기본축과 반대축으로 이루어져있다. - 기본적으로 기본축은 가로줄, 반대축은 세로줄이다 (속성을 이용해 바꿀 수 있다.) 기본 축 방향 설정 - flex-direction flex-direction : row (기본값) 왼쪽에서 오른쪽으로 정렬 flex-direction : row-reverse 오른쪽에서 왼쪽으로 정렬 flex-direction : column 위에서 아래로 정렬 flex-direction : column-reverse 아래에서 위로 정렬 줄 바꿈 설정 - flex-wrap flex-wrap : nowrap(기본값) 한 줄..