-개념 하나의 문자열을 구분자를 이용하여 여러 개의 문자열로 나눈다. string.split(cut, count) 1.cut 원본 문자열을 어떤 기준으로 끊어야 할지 설정한다. 즉, 문자열을 나누는 기준 2.count 끊을 문자열의 개수 -사용방법 1. 문자열 한 개씩 나누기 1 2 3 4 let split_string = 'super Pil'; let split_array = split_string.split(''); console.log(split_array); // ["s", "u", "p", "e", "r", " ", "P", "i", "l"] 출력 let split_arry = split_string.split('') split(나누는 기준) 이기 때문에 '' 할 경우 문자열 하나하나를 나눠서 ..

-개념 배열의 모든 값들을 연결하여 문자열로 출력한다. array.join() -사용방법 1. join()으로 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join()); // Americano,Latte,Espresso,smoothie 출력 arry_join.join() . join()을 하게 되면 ', ' 문자열을 넣지 않아도 ', '를 넣어서 출력된다. 2. 배열 값 전부 연결해서 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join('')); //..

-개념 기존 배열의 값을 삭제, 추가, 변경 등을 할 수 있다. array.splice(start, deleteCount, add) 1.start 배열의 값을 삭제, 추가, 변경하고 싶은 시작점이다. 인덱스 번호로 선택한다. 2.deleteCount 배열의 값을 삭제하고 싶은 개수. 3.add 배열에 추가하고 싶은 값 -사용방법 1. 기존 배열에 바로 값 추가하기 1 2 3 4 let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie']; cafe.splice(0, 0, 'soldout'); console.log(cafe); //["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력 cafe.splice(0,..

-개념 문자열에서 찾고자 하는 문자열이 어디에 있는지 찾을 수 있다. 배열에서 찾고자 하는 배열값이 어디에 있는지 찾을 수 있다. **원하는 값이 있는곳의 인덱스 번호로 출력된다. -사용방법 1.문자열 1 2 3 4 let string_indexof = 'indexof'; console.log(string_indexof.indexOf('i')); //0 출력 string_indexof.indexOf('i') string_indexof변수 안에 i 문자열을 찾는다. i가 맨 앞쪽에 있기 때문에 0(인덱스 번호)을 출력한다. 1 2 3 4 let string_indexof = 'iddexof'; console.log(string_indexof.indexOf('d')); //1 출력 string_indexof..

