본문 바로가기
728x90

프론트엔드111

[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.
[Javascript] Promise 와 Callback 의 차이 자바스크립트에서 비동기 처리를 위해 Promise와 Callback 함수가 자주 등장하는데, Promise의 사용을 Callback 사용보다 더 권장하는 이유는 코드가 훨씬 간결해져 가독성이 좋아지기 때문이다. 샘플 예제 ↓ 샘플 예제로 간단한 로그인을 구현하는 스크립트 예제를 만들어 보았다. 간단하게 아이디, 비밀번호를 물어보고, 아이디와 비밀번호가 맞으면, 회원등급을 조회 후 메일을 발송하는 예제이다. 서버 측 처리는 setTimeOut을 통해 딜레이를 설정하였다. [Javascript : Callback함수 사용] //사용자 로그인 예제 :by Callback class Login { //로그인 객체 logUser(id,pw,onSuccess,onError){ setTimeout(() => { //.. 2021. 2. 8.
[Html] 시멘틱 태그 semantic tag Html 에서 Semantic tag란 ? 태그의 이름 자체에 의미가 담겨있는 태그를 뜻한다. Header , Main, Footer 이라는 이름의 태그를 보면 어떤 용도의 태그인지 대충 상상이 된다. 사용 용도↓ 규모가 되는 홈페이지의 Html 소스를 보면, 시멘틱 태그만으로 해당 구조를 파악하기 위해서 사용한다. 시멘틱 태그 목록↓ 태그 이름 사용 용도 header Html 텍스트 상단 부를 의미 main Main 섹션 의미 footer Html 텍스트 하단 부를 의미 section 문서의 섹션을 구분 (서로 관계 있는 문서 분리) nav 내부 링크 리스트가 있는 경우 사용 article 하나의 컨텐츠를 구분짓기 위해 사용 (예 : 뉴스기사, 블로그 글, 포럼 글) aside 위 모든 섹션에 해당 되.. 2021. 2. 6.
728x90

티스토리툴바