본문 바로가기
728x90

전체 글156

[Javascript] 배열 Array API - includes() 자바스크립트 배열 Array API - includes() array.includes(검색요소); [개념 이해] array.includes(검색요소) - 배열이 해당 검색 요소를 포함하고 있는지 여부 Boolean 반환 샘플 예제 ↓ [Javascript] const animals = ['dog','cat','horse','bird']; const isInclude1 = animals.includes('cat'); const isInclude2 = animals.includes('computer'); console.log(isInclude1); console.log(isInclude2); [결과 출력] true false 2021. 2. 13.
[Javascript] 배열 Array API - shift(), unshift() 자바스크립트 배열 Array API - shift, unshift array.shift(); array.unshift(추가할 요소); [개념 이해] array.shift() : 배열의 첫번째 요소를 제거, 제거된 요소를 반환 array.unshift(추가할 요소) : 배열의 첫번째에 새로운 요소 추가, 새로운 길이 반환 샘플 예제 ↓ [javascript] const arr = [1,2,3,4]; //shift를 통한 배열의 첫번째 요소 삭제 let firstRemove = arr.shift(); console.log('-----shift()-----') console.log('삭제된 요소 : '+ firstRemove); console.log('shift 후 배열 : ' + arr); //unshift.. 2021. 2. 12.
[Javascript] 배열 Array API - push(), pop() 자바스크립트 배열 Array API - push(), pop() array.push(추가할 요소); array.pop(); [개념 이해] array.push(추가할 요소) : 배열의 끝에하나 이상이 요소를 추가 후 배열의 길이 반환 array.pop() : 배열의 마지막 요소를 제거하고, 해당 요소를 반환 샘플 예제 ↓ [javascript] //배열 선언 let arr = [1,2,3,4,5]; //push를 통해 배열의 요소 추가 arr.push(6,7,8); console.log('push 결과 : '+arr); //pop을 통해 배열의 마지막 요소 삭제 및 반환 let firstPop = arr.pop(); console.log('첫번째 pop : '+firstPop); console.log('a.. 2021. 2. 11.
[CSS] position - static, relative, absolute, fixed CSS position - Static , Relative, Absolute, Fixed Static - position 기본 속성 (block 태그는 위아래 방향으로 쌓이고, inline 태그는 좌우로 쌓인다.) Relative - position의 위치 이동이 가능한 상태로 변경 (위치 이동은 되어지나, 기존 자신의 위치는 공백으로 남아있음) Absolute - position : static 이 아닌 조상 태그를 기준으로 위치 선정. (부모 태그 모두 static 상태라면, body 기준) Fixed - 특정 위치에 고정 (스크롤바에 영향을 받지 않는다) 샘플 예제 CSS 추가 및 수정 Static .items__item.blue { position : static;//position을 static.. 2021. 2. 10.
[CSS] 부모의 속성을 따르는 inherit CSS 부모의 속성 값을 상속 받는 Inherit CSS에서 inherit이라는 속성이 있는데, inherit 속성은 단어 뜻 그대로 부모 태그의 해당 속성의 값을 그대로 상속을 받는다는 의미이다. 샘플 예제 ↓ [html] CSS Example : inherit [출력 결과] 출력 결과를 보면, #first-parent, #second-parent, #third-parent, #baby-tag 높이와 너비가 각기 다르다. 여기서, #baby-tag의 height 를 inherit으로 바꾸어보면 다음과 같은 결과가 나온다. [#baby-tag height를 60px -> inherit으로 수정] 사이즈는 부모의 속성값 상속이 가능한데, 그렇다면 컬러나 다른 속성 또한 상속이 가능한가? #baby-tag의.. 2021. 2. 10.
[Css] css의 로드 style, link, import CSS의 로드 style link import HTML 문서 작성시 각 태그의 디자인은 CSS를 Html 문서 내에 로드하여 입맛에 맞게 꾸밀수 있는데 이를 위해서 자주 쓰는 방법 3가지가 있다. 1. head 태그 내 style 추가 2. head 태그 내 link 추가 3. .Css 파일 내 import url 추가 샘플 예제 ↓ 1. Head 태그 내 Style 추가 [html : example.html] CSS 예제 : Style의 추가 # 제목 내용 조회수 1 제목 1 내용 1 20 2 제목 2 내용 2 33 3 제목 3 내용 3 13 2. head 태그 내 link 추가 가장 보편적으로 사용하는 방법으로, link 태그는 href라는 속성을 통해 css파일에 접근하는 역할을 하는데, 예제 1번.. 2021. 2. 10.
[Javascript] 배열 Array API - split() 자바스크립트 배열 API - array.split('구분문자'); [개념 이해] 문자열을 지정한 문자로 구분하여 여러개의 문자열 배열로 저장 샘플 예제 ↓ [Javascript] //문자열 '1,2,3,4,5' const str = '1,2,3,4,5'; //split(,) 구분자 ,로 나누어 배열로 반환 const arr = str.split(','); console.log(arr); [결과 출력] ['1','2','3','4','5'] 2021. 2. 10.
[CSS] 선택자 Selector - CSS Selectors (선택자) Css에서 각 노드에 효과를 주기 위해 노드를 선택해야 하는데, 노드의 선택은 아래와 같은 선택자를 통해 가능하다. [선택자 (Selectors)] Basic Selectors Type Selectors 엘리먼트 명 Class Selectors .클래스명 Id Selectors #아이디명 Attribute Selectors [속성명=속성값] Combinators Decendent Selectors 부모노드 자식노드 Child Selector 부모노드 > 자식노드 Adjacent Sibling Selector 형제노드 + 형제노드 General Sibling Selector 형제노드 ~ 형제노드 [개념 설명] 1. Type Selectors 엘리먼트 이름으로 대상을 선택.. 2021. 2. 9.
[Javascript] 배열 Array API - join() Javascript 배열 API - join() 자바스크립트에서 배열 -> 문자열 변환 1. array.toString(); -> 구분자 자동 , 추가 2. 배열이름.join('구분자'); 샘플 예제 ↓ [Javascript] const arr = [1,2,3,4,5]; const str1 = arr.toString(); const str2 = arr.join('/'); console.log('toString : ' + str1); console.log('join : ' + str2); [결과] toString : 1,2,3,4,5 join : 1/2/3/4/5 2021. 2. 9.
[Javascript] Promise - then 체이닝시 유의사항 자바스크립트에서 Promise 사용시 then()을 통하여 resolve 데이터를 전달받는다. 여러개의 Promise 체이닝시, then을 여러번 호출하여, resolve -> promise -> resolve 를 반복하는 경우가 자주 등장하는데, Producer측과 Client 측 코드를 나누어 아래 예제를 작성해보았다. [Javascript : Producer Code] //Promise 체이닝 function Promise1(){ return new Promise((resolve,reject)=>{ resolve('Hello'); }); } function Promise2(str){ return new Promise((resolve,reject)=>{ if(!str) reject(new Error(.. 2021. 2. 8.
728x90

티스토리툴바