개념 화면에서 움직임 또는 효과를 줄때 초당 60번 화면을 다시 그려서 끊김없이 부드럽게 나타내기 위함이다. requestAnimationFrame 사용해서 콘솔 반복 찍기 requestAnimationFrame(testing); 먼저 실행시키고 싶은 함수를 requestAnimationFrame()에 넣는다. 자기 자신을 호출 시키기 위해서이다. requestAnimationFrame는 재귀함수와 비슷하다. let counting = 0; 전역변수로 counting을 선언하고 값으로 0을 넣는다. 이후, testing함수에서 1씩 증가시킨다. 그렇게 되면 처음에는 0(counting) + 1(count++(1증가라는 뜻)) = 1(전역변수 counting에 저장) 두번째에는 1(1씩증가되어 저장된 전역..

-종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video -특징 1. 한 줄 전부 사용한다. block 요소1 block 요소2 block 요소3 #warp{ background: black; width: 500px; margin: 100px auto; } #warp h1:nth-child(1){ background: crimson; } #warp h1:nth-child(2){ back..

-종류 a, span, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, input, kbd, label, map, object, q, samp, small, script, select, strong, sub, sup, textarea -특징 1. 영역이 가로로 정렬된다. inlin_left: inlin_center: inlin_right: 텍스트가 block구조와 다르게 화면에서 가로로 나열된다. 줄 바꿈이 없다. 다만, 부모 요소인 warp의 영역에 비해 자식 요소인 span의 영역이 크면 줄 바꿈이 일어나서 warp영역 보다 넘는 span태그는 아래로 내려간다. 2. width, height값을 줄 수 없다. #warp span{ ba..

-개념 박스와 비슷한 느낌이다. 많은 양의 물건을 박스 한 곳에 담는다. 또한, 다양한 종류의 물건을 담을 수 있다. -변수의 종류 1. var 2. let 3. const (let, const는 ECMAscript6 (es6)에서 새로 생긴 변수의 종류) -변수 선언 1. 각각 선언 변수 a에는 숫자 1, 변수 b에는 숫자 2가 담긴다. var 없이 변수를 선언할 수 있지만 나중에 스코프(scope) 문제로 변수를 선언할 때 var을 꼭 붙여서 선언하는 게 좋다. 2. 한 번에 선언 ", "를 사용하여 var 없이 바로 선언 가능하다. -식별자(Identifier)와 리터럴(literal) 1. 식별자(Identifier) 개념 변수를 만들 때 개발자가 정의하는 이름을 식별자라고 한다. 즉, 박스끼리 ..

-Git의 메커니즘 -working directory 1. 개념 개인 컴퓨터에서 작업한 파일 또는 폴더를 말한다. 나중에 git에 저장시키고 싶은 파일 또는 폴더 이기도 하다. 2. 관련 명령어 2-1.git init 작업 폴더에 git폴더를 생성한다. -staging area(index) 1. 개념 저장소에 저장하기 전 staging area에 임시적으로 먼저 저장한다. 서브 저장소라고 할 수 있다. 진짜 저장소인 repository에 담기 애매하거나 저장 대기시키고 싶은 등등 repository에 저장시키고 싶지 않은 상황에 서브로 저장한다. 2. staging area가 필요한 이유 2-1. 일부분만 commit 할 때 2-2. 충돌을 해결할 때 2-3. 커밋 다시 할 때 "staging area가..

-최종 결과 -HTML click 0 input 타입을 text로 하고 class명으로 선택한다. 나중에 js에서 유사 배열로 가지고 오기 위해서다. SuM 합계 버튼이다. 0 합계한 값을 출력하는 태그로 사용한다. -javascript 1. html태그를 js로 가지고 오기 const sum_input = document.getElementsByClassName('sum'); const btn = document.getElementById('btn'); const display = document.getElementById('display'); const sum_input = document.getElementsByClassName('sum'); input 태그를 ClassName으로 받아와서 유사 배..

최종 결과 HTML 부모안에 input을 자식요소로 넣어준다. CSS #insert_list #drop_the_text input{ background: #343a40; background-image: url(list.png); background-position: 5px center; padding-left: 40px; border: 1px solid #2e3238; width: 100%; height: 30px; box-sizing: border-box; outline: none; border-radius: 3px; } 👉 background-image: url(list.png); 배경 이미지로 아이콘 이미지를 넣는다. 👉 background-repeat: no-repeat 이미지가 작아서 반복이 된..

-최종 결과 자바스크립트를 이용하여 input이 활성화되면 전체 영역(img_content)의 배경 이미지가 바뀌게 한다. HTML && CSS 코드 보러 가기 -HTML 1. value 값 추가 각각의 input에 value값을 넣는다. 자바스크립트에서 input의 value값으로 어떤 input을 클릭하는지 알게 하기 위해 -Javascript 1. HTML 태그 선택하기 var changeImgBtn = document.getElementsByTagName('input'); var outBackground = document.getElementById('img_content'); var backImg = ['url(eximg1.jpg)', 'url(eximg2.jpg)', 'url(eximg3.jp..

-최종 결과 -HTML 1. 전체 영역 및 버튼 구조 잡기 div로 이미지 슬라이드 전체 영역을 잡는다. input의 타입 중 radio를 선택하고 모든 input의 name값을 같게 하여 체크 시 한 개만 선택되게 한다. checked는 처음 체크될 태그를 설정할 수 있다. input의 id 값이랑 label의 for값이랑 같게 하여 label을 클릭해도 input도 활성화된다. 2. img영역 구조 잡기 js를 사용하지 않고 버튼 클릭 시 이미지가 바뀌게 하려면 img영역을 input 태그와 형제관계로 만들어야 한다. CSS에서 인접 선택자(형제 선택자)를 사용하기 위해서다. class값을 두 개로 설정하여 CSS에서 공통 스타일은 .select_img에 스타일을 넣는다. 3. 브라우저 확인 사진 4